/* Private, temporary conversation. Hidden drawers leave the full video stage available. */
.session-conversation { flex:0 0 auto;min-width:0 }
.conversation-controls { display:flex;align-items:center;gap:6px }
.conversation-controls .tool-button { position:relative }
.chat-unread { position:absolute;top:-4px;right:-3px;display:grid!important;place-items:center;min-width:18px;height:18px;padding:0 4px;border:2px solid var(--paper);border-radius:10px;background:#587451;color:white;font-size:.56rem;font-weight:600 }
.request-dot { position:absolute;top:7px;right:7px;display:block!important;width:6px;height:6px;border-radius:50%;background:#7f9b72 }

.conversation-panel {
    position:fixed;z-index:12;top:var(--conversation-top,60px);bottom:var(--conversation-bottom,68px);right:0;
    display:flex;flex-direction:column;width:clamp(310px,26vw,380px);min-height:0;
    border-left:1px solid var(--line);background:#fcfcf7;color:var(--ink);box-shadow:-8px 0 25px #2536270b
}
.chat-heading { display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 22px 14px }
.chat-heading h2 { margin:0;font-family:var(--serif);font-weight:400;font-size:1.9rem;line-height:1.1 }
.chat-heading > div > span { display:block;margin-top:6px;color:var(--muted);font-size:.7rem }
/* Keep every size variant square, including its space in a flex row. */
.chat-icon-button { display:inline-grid;place-items:center;flex:0 0 var(--chat-icon-size,32px);width:var(--chat-icon-size,32px);height:var(--chat-icon-size,32px);aspect-ratio:1;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted) }
.chat-icon-button:hover { background:#eaf0e4;color:var(--ink) }
.chat-icon-button .icon { width:16px;height:16px;font-size:16px }
.chat-privacy { display:flex;align-items:center;justify-content:space-between;padding:0 20px 10px;border-bottom:1px solid var(--line);color:#6d8263;font-size:.69rem }
.chat-privacy > span { display:flex;align-items:center;gap:6px }
.chat-privacy .icon { width:12px;height:12px;font-size:12px }
.chat-privacy .chat-icon-button .icon { width:16px;height:16px;font-size:16px }
.chat-messages { flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:20px;display:flex;flex-direction:column;gap:16px }
.chat-empty { display:grid;justify-items:center;align-content:center;flex:1;gap:12px;min-height:170px;text-align:center;color:var(--muted) }
.chat-empty-emblem { color:#91a485;font-size:26px }
.chat-empty strong { font-family:var(--serif);font-size:1.65rem;font-weight:400;color:#61745a }
.chat-empty p { max-width:230px;font-size:.8rem;line-height:1.6 }
.chat-message { flex:0 0 auto;max-width:92%;align-self:flex-start }
.chat-message.from-you { align-self:flex-end }
.chat-message-meta { display:flex;align-items:center;gap:8px;margin:5px 4px 0;font-size:.62rem;color:var(--muted) }
.chat-message-meta strong { font-weight:500 }
.chat-message.from-you .chat-message-meta { justify-content:flex-end }
.chat-message > p { padding:11px 14px;border:1px solid #e1e7dc;border-radius:15px 15px 15px 4px;background:#fff;color:var(--ink);font-size:.85rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere }
.chat-message.from-you > p { border-color:#d9e3d1;border-radius:15px 15px 4px 15px;background:#eaf0e4 }
.chat-image-preview { display:block;overflow:hidden;width:100%;max-width:270px;padding:0;border:1px solid #dde5d6;border-radius:14px;background:#eef2e9;cursor:zoom-in }
.chat-image-preview img { display:block;width:100%;max-height:260px;object-fit:contain }
.chat-new-messages { align-self:center;margin:0 0 8px;padding:6px 12px;border:1px solid #d7e1d0;border-radius:20px;background:#eef4e8;color:#4e6948;font-size:.7rem }
.chat-composer-area { flex:0 0 auto;padding:12px 16px 14px;border-top:1px solid var(--line);background:#f8faf3 }
.chat-composer { padding:10px;border:1px solid #dbe3d4;border-radius:15px;background:#fff }
.chat-composer:focus-within { border-color:#9cb28e;box-shadow:0 0 0 2px #a2bc8f17 }
.chat-composer textarea { display:block;width:100%;min-height:49px;max-height:130px;resize:vertical;padding:2px 3px;border:0;background:transparent;outline:none;box-shadow:none;color:var(--ink);font-size:.83rem;line-height:1.45 }
.chat-compose-actions { display:flex;align-items:center;gap:7px;margin-top:6px }
.chat-compose-hint { flex:1;color:#8a9682;font-size:.6rem }
.chat-attachment { position:relative;overflow:hidden;cursor:pointer }
.chat-attachment input { position:absolute;inset:0;width:100%;opacity:0;cursor:pointer }
.chat-attachment:focus-within { outline:2px solid var(--green);outline-offset:2px }
.chat-send { display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#53704d;color:#fff }
.chat-send:disabled { opacity:.45;cursor:default }
.chat-send .icon { font-size:14px;width:14px;height:14px }
.chat-footnote { margin-top:9px;color:#89947f;font-size:.6rem;line-height:1.3;text-align:center }
.chat-error,
.chat-upload-status { margin:0 0 8px;font-size:.74rem;line-height:1.5;color:#a16558 }
.chat-upload-status { color:var(--muted) }
.chat-info-dialog { width:min(92vw,470px);padding:30px }
.chat-info-dialog h2 { margin-top:17px;font-size:2.2rem }
.chat-info-dialog p { margin-top:16px;color:var(--muted);font-size:.88rem;line-height:1.7 }
.chat-info-dialog > .button { width:100%;margin-top:24px }
.chat-image-dialog { width:min(94vw,960px);max-height:94dvh;overflow:auto;padding:16px }
.chat-image-dialog .dialog-topline { margin-bottom:12px;font-size:.72rem;color:var(--muted) }
.chat-image-dialog > img { display:block;width:100%;max-height:80dvh;object-fit:contain }
.conversation-notification,
.nonverbal-confirmation { position:fixed;z-index:14;bottom:calc(var(--conversation-bottom,68px) + 12px);right:16px;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:12px 15px;border:1px solid #dce5d3;border-radius:15px;background:#fbfcf6f5;color:#435940;box-shadow:0 5px 25px #21332514;backdrop-filter:blur(12px);font-size:.76rem }
.conversation-notification > span { overflow-wrap:anywhere }
.conversation-notification > button,
.nonverbal-confirmation button { flex-shrink:0;padding:5px 0;border:0;background:transparent;color:#587651;font-size:.7rem;font-weight:500 }
.conversation-notification .notice-dismiss { color:var(--muted);padding:0 }
.conversation-notification .notice-dismiss .icon { width:14px;height:14px;font-size:14px }

.nonverbal-panel { position:fixed;z-index:15;left:16px;bottom:calc(var(--conversation-bottom,68px) + 12px);width:min(350px,calc(100vw - 32px));overflow:hidden;border:1px solid #dce4d3;border-radius:22px;background:#fdfef9;color:var(--ink);box-shadow:0 12px 50px #233a2526 }
.nonverbal-panel .chat-heading { padding:20px 20px 14px }
.nonverbal-panel .chat-heading h2 { font-size:1.9rem }
.nonverbal-panel > .conversation-reconnect,
.nonverbal-panel > .chat-upload-status { margin-inline:20px }
.nonverbal-choices { display:grid;gap:4px;padding:0 12px 8px }
.nonverbal-choices > button { display:flex;align-items:center;gap:12px;min-height:43px;padding:10px 12px;border:1px solid transparent;border-radius:11px;background:transparent;color:#495f43;text-align:left;font-size:.84rem }
.nonverbal-choices > button .icon { width:19px;height:19px;font-size:16px;color:#829675 }
.nonverbal-choices > button:hover { background:#f0f5e9 }
.nonverbal-choices > button[aria-pressed="true"] { border-color:#cdddc1;background:#eaf2e1 }
.nonverbal-privacy { display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px 16px;color:#8a9681;font-size:.65rem }
.nonverbal-privacy .icon { width:11px;height:11px;font-size:11px }
.nonverbal-confirmation { left:16px;right:auto;font-size:.76rem }
.nonverbal-confirmation small { display:block;margin-top:3px;color:#819175;font-size:.65rem }
.therapist-request { position:fixed;z-index:13;top:calc(var(--conversation-top,60px) + 14px);left:14px;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 28px);padding:13px 16px;border:1px solid #cedec2;border-radius:16px;background:#f4faed;color:#42583a;box-shadow:0 5px 25px #21332514 }
.therapist-request > div > span { display:block;font-size:.64rem;color:#7b8c70 }
.therapist-request strong { display:block;margin-top:3px;font-size:.89rem;font-weight:500 }
.request-emblem { display:grid;place-items:center;width:32px;height:36px;flex-shrink:0;border-radius:10px;background:#e5eedb;color:#79976c }
.therapist-request > button { display:flex;align-items:center;gap:5px;flex-shrink:0;margin-left:7px;padding:7px 9px;border:1px solid #cfddc3;border-radius:9px;background:#fff;color:#55744b;font-size:.68rem }
.therapist-request > button .icon { width:12px;height:12px;font-size:12px }
.conversation-reconnect { display:none;align-items:center;gap:10px;margin-bottom:10px;color:var(--muted);font-size:.73rem;line-height:1.5 }
.conversation-reconnect > button { flex-shrink:0;padding:0;border:0;background:transparent;color:var(--green);text-decoration:underline }
.conversation-unavailable-text { display:none }
html[data-conversation-connection="reconnecting"] .conversation-reconnect,
html[data-conversation-connection="unavailable"] .conversation-reconnect { display:flex }
html[data-conversation-connection="unavailable"] .conversation-unavailable-text { display:inline }
html[data-conversation-connection="unavailable"] .conversation-reconnecting-text { display:none }
html[data-conversation-connection="reconnecting"] .chat-composer,
html[data-conversation-connection="unavailable"] .chat-composer,
html[data-conversation-connection="reconnecting"] .nonverbal-choices,
html[data-conversation-connection="unavailable"] .nonverbal-choices { pointer-events:none;opacity:.6 }

@media(max-width:820px) {
    .call-view[data-role]:has(.conversation-panel:not([hidden])) .call-body { padding-left:0;padding-right:0 }
    .conversation-panel { width:min(360px,100%);box-shadow:0 5px 35px #21332528 }
}
@media(max-width:620px) {
    .conversation-controls { gap:2px }
    .chat-heading { padding-top:16px }
    .conversation-notification { font-size:.71rem;padding:11px 12px;gap:8px }
    .session-conversation:has(.nonverbal-confirmation) .conversation-notification { bottom:calc(var(--conversation-bottom,68px) + 78px) }
    .nonverbal-panel { max-height:calc(100dvh - var(--conversation-top,60px) - var(--conversation-bottom,68px) - 20px);overflow:auto }
    .nonverbal-choices > button { min-height:40px;font-size:.8rem }
    .therapist-request { gap:9px;padding:10px 12px }
    .therapist-request > button { font-size:.62rem;margin-left:0 }
}

/* Acknowledgement is a visible receipt; it never clears the client's need. */
.nonverbal-receipt { display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px 12px;margin:0 18px 14px;padding:15px;border:1px solid #e1e5d7;border-radius:16px;background:#f2f4eb;animation:request-receipt-arrive .4s ease-out }
.nonverbal-receipt.is-acknowledged { background:#eaf1df;border-color:#d4e0c5 }
.nonverbal-receipt-mark { display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#e6ecdd;color:#7b906a }
.nonverbal-receipt-mark .icon { width:16px;height:16px;font-size:16px }
.is-acknowledged .nonverbal-receipt-mark { background:#f9fcf3;color:#688252;box-shadow:0 0 0 4px #dce7cd80;animation:request-receipt-mark .6s ease-out }
.nonverbal-receipt > div > span { display:block;margin:0 0 6px;color:#7c8e6b;font:10px/1.5 var(--sans) }
.nonverbal-receipt strong { display:block;font:400 23px/1.12 var(--serif);color:#506842 }
.nonverbal-receipt p { margin:8px 0 0;color:#7b896e;font:10px/1.7 var(--sans) }
.nonverbal-receipt > button { grid-column:2;justify-self:start;padding:4px 0;border:0;background:transparent;color:#6b7e5e;font:10px var(--sans);text-decoration:underline;text-underline-offset:3px;min-height:28px }
.nonverbal-choices > button .request-choice-seen { margin-left:auto;color:#688552;font-size:11px }
.nonverbal-panel { max-height:calc(100dvh - var(--conversation-top,60px) - var(--conversation-bottom,68px) - 20px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin }
.nonverbal-confirmation.is-acknowledged { border-color:#d1dfc1;background:#f2f7eaf5 }
.therapist-request.is-acknowledged { background:#f5f7f0;border-color:#dbe3d0;box-shadow:0 3px 16px #2133250c }
.therapist-request small { display:block;margin-top:6px;color:#86947a;font:10px/1.5 var(--sans) }
.therapist-request.is-acknowledged .request-emblem { border-radius:50%;background:#e5eddc;animation:request-receipt-mark .6s ease-out }
.therapist-request.is-cleared { background:#f8f9f3;border-color:#e0e5d6;box-shadow:0 3px 16px #2133250a }
.therapist-request.is-cleared strong { color:#839077;font-weight:400 }
@keyframes request-receipt-arrive { from { opacity:.55;transform:translateY(3px) } to { opacity:1;transform:none } }
@keyframes request-receipt-mark { from { transform:scale(.88);box-shadow:0 0 0 0 #dce7cd80 } to { transform:scale(1);box-shadow:0 0 0 4px #dce7cd00 } }
@media(prefers-reduced-motion:reduce) { .nonverbal-receipt,.is-acknowledged .nonverbal-receipt-mark,.therapist-request.is-acknowledged .request-emblem { animation:none } }

/* Stack notices so a photograph never silently replaces a message notification. */
.session-notices { position:fixed;z-index:17;right:16px;bottom:calc(var(--conversation-bottom,68px) + 12px);display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:calc(100vw - 32px);pointer-events:none }
.session-notices > * { pointer-events:auto }
.call-view[data-role] .session-notices .conversation-notification { position:static;max-width:100% }
.call-view[data-role="therapist"] .session-notices { left:24px;right:auto;bottom:24px;align-items:flex-start }
.snapshot-notification { display:flex;align-items:flex-start;gap:12px;width:330px;max-width:100%;padding:16px;border:1px solid #dce5d3;border-radius:18px;background:#fbfcf6f5;color:#435940;box-shadow:0 5px 25px #21332514;backdrop-filter:blur(12px);animation:request-receipt-arrive .35s ease-out }
.snapshot-notification-mark { display:grid;place-items:center;width:35px;height:35px;flex-shrink:0;border-radius:11px;background:#e8edde;color:#7c8f6b }
.snapshot-notification-mark .icon { width:15px;height:15px;font-size:15px }
.snapshot-notification > div { flex:1;min-width:0 }
.snapshot-notification strong { font:400 24px/1.1 var(--serif) }
.snapshot-notification p { margin:7px 0;font:11px/1.7 var(--sans);color:#748468 }
.snapshot-notification small { display:block;font:9px/1.6 var(--sans);color:#8b987f }
.snapshot-notification > button { --chat-icon-size:28px;margin:-6px -6px 0 0 }
@media(max-width:620px) {
    .session-conversation:has(.nonverbal-confirmation) .session-notices { bottom:calc(var(--conversation-bottom,68px) + 88px) }
    .session-conversation:has(.nonverbal-panel:not([hidden])) .session-notices { top:calc(var(--conversation-top,68px) + 8px);bottom:auto }
}
@media(prefers-reduced-motion:reduce) { .snapshot-notification { animation:none } }
/* The receipt stays in sight while the client explores the other choices. */
.nonverbal-receipt { position:sticky;top:0;z-index:1 }