/* ============================================================
   TogetherMindsAI — Main Stylesheet
   Green / Teal therapeutic theme
   ============================================================ */

:root {
    /* Brand accents — kept vivid; used for buttons, navbar, links on dark. */
    --green-primary:   #4CAF50;
    --green-dark:      #388E3C;
    --green-light:     #C8E6C9;   /* small bright-green chips (avatars/scrollbar) */
    --teal-primary:    #009688;
    --teal-dark:       #00796B;
    --border-radius:   16px;

    /* ===== Dark theme ===== app-wide. Surfaces/text/borders are dark; brand
       greens stay as accents. Retune the whole app from these few values. */
    --page-bg:         #16201E;   /* app backdrop */
    --surface:         #1E2A28;   /* cards / modals / dropdowns / inputs base */
    --surface-2:       #243430;   /* raised / inputs / hover */
    --border-dk:       #30403B;   /* borders & dividers on dark */
    --text-dark:       #E8EEEC;   /* primary text (light on dark) */
    --text-muted:      #9DB0AA;   /* muted/secondary text */
    --gray-bubble:     #26332F;   /* AI chat bubble */
    --green-pale:      #1B2C22;   /* dark green-tinted surface (was a light tint) */
}

/* ---- Persistent disclaimer bar ---- */
.disclaimer-bar {
    background-color: #fff8e1;
    border-bottom: 1px solid #ffe082;
    color: #5d4037;
    font-size: 0.82rem;
    line-height: 1.5;
}

/* ---- Global ---- */
body {
    background-color: var(--page-bg);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--text-dark);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main.container {
    flex: 1;
}

/* ---- Navbar ---- */
.bg-primary-teal {
    background: linear-gradient(135deg, var(--teal-primary) 0%, var(--green-dark) 100%) !important;
}

.navbar-brand {
    font-size: 1.3rem;
    letter-spacing: 0.3px;
}

/* ---- Color utilities ---- */
.text-primary-green { color: var(--green-primary) !important; }

.btn-primary-green {
    background: linear-gradient(135deg, var(--green-primary), var(--teal-primary));
    border: none;
    color: #fff;
    font-weight: 600;
    transition: opacity 0.2s, transform 0.1s;
}
.btn-primary-green:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    color: #fff;
}
.btn-primary-green:active {
    transform: translateY(0);
}

.btn-delete {
    background-color: #d32f2f;
    border: none;
    color: #fff;
    font-weight: 600;
}
.btn-delete:hover,
.btn-delete:focus,
.btn-delete:active {
    background-color: #d32f2f;
    color: #fff;
}

.btn-outline-green {
    border: 2px solid var(--green-primary);
    color: var(--green-primary);
    background: transparent;
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
}
.btn-outline-green:hover {
    background: var(--green-primary);
    color: #fff;
}

.bg-primary-green {
    background-color: var(--green-primary) !important;
}

.border-green {
    border-color: var(--green-primary) !important;
}

/* ---- Hero section ---- */
.hero-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--green-pale);
    display: flex;
    align-items: center;
    justify-content: center;
}

.border-green.border {
    border-color: var(--green-primary) !important;
}
hr.border-green {
    border-color: var(--green-primary);
    opacity: 0.4;
    border-width: 2px;
}

/* ---- Therapy cards (home) ---- */
.therapy-card {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border-radius: var(--border-radius) !important;
    background: var(--surface);
}
.therapy-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(76, 175, 80, 0.18) !important;
}

.therapy-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--green-pale);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Auth card ---- */
.alert-info-teal {
    background: #E0F2F1;
    border: 1px solid #B2DFDB;
    color: var(--teal-dark);
}

/* ---- Chat window ---- */
.chat-window {
    height: calc(100vh - 280px);
    height: calc(100dvh - 280px);
    min-height: 320px;
    border-radius: var(--border-radius) !important;
}
.chat-window .card-body {
    overflow-y: auto;
    height: 100%;
    scroll-behavior: smooth;
}

/* ---- Chat bubbles ---- */
.bubble {
    max-width: 72%;
    padding: 10px 14px;
    border-radius: 18px;
    position: relative;
    word-break: break-word;
}

.bubble-user {
    background: linear-gradient(135deg, var(--green-primary), var(--teal-primary));
    color: #fff;
    border-bottom-right-radius: 4px;
}

.bubble-ai {
    background: var(--gray-bubble);
    color: var(--text-dark);
    border-bottom-left-radius: 4px;
}

.bubble p {
    white-space: pre-wrap;
}

.bubble-sender {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.75;
    display: block;
    margin-bottom: 3px;
}

.bubble-time {
    font-size: 0.68rem;
    opacity: 0.65;
    display: block;
    margin-top: 4px;
    text-align: right;
}

/* ---- Avatars ---- */
.avatar-ai,
.avatar-user {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.avatar-ai {
    background: var(--green-light);
    color: var(--green-dark);
}
.avatar-user {
    background: linear-gradient(135deg, var(--green-primary), var(--teal-primary));
    color: #fff;
}

/* ---- Input group ---- */
.input-group.rounded-4 {
    border-radius: var(--border-radius) !important;
}
.input-group .form-control:focus {
    box-shadow: none;
    border-color: var(--green-primary);
}

/* ---- Chat input textarea: auto-grow up to N lines, then scroll inside ---- */
.chat-input {
    resize: none;                /* user can't drag-resize */
    overflow-y: auto;
    line-height: 1.4;
    min-height: 48px;            /* matches form-control-lg single line */
    max-height: 84px;            /* ~3 lines on desktop / laptop */
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    word-break: break-word;
}
.chat-input::-webkit-scrollbar { width: 5px; }
.chat-input::-webkit-scrollbar-thumb { background: var(--green-light); border-radius: 10px; }
@media (max-width: 575.98px) {
    .chat-input { max-height: 60px; }   /* ~2 lines on phones */
}

/* ---- Share alert ---- */
.alert-share {
    background: var(--green-pale);
    border: 1px solid var(--green-light);
    color: var(--text-dark);
}

/* ---- Session ID badge ---- */
.session-id-badge {
    display: inline-block;
    background: var(--green-primary);
    color: #fff;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 2px;
}

/* ---- Progress stat cards ---- */
.stat-card {
    background: var(--surface);
    transition: transform 0.15s;
}
.stat-card:hover {
    transform: translateY(-2px);
}

/* ---- Consent checkboxes ---- */
.cursor-pointer { cursor: pointer; }

.consent-check {
    width: 1.35em;
    height: 1.35em;
    border: 2px solid #888;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--green-primary);
}

.consent-item {
    background: var(--surface);
    border-color: #ccc !important;
    color: var(--text-dark);
    transition: border-color 0.15s, background 0.15s;
    cursor: pointer;
}
.consent-item:hover {
    border-color: var(--green-primary) !important;
    background: var(--green-pale);
}
.consent-item:has(.consent-check:checked) {
    border-color: var(--green-primary) !important;
    background: var(--green-pale);
}

/* ---- Footer ---- */
.footer-bar {
    border-top: 1px solid #E0E0E0;
    background: var(--surface);
}

/* ---- Scrollbar styling (webkit) ---- */
.chat-window .card-body::-webkit-scrollbar {
    width: 5px;
}
.chat-window .card-body::-webkit-scrollbar-track {
    background: transparent;
}
.chat-window .card-body::-webkit-scrollbar-thumb {
    background: var(--green-light);
    border-radius: 10px;
}

/* ---- Multi-colored send spinner ---- */
.spinner-multi {
    display: inline-block;
    vertical-align: middle;
    width: 1.15em;
    height: 1.15em;
    border-radius: 50%;
    border: 0.18em solid transparent;
    border-top-color:    #ff6b6b;
    border-right-color:  #ffd93d;
    border-bottom-color: #6bcb77;
    border-left-color:   #4d96ff;
    animation: spin-multi 0.8s linear infinite;
}
@keyframes spin-multi {
    to { transform: rotate(360deg); }
}

/* ---- Reflection page: viewport-fit flex layout, falls back to page scroll
       when content exceeds viewport (e.g. at high zoom). dvh keeps mobile
       browser chrome from causing jumps; vh kept as fallback for older UAs. */
body.therapy-page {
    /* Shrink the whole room ~25%. Heights are pre-divided by the zoom factor so
       the scaled page still fills the viewport exactly (no blank strip below). */
    zoom: 0.75;
    min-height: calc(100vh / 0.75);
    min-height: calc(100dvh / 0.75);
    height: calc(100vh / 0.75);
    height: calc(100dvh / 0.75);
    overflow-y: auto;
}
body.therapy-page main.container {
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    min-height: 0;
    max-width: none;            /* span the full viewport so the room fills up to the Co-Pilot */
    padding-left: 0;            /* flush-left: no wasted left gutter (cards keep inner p-3) */
}
body.therapy-page main.container > .row {
    flex: 1;
    min-height: 0;
    align-items: stretch;
    margin-left: 0;             /* drop Bootstrap's negative row gutters so content is flush */
    margin-right: 0;
}
body.therapy-page .therapy-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    flex: 0 0 100%;             /* drop the col-lg-10 83% cap — use the whole width */
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
body.therapy-page .chat-window {
    flex: 1;
    height: auto !important;
    min-height: 150px;
}
/* Composer pinned to the bottom of the room so it stays reachable even when the
   audio/video panel is open and the page scrolls. */
body.therapy-page .input-group {
    position: sticky;
    bottom: 0;
    z-index: 6;
    flex: 0 0 auto;
    margin-top: 0.5rem;
}
/* Flex governs pane height; drop the 48vh floor so panes don't overflow. */
body.therapy-page #chatBox { min-height: 0; }

/* ============================================================
   Session work area: chat (left) | divider | video (center)
   Desktop: side-by-side, each pane scrolls internally, the chat|video
   divider is draggable. Phone/tablet: stacked (video on top, chat below).
   ============================================================ */
body.therapy-page .session-work {
    display: flex;
    flex: 1;
    min-height: 0;
}
body.therapy-page .chat-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}
/* With video present the chat takes a resizable share (--chat-width);
   on its own it fills the row. */
body.therapy-page .session-work.has-video .chat-pane {
    flex: 0 0 var(--chat-width, 42%);
    min-width: 0;          /* drag governs the size; JS keeps a 32px grab strip */
}
body.therapy-page .session-work:not(.has-video) .chat-pane {
    flex: 1 1 auto;
}
body.therapy-page .video-pane {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    margin-left: 0;
}
body.therapy-page .video-pane > .card-body { min-height: 100%; }

/* Transcript toggle — hide the chat pane (and its divider) so the video goes
   full-width for when people are just talking. Header button toggles it back. */
body.therapy-page .session-work.chat-hidden .chat-pane,
body.therapy-page .session-work.chat-hidden > .split-divider { display: none; }
body.therapy-page .session-work.chat-hidden .video-pane { flex: 1 1 auto; }

/* Vertical drag divider between chat and video — clearly visible grip. */
.split-divider {
    flex: 0 0 14px;
    align-self: stretch;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: col-resize;
    touch-action: none;
}
.split-divider::before {                 /* faint full-height seam */
    content: "";
    position: absolute;
    top: 6px; bottom: 6px; left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: #d3e2dd;
    border-radius: 2px;
}
.split-divider .split-grip {             /* the visible handle */
    position: relative;
    width: 7px;
    height: 60px;
    border-radius: 6px;
    background: rgba(15, 60, 55, 0.30);
    box-shadow: 0 1px 4px rgba(15, 60, 55, 0.20);
    transition: background 0.15s, height 0.15s;
}
.split-divider:hover .split-grip,
body.sw-resizing .split-divider .split-grip {
    background: var(--teal-primary);
    height: 84px;
}
body.sw-resizing, body.sw-resizing * { user-select: none; cursor: col-resize !important; }
body.sw-resizing .chat-pane, body.sw-resizing .video-pane { transition: none !important; }

/* Larger, centered video tiles so people feel face-to-face. */
/* Responsive video grid — fits ≥4 tiles (2×2) in the visible pane on a laptop,
   and the pane scrolls vertically for 5+. */
#rtcVideoGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-content: start;
    position: relative;         /* anchor for the floating self-view (below) */
}
.rtc-tile {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 72vh;           /* a single expanded remote fills the width but stays on-screen */
    background: #000;
    border-radius: 0.6rem;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(15, 60, 55, 0.18);
}
/* "Shrink my video" — self-view only, LOCAL to this browser (others are unaffected).
   The user's own tile is pulled OUT of the grid and floated as a small picture-in-
   picture FIXED in the bottom-right corner, so the remaining participants expand to
   fill the whole area — no reserved empty slot / gap. (Not draggable.) */
#rtcVideoGrid.self-mini [data-tile="local"] {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: clamp(120px, 20%, 200px);
    max-width: 200px;
    margin: 0;
    z-index: 5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    cursor: grab;            /* draggable: move your own PiP anywhere in the video area */
    touch-action: none;      /* let touch drag the tile instead of scrolling the page */
}
/* When self-view is small, the remaining participants fill the width. The high
   specificity (id) also overrides the mobile per-tile width clamp (.rtc-tile width:
   clamp(...) in the ≤991.98px media query), so "shrink to fill" works on phones too. */
#rtcVideoGrid.self-mini .rtc-tile:not([data-tile="local"]) { width: 100%; }

/* ---- Full screen for a monitor room -------------------------------------
   The FULLSCREENED element is the whole video pane, not the grid. Fullscreen
   shows only the element it was given, so fullscreening the grid alone hid the
   Exit and Brighten controls and left the phone's own "drag from the top" as the
   only way out.

   iPhone Safari will not fullscreen a container at all — it only hands a single
   <video> to the iOS native player, which drops the Brighten filter and the tile
   labels with it. So where the element API is missing we cover the viewport
   ourselves with .fill-window, which keeps the page and works everywhere.

   :fullscreen and :-webkit-full-screen are written as SEPARATE rules on purpose:
   a browser that does not know one selector discards the whole rule it sits in,
   which would take the others with it. */
#rtcLive.fill-window {
    position: fixed;
    inset: 0;
    /* Above the app chrome (sticky/fixed sit at 1020-1030) but BELOW Bootstrap's
       modal backdrop at 1050 — a consent or licensure prompt must never open
       behind the video. */
    z-index: 1040;
    margin: 0;
}
#rtcLive.fill-window         { display: flex; flex-direction: column; background: #000; padding: 8px; }
#rtcLive:fullscreen          { display: flex; flex-direction: column; background: #000; padding: 8px; }
#rtcLive:-webkit-full-screen { display: flex; flex-direction: column; background: #000; padding: 8px; }

/* The grid takes whatever height is left under the controls. */
#rtcLive.fill-window #rtcVideoGrid,
#rtcLive:fullscreen #rtcVideoGrid {
    flex: 1 1 auto; min-height: 0; height: auto;
    grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 4px;
}
#rtcLive:-webkit-full-screen #rtcVideoGrid {
    flex: 1 1 auto; min-height: 0; height: auto;
    grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 4px;
}

/* Filling the screen is only half the job: the TILE has to grow too. Left alone
   it keeps `aspect-ratio: 4/3`, `max-height: 72vh` and — on phones — the
   `width: clamp(160px, 42vw, 280px)` from the mobile media query, which showed a
   small tile in the corner of a black screen. */
#rtcLive.fill-window .rtc-tile,
#rtcLive:fullscreen .rtc-tile {
    width: 100%; height: 100%; max-width: none; max-height: none;
    aspect-ratio: auto; border-radius: 0; box-shadow: none;
}
#rtcLive:-webkit-full-screen .rtc-tile {
    width: 100%; height: 100%; max-width: none; max-height: none;
    aspect-ratio: auto; border-radius: 0; box-shadow: none;
}

/* `contain` by default: the tile sets object-fit:cover inline, which crops to
   fill — fine for a face in a call, wrong for a monitor, where cropping can put
   the very thing being watched outside the frame. The Fill button opts back into
   cropping when filling the screen matters more than seeing all of it. */
#rtcLive.fill-window video,
#rtcLive:fullscreen video { object-fit: contain !important; }
#rtcLive:-webkit-full-screen video { object-fit: contain !important; }
#rtcLive.fill-window.video-fill video,
#rtcLive:fullscreen.video-fill video { object-fit: cover !important; }
#rtcLive:-webkit-full-screen.video-fill video { object-fit: cover !important; }

/* Shrink still works inside full screen. The rules above size EVERY tile to
   fill, which would otherwise blow the shrunken self-view back up. */
#rtcLive.fill-window #rtcVideoGrid.self-mini [data-tile="local"],
#rtcLive:fullscreen #rtcVideoGrid.self-mini [data-tile="local"] {
    position: absolute; right: 12px; bottom: 12px;
    width: clamp(120px, 20%, 200px); height: auto;
    aspect-ratio: 4 / 3; border-radius: 0.6rem;
}
#rtcLive:-webkit-full-screen #rtcVideoGrid.self-mini [data-tile="local"] {
    position: absolute; right: 12px; bottom: 12px;
    width: clamp(120px, 20%, 200px); height: auto;
    aspect-ratio: 4 / 3; border-radius: 0.6rem;
}

/* The participant label. Moved out of an inline style so full screen can lift it
   clear of the phone's gesture bar and make it readable at arm's length. */
.rtc-tile-label {
    position: absolute; left: 4px; bottom: 2px;
    font-size: .7rem; color: #fff;
    background: rgba(0, 0, 0, .5); padding: 0 4px; border-radius: 3px;
}
#rtcLive.fill-window .rtc-tile-label,
#rtcLive:fullscreen .rtc-tile-label {
    left: 12px; bottom: 14px; font-size: .95rem; padding: 2px 8px;
}
#rtcLive:-webkit-full-screen .rtc-tile-label {
    left: 12px; bottom: 14px; font-size: .95rem; padding: 2px 8px;
}

/* Brighten a dim picture — the watcher's screen only. Nothing is sent differently
   and the camera is never touched, so this cannot clash with the background
   processor (LiveKit allows one processor per track). Deliberately NOT applied to
   the self-view: you should see your own camera as it really is. */
#rtcVideoGrid.brighten-low  .rtc-tile:not([data-tile="local"]) video { filter: brightness(1.45) contrast(1.08); }
#rtcVideoGrid.brighten-high .rtc-tile:not([data-tile="local"]) video { filter: brightness(1.9) contrast(1.18); }

/* ---- Clearly visible scrollbars in the session room ---- */
body.therapy-page .chat-window .card-body,
body.therapy-page .video-pane {
    scrollbar-width: thin;                       /* Firefox */
    scrollbar-color: var(--teal-primary) #e3efeb;
}
body.therapy-page .chat-window .card-body::-webkit-scrollbar,
body.therapy-page .video-pane::-webkit-scrollbar {
    width: 11px;
}
body.therapy-page .chat-window .card-body::-webkit-scrollbar-track,
body.therapy-page .video-pane::-webkit-scrollbar-track {
    background: #e3efeb;
    border-radius: 10px;
}
body.therapy-page .chat-window .card-body::-webkit-scrollbar-thumb,
body.therapy-page .video-pane::-webkit-scrollbar-thumb {
    background: var(--teal-primary);
    border-radius: 10px;
    border: 2px solid #e3efeb;
}
body.therapy-page .chat-window .card-body::-webkit-scrollbar-thumb:hover,
body.therapy-page .video-pane::-webkit-scrollbar-thumb:hover {
    background: var(--teal-dark);
}

/* Phone/tablet: stack the panes (video on top, chat below) with a draggable
   horizontal divider that resizes their heights (one grows, the other shrinks). */
@media (max-width: 991.98px) {
    body.therapy-page .session-work { flex-direction: column; }
    body.therapy-page .video-pane {
        order: 0;
        flex: 0 0 var(--video-height, 38vh);
        min-height: 60px;
        margin-left: 0;
    }
    body.therapy-page .split-divider {
        order: 1;
        flex: 0 0 18px;
        width: 100%;
        height: 18px;
        align-self: auto;
        cursor: row-resize;
    }
    body.therapy-page .split-divider::before {     /* seam becomes horizontal */
        top: 50%; bottom: auto; left: 8px; right: 8px;
        width: auto; height: 2px;
        transform: translateY(-50%);
    }
    body.therapy-page .split-divider .split-grip { /* grip becomes horizontal */
        width: 60px; height: 7px;
    }
    body.therapy-page .split-divider:hover .split-grip,
    body.sw-resizing .split-divider .split-grip { width: 84px; height: 7px; }
    body.therapy-page .session-work.has-video .chat-pane {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 60px;
    }
    body.sw-resizing, body.sw-resizing * { cursor: row-resize !important; }
    .rtc-tile { width: clamp(160px, 42vw, 280px); }
}

/* ---- Responsive tweaks ---- */
@media (max-width: 991px) {
    /* Tablet: shrink hero so content fits without scrolling */
    .hero-icon { width: 70px; height: 70px; }
    .hero-icon .bi { font-size: 2.5rem !important; }
}

@media (max-width: 576px) {
    /* Mobile: tighten further */
    .hero-icon { width: 56px; height: 56px; }
    .hero-icon .bi { font-size: 2rem !important; }
    .bubble { max-width: 88%; }
    .therapy-card .card-body { padding: 1rem 0.75rem; }
    h1.display-5 { font-size: 1.8rem; }
}

/* ============================================================
   Fit-to-viewport: tighten every page so the whole thing fits
   on common laptop heights without page scrolling. Applies on
   shorter viewports only — tall monitors keep the original look.
   ============================================================ */
@media (max-height: 900px) {
    main.container { padding-top: 0.85rem !important; padding-bottom: 0.6rem !important; }

    /* Hero / display sizes */
    .display-1 { font-size: 3.25rem !important; }
    .display-3 { font-size: 2.4rem !important; }
    .display-4 { font-size: 2rem !important; }
    .display-5 { font-size: 1.85rem !important; }

    /* Hero icon containers (home + auth + join + progress) */
    .hero-icon       { width: 70px; height: 70px; margin-bottom: 0.5rem !important; }
    .hero-icon .bi   { font-size: 2.4rem !important; }
    .therapy-icon    { width: 60px; height: 60px; }
    .therapy-icon .bi{ font-size: 2.1rem !important; }

    /* Heading + text rhythm */
    h1, h2 { font-size: 1.5rem !important; }
    h3     { font-size: 1.3rem !important; }
    .lead  { font-size: 0.95rem; }

    /* Card paddings */
    .card-body.p-4 { padding: 1rem !important; }
    .card-body.p-5 { padding: 1.25rem !important; }

    /* Section margins — collapse the most generous ones */
    .mb-5 { margin-bottom: 1rem !important; }
    .mb-4 { margin-bottom: 0.75rem !important; }
    .mt-5 { margin-top: 1rem !important; }
    .mt-4 { margin-top: 0.75rem !important; }
    .py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
    .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
}

@media (max-height: 800px) {
    /* Catches 1366×768 laptops which the 900-rule didn't tighten enough */
    main.container { padding-top: 0.6rem !important; padding-bottom: 0.5rem !important; }
    .display-1 { font-size: 2.8rem !important; }
    .display-3 { font-size: 2.1rem !important; }
    .display-4 { font-size: 1.85rem !important; }
    .display-5 { font-size: 1.65rem !important; }
    .hero-icon       { width: 60px; height: 60px; }
    .hero-icon .bi   { font-size: 2.1rem !important; }
    .therapy-icon    { width: 52px; height: 52px; }
    .therapy-icon .bi{ font-size: 1.85rem !important; }
    .mb-4 { margin-bottom: 0.6rem !important; }
    .mb-3 { margin-bottom: 0.5rem !important; }
    .mt-3 { margin-top: 0.5rem !important; }
    .py-5 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .therapy-card .card-body { padding: 0.85rem !important; }
}

@media (max-height: 760px) {
    main.container { padding-top: 0.5rem !important; padding-bottom: 0.4rem !important; }

    .display-1 { font-size: 2.6rem !important; }
    .display-3 { font-size: 2rem !important; }
    .display-4 { font-size: 1.7rem !important; }
    .display-5 { font-size: 1.5rem !important; }

    .hero-icon       { width: 56px; height: 56px; }
    .hero-icon .bi   { font-size: 2rem !important; }
    .therapy-icon    { width: 48px; height: 48px; }
    .therapy-icon .bi{ font-size: 1.7rem !important; }

    h1, h2 { font-size: 1.3rem !important; }
    h3     { font-size: 1.15rem !important; }
    .lead  { font-size: 0.9rem; }

    .card-body.p-4, .card-body.p-5 { padding: 0.75rem !important; }
    .card-body.p-3 { padding: 0.6rem !important; }

    .mb-5, .mb-4 { margin-bottom: 0.5rem !important; }
    .mb-3 { margin-bottom: 0.4rem !important; }
    .mt-5, .mt-4 { margin-top: 0.5rem !important; }
    .py-5, .py-4 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }

    /* Disclaimer bar takes less vertical room */
    .disclaimer-bar { font-size: 0.72rem; line-height: 1.35; padding: 0.25rem 0.5rem !important; }
}



/* ---- Auth status badges: allow wrapping so they never push the row past viewport ---- */
.auth-status-row .badge {
    white-space: normal;
    text-align: left;
    line-height: 1.3;
    max-width: 100%;
}

/* ---- Auth: extra-tight on small phones ---- */
@media (max-width: 575.98px) {
    .auth-status-row { margin-bottom: 0.5rem !important; gap: 0.25rem !important; }
    .auth-status-row .badge { padding: 0.15rem 0.5rem !important; font-size: 0.72rem; }
    /* Drop the "Please read and agree" header text on tiny screens — the boxes speak for themselves. */
    #continueBtn ~ p, .auth-please-read { display: none; }
    /* Drop the under-18 helper line so all 3 consent boxes are equal-height and short. */
    .consent-item .text-muted { display: none; }
    .consent-item { padding: 0.4rem !important; font-size: 0.78rem; }
}

/* ---- Privacy banner: collapsed by default on phones, force-visible on ≥sm ---- */
.privacy-banner { display: flex; }   /* default for ≥sm */
@media (max-width: 575.98px) {
    /* On phones the .collapse Bootstrap class hides it; toggle button reveals it. */
    .privacy-banner.collapse:not(.show) { display: none; }
    .privacy-banner.collapse.show { display: flex; }
}
@media (min-width: 576px) {
    /* Above sm, always visible regardless of collapse state. */
    .privacy-banner.collapse { display: flex !important; }
}

/* ---- Feedback page: aggressive phone tightening ---- */
@media (max-width: 575.98px) {
    /* Single-line textareas with auto-grow on focus would be ideal; keep it simple
       with a 40 px collapsed height — still typable, just scrolls inside. */
    #feedbackForm textarea.form-control {
        min-height: 40px !important;
        height: 40px;
        padding: 0.25rem 0.55rem;
        font-size: 0.82rem;
        line-height: 1.3;
    }
    /* Drop char counters on phones — they distract from the small viewport. */
    #feedbackForm .form-text { display: none; }
    /* Tighter label rhythm. */
    #feedbackForm .form-label { margin-bottom: 0.1rem; font-size: 0.74rem; }
    /* Tighter row gaps inside the form. */
    #feedbackForm .row { --bs-gutter-y: 0.3rem; }
    #feedbackForm .mb-3 { margin-bottom: 0.25rem !important; }
    /* Smaller rating circles on phone. */
    #feedbackForm .rating-btn { width: 26px; height: 26px; padding: 0; font-size: 0.72rem; }
    /* Smaller pay-pill buttons. */
    #feedbackForm .pay-btn { padding: 0.1rem 0.55rem; font-size: 0.75rem; }
    /* Compact submit button. */
    #feedbackSubmitBtn { padding: 0.35rem 0.75rem !important; font-size: 0.82rem; }
    /* Compact card padding. */
    #feedbackForm { font-size: 0.85rem; }
    /* Drop the long "additional features" label wording on phone — tighter. */
    label[for="desiredFeatures"] { font-size: 0.74rem !important; }
}
/* Trim feedback card padding on phone */
@media (max-width: 575.98px) {
    body main.container .card .card-body.p-3 { padding: 0.55rem !important; }
}

/* ---- Floating feedback button (bottom-right by default; user-draggable) ---- */
.feedback-fab {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #2196F3;          /* material blue */
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    z-index: 1040;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    text-decoration: none;
    cursor: grab;
    touch-action: none;          /* prevents touch-drag from scrolling the page */
    user-select: none;
    -webkit-user-select: none;
}
.feedback-fab.is-dragging {
    cursor: grabbing;
    transition: none;
}
.feedback-fab:hover,
.feedback-fab:focus {
    background-color: #1976D2;         /* darker blue on hover */
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    outline: none;
}
.feedback-fab i {
    font-size: 1.4rem;
    line-height: 1;
}
@media (max-width: 576px) {
    .feedback-fab {
        width: 48px;
        height: 48px;
        bottom: 5rem;          /* clear the chat input on therapy/reflection pages */
        right: 0.9rem;
    }
    .feedback-fab i {
        font-size: 1.2rem;
    }
}

/* ============================================================
   Therapist co-pilot console — private side panel
   ============================================================ */
.therapist-console {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--tc-width, 360px);
    max-width: 92vw;
    bottom: 0;                 /* top:0 + bottom:0 fills the height under page zoom */
    background: #f7faf9;
    border-left: 1px solid #e2e9e7;
    box-shadow: -8px 0 28px rgba(15, 60, 55, 0.10);
    display: flex;
    flex-direction: column;
    z-index: 1045;          /* above chat, below Bootstrap modals (1050+) */
    transition: transform 0.22s ease;
}
.therapist-console.collapsed { transform: translateX(calc(100% - 46px)); }

/* Drag handle on the panel's left edge — resize chat vs Co-Pilot (linked: one
   grows, the other shrinks; no overlap). Desktop only; hidden when collapsed. */
:root { --tc-width: 360px; }
.tc-resize-handle {
    position: absolute;
    left: -4px; top: 0;
    width: 9px; height: 100%;
    cursor: ew-resize;
    z-index: 3;
    touch-action: none;
}
.tc-resize-handle::after {
    content: ""; position: absolute; left: 1px; top: 50%; transform: translateY(-50%);
    width: 7px; height: 60px; border-radius: 6px;
    background: rgba(15, 60, 55, 0.30); box-shadow: 0 1px 4px rgba(15, 60, 55, 0.20);
    transition: background 0.15s, height 0.15s;
}
.tc-resize-handle:hover::after, body.tc-resizing .tc-resize-handle::after {
    background: var(--teal-primary); height: 84px;
}
.therapist-console.collapsed .tc-resize-handle { display: none; }
@media (max-width: 991.98px) { .tc-resize-handle { display: none; } }
body.tc-resizing, body.tc-resizing * { user-select: none; }
body.tc-resizing .therapist-console, body.tc-resizing main { transition: none !important; }

/* Expand handle — only shown when collapsed; stays on-screen so the panel
   can always be reopened. */
.tc-expand-handle {
    display: none;
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 46px;
    height: 100%;
    /* Solid teal tab so it's visible on any theme and fills the whole visible
       sliver — the entire strip is the click target, not a thin invisible line. */
    background: linear-gradient(180deg, var(--teal-primary) 0%, var(--green-dark) 100%);
    border: none;
    color: #fff;
    cursor: pointer;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    z-index: 5;                 /* above the (hidden) header/body in the sliver */
}
.therapist-console.collapsed .tc-expand-handle {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
}
.therapist-console.collapsed .tc-body { opacity: 0; pointer-events: none; }

.tc-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    background: linear-gradient(135deg, var(--teal-primary) 0%, var(--green-dark) 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 121, 107, 0.18);
}
.tc-title { font-weight: 700; font-size: 0.98rem; display: flex; align-items: center; }
.tc-badge {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 0.08rem 0.5rem;
}
.tc-actions { margin-left: auto; display: flex; gap: 0.2rem; }
.tc-icon-btn {
    background: transparent;
    border: none;
    color: #fff;
    opacity: 0.92;
    padding: 0.2rem 0.4rem;
    border-radius: 7px;
    cursor: pointer;
    line-height: 1;
}
.tc-icon-btn:hover { background: rgba(255, 255, 255, 0.18); }
.tc-icon-btn.active { background: rgba(255, 255, 255, 0.30); }

.tc-body { display: flex; flex-direction: column; flex: 1; min-height: 0; transition: opacity 0.15s ease; }

.tc-status {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.74rem;
    color: var(--text-muted);
    padding: 0.45rem 0.85rem;
    background: #eef4f2;
    border-bottom: 1px solid #e2e9e7;
}
.tc-status::before {
    content: "";
    width: 0.5rem; height: 0.5rem;
    border-radius: 50%;
    background: var(--teal-primary);
    flex-shrink: 0;
    animation: tcPulse 1.8s ease-in-out infinite;
}
.therapist-console.tc-muted .tc-status::before { animation: none; opacity: 0.3; }
@keyframes tcPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.tc-cards {
    flex: 1;
    overflow-y: auto;
    padding: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.tc-empty {
    text-align: center;
    color: #93a29e;
    font-size: 0.8rem;
    line-height: 1.4;
    padding: 2.5rem 1.2rem;
}
.tc-empty i { font-size: 1.7rem; display: block; margin-bottom: 0.45rem; opacity: 0.7; }

.tc-card {
    position: relative;
    background: var(--surface);
    border: 1px solid #e8eeec;
    border-left: 3px solid var(--teal-primary);
    border-radius: 11px;
    padding: 0.55rem 1.7rem 0.6rem 0.7rem;
    box-shadow: 0 2px 6px rgba(15, 60, 55, 0.05);
    animation: tcCardIn 0.22s ease;
}
@keyframes tcCardIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.tc-card-question    { border-left-color: var(--teal-primary); }
.tc-card-technique   { border-left-color: var(--green-primary); }
.tc-card-observation { border-left-color: #fd7e14; }
.tc-card-reference   { border-left-color: #6f42c1; }
.tc-card-risk,
.tc-card-urgent {
    /* Dark surface like the other card types. Previously a light-pink box, which
       left the shared light body text (var(--text-dark)) unreadable on it. Urgency
       now reads from the red border + red label + top-pinning, not a light box. */
    background: var(--surface);
    border-color: rgba(239, 83, 80, 0.45);
    border-left-color: #ef5350;
}
.tc-card-label {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--teal-dark);
    margin-bottom: 0.2rem;
}
.tc-card-technique   .tc-card-label { color: var(--green-dark); }
.tc-card-observation .tc-card-label { color: #c2570a; }
.tc-card-reference   .tc-card-label { color: #6f42c1; }
.tc-card-risk .tc-card-label,
.tc-card-urgent .tc-card-label { color: #ef5350; }
/* Co-pilot reply — a direct private answer to a therapist note. Tinted so it
   reads as the co-pilot "speaking back", distinct from suggestion cards. */
.tc-card-reply {
    border-left-color: var(--teal-primary);
    /* Opaque so the near-white body text stays readable: a teal wash over the dark
       card surface. The old translucent-only fill composited light and hid the answer. */
    background: linear-gradient(rgba(0, 150, 136, 0.16), rgba(0, 150, 136, 0.16)), var(--surface);
}
.tc-card-reply .tc-card-label { color: #4fd6c6; }
.tc-reply-q {
    font-size: 0.74rem; line-height: 1.35; font-style: italic;
    color: var(--text-muted);
    border-left: 2px solid rgba(255, 255, 255, 0.18);
    padding-left: 0.5rem; margin-bottom: 0.35rem;
}
.tc-card-text { font-size: 0.86rem; line-height: 1.4; color: var(--text-dark); }
.tc-card-code {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.35rem;
}
.tc-code-link {
    display: inline-block;
    padding: 0.08rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #4c2a85;
    background: #f1ebfb;
    border: 1px solid #ddcdf3;
    border-radius: 4px;
    text-decoration: none;
}
.tc-code-link:hover { background: #e7dcfa; border-color: #c9b3ee; text-decoration: underline; }
.tc-code-tp {
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a6fc0;
    margin-left: -0.1rem;
}
.tc-card-source { margin-top: 0.25rem; font-size: 0.66rem; line-height: 1.3; color: var(--text-muted, #6c757d); }
.tc-dismiss {
    position: absolute;
    top: 0.3rem;
    right: 0.35rem;
    background: transparent;
    border: none;
    color: #b6c2bf;
    cursor: pointer;
    line-height: 1;
    padding: 0.1rem;
    font-size: 0.95rem;
}
.tc-dismiss:hover { color: var(--text-dark); }

.tc-notes {
    display: flex;
    gap: 0.45rem;
    padding: 0.65rem;
    border-top: 1px solid #e2e9e7;
    background: var(--surface);
}
.tc-notes textarea { resize: none; border-radius: 9px; font-size: 0.84rem; }
.tc-notes .btn { border-radius: 9px; }

@media (max-width: 576px) {
    .therapist-console { width: 90vw; }
}

/* Shift page content so the console never covers the chat (desktop only) */
@media (min-width: 992px) {
    body.tcp-console-open main { padding-right: var(--tc-width, 360px); transition: padding-right 0.22s ease; }
    body.tcp-console-open.tcp-collapsed main { padding-right: 46px; }
}

/* ============================================================
   Therapist-led session pages — calm, polished treatment.
   Applied via body.tcp-session (1:1, and therapist-led couple/group).
   Consumer couple/group/solo pages never receive this class.
   ============================================================ */
body.tcp-session {
    background: linear-gradient(180deg, #eef5f3 0%, #f6f4ee 100%);
}
body.tcp-session .session-private-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #00695c;
    background: #d8efe9;
    border: 1px solid #bfe3da;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}
body.tcp-session .chat-window {
    border: 1px solid #e3ece9 !important;
    box-shadow: 0 10px 30px rgba(15, 60, 55, 0.08) !important;
    background: var(--surface);
}
body.tcp-session #chatBox { min-height: 48vh; }
body.tcp-session .alert-share { border: 1px solid #cfe6df; }
body.tcp-session .input-group {
    box-shadow: 0 8px 22px rgba(15, 60, 55, 0.10) !important;
    border: 1px solid #e3ece9;
}
body.tcp-session .chat-input { background: var(--surface); }
body.tcp-session .bubble { border-radius: 15px; }


/* ============================================================
   DARK THEME — global override layer
   Re-skins Bootstrap components, in-file light tints, and the
   page-specific classes (billing / therapist / co-pilot console)
   for the dark palette. Uses !important so it also beats the
   non-!important inline backgrounds set in templates/JS.
   Brand greens/teals stay as accents (buttons, navbar, links).
   ============================================================ */

/* ---- Surfaces ---- */
.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group,
.list-group-item,
.accordion-item,
.accordion-button,
.toast,
.popover,
.tcp-card,
.plan-card,
.tcp-step,
.resume-item,
.mode-btn {
    background-color: var(--surface) !important;
    color: var(--text-dark);
    border-color: var(--border-dk) !important;
}
.bg-white, .bg-light { background-color: var(--surface) !important; }

/* ---- Text ---- */
.text-dark, .text-body, .text-black,
.plan-name, .plan-price, .plan-feat,
.tcp-step-title, .mb-title { color: var(--text-dark) !important; }
.plan-price small { color: var(--text-muted) !important; }
.text-muted, small.text-muted,
.plan-feat.off, .tcp-step-text, .mb-sub, .mb-arrow { color: var(--text-muted) !important; }
.plan-feat.off i { color: #5a6b66 !important; }
a { color: #5fd0c2; }
a:hover { color: #8fe0d5; }

/* ---- Form controls ---- */
.form-control, .form-select, .input-group-text,
textarea, input[type="text"], input[type="email"], input[type="number"], input[type="search"] {
    background-color: var(--surface-2) !important;
    color: var(--text-dark) !important;
    border-color: var(--border-dk) !important;
}
.form-control::placeholder, textarea::placeholder { color: var(--text-muted) !important; opacity: 1; }

/* ---- Borders & dividers ---- */
.border, .border-top, .border-bottom, .border-start, .border-end,
hr, .dropdown-divider { border-color: var(--border-dk) !important; }

/* ---- Dropdown items ---- */
.dropdown-item { color: var(--text-dark); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--surface-2); color: var(--text-dark); }

/* ---- Tables ---- */
.table { color: var(--text-dark); --bs-table-bg: transparent; border-color: var(--border-dk); }

/* ---- Alerts → dark tinted variants ---- */
.alert-info, .alert-share, .alert-info-teal {
    background: rgba(0,150,136,.14) !important;
    border-color: rgba(0,150,136,.40) !important;
    color: #b9e8e2 !important;
}
.alert-success {
    background: rgba(76,175,80,.16) !important;
    border-color: rgba(76,175,80,.42) !important;
    color: #bdeec0 !important;
}
.alert-warning {
    background: rgba(255,193,7,.14) !important;
    border-color: rgba(255,193,7,.40) !important;
    color: #f2d493 !important;
}
.alert-danger {
    background: rgba(211,47,47,.16) !important;
    border-color: rgba(211,47,47,.45) !important;
    color: #f3b6b6 !important;
}

/* ---- App-specific light tints from the base stylesheet ---- */
.disclaimer-bar { background-color: #2a2410 !important; border-bottom-color: #4a3f15 !important; color: #e7d9a6 !important; }
.footer-bar { background: var(--surface) !important; border-top-color: var(--border-dk) !important; }
.consent-item { background: var(--surface) !important; border-color: var(--border-dk) !important; color: var(--text-dark) !important; }
.consent-item:hover, .consent-item:has(.consent-check:checked) { background: var(--green-pale) !important; }
.tcp-ack { background: var(--green-pale) !important; border-color: rgba(0,150,136,.4) !important; }
.tcp-ack label { color: var(--text-dark) !important; }
.resume-item:hover { background: var(--surface-2) !important; }
.mode-btn:not(:disabled):hover, .mode-btn:not(:disabled):focus-visible { background: var(--surface-2) !important; }

/* ---- Co-pilot console + summary overlay ---- */
#tcSummaryOverlay .tcs-body { color: var(--text-dark) !important; }
#tcSummaryOverlay .tcs-h { color: var(--text-muted) !important; }
#tcSummaryOverlay .tcs-note { color: var(--text-muted) !important; }
.tcs-client { background: rgba(76,175,80,.12) !important; border-color: rgba(76,175,80,.35) !important; color: var(--text-dark) !important; }
.tcs-disclaimer { background: rgba(255,193,7,.12) !important; border-color: rgba(255,193,7,.35) !important; color: #f2d493 !important; }
.tc-code-link { background: var(--surface-2) !important; border-color: var(--border-dk) !important; color: #b9a9e8 !important; }
.tc-code-link:hover { background: #2e2545 !important; border-color: #4b3d72 !important; }

/* Modal close button + bootstrap icons inversion where needed */
.modal-header .btn-close, .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* ---- Dark-mode QA fixes (contrast) ---- */
/* Outline-secondary buttons (Unmute/Camera, OAuth, etc.) read clearly on dark */
.btn-outline-secondary {
    color: #cdd8d4 !important;
    border-color: var(--border-dk) !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    background: var(--surface-2) !important;
    color: #ffffff !important;
    border-color: var(--border-dk) !important;
}
/* Live-session header banners — bump bg opacity + brighten text for readability */
.alert-share {
    background: rgba(0,150,136,.18) !important;
    border-color: rgba(0,150,136,.42) !important;
    color: #dcefe9 !important;
}
.alert-share small, .alert-share strong, .alert-share .font-monospace { color: #dcefe9 !important; }
/* Privacy line is now nested inside the Session ID box — no own background, so
   the whole box is one uniform colour. The divider comes from .border-top. */
.privacy-banner {
    background: transparent !important;
    color: #dcefe9 !important;
}
.privacy-banner .small, .privacy-banner small, .privacy-banner strong,
.privacy-banner span, .privacy-banner a { color: #dcefe9 !important; }

/* ---- Session header banners — bulletproof dark contrast (QA round 2) ----
   Higher specificity (tag.class.class / #id) + solid bg + explicit child text
   colors so nothing dark-on-dark survives. */
div.alert.alert-share {
    background-color: #15403A !important;
    border: 1px solid rgba(0,150,136,.55) !important;
    color: #eaf5f2 !important;
}
div.alert.alert-share small,
div.alert.alert-share strong,
div.alert.alert-share .font-monospace,
div.alert.alert-share i.bi { color: #eaf5f2 !important; }

#privacyBanner.alert {
    background-color: #15403A !important;
    border: 1px solid rgba(0,150,136,.55) !important;
}
#privacyBanner,
#privacyBanner div,
#privacyBanner small,
#privacyBanner .small,
#privacyBanner strong,
#privacyBanner span,
#privacyBanner a { color: #eaf5f2 !important; }
#privacyBanner a { text-decoration: underline; }

/* ---- Co-pilot chattiness control (Chattiness: More / Less / Stop) ---- */
/* The co-pilot panel is light (#f7faf9), so these are bold black for visibility. */
.tc-cadence { display: flex; align-items: center; gap: 4px; padding: 4px 10px 0; font-size: .74rem; }
.tc-cadence-label { color: #000; font-weight: 700; margin-right: 2px; }
.tc-cad-btn {
    border: 1px solid #999;
    background: transparent;
    color: #000;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 10px;
    font-size: .74rem;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.tc-cad-btn:hover { border-color: var(--teal-primary); }
.tc-cad-btn.active { background: var(--teal-primary); color: #fff; border-color: var(--teal-primary); }

/* Co-pilot card ↔ source chat message link.
   A linked card is clickable; clicking it flashes the triggering chat bubble. */
.tc-card-linked { cursor: pointer; }
.tc-card-linked:hover { box-shadow: inset 0 0 0 1px rgba(0, 150, 136, 0.55); }
.chat-msg-highlight .bubble,
.chat-msg-highlight .bubble-partner,
.chat-msg-highlight .bubble-ai {
    outline: 2px solid #ffb300;
    box-shadow: 0 0 0 4px rgba(255, 179, 0, 0.28);
    transition: outline 0.2s ease, box-shadow 0.2s ease;
}

/* Floating, non-modal windows (Progress + content links) — draggable by the
   header, resizable from all 8 edges/corners. See floating-window.js. */
.floating-window {
    position: fixed;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    background: var(--surface, #16211d);
    color: var(--text-dark, #eaf5f2);
    border: 1px solid rgba(0, 150, 136, 0.45);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    min-width: 280px;
    min-height: 180px;
}
.floating-window[hidden] { display: none; }
.fw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    cursor: move;
    background: rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    user-select: none;
}
.fw-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-close {
    background: transparent; border: 0; color: inherit; cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 3px 7px; border-radius: 6px;
}
.fw-close:hover { background: rgba(255, 255, 255, 0.14); }
.fw-body { flex: 1; min-height: 0; }
.fw-body iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
/* Resize handles (invisible hit areas on each edge/corner). */
.fw-rs { position: absolute; z-index: 2; }
.fw-n { top: -3px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.fw-s { bottom: -3px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.fw-e { top: 10px; bottom: 10px; right: -3px; width: 8px; cursor: ew-resize; }
.fw-w { top: 10px; bottom: 10px; left: -3px; width: 8px; cursor: ew-resize; }
.fw-ne { top: -3px; right: -3px; width: 14px; height: 14px; cursor: nesw-resize; }
.fw-nw { top: -3px; left: -3px; width: 14px; height: 14px; cursor: nwse-resize; }
.fw-se { bottom: -3px; right: -3px; width: 14px; height: 14px; cursor: nwse-resize; }
.fw-sw { bottom: -3px; left: -3px; width: 14px; height: 14px; cursor: nesw-resize; }
@media (max-width: 768px) {
    .fw-rs { display: none; }            /* no resize on touch */
    .fw-header { cursor: default; }
}

/* ------------------------------------------------------------------------
   Co-Pilot panel — LIGHT theme (2026-08-05)
   Only the Co-Pilot panel flips to a light card list with dark, readable
   text; the rest of the clinician-led session page stays dark. These rules
   override the shared dark surface/text ONLY on .therapist-console .tc-*,
   so nothing else on the page is affected. Colour accents (left borders +
   category labels) are kept for meaning; card bodies darkened for contrast.
   -------------------------------------------------------------------------- */
.therapist-console .tc-card        { background: #ffffff; }
.therapist-console .tc-card-text   { color: #20302c; }
.therapist-console .tc-card-source { color: #6c757d; }
.therapist-console .tc-reply-q     { color: #5b6b66; border-left-color: rgba(0, 0, 0, 0.12); }
.therapist-console .tc-status      { color: #5b6b66; }
.therapist-console .tc-empty       { color: #7d8d88; }
.therapist-console .tc-dismiss     { color: #9aa8a3; }
.therapist-console .tc-dismiss:hover { color: #20302c; }

/* Risk / urgent: light red tint instead of dark; darker red label for contrast. */
.therapist-console .tc-card-risk,
.therapist-console .tc-card-urgent { background: #fdecea; }
.therapist-console .tc-card-risk  .tc-card-label,
.therapist-console .tc-card-urgent .tc-card-label { color: #d32f2f; }

/* Co-pilot reply: light teal tint; readable teal label. */
.therapist-console .tc-card-reply { background: #e6f7f4; }
.therapist-console .tc-card-reply .tc-card-label { color: #00796b; }

/* ICD code chips — undo the app-wide dark override; restore the light lavender. */
.therapist-console .tc-code-link { background: #f1ebfb !important; border-color: #ddcdf3 !important; color: #4c2a85 !important; }
.therapist-console .tc-code-link:hover { background: #e7dcfa !important; border-color: #c9b3ee !important; }

/* "Private note to the co-pilot" box — light with dark text (beats the global
   .form-control dark !important). */
.therapist-console .tc-notes { background: #f7faf9; }
.therapist-console .tc-notes textarea.form-control { background: #ffffff !important; color: #20302c !important; border-color: #cfe0db !important; }
.therapist-console .tc-notes textarea.form-control::placeholder { color: #8a9a95 !important; }