/* Quick to reach, quiet enough to sit alongside the ordinary call controls. */
.privacy-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 44px; min-height: 44px; padding: 8px 12px;
    border: 1px solid var(--room-line, #dde2d6); border-radius: 13px;
    background: #eeefe6; color: #4f6250; font: 500 12px/1.3 var(--sans);
    cursor: pointer;
}
.privacy-button:hover { background: #e3e8da; border-color: #cbd5c3; }
.privacy-button kbd, #privacy-return kbd { padding: 2px 5px; border: 1px solid #cdd5c380; border-radius: 5px; background: #fffefa70; color: #77816e; font: 500 10px/1.3 var(--sans); white-space: nowrap; }
.privacy-button kbd { margin-left: 2px; }
@media (hover: none) and (pointer: coarse) { .privacy-button kbd, #privacy-return kbd { display: none; } }
.privacy-button:focus-visible, #privacy-return:focus-visible { outline: 2px solid #667b59; outline-offset: 3px; }
.privacy-preference { margin-top: 26px; padding: 22px; border: 1px solid #dfe6d5; border-radius: 18px; background: linear-gradient(140deg, #f4f7ec, #eef3e5); }
.privacy-preference-heading { display: flex; align-items: center; gap: 12px; }
.privacy-preference-heading > span { display: grid; place-items: center; flex: 0 0 36px; height: 40px; border: 1px solid #dbe4ce; border-radius: 13px; background: #e6eddb; color: #758967; font-size: 15px; }
.privacy-preference-heading .eyebrow { font-size: 9px; letter-spacing: .09em; }
.privacy-preference-heading h3 { margin-top: 5px; font-size: 25px; line-height: 1.15; }
.privacy-preference p { margin-top: 16px; font: 400 13px/1.75 var(--sans); color: #68785e; }
.privacy-preference p strong { color: #4d6642; }
.privacy-preference label { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 13px 14px; border: 1px solid #dce4cf; border-radius: 12px; background: #fcfdf8b0; cursor: pointer; }
.privacy-preference label strong { display: block; color: #465f3e; font: 500 13px/1.5 var(--sans); }
.privacy-preference label small { display: block; margin-top: 3px; color: #748369; font: 400 12px/1.6 var(--sans); }
.privacy-preference input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
.privacy-preference-return { display: block; margin-top: 16px; font: 400 12px/1.7 var(--sans); color: #78856d; }
@media (max-width: 540px) { .privacy-preference { margin-top: 24px; padding: 18px; } .privacy-preference-heading h3 { font-size: 23px; } }

/* Only the decorative colour fields move. The opaque cover appears immediately. */
.room-app[data-privacy-covered="true"] > :not(#privacy-screen) { visibility: hidden !important; }
dialog.privacy-screen {
    position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none;
    margin: 0; padding: 0; border: 0; border-radius: 0;
    background: #eeeae1; color: #48584b; box-shadow: none; overflow: auto; isolation: isolate;
}
.privacy-screen::backdrop { background: #eeeae1; backdrop-filter: none; }
.privacy-screen[open] { display: block; }
.privacy-landscape {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none; contain: paint;
    background: linear-gradient(145deg, #e1e7d8 0%, #f3ebdc 48%, #e6dfdf 100%);
}
.privacy-landscape::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, #f8f5eb25, transparent 28%, transparent 60%, #f4f1e7d9 100%);
}
.privacy-colour {
    position: absolute; display: block; pointer-events: none;
    animation-timing-function: ease-in-out; animation-iteration-count: infinite;
    animation-direction: alternate; animation-play-state: paused;
}
.privacy-colour-sage {
    width: 120%; height: 135%; left: -37%; top: -11%;
    background: radial-gradient(ellipse at 45% 48%, #8caa87 0%, #aabd986e 34%, #cdd8b300 67%);
    transform: translate3d(0, 0, 0) rotate(-14deg);
    animation-name: privacy-sage-drift; animation-duration: 38s; animation-delay: -12s;
}
.privacy-colour-apricot {
    width: 116%; height: 130%; right: -31%; top: -42%;
    background: radial-gradient(ellipse at 52% 44%, #e7b28f 0%, #edc6a5c2 23%, #efd7b000 65%);
    transform: translate3d(0, 0, 0) rotate(12deg);
    animation-name: privacy-apricot-drift; animation-duration: 44s; animation-delay: -24s;
}
.privacy-colour-lilac {
    width: 113%; height: 126%; right: -30%; bottom: -40%;
    background: radial-gradient(ellipse at 53% 47%, #a5aac6 0%, #bfb5cb9c 30%, #d7c1d000 67%);
    transform: translate3d(0, 0, 0) rotate(-18deg);
    animation-name: privacy-lilac-drift; animation-duration: 48s; animation-delay: -8s;
}
.privacy-colour-light {
    width: 95%; height: 96%; left: 2%; top: -8%;
    background: radial-gradient(ellipse at 52% 46%, #fffbe9eb 0%, #fff5d996 16%, #fff5d92b 35%, #fff5d900 62%);
    transform: translate3d(0, 0, 0) rotate(-25deg);
    animation-name: privacy-light-drift; animation-duration: 34s; animation-delay: -17s;
}
.privacy-screen[open] .privacy-colour { animation-play-state: running; }
.privacy-screen-content {
    position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 100%;
    padding: max(28px, env(safe-area-inset-top)) max(clamp(24px, 5vw, 76px), env(safe-area-inset-right))
        max(clamp(28px, 5vh, 56px), env(safe-area-inset-bottom)) max(clamp(24px, 5vw, 76px), env(safe-area-inset-left));
}
.privacy-screen-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.privacy-screen-eyebrow { display: block; color: #647262; font: 500 10px/1.5 var(--sans); letter-spacing: .17em; text-transform: uppercase; }
.privacy-screen h1 { margin: 9px 0 0; font: 400 clamp(38px, 4.5vw, 64px)/1.06 var(--serif); letter-spacing: -.035em; }
.privacy-screen-actions { display: flex; align-items: center; gap: 10px; padding-bottom: 2px; }
#privacy-return {
    display: inline-flex; align-items: center; justify-content: center; gap: 14px;
    min-height: 46px; padding: 11px 18px; border: 1px solid #faf9f0c4; border-radius: 28px;
    background: #faf8ef85; color: #4b5d4b; font: 500 12px/1.4 var(--sans); white-space: nowrap;
    box-shadow: 0 2px 12px #49563f05; cursor: pointer; transition: background .18s, border-color .18s;
}
#privacy-return:hover { background: #fffdf4c9; border-color: #fffdf4; }
#privacy-return kbd { border-color: #7b8a6e30; background: transparent; color: #61715a; }
#privacy-return .fa-arrow-right { font-size: 11px; }
@keyframes privacy-sage-drift {
    to { transform: translate3d(9%, -5%, 0) rotate(2deg) scale(1.08); }
}
@keyframes privacy-apricot-drift {
    to { transform: translate3d(-8%, 9%, 0) rotate(-6deg) scale(1.06); }
}
@keyframes privacy-lilac-drift {
    to { transform: translate3d(-9%, -7%, 0) rotate(0deg) scale(1.1); }
}
@keyframes privacy-light-drift {
    to { transform: translate3d(9%, 8%, 0) rotate(-10deg) scale(.91); }
}

.therapist-privacy {
    position: absolute; z-index: 7; top: 16px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 32px);
    padding: 14px 18px; border: 1px solid #d3dbc7; border-radius: 16px;
    background: #f5f5ec; color: #42553d; box-shadow: 0 5px 20px #20342114;
}
.therapist-privacy > .icon { font-size: 18px; }
.therapist-privacy strong { display: block; font: 500 13px/1.4 var(--sans); }
.therapist-privacy span { display: block; margin-top: 3px; font: 400 11px/1.5 var(--sans); color: #68755f; }
.feed-tile.privacy-paused video { visibility: hidden; }
.feed-tile.privacy-paused { background: #e7eadd; }
.feed-tile.privacy-paused::after {
    content: 'Camera paused'; position: absolute; inset: 0; display: grid; place-items: center;
    color: #68755f; font: 400 14px/1.5 var(--sans); pointer-events: none;
}
.room-app[data-client-privacy="true"] .therapist-request { display: none; }
@media (max-width: 820px) {
    .privacy-button { padding: 10px; }
    .privacy-button > span { display: none; }
    .call-view[data-role="client"] .client-call-options { gap: 8px; }
}
@media (max-width: 620px) {
    .privacy-screen-footer { align-items: flex-start; flex-direction: column; gap: 24px; }
    .privacy-screen-actions { align-self: flex-end; }
    .privacy-screen-eyebrow { font-size: 9px; letter-spacing: .14em; }
    .privacy-colour-sage { width: 170%; left: -76%; }
    .privacy-colour-apricot { width: 165%; right: -78%; top: -32%; }
    .privacy-colour-lilac { width: 165%; right: -69%; bottom: -28%; }
    .privacy-colour-light { width: 165%; left: -33%; }
}
@media (max-height: 450px) and (min-width: 621px) {
    .privacy-screen-content { padding-block: max(20px, env(safe-area-inset-bottom)); }
    .privacy-screen h1 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .privacy-screen .privacy-colour { animation: none; }
    .privacy-screen * { transition: none; }
}
@media (forced-colors: active) {
    .privacy-landscape { display: none; }
    #privacy-return { border: 1px solid ButtonText; }
}