/* Drawing invitations: the therapist's sequence and the client's quiet companion. */
.exercise-workspace { display:flex;flex-direction:column;height:100%;min-height:0;padding:23px 20px 24px;overflow:auto;scrollbar-width:thin;scrollbar-color:#bac6ad transparent;font-family:var(--sans);color:var(--ink) }
.exercise-workspace.has-exercise { padding:0;overflow:hidden }
.exercise-working-content { min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:20px;scrollbar-width:thin;scrollbar-color:#bac6ad transparent }
.exercise-workspace.has-exercise > .exercise-error,.exercise-workspace.has-exercise > .exercise-connection-note { margin:12px 16px;flex-shrink:0 }
.exercise-eyebrow { display:block;font:500 9px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.13em;color:#78886b }
.exercise-library-heading h3 { font:400 32px/1.1 var(--serif);letter-spacing:-.025em;margin:10px 0 }
.exercise-library-heading p { font-size:12px;line-height:1.75;color:var(--room-secondary) }
.exercise-library-search { display:flex;align-items:center;gap:10px;border:1px solid #dce2d2;border-radius:11px;background:#fafbf5;padding:11px 12px;margin:20px 0 15px;color:#859177 }
.exercise-library-search input { min-width:0;width:100%;border:0;background:transparent;outline:0;color:var(--ink);font:12px var(--sans) }
.exercise-library-search:focus-within { outline:2px solid #a8b996;outline-offset:2px }
.exercise-session-library { display:grid;gap:9px }
.exercise-session-library > button { display:flex;align-items:center;gap:12px;padding:15px 12px;border:1px solid #e0e4d7;border-radius:14px;background:#fdfef8;color:var(--ink);text-align:left;transition:background .15s,border-color .15s }
.exercise-session-library > button:hover { border-color:#b9c8a9;background:#f4f7ea }
.exercise-library-icon { display:grid;place-items:center;flex:0 0 34px;width:34px;height:38px;border-radius:11px;background:#eef2e3;color:#7a8c65;font-size:14px }
.exercise-session-library > button > span:nth-child(2) { flex:1;min-width:0 }
.exercise-session-library strong { display:block;font:400 23px/1.2 var(--serif);overflow-wrap:anywhere }
.exercise-session-library small { display:block;margin-top:6px;color:var(--room-secondary);font:10px/1.5 var(--sans) }
.exercise-session-library > button > .icon { font-size:10px;color:#88967c }
.exercise-library-footer { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:22px;color:#89937f;font-size:9px }
.exercise-library-quiet { display:grid;justify-items:center;gap:15px;text-align:center;padding:24px 12px }
.exercise-library-quiet > .icon { font-size:26px;color:#8a9b78 }
.exercise-library-quiet > strong { font:26px var(--serif) }
.exercise-library-quiet p { font-size:12px;line-height:1.8;color:var(--room-secondary) }
.exercise-text-button { display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:#718361;padding:6px 0;font:11px/1.5 var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer }
.exercise-working-heading { display:flex;align-items:center;justify-content:space-between;gap:12px }
.exercise-working-title { margin:10px 0 16px;font:400 33px/1.1 var(--serif);letter-spacing:-.025em;overflow-wrap:anywhere }
.exercise-working-title:focus-visible,[data-guide-heading]:focus-visible { outline:2px solid #afbe9c;outline-offset:5px;border-radius:3px }
.exercise-preparation { margin-bottom:20px;border:1px solid #e0e5d4;border-radius:12px;padding:12px 14px;background:#f6f8ef }
.exercise-preparation summary { display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;font-size:11px;color:#76896a }
.exercise-preparation summary::-webkit-details-marker { display:none }
.exercise-preparation summary > .icon:last-child { margin-left:auto;font-size:9px }
.exercise-preparation > p { white-space:pre-wrap;font-size:12px;line-height:1.8;margin-top:15px;overflow-wrap:anywhere }
.exercise-outline { margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #e3e7da }
.exercise-outline ol { list-style:none;margin:0;padding:0;display:grid;gap:4px }
.exercise-outline li > button { width:100%;display:flex;align-items:center;gap:10px;border:0;border-radius:9px;padding:10px;background:transparent;color:var(--ink);text-align:left }
.exercise-outline li > button[aria-current=step] { background:#e9efdc }
.exercise-outline li > button:hover { background:#f0f4e7 }
.exercise-outline li > button span { font-size:10px;color:#859575 }
.exercise-outline strong { flex:1;font:400 12px/1.5 var(--sans);overflow-wrap:anywhere }
.exercise-outline li .icon { font-size:10px;color:#958770 }
.exercise-step-audience { display:flex;align-items:center;gap:7px;font:10px/1.5 var(--sans);color:#7b8b6d }
.exercise-current-step h4 { margin:11px 0 14px;font:400 30px/1.15 var(--serif);letter-spacing:-.02em;overflow-wrap:anywhere }
.exercise-private-guidance { margin-top:20px;padding:15px;border-radius:12px;border:1px solid #e7e0d2;background:#f5f1e7 }
.exercise-private-guidance > span { display:flex;align-items:center;gap:6px;color:#928068;font-size:9px }
.exercise-private-guidance p { margin:9px 0 0;white-space:pre-wrap;font:12px/1.8 var(--sans);color:#746851;overflow-wrap:anywhere }
.exercise-step-navigation { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:23px 0 8px }
.exercise-step-navigation button { display:flex;align-items:center;gap:8px;min-height:38px;border:1px solid #dce3d0;border-radius:10px;background:#fbfcf5;padding:8px 12px;font:11px var(--sans);color:#667c56 }
.exercise-step-navigation > span { font:10px var(--sans);color:#849476;font-variant-numeric:tabular-nums }
.exercise-navigation-hint { margin:0;text-align:center;color:#8a977e;font-size:10px;line-height:1.5 }
.exercise-sharing-controls { flex-shrink:0;padding:16px 20px 12px;border-top:1px solid #e1e6d8;background:#f8faf2 }
.exercise-sharing-status { display:flex;align-items:center;gap:10px;margin:0 0 14px;color:#7b8b6b;font:11px/1.5 var(--sans) }
.exercise-sharing-status strong { display:block;font-size:11px;font-weight:500;color:#5e7550 }
.exercise-sharing-status span { display:block;margin-top:4px;color:#8a977e;font-size:10px;overflow-wrap:anywhere }
.exercise-primary,.exercise-secondary { display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:43px;padding:10px 15px;border:1px solid #526c43;border-radius:12px;background:#526c43;color:#fff;font:12px/1.5 var(--sans) }
.exercise-primary:hover { background:#465e38 }
.exercise-primary:disabled { background:#eaf0e0;border-color:#dce5cf;color:#839474;opacity:1 }
.exercise-secondary { background:#f1f5e8;color:#5f7751;border-color:#d9e3cd }
.exercise-stop-sharing { display:flex;justify-content:center;width:100%;margin-top:7px }
.exercise-soft-note { margin:10px 0 14px;font:11px/1.75 var(--sans);color:var(--room-secondary) }
.exercise-error { margin:0 0 14px;padding:12px;border-radius:10px;background:#faf0e9;color:#997359;font:11px/1.6 var(--sans) }
.exercise-error button { margin-left:6px;padding:0;border:0;background:transparent;color:inherit;text-decoration:underline }
.session-exercises[data-exercise-role=client] { position:absolute;inset:0;pointer-events:none }
.session-exercises[data-exercise-role=client] > * { pointer-events:auto }
.client-drawing-guide { position:fixed;z-index:12;top:var(--exercise-top,68px);bottom:var(--exercise-bottom,72px);right:var(--room-gutter);display:flex;flex-direction:column;width:var(--chat-width);border:1px solid #dde4cf;border-radius:var(--room-radius);background:#fcfdf5;box-shadow:0 2px 8px #34483d05;overflow:hidden;font-family:var(--sans);color:var(--ink);animation:drawing-guide-arrive .2s ease-out }
.call-view[data-role=client]:has(.client-drawing-guide:not([hidden])) .call-body { padding-right:calc(var(--chat-width) + var(--room-gutter)) }
.client-drawing-guide > header { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;padding:19px 20px 8px 25px }
.client-drawing-guide .exercise-eyebrow { color:#7b8f66;font-size:9px }
.client-drawing-guide .chat-icon-button { color:#8a987b }
.drawing-guide-content { min-height:0;flex:1;overflow:auto;padding:8px 27px 24px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c4cfb2 transparent }
.client-drawing-guide > footer { padding:16px 24px 18px;flex-shrink:0;border-top:1px solid #e3e9d7;background:#f7f9ef }
.client-drawing-guide > footer > button { display:flex;justify-content:center;align-items:center;gap:8px;width:100%;min-height:40px;border:1px solid #dae3ca;border-radius:12px;background:#fffef8;color:#6c8159;font:11px var(--sans) }
.client-drawing-guide > footer > p { margin:9px 0 0;text-align:center;font-size:9px;color:#91a07e }
.drawing-guide-trigger { position:absolute;z-index:8;top:16px;left:calc(var(--room-gutter) + 16px);display:flex;align-items:center;gap:12px;max-width:calc(100% - 130px);padding:12px 15px;border:1px solid #e5eadbf0;border-radius:15px;background:#fafcf2f5;box-shadow:0 3px 20px #23342615;color:#61764f;font-family:var(--sans);text-align:left;backdrop-filter:blur(12px) }
.drawing-guide-symbol { display:grid;place-items:center;width:30px;height:34px;flex-shrink:0;border-radius:10px;background:#eaf0de;color:#849874;font-size:14px }
.drawing-guide-trigger > span:nth-child(2) { min-width:0 }
.drawing-guide-trigger small { display:block;margin-bottom:3px;color:#8e9d7f;font-size:9px }
.drawing-guide-trigger strong { display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 21px/1.1 var(--serif) }
.drawing-guide-trigger > .icon { font-size:10px }
.drawing-reference-dialog { width:min(92vw,900px);max-height:92dvh;padding:20px;border:1px solid #dce4ce;border-radius:22px;background:#fcfdf6;color:var(--ink) }
.drawing-reference-dialog > div { display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:14px;font:26px var(--serif) }
.drawing-reference-dialog img { display:block;width:100%;max-height:70dvh;object-fit:contain;border-radius:12px }
.drawing-reference-dialog p { font:12px/1.8 var(--sans);white-space:pre-wrap;margin:15px 0 0;color:var(--muted) }
.drawing-reference-dialog::backdrop { background:#21332470;backdrop-filter:blur(6px) }
html[data-conversation-connection=reconnecting] .exercise-sharing-controls,html[data-conversation-connection=unavailable] .exercise-sharing-controls { pointer-events:none;opacity:.6 }
.exercise-outline { max-height:200px;overflow:auto;scrollbar-width:thin }
.exercise-outline li > button > span:first-child { display:grid;place-items:center;flex:0 0 23px;height:23px;border:1px solid #e1e6d6;border-radius:7px;font-variant-numeric:tabular-nums }
.exercise-outline li > button[aria-current=step] > span:first-child { background:#6f8757;border-color:#6f8757;color:#fff }
.exercise-outline li > button:focus-visible,.exercise-reflection-choices button:focus-visible { outline:2px solid #8ba173;outline-offset:-2px }
.exercise-current-step { padding:5px 0 0 }
.exercise-reflection-choices { margin:22px 0 0;padding-top:19px;border-top:1px solid #e4e6d9 }
.exercise-reflection-choices > div { display:flex;justify-content:space-between;align-items:center;gap:10px }
.exercise-reflection-choices > div strong { font:500 12px var(--sans);color:#667751 }
.exercise-reflection-choices > div span { font:10px var(--sans);color:#879474;font-variant-numeric:tabular-nums }
.exercise-reflection-choices > p { margin:8px 0 12px;color:#829070;font:11px/1.6 var(--sans) }
.exercise-reflection-choices ol { display:grid;gap:6px;padding:0;margin:0;list-style:none }
.exercise-reflection-choices button { display:flex;align-items:baseline;gap:9px;width:100%;padding:11px 12px;border:1px solid #e4e5d9;border-radius:10px;background:#fdfdf7;color:#6c7b5b;text-align:left }
.exercise-reflection-choices button[aria-pressed=true] { border-color:#b9c6a6;background:#f0f4e5 }
.exercise-reflection-choices button > span { flex:0 0 16px;font:10px var(--sans);color:#8f9c7b }
.exercise-reflection-choices button > strong { flex:1;min-width:0;font:400 12px/1.65 var(--sans);overflow-wrap:anywhere }
.exercise-reflection-choices button > .icon { font-size:11px;flex-shrink:0;color:#7b9065 }
.exercise-sharing-status > div { min-width:0 }
.exercise-sharing-status p { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:9px 0 0;color:#6f7f5c;font:italic 17px/1.4 var(--serif);overflow-wrap:anywhere }
@keyframes drawing-guide-arrive { from { opacity:0;transform:translateX(8px) } to { opacity:1;transform:none } }
@media(max-width:820px) { .call-view[data-role=client]:has(.client-drawing-guide:not([hidden])) .call-body { padding-right:0 } .client-drawing-guide { width:min(360px,calc(100% - var(--room-gutter)*2));box-shadow:0 8px 35px #263b2028 } }
@media(max-width:620px) { .client-drawing-guide { top:auto;max-height:calc(100dvh - var(--exercise-top,96px) - var(--exercise-bottom,76px) - 8px);height:min(620px,76dvh) } .client-drawing-guide > header { padding-top:12px } .drawing-guide-content { padding-inline:23px } .drawing-guide-trigger { top:10px;left:18px;gap:9px;padding:9px 12px;max-width:calc(100% - 110px) } .drawing-guide-trigger strong { font-size:19px } .client-drawing-guide > footer { padding:12px 20px } }
@media(prefers-reduced-motion:reduce) { .client-drawing-guide { animation:none } .exercise-session-library > button { transition:none } }