/* The client room: one quiet frame, a generous camera stage, and a small set of tools. */
.call-view[data-role="client"] { grid-template-rows: auto minmax(0, 1fr) auto; }

/* Brand, the person beside you, and view options each have a clear place. */
.call-view[data-role="client"] .call-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px 24px;
    min-height: 68px;
    padding: max(10px, env(safe-area-inset-top)) 22px 10px;
    border: 0;
    background: var(--paper);
}
.call-view[data-role="client"] .client-call-header { grid-column: 1; grid-row: 1; gap: 11px; }
.call-view[data-role="client"] .call-context-symbol {
    flex: 0 0 30px;
    width: 30px;
    height: 38px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.call-view[data-role="client"] .call-context-symbol .brand-mark { width: 27px; height: 34px; }
.call-view[data-role="client"] .call-header-label {
    font: 500 12px/1.25 var(--sans);
    letter-spacing: -.025em;
    text-transform: none;
    color: var(--green);
}
.call-view[data-role="client"] .call-topbar h1 {
    max-width: 100%;
    margin-top: 2px;
    font-size: 25px;
    letter-spacing: -.025em;
    line-height: 1.08;
}
.call-view[data-role="client"] .client-call-header > div { min-width: 0; }
.call-view[data-role="client"] .client-call-header h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-view[data-role="client"] .therapist-profile { grid-column: 2; grid-row: 1; gap: 10px; margin: 0; }
.call-view[data-role="client"] .therapist-profile strong { max-width: 180px; font-size: 14px; line-height: 1.4; }
.call-view[data-role="client"] .therapist-profile > div > span { font-size: 11px; color: var(--room-secondary); }
.call-view[data-role="client"] .client-call-options { --call-option-height: 40px; grid-column: 3; grid-row: 1; justify-self: end; gap: 10px; }
.call-view[data-role="client"] .client-call-options :is(.privacy-button, .camera-layout-button) {
    height: var(--call-option-height); min-height: var(--call-option-height);
    padding-block: 8px; border-radius: 12px;
}
@media (max-width: 820px), (pointer: coarse) {
    .call-view[data-role="client"] .client-call-options { --call-option-height: 44px; }
}
.call-view[data-role="client"] .self-view-button { white-space: nowrap; }
.room-app.hide-self-view #preview-video { visibility: hidden; }
.self-view-save-notice {
    position: fixed; z-index: 20; right: 20px; bottom: 24px;
    display: flex; align-items: center; gap: 14px; width: min(410px, calc(100% - 40px));
    padding: 14px 16px; border: 1px solid #dddacb; border-radius: 16px;
    background: #fffdf5; color: #5e614f; box-shadow: 0 5px 24px #253b241a;
    font: 400 12px/1.5 var(--sans);
}
.in-call .self-view-save-notice { bottom: 88px; }
.self-view-save-notice button { flex: 0 0 auto; min-height: 44px; border: 0; background: transparent; color: var(--green); font: 500 12px/1.5 var(--sans); text-decoration: underline; cursor: pointer; }
.call-view[data-role="client"] .call-badges { grid-column: 1 / -1; justify-content: center; padding-bottom: 2px; }

/* The video and conversation share the same edges and corner treatment. */
.call-view[data-role="client"] .call-body { display: block; min-height: 0; padding: 0; }
.call-view[data-role="client"]:has(.conversation-panel:not([hidden])) .call-body { padding-right: calc(var(--chat-width) + var(--room-gutter)); }
.call-view[data-role="client"] .video-area { height: 100%; padding: 0 var(--room-gutter); background: var(--paper); }
/* Small, legible controls. A paused device is an ordinary choice. */
.call-view[data-role="client"] .call-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 72px;
    padding: 10px 20px max(10px, env(safe-area-inset-bottom));
    background: var(--paper);
}
.call-view[data-role="client"] .session-conversation { grid-column: 1; grid-row: 1; justify-self: start; }
.call-view[data-role="client"] .conversation-controls { gap: 6px; }
.call-view[data-role="client"] .toolbar-media {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--room-line);
    border-radius: 17px;
    background: #fffefaaa;
    box-shadow: 0 2px 4px #2f493606;
}
.call-view[data-role="client"] .toolbar-end { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
.call-view[data-role="client"] .art-camera-guidance { grid-column: 1; grid-row: 1; font-size: 12px; }
.call-view[data-role="client"] .toolbar-media .tool-button { padding-inline: 12px; }
.call-view[data-role="client"] #copy-art-button { margin-left: 3px; padding-left: 15px; border-left: 1px solid var(--room-line); border-radius: 0 12px 12px 0; }
.call-view[data-role="client"] .tool-leave { padding-inline: 15px; border-color: #e9dcd4; background: #f5eae3; color: #895b48; }
.call-view[data-role="client"] .tool-leave .icon { font-size: 16px; }
.call-view[data-role="client"] .tool-leave:hover { border-color: #dfc7ba; background: #efdfd5; }
.call-view[data-role="client"] .chat-unread { border-color: var(--paper); }

/* Conversation feels like part of the room, with messages gathered near the composer. */
.call-view[data-role="client"] .conversation-panel {
    top: var(--conversation-top, 68px);
    right: var(--room-gutter);
    bottom: var(--conversation-bottom, 72px);
    width: var(--chat-width);
    overflow: hidden;
    border: 1px solid var(--room-line);
    border-radius: var(--room-radius);
    background: var(--surface);
    box-shadow: 0 2px 8px #34483d05;
    animation: conversation-arrive 180ms ease-out;
}
.call-view[data-role="client"] .nonverbal-panel { left: 20px; border-color: var(--room-line); background: var(--surface); box-shadow: 0 12px 50px #263b2024; }
.call-view[data-role="client"] .nonverbal-panel .chat-heading h2 { font: 400 29px/1.15 var(--serif); }
.call-view[data-role="client"] .nonverbal-panel .chat-heading > div > span { font-size: 12px; }
.call-view[data-role="client"] .nonverbal-choices > button { min-height: 44px; font-size: 13px; }
.call-view[data-role="client"] .nonverbal-choices > button[aria-pressed="true"] { border-color: #d3ddc6; background: #eaf0df; }

@keyframes conversation-arrive { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 1180px) {
    .call-view[data-role="client"] .self-view-button > .self-view-label { display: none; }
    .call-view[data-role="client"] .call-topbar { gap: 16px; }
    .call-view[data-role="client"] .toolbar-media #call-mic-button > span,
    .call-view[data-role="client"] .toolbar-media #call-camera-button > span { display: none; }
}
@media (max-width: 820px) {
    .call-view[data-role="client"]:has(.conversation-panel:not([hidden])) .call-body { padding-right: 0; }
    .call-view[data-role="client"] .conversation-panel { width: min(360px, calc(100% - 24px)); box-shadow: 0 8px 36px #263b2026; }
    .call-view[data-role="client"] .call-toolbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding-inline: 12px; }
    .call-view[data-role="client"] #copy-art-button > span { display: none; }
    .call-view[data-role="client"] #copy-art-button { margin-left: 0; padding-inline: 12px; }
}
@media (max-width: 620px) {
    .call-view[data-role="client"] { --room-gutter: 8px; --room-radius: 18px; height: 100dvh; min-height: 0; padding: 0; overflow: hidden; }
    .call-view[data-role="client"] .call-topbar { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; min-height: 64px; padding-inline: 12px; }
    .call-view[data-role="client"] .client-call-header { gap: 7px; }
    .call-view[data-role="client"] .call-context-symbol { flex-basis: 24px; width: 24px; }
    .call-view[data-role="client"] .call-context-symbol .brand-mark { width: 22px; height: 28px; }
    .call-view[data-role="client"] .call-header-label { font-size: 10px; }
    .call-view[data-role="client"] .call-topbar h1 { max-width: 100%; font-size: 21px; }
    .call-view[data-role="client"] .therapist-profile { margin: 0; gap: 6px; }
    .call-view[data-role="client"] .therapist-profile > div { display: block; }
    .call-view[data-role="client"] .therapist-profile strong { max-width: 76px; font-size: 12px; }
    .call-view[data-role="client"] .therapist-profile > div > span { display: none; }
    .call-view[data-role="client"] .client-call-options { grid-column: 3; grid-row: 1; }
    .call-view[data-role="client"] .camera-layout-button { padding-inline: 9px; gap: 6px; }
    .call-view[data-role="client"] #camera-layout-label { display: none; }
    .call-view[data-role="client"] .camera-layout-short-label { display: inline; }
    .call-view[data-role="client"] .call-topbar:has(.capture-badge:not([hidden])) { row-gap: 4px; }
    .call-view[data-role="client"] .video-area { height: 100%; }
    .call-view[data-role="client"] .video-grid[data-layout="gallery"] { gap: 8px; }
    .call-view[data-role="client"] .feed-overlay { padding: 16px 12px 10px; }
    .call-view[data-role="client"] .call-toolbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; min-height: 68px; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); }
    .call-view[data-role="client"] .conversation-controls { gap: 2px; }
    .call-view[data-role="client"] .tool-button { width: 44px; min-width: 44px; min-height: 44px; padding: 10px; }
    .call-view[data-role="client"] .tool-button > span:not(.chat-unread):not(.request-dot) { display: none; }
    .call-view[data-role="client"] .toolbar-media { gap: 0; padding: 2px; border-radius: 15px; }
    .call-view[data-role="client"] .toolbar-media .tool-button,
    .call-view[data-role="client"] #copy-art-button { padding: 10px; }
    .call-view[data-role="client"] .tool-leave { padding: 10px; }
    .call-view[data-role="client"] .conversation-panel { top: auto; right: 8px; width: min(380px, calc(100% - 16px)); height: min(540px, 72dvh); max-height: calc(100dvh - var(--conversation-top, 64px) - var(--conversation-bottom, 68px) - 4px); }
    .call-view[data-role="client"] .chat-heading { padding: 18px 18px 12px; }
    .call-view[data-role="client"] .chat-privacy { margin-left: 18px; }
    .call-view[data-role="client"] .chat-composer textarea { font-size: 16px; }
    .call-view[data-role="client"] .nonverbal-panel { left: 8px; width: min(350px, calc(100% - 16px)); }
    .call-view[data-role="client"][data-device="art"] .art-camera-guidance { grid-column: 1 / -1; grid-row: 1; max-width: none; font-size: 11px; text-align: center; }
    .call-view[data-role="client"][data-device="art"] .toolbar-media,
    .call-view[data-role="client"][data-device="art"] .toolbar-end { grid-row: 2; }
}

/* Keep comfortable touch targets when a phone cannot fit every tool on one line. */
@media (max-width: 360px) {
    .call-view[data-role="client"][data-device="face"] .call-toolbar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
    .call-view[data-role="client"][data-device="face"] .toolbar-media { grid-column: 1 / -1; grid-row: 1; }
    .call-view[data-role="client"][data-device="face"] .session-conversation { grid-column: 1; grid-row: 2; }
    .call-view[data-role="client"][data-device="face"] .toolbar-end { grid-column: 2; grid-row: 2; }
}
@media (min-width: 361px) and (max-width: 420px) {
    .call-view[data-role="client"] .call-toolbar:has(.checkin-toggle) { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
    .call-view[data-role="client"] .call-toolbar:has(.checkin-toggle) .toolbar-media { grid-column: 1 / -1; grid-row: 1; }
    .call-view[data-role="client"] .call-toolbar:has(.checkin-toggle) .session-conversation { grid-column: 1; grid-row: 2; }
    .call-view[data-role="client"] .call-toolbar:has(.checkin-toggle) .toolbar-end { grid-column: 2; grid-row: 2; }
}