@font-face {
    font-family:'DM Sans';
    font-style:normal;
    font-weight:400 500;
    font-display:swap;
    src:url(fonts/dm-sans-latin.woff2) format('woff2')
}

@font-face {
    font-family:'DM Sans';
    font-style:normal;
    font-weight:400 500;
    font-display:swap;
    src:url(fonts/dm-sans-latin-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C7,U+2113,U+2C60-2C7F
}

@font-face {
    font-family:'Instrument Serif';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url(fonts/instrument-serif-latin.woff2) format('woff2')
}

@font-face {
    font-family:'Instrument Serif';
    font-style:italic;
    font-weight:400;
    font-display:swap;
    src:url(fonts/instrument-serif-italic-latin.woff2) format('woff2')
}

:root {
    --paper:#f8f7f2;
    --surface:#fdfcf8;
    --ink:#34483d;
    --muted:#667267;
    --green:#3f5946;
    --deep:#25382d;
    --sage:#e8ece1;
    --line:#dedfd4;
    --cream:#f4efdf;
    --serif:'Instrument Serif',Georgia,serif;
    --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif
}

* {
    box-sizing:border-box
}

html {
    color-scheme:light
}

body {
    margin:0;
    min-width:320px;
    color:var(--ink);
    background:var(--paper);
    font:400 15px/1.55 var(--sans);
    -webkit-font-smoothing:antialiased
}

button,
input,
select,
textarea {
    font:inherit
}

button {
    cursor:pointer
}

button:disabled {
    opacity:.55;
    cursor:not-allowed
}

a {
    color:inherit;
    text-decoration:none
}

p,
h1,
h2,
h3 {
    margin:0
}

p {
    color:var(--muted)
}

h1,
h2,
h3 {
    font-family:var(--serif);
    font-weight:400;
    letter-spacing:-.025em;
    line-height:1.05
}

h1 {
    font-size:clamp(3.3rem,6vw,6.2rem)
}

h2 {
    font-size:clamp(2rem,3vw,3rem)
}

h3 {
    font-size:1.55rem
}

em {
    font-weight:400;
    color:#879475
}

strong {
    font-weight:500
}

.icon,
.arrow { display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;vertical-align:middle }
svg {
    flex-shrink:0
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline:2px solid var(--green);
    outline-offset:4px
}

[hidden] {
    display:none!important
}

.icon {
    font-size: 20px; width:20px;
    height:20px
}

.eyebrow {
    display:block;
    color:#71806e;
    font-size:.69rem;
    font-weight:500;
    letter-spacing:.17em;
    line-height:1.5;
    text-transform:uppercase
}

.site-header {
    height:100px;
    max-width:1480px;
    margin:auto;
    padding:0 clamp(26px,5vw,80px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-bottom:1px solid var(--line)
}

.brand {
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    color:var(--green)
}

.brand-mark {
    width:37px;
    height:43px
}

.brand>span {
    font-size:1.67rem;
    letter-spacing:-.065em;
    line-height:1;
    font-weight:500
}

.brand small {
    display:block;
    margin-top:9px;
    margin-left:2px;
    font-size:.55rem;
    letter-spacing:.23em;
    font-weight:400
}

.header-note {
    display:flex;
    align-items:center;
    gap:10px;
    color:#71806e;
    font-size:.79rem;
    white-space:nowrap
}

.header-note .icon {
    font-size: 16px; width:16px;
    height:16px
}

.site-footer {
    max-width:1480px;
    margin:auto;
    padding:30px clamp(26px,5vw,80px);
    border-top:1px solid var(--line);
    color:#788476;
    font-family:var(--serif);
    font-style:italic;
    font-size:1.13rem
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    min-height:52px;
    padding:13px 23px;
    border-radius:100px;
    border:1px solid #bcc5b7;
    background:transparent;
    color:var(--green);
    font-size:.85rem;
    font-weight:500;
    transition:background .2s,border-color .2s,transform .2s
}

.button:hover:not(:disabled) {
    background:var(--sage);
    border-color:#9aa996;
    transform:translateY(-1px)
}

.button-primary {
    background:var(--green);
    border-color:var(--green);
    color:white
}

.button-primary:hover:not(:disabled) {
    background:#304635;
    border-color:#304635
}

.button-outline {
    background:var(--surface)
}

.button .icon {
    font-size: 18px; width:18px;
    height:18px
}

.quiet-button {
    padding:8px 0;
    border:0;
    background:none;
    color:var(--green);
    font-size:.78rem;
    text-decoration:underline;
    text-underline-offset:4px
}

.simple-shell {
    min-height:100dvh;
    display:flex;
    flex-direction:column
}

.simple-content {
    width:min(100% - 52px,850px);
    margin:auto;
    padding:100px 0 130px
}

.simple-content h1 {
    margin-top:18px;
    max-width:800px
}

.simple-content p {
    max-width:580px;
    margin-top:30px;
    font-size:1.12rem;
    line-height:1.65
}

.simple-content .button {
    margin-top:38px
}

.room-app {
    min-height:100dvh;
    display:flex;
    flex-direction:column
}

.room-app main {
    flex:1
}

.room-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px
}

.room-footer>span:last-child {
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--sans);
    font-style:normal;
    font-size:.75rem
}

.room-footer .icon {
    font-size: 15px; width:15px;
    height:15px
}

.loading-view {
    min-height:calc(100dvh - 180px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:20px
}

.loading-ring {
    width:34px;
    height:34px;
    border:2px solid #d6dece;
    border-top-color:var(--green);
    border-radius:50%;
    animation:turn 1s linear infinite
}

@keyframes turn {
    to {
        transform:rotate(360deg)
    }
}

.unavailable-view {
    width:min(100% - 52px,720px);
    min-height:calc(100dvh - 180px);
    margin:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:80px 0
}

.unavailable-icon {
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    margin-bottom:36px;
    border-radius:50%;
    background:var(--sage)
}

.unavailable-view h1 {
    margin:18px 0 25px
}

.unavailable-view p {
    max-width:530px;
    font-size:1.04rem;
    line-height:1.65
}

.unavailable-view .button { align-self:flex-start;margin-top:28px }


.closed-view {
    width: min(100% - 52px, 1000px);
    min-height: calc(100dvh - 180px);
    display: grid;
    place-items: center;
    margin: auto;
    padding: 72px 0 100px;
}

.closed-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: clamp(36px, 7vw, 82px);
    border: 1px solid #dce3d8;
    border-radius: 32px;
    background: radial-gradient(circle at 91% 12%, #f6f0df 0, transparent 34%), linear-gradient(145deg, #f2f5ed, #e8eee5 67%, #f5f3e9);
    box-shadow: 0 24px 70px rgba(35, 55, 40, .08);
}

.closed-card::after {
    content: "";
    position: absolute;
    width: 310px;
    height: 310px;
    top: -132px;
    right: -110px;
    border: 1px solid #fff9;
    border-radius: 50%;
    box-shadow: 0 0 0 36px #fff4, 0 0 0 72px #fff2;
    pointer-events: none;
}

.closed-card > * {
    position: relative;
    z-index: 1;
}

.closed-symbol {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 34px;
    border: 1px solid #cad8c9;
    border-radius: 20px;
    background: #fff9;
}

.closed-symbol .brand-mark {
    width: 35px;
    height: 40px;
}

.closed-card h1 {
    max-width: 760px;
    margin-top: 18px;
    font-size: clamp(3.6rem, 7vw, 6.7rem);
}

.closed-card > p {
    max-width: 570px;
    margin-top: 27px;
    font-size: 1.08rem;
    line-height: 1.7;
}

.closed-session-summary {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 390px;
    margin: 34px 0 26px;
    padding: 17px 21px;
    border: 1px solid #d9e1d7;
    border-radius: 15px;
    background: #ffffffa8;
}

.closed-session-summary > span:first-child {
    color: #778775;
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.closed-session-summary strong {
    font-size: .96rem;
}

.closed-session-summary > span:last-child {
    color: var(--muted);
    font-size: .78rem;
}

.closed-card .button {
    min-width: 220px;
}

.closed-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    color: #6e7b70;
    font-size: .73rem;
}

.closed-note .icon {
    font-size: 15px; width: 15px;
    height: 15px;
}

.pulse-dot,
.status-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #78a977;
    box-shadow: 0 0 0 5px #e0eddc;
}


dialog {
    border:0;
    border-radius:22px;
    background:var(--surface);
    color:var(--ink);
    box-shadow:0 25px 95px #16241d5c
}

dialog::backdrop {
    background:#1b2e25b3;
    backdrop-filter:blur(6px)
}

.annotation-dialog {
    width:min(92vw,900px);
    max-height:94vh;
    overflow:auto;
    padding:31px
}

.dialog-topline {
    display:flex;
    align-items:center;
    justify-content:space-between
}

.dialog-close {
    border:0;
    background:transparent;
    color:var(--green)
}

.annotation-dialog h2,
.end-session-dialog h2 {
    margin-top:14px
}

.annotation-dialog>p,
.end-session-dialog>p {
    margin-top:12px;
    font-size:.84rem
}

.annotation-surface {
    overflow:hidden;
    max-height:58vh;
    margin-top:19px;
    border-radius:12px;
    background:#23332b
}

.annotation-surface canvas {
    display:block;
    max-width:100%;
    max-height:58vh;
    margin:auto;
    touch-action:none
}

.annotation-tools {
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:17px
}

.annotation-colors {
    display:flex;
    gap:8px
}

.color-button {
    width:28px;
    height:28px;
    border:2px solid #fff;
    border-radius:50%;
    box-shadow:0 0 0 1px #c7d1c4
}

.color-button.selected {
    box-shadow:0 0 0 2px var(--green)
}

.color-cream {
    background:#fff7dc
}

.color-green {
    background:#264b3a
}

.color-coral {
    background:#ee8d72
}

.dialog-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:24px
}

.end-session-dialog {
    width:min(92vw,530px);
    padding:clamp(28px,4vw,40px)
}

.dialog-emblem {
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    margin-bottom:22px;
    border:1px solid #ebd6cf;
    border-radius:14px;
    background:#faeee9;
    color:#a16558
}

.dialog-emblem .icon {
    font-size: 21px; width:21px;
    height:21px
}

.end-session-dialog h2 {
    font-size:2.7rem
}

.end-session-dialog>p {
    max-width:410px;
    color:#697669;
    line-height:1.65
}

.button-destructive {
    border-color:#ae6455;
    background:#ae6455;
    color:white
}

.button-destructive:hover:not(:disabled) {
    border-color:#945044;
    background:#945044
}

.toast {
    position:fixed;
    bottom:28px;
    left:50%;
    z-index:10;
    transform:translateX(-50%);
    max-width:calc(100vw - 40px);
    padding:13px 20px;
    border-radius:100px;
    background:#243a2d;
    color:white;
    box-shadow:0 12px 35px #1b2e2544;
    font-size:.79rem;
    text-align:center
}

@media (max-width: 740px) {
    .site-header {
        height: 80px;
    }

    .room-footer {
        display: none;
    }

    .room-app main {
        min-height: calc(100dvh - 80px);
    }

    .closed-view {
        min-height: calc(100dvh - 80px);
        padding: 24px 0 60px;
    }

}

@media (max-width: 480px) {
    .brand > span {
        font-size: 1.45rem;
    }

    .brand small {
        font-size: .48rem;
    }

    .header-note {
        font-size: 0;
    }

    .header-note .icon {
        font-size: 18px; width: 18px;
        height: 18px;
    }

    .closed-view {
        width: min(100% - 24px, 1000px);
    }

    .closed-card {
        padding: 30px 26px;
        border-radius: 23px;
    }

    .closed-card h1 {
        font-size: clamp(3.3rem, 11vw, 4.5rem);
    }

    .closed-card > p {
        font-size: .96rem;
    }

    .closed-card .button {
        width: 100%;
    }

    .dialog-actions {
        flex-direction: column-reverse;
    }

    .dialog-actions .button {
        width: 100%;
    }

    .end-session-dialog {
        padding: 28px;
    }
}

.review-view {
    max-width:1480px;
    margin:auto;
    padding:80px clamp(26px,5vw,80px) 120px
}

.review-header h1 {
    max-width:760px;
    margin-top:18px
}

.review-header p {
    margin-top:22px
}

.review-content {
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:45px;
    margin-top:70px
}

.review-content h2 {
    font-size:2.2rem
}

.review-gallery {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:17px;
    margin-top:22px
}

.review-gallery .snapshot-card img {
    aspect-ratio:4/3
}

.review-side {
    display:flex;
    flex-direction:column;
    gap:20px
}

.review-side section {
    padding:24px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--surface)
}

.review-side section h2 {
    font-size:1.8rem
}

.review-side section p {
    margin-top:13px;
    font-size:.8rem
}

.review-side a {
    display:inline-block;
    margin-top:15px;
    color:var(--green);
    font-size:.8rem;
    text-decoration:underline;
    text-underline-offset:4px
}

.review-workspace {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin-top:24px
}

.review-workspace > section {
    min-width:0;
    padding:25px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--surface)
}

.review-workspace h2 { margin-top:8px;font-size:1.9rem }
.review-workspace h3 { margin-top:23px;font-size:1.35rem }
.review-session-notes { margin-top:15px;color:#607060;font-size:.82rem;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere }
.review-action-list { display:grid;gap:7px;margin-top:15px }
.review-action-list p { font-size:.78rem }
.review-action-list > *:not(p) { padding:10px 12px;border:1px solid #e1e9de;border-radius:9px;background:#f7faf5;color:#405747;font-size:.78rem }

@media(max-width:800px) {
    .review-content,
.review-workspace {
        grid-template-columns:1fr
    }
}

/* The room is an application surface while a call is active. */
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

.room-app.in-call {
    height:100dvh;
    min-height:0;
    overflow:hidden
}

.room-app.in-call .room-header,
.room-app.in-call .room-footer {
    display:none
}

.room-app.in-call main {
    display:flex;
    min-height:0
}

.call-view {
    position:relative;
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    width:100%;
    height:100dvh;
    max-width:none;
    min-height:0;
    margin:0;
    padding:0;
    overflow:hidden;
    background:#f0f1eb
}


.call-topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-direction:row;
    gap:16px;
    min-height:58px;
    padding:7px clamp(14px,1.7vw,28px);
    border-bottom:1px solid #dfe5dc;
    background:#fbfcf8
}


.client-call-header { flex:1 }
.client-call-options { display:flex;align-items:center;gap:20px }

.client-call-header,
.therapist-call-header {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0
}

.call-context-symbol {
    display:grid;
    place-items:center;
    flex:0 0 40px;
    width:40px;
    height:40px;
    border:1px solid #dce6d9;
    border-radius:13px;
    background:#eff4ec
}

.call-context-symbol .brand-mark {
    width:21px;
    height:26px
}


.call-header-label {
    display:block;
    color:#748575;
    font-size:.64rem;
    font-weight:500;
    letter-spacing:.13em;
    line-height:1.3;
    text-transform:uppercase
}



.call-topbar h1 {
    overflow:hidden;
    max-width:min(52vw,700px);
    margin-top:3px;
    font-family:var(--serif);
    font-size:clamp(1.25rem,1.8vw,1.7rem);
    line-height:1.1;
    text-overflow:ellipsis;
    white-space:nowrap
}

.call-badges:not(:has(> :not([hidden]))) { display:none }

.call-badges {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    flex-wrap:wrap;
    min-width:0
}

.capture-badge {
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:29px;
    padding:5px 10px;
    border:1px solid #d8e4d4;
    border-radius:100px;
    background:#edf5e9;
    color:#3e6346;
    font-size:.66rem;
    font-weight:500;
    white-space:nowrap
}


.capture-badge {
    border-color:#edd5ce;
    background:#f8eae5;
    color:#985e51
}

.record-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#bd5545
}

.transcript-badge {
    border-color:#dbe1ec;
    background:#edf1f7;
    color:#5e6e8a
}

.call-body {
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(340px,26vw,410px);
    gap:0;
    min-height:0;
    padding:0
}


.video-area {
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:0;
    background:#15271c;
    box-shadow:none
}


/* The view button names the action it will take; neither layout needs explaining as an on/off state. */
.camera-layout-control { display:flex;align-items:center;flex-shrink:0 }
.camera-layout-button { display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px;padding:9px 12px;border:1px solid #dfe4d7;border-radius:12px;background:#f8f9f1;color:#52664b;font:500 11px/1.4 var(--sans);white-space:nowrap;box-shadow:0 1px 2px #34483d04;transition:background 160ms ease,border-color 160ms ease }
.camera-layout-button:hover { border-color:#c4d0b9;background:#eef2e5 }
.camera-layout-button .icon { width:15px;height:15px;font-size:15px;color:#728564 }
.camera-layout-button:focus-visible { outline:2px solid #71875f;outline-offset:3px }
.camera-layout-short-label { display:none }
@media (prefers-reduced-motion: reduce) { .camera-layout-button { transition:none } }

.therapist-profile { display:flex;align-items:center;gap:9px;min-width:0;margin-inline:auto }
.therapist-avatar { display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#e6ecdf;color:#556a4d;font-size:.73rem;font-weight:500 }
.therapist-profile strong { display:block;overflow:hidden;max-width:200px;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;font-weight:500 }
.therapist-profile > div > span { display:block;color:var(--muted);font-size:.65rem;line-height:1.5 }

.session-clock { display:flex;align-items:center;gap:18px;padding-inline:16px;border-left:1px solid #dfe5dc;font-variant-numeric:tabular-nums;white-space:nowrap }
.session-clock > div { display:grid;gap:2px;min-width:52px }
.session-clock span { color:var(--muted);font-size:.6rem;line-height:1.2 }
.session-clock time { color:var(--ink);font-size:.85rem;font-weight:500;line-height:1.2 }
.session-clock.is-overtime > div:last-child time,
.session-clock.is-overtime > div:last-child span { color:#a16558 }

.video-grid {
    position:relative;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr);
    grid-auto-rows:minmax(0,1fr);
    gap:8px;
    flex:1;
    min-height:0;
    overflow:hidden
}

.video-grid.has-multiple[data-layout="focus"] { display:block }
.video-grid.has-multiple[data-layout="focus"] > .feed-tile.is-primary { position:absolute;inset:0;border:0;border-radius:0 }

.video-grid[data-layout="gallery"] {
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    grid-template-rows:1fr;
    grid-auto-rows:1fr
}

.video-grid[data-layout="gallery"] > .feed-tile {
    grid-column:auto;
    grid-row:auto
}

.feed-tile.camera-off video { visibility:hidden }

.video-grid.has-only-local {
    position:relative;
    display:block
}

.video-grid.has-only-local > .empty-call {
    position:absolute;
    inset:0;
    width:100%;
    height:100%
}

.video-grid.has-only-local .feed-actions {
    display:none
}

.empty-call {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:0;
    padding:30px;
    border:1px solid #ffffff16;
    border-radius:12px;
    background:radial-gradient(circle at 50% 42%,#304c35,#1b3022 70%);
    color:#d3e0d2;
    text-align:center
}

.empty-call-symbol {
    display:grid;
    place-items:center;
    width:60px;
    height:60px;
    margin-bottom:16px;
    border:1px solid #ffffff2c;
    border-radius:18px;
    background:#ffffff12
}

.empty-call-symbol .icon { font-size: 26px; width:26px;height:26px }
.empty-call strong { color:#f3f6ef;font-size:.92rem }
.empty-call p { max-width:300px;margin-top:6px;color:#b9c9b7;font-size:.76rem }

.feed-tile {
    position:relative;
    overflow:hidden;
    min-width:0;
    min-height:0;
    border:1px solid #ffffff1f;
    border-radius:12px;
    background:radial-gradient(circle at 50% 40%,#344839,#1e2d23)
}


.video-grid[data-layout="focus"] .feed-tile.is-secondary:hover { border-color:#c4dfbc }
.feed-tile video { position:absolute;inset:0;width:100%;height:100%;object-fit:cover }
.feed-tile.local video { transform:scaleX(-1) }
.feed-tile.local.art-feed video { transform:none }

.feed-overlay {
    position:absolute;
    inset:auto 0 0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:54px;
    padding:17px 13px 11px;
    background:linear-gradient(transparent,#0e1c14b8);
    color:white;
    font-size:.72rem;
    font-weight:500
}

.feed-overlay > span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.feed-actions { display:flex;align-items:center;gap:5px }

.feed-actions button {
    display:grid;
    place-items:center;
    flex:0 0 32px;
    width:32px;
    height:32px;
    padding:0;
    border:1px solid #ffffff5b;
    border-radius:9px;
    background:#172a21b8;
    color:#f6f8f2;
    box-shadow:0 4px 12px #0002;
    transition:background .15s,border-color .15s,transform .15s
}

.feed-actions button:hover,
.feed-actions button[aria-pressed="true"] {
    transform:translateY(-1px);
    border-color:#fff;
    background:#f4f8ef;
    color:#2f4936
}

.feed-actions .feed-capture { background:#f4f8ef;color:#2f4936 }
.feed-actions .feed-capture:hover { background:white }
.feed-actions button .icon { font-size: 16px; width:16px;height:16px }


.video-grid > .feed-tile.floating-preview {
    position:absolute;inset:auto;z-index:2;right:auto;bottom:auto;
    border:1px solid #ffffff70;border-radius:12px;
    box-shadow:0 4px 20px #0003;cursor:grab;touch-action:none;user-select:none
}
.feed-tile.floating-preview.is-adjusting { z-index:4;cursor:grabbing;box-shadow:0 8px 28px #0005 }
.feed-tile.floating-preview:focus-visible { outline:2px solid #e6eddf;outline-offset:-3px }
.feed-resize {
    position:absolute;z-index:3;top:3px;left:3px;display:none;place-items:center;
    width:28px;height:28px;padding:0;border:0;border-radius:8px;
    background:#26352cbf;color:#f7faf2;backdrop-filter:blur(8px);
    cursor:nwse-resize;touch-action:none;opacity:0;transition:opacity .15s
}
.floating-preview .feed-resize { display:grid }
.floating-preview:hover .feed-resize,
.floating-preview:focus-within .feed-resize { opacity:1 }
.feed-resize .icon { font-size:12px }
.feed-resize:focus-visible { outline:2px solid white;outline-offset:2px }
.floating-preview video { pointer-events:none }

/* An artwork device is a camera monitor: no remote tiles or view controls. */
.call-view[data-device="art"] .video-grid { display:block }
.call-view[data-device="art"] .feed-tile.local { position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0 }
.art-camera-guidance { max-width:290px;color:var(--muted);font-size:.72rem;line-height:1.45 }

.feed-placeholder {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    color:#d0ddcb;
    font-family:var(--serif);
    font-size:1.6rem;
    text-align:center
}

.camera-placeholder { flex-direction:column;gap:7px;font-family:var(--sans);line-height:1.4 }
.camera-placeholder-emblem { display:grid;place-items:center;width:38px;height:38px;margin-bottom:1px;border-radius:50%;background:#ffffff0d;color:#b5c2a7 }
.camera-placeholder-emblem .icon { width:17px;height:17px;font-size:17px }
.camera-placeholder-label { font-size:13px;font-weight:500 }
.camera-placeholder small { max-width:180px;font-size:10px;font-weight:400;line-height:1.5;color:#b1beaa }

.call-status {
    position:absolute;
    top:57px;
    left:20px;
    z-index:4;
    max-width:min(80%,500px);
    padding:8px 12px;
    border:1px solid #e1e3d6;
    border-radius:9px;
    background:#fffdf4ed;
    color:#526352;
    font-size:.72rem;
    box-shadow:0 7px 20px #0002
}
.call-status:empty { display:none }
.switch { flex:0 0 41px;width:41px;height:24px;padding:2px;border:0;border-radius:100px;background:#cbd5c9;transition:background .2s }
.switch span { display:block;width:20px;height:20px;border-radius:50%;background:white;box-shadow:0 1px 4px #0002;transition:transform .2s }
.switch[aria-checked=true] { background:#6c9a6b }
.switch[aria-checked=true] span { transform:translateX(17px) }
.snapshot-gallery { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px }
.snapshot-gallery .empty-gallery { grid-column:1 / -1;padding:18px 0;color:#879487;font-size:.72rem }
.snapshot-card { overflow:hidden;border:1px solid #e0e6dd;border-radius:10px;background:#f8faf6;color:var(--ink);text-align:left }
.snapshot-card img { display:block;width:100%;aspect-ratio:4 / 3;object-fit:cover }
.snapshot-card span { display:block;padding:7px 8px;font-size:.66rem }

.call-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:0;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none
}


.toolbar-group { display:flex;align-items:center;gap:8px }
.toolbar-end { margin-left:auto }
.tool-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:44px;
    padding:9px 12px;
    border:1px solid #dce5d9;
    border-radius:11px;
    background:#f2f6ef;
    color:#435b48;
    font-size:.72rem;
    font-weight:500;
    white-space:nowrap;
    transition:background .15s,border-color .15s,transform .15s
}
.tool-button:hover { transform:translateY(-1px);border-color:#b9cbb5;background:#e7f0e4 }
.tool-button[aria-pressed=true] { border-color:#e9d1ca;background:#f7e8e3;color:#955e51 }
.tool-button .icon { font-size: 17px; width:17px;height:17px }
.tool-leave { border-color:#e6dfd7;background:#fbf8f3;color:#7d665c }
.tool-close { border-color:#ae6455;background:#ae6455;color:white }
.tool-close:hover { border-color:#945044;background:#945044 }


@media(max-width:1100px) {
    .call-body { grid-template-columns:minmax(0,1fr) 320px }
}

@media(max-width:900px) {
    .call-topbar { min-height:65px;padding:8px 16px;flex-direction:row;align-items:center }
    .call-body { display:grid;grid-template-columns:1fr;gap:0;min-height:0;padding:0 }
}

@media(max-width:620px) {
    .call-topbar { gap:8px }
    .call-context-symbol { flex-basis:35px;width:35px;height:35px;border-radius:10px }
    .call-context-symbol .brand-mark { width:19px;height:23px }
    .call-topbar h1 { max-width:46vw;font-size:1.26rem }
    .call-header-label { font-size:.57rem }
    .call-badges { gap:4px }
    .capture-badge { min-height:25px;padding:4px 7px;font-size:.58rem }

    .client-call-options { gap:0 }
    .call-view[data-device="art"] .call-toolbar { grid-template-columns:1fr auto 1fr;row-gap:8px }
    .call-view[data-device="art"] .toolbar-media { grid-column:2 }
    .call-view[data-device="art"] .toolbar-end { grid-column:3 }
    .call-view[data-device="art"] .art-camera-guidance { grid-column:1 / -1;grid-row:auto;justify-self:center;max-width:none;text-align:center;font-size:.7rem }
    .transcript-badge { display:inline-flex }
    .video-grid[data-layout="gallery"] { grid-template-columns:1fr;grid-auto-rows:minmax(120px,1fr) }
    .feed-overlay { padding:14px 8px 7px;font-size:.64rem }
    .feed-actions { gap:3px }
    .feed-actions button { flex-basis:28px;width:28px;height:28px }
    .toolbar-group { gap:5px }
    .tool-button { min-width:42px;min-height:42px;padding:7px }
    .tool-button > span { display:none }
    .tool-button .icon { font-size: 19px; width:19px;height:19px }
    .tool-close { min-width:82px }
    .tool-close > span { display:inline;font-size:.68rem }
}

@media(hover:none) {
    .floating-preview .feed-resize { width:36px;height:36px;opacity:1 }
}

@media(max-width:1100px) {
    .session-clock { gap:12px;padding-inline:10px }
}
@media(max-width:620px) {
    .client-call-header { grid-column:1;grid-row:1 }
    .therapist-profile { grid-column:1;grid-row:2;margin:0 0 2px 40px;gap:6px }
    .therapist-avatar { width:22px;height:22px;flex-basis:22px;font-size:.55rem }
    .therapist-profile > div { display:flex;align-items:baseline;gap:6px;min-width:0 }
    .therapist-profile strong { max-width:130px;font-size:.72rem }
    .therapist-profile > div > span { font-size:.6rem }
    .client-call-options { grid-column:2;grid-row:1 / 3 }
    .call-badges { grid-column:1 / -1 }
    .session-clock { padding-right:0;gap:10px }
    .session-clock > div { min-width:44px }
    .session-clock time { font-size:.78rem }
    .camera-layout-control { gap:6px;font-size:.65rem }
}