/* ═══════════════════════════════════════════════════════════════════════
   CORVUS — the site assistant, rebuilt to the platform's Socrates pattern.

   Mo, 2026-09-15: *"fix corvus ai assistant menu to look exactly like socrates
   style in the platform and have exact buttons and functionality like it"* ·
   *"use crow.json ... in the full width of the heading with no other text"* ·
   *"ensure the bg of the heading and the chat popup is very dark navy so corvus
   animation can be seen and very semi transparent"* · *"for the popup avatar
   before opening use corvus black bird.json"*.

   Geometry, motion and the tool row are ported from `chs-fab` / `chs-pop` in
   the platform's `public/frontend/meducatetheme/css/consult-hub.css` so the two
   assistants feel like one product. What deliberately DIFFERS is the palette,
   and it differs because of the artwork:

   ⭐⭐ SOCRATES' PANEL IS LIT — a gold wash over a blue-grey glass at 20–52%
      fill. Corvus' crow is a DARK bird. Dropped onto that surface it is a
      silhouette on a bright ground and reads as a smudge. So this panel runs
      the other way: a deep navy at high opacity behind the artwork, low
      opacity elsewhere. That is not a style preference, it is what makes a
      black bird legible, and it is exactly what Mo asked for in those words.

   ⚠ Prefix is `cv-`, never `chs-`: the two systems must never collide if a page
     ever loads both.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --cv-navy-deep: 3, 12, 30;      /* the ground the crow is read against */
    --cv-gold: #ECA424;
    --cv-honey: #FFDAA4;
}

/* ── floating button ──────────────────────────────────────────────────────
   Socrates' FAB is a gold disc carrying his face. Corvus' bird is dark, so the
   disc is navy with a gold rim instead — same silhouette, inverted for the art
   it holds. */
.cv-fab {
    position: fixed; right: 26px; bottom: 26px; z-index: 9600;
    width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
    background: radial-gradient(120% 120% at 50% 15%, rgba(40, 72, 140, .95), rgba(var(--cv-navy-deep), .98) 70%);
    box-shadow: 0 10px 30px rgba(2, 15, 36, .55), 0 0 0 1px rgba(236, 164, 36, .45), 0 4px 12px rgba(0, 0, 0, .45);
    display: flex; align-items: center; justify-content: center;
    transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease;
    animation: cv-bob 5.5s ease-in-out infinite;
    color: var(--cv-honey);
}
.cv-fab::before {
    content: ""; position: absolute; inset: -7px; border-radius: 50%;
    border: 2px solid rgba(236, 164, 36, .45);
    animation: cv-halo 2.6s ease-out infinite; pointer-events: none;
}
.cv-fab:hover { transform: scale(1.08); box-shadow: 0 14px 38px rgba(236, 164, 36, .4), 0 0 0 1px rgba(236, 164, 36, .7), 0 6px 16px rgba(0, 0, 0, .5); }
.cv-fab:focus-visible { outline: 2px solid var(--cv-gold); outline-offset: 4px; }

/* The bird fills the disc; 256x256 square artwork, so a square box. */
.cv-fab-art { width: 42px; height: 42px; display: block; pointer-events: none; }
.cv-fab-art svg { width: 100% !important; height: 100% !important; display: block; }

.cv-fab-x { display: none; width: 26px; height: 26px; }
.cv-fab.is-open { animation: none; }
.cv-fab.is-open .cv-fab-art { display: none; }
.cv-fab.is-open .cv-fab-x { display: block; }

@keyframes cv-bob  { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes cv-halo { 0% { transform: scale(.9); opacity: .85; } 70%, 100% { transform: scale(1.45); opacity: 0; } }

.cv-fab-tag {
    position: absolute; right: 74px; top: 50%; transform: translateY(-50%) translateX(6px);
    background: rgba(var(--cv-navy-deep), .94); color: var(--cv-honey);
    border: 1px solid rgba(236, 164, 36, .4);
    font-family: var(--font-subhead, system-ui); font-size: 12px; letter-spacing: .04em;
    padding: 7px 13px; border-radius: 10px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.cv-fab:hover .cv-fab-tag { opacity: 1; transform: translateY(-50%) translateX(0); }
.cv-fab.is-open .cv-fab-tag { display: none; }

/* ── the popup ──────────────────────────────────────────────────────────── */
.cv-pop {
    position: fixed; right: 24px; bottom: 102px; z-index: 9599;
    width: min(396px, calc(100vw - 28px));
    height: min(620px, calc(100dvh - 132px));
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(190, 205, 245, .18);
    /* "very dark navy ... and very semi transparent" — a deep navy body at 62%
       so the page diffuses through it, with the blur doing the heavy lifting.
       Socrates sits at 20–52% over a gold wash; this is darker on purpose. */
    background:
        radial-gradient(130% 70% at 50% 0%, rgba(40, 72, 140, .30), transparent 64%),
        linear-gradient(160deg, rgba(10, 28, 64, .62), rgba(var(--cv-navy-deep), .78) 58%, rgba(1, 8, 22, .86));
    -webkit-backdrop-filter: blur(46px) saturate(190%);
    backdrop-filter: blur(46px) saturate(190%);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, .66),
        0 0 0 1px rgba(236, 164, 36, .14),
        inset 0 1px 0 rgba(255, 255, 255, .12);
    transform-origin: 100% 100%;
    opacity: 0; transform: translateY(16px) scale(.92); pointer-events: none;
    transition: opacity .26s ease, transform .3s cubic-bezier(.34, 1.4, .64, 1);
}
.cv-pop.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* ── the header: the crow, full width, and nothing else ───────────────────
   ⚠ 1800x450 artwork = 4:1. `aspect-ratio` holds the band before the animation
     has loaded, so the panel does not jump when it arrives.
   ⚠ The ground here is the DARKEST surface in the component — near-opaque navy
     — because a dark bird over a translucent panel would show the page through
     its own body. This is the one place transparency is traded away, and it is
     traded for the thing Mo asked to be able to see. */
.cv-head {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 4 / 1;
    background:
        radial-gradient(90% 140% at 50% 0%, rgba(58, 96, 178, .38), transparent 70%),
        linear-gradient(180deg, rgba(1, 9, 24, .96), rgba(var(--cv-navy-deep), .92));
    border-bottom: 1px solid rgba(236, 164, 36, .24);
    overflow: hidden;
}
.cv-head-art { position: absolute; inset: 0; }
.cv-head-art svg { width: 100% !important; height: 100% !important; display: block; }

/* The tools float over the artwork rather than taking a row of their own — the
   header is the crow, by instruction, so nothing may push it smaller. */
.cv-tools {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    display: flex; gap: 5px;
}
/* ⚠ The artwork runs edge to edge and its lettering reaches the top-right, so
   the buttons land ON it. A scrim behind the cluster — not behind the whole
   header — separates chrome from art without dimming the crow, which is the
   one thing the header exists to show. */
.cv-tools::before {
    content: ""; position: absolute; inset: -8px -8px -12px -16px; z-index: -1;
    background: radial-gradient(120% 130% at 100% 0%, rgba(1, 9, 24, .72), transparent 72%);
    pointer-events: none;
}
.cv-tool {
    width: 28px; height: 28px; border-radius: 8px; padding: 0;
    display: grid; place-items: center; cursor: pointer;
    background: rgba(1, 9, 24, .55);
    border: 1px solid rgba(190, 205, 245, .20);
    color: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: color .2s, border-color .2s, background .2s;
}
.cv-tool svg { width: 15px; height: 15px; }
.cv-tool:hover { color: var(--cv-gold); border-color: rgba(236, 164, 36, .6); background: rgba(236, 164, 36, .14); }
.cv-tool:focus-visible { outline: 2px solid var(--cv-gold); outline-offset: 2px; }

/* Mirrors Socrates §3.68: the close button is redundant while the FAB two
   centimetres away is already showing an ✕, and is the only way out in
   fullscreen — so it is hidden in the windowed state and returns expanded. */
.cv-close { display: none; }
.cv-pop.is-max .cv-close { display: grid; }

/* ── saved chats ─────────────────────────────────────────────────────────── */
.cv-hist {
    flex: 0 0 auto; max-height: 190px; overflow-y: auto;
    border-bottom: 1px solid rgba(190, 205, 245, .14);
    background: rgba(1, 9, 24, .5);
    padding: 8px;
}
.cv-hist-head {
    font-family: var(--font-mono, monospace); font-size: .62rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--cv-gold); padding: 4px 6px 8px;
}
.cv-hist-item {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: transparent; border: 1px solid transparent; border-radius: 9px;
    color: rgba(255, 255, 255, .8); font-size: .82rem; padding: 8px 10px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-hist-item:hover { background: rgba(236, 164, 36, .12); border-color: rgba(236, 164, 36, .35); color: #fff; }
.cv-hist-empty { color: rgba(255, 255, 255, .45); font-size: .8rem; padding: 6px 10px 10px; }

/* ── messages ────────────────────────────────────────────────────────────── */
.cv-body {
    flex: 1 1 auto; overflow-y: auto; padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
    scrollbar-width: thin;
}
.cv-body::-webkit-scrollbar { width: 5px; }
.cv-body::-webkit-scrollbar-thumb { background: rgba(236, 164, 36, .4); border-radius: 99px; }

.cv-msg { display: flex; animation: cv-rise .28s ease both; }
@keyframes cv-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cv-msg.user { justify-content: flex-end; }

.cv-bubble {
    max-width: 84%; padding: 10px 13px; border-radius: 14px;
    font-size: .92rem; line-height: 1.55; word-wrap: break-word;
}
.cv-msg.user .cv-bubble {
    background: linear-gradient(145deg, var(--cv-honey), var(--cv-gold) 70%);
    color: #041530; border-bottom-right-radius: 5px; font-weight: 500;
}
.cv-msg.ai .cv-bubble {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(190, 205, 245, .16);
    color: rgba(255, 255, 255, .92); border-bottom-left-radius: 5px;
}
.cv-msg.ai .cv-bubble a { color: var(--cv-honey); text-decoration: underline; }

/* thinking dots */
.cv-dots { display: inline-flex; gap: 4px; align-items: center; }
.cv-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--cv-gold); animation: cv-blink 1.2s infinite; }
.cv-dots i:nth-child(2) { animation-delay: .18s; }
.cv-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes cv-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ── starters ─────────────────────────────────────────────────────────────
   ⚠ THEY SIT UNDER THE LAST MESSAGE, NOT AT THE BOTTOM OF THE PANEL (Mo,
     2026-09-15, with a screenshot): *"fix so there is no extra large gap
     between first message and the questions prompts under."*

     The gap was structural, not spacing. `.cv-body` is `flex: 1 1 auto` so it
     takes all the free height, and the starters were its SIBLING — so with one
     short greeting in a 620px panel, the body stretched ~300px and pushed the
     chips to the floor. Moving them INSIDE the body (corvus.js re-appends them
     after each render) makes them flow directly under the last bubble, which is
     where they read as suggested replies rather than as a toolbar. */
.cv-starters { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.cv-starter {
    cursor: pointer; font-size: .76rem; padding: 6px 11px; border-radius: 99px;
    background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .8);
    border: 1px solid rgba(190, 205, 245, .18); transition: background .2s, border-color .2s, color .2s;
}
.cv-starter:hover { background: rgba(236, 164, 36, .16); border-color: rgba(236, 164, 36, .5); color: #fff; }

/* ── guided-flow choices ──────────────────────────────────────────────────
   The chips Corvus offers at every step of the tree — language, category,
   question, yes/no. Same family as `.cv-starter`, deliberately, because they
   do the same job; but stacked rather than wrapped and a size up, because a
   whole question has to stay readable on a 360px phone where a two-word
   starter did not.

   ⚠ `text-align: start`, not `left`, and `dir="auto"` is set on each button in
     corvus.js: half these chips are Arabic, and an Arabic question pinned to
     the left edge of a pill reads as broken even when every glyph is right. */
.cv-choices {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 6px; margin-top: 2px;
}
.cv-choice {
    cursor: pointer; font: inherit; font-size: .84rem; line-height: 1.45;
    max-width: 94%; text-align: start; padding: 9px 14px; border-radius: 13px;
    background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .86);
    border: 1px solid rgba(190, 205, 245, .2);
    transition: background .2s, border-color .2s, color .2s;
}
.cv-choice:hover { background: rgba(236, 164, 36, .16); border-color: rgba(236, 164, 36, .55); color: #fff; }
.cv-choice:focus-visible { outline: 2px solid var(--cv-gold); outline-offset: 2px; }

/* ── the locked composer ──────────────────────────────────────────────────
   ⛔ Corvus does not take free typing until the visitor has walked the tree
      (Mo, 2026-09-16). The lock has to read as GUIDANCE, not as a fault: a
      dead grey box says "this chat is broken", and a visitor who believes that
      leaves rather than tapping a chip. So the field keeps its shape, dims
      only slightly, and its placeholder says what to do instead — the `locked`
      string in includes/corvus-flow.php, in the visitor's own language. */
.cv-input.is-locked input { opacity: .62; cursor: not-allowed; }
.cv-input input:disabled { background: rgba(255, 255, 255, .04); }
.cv-input.is-locked button { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* ── composer ────────────────────────────────────────────────────────────── */
.cv-input {
    flex: 0 0 auto; display: flex; gap: 8px; padding: 11px 12px;
    border-top: 1px solid rgba(190, 205, 245, .14);
    background: rgba(1, 9, 24, .45);
}
.cv-input input {
    flex: 1 1 auto; min-width: 0;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(190, 205, 245, .2); border-radius: 11px;
    padding: 10px 13px; color: #fff; font-size: .9rem; font-family: inherit;
}
.cv-input input::placeholder { color: rgba(255, 255, 255, .42); }
.cv-input input:focus { outline: none; border-color: rgba(236, 164, 36, .65); background: rgba(255, 255, 255, .1); }
.cv-input button {
    flex: 0 0 auto; width: 42px; border-radius: 11px; border: 0; cursor: pointer;
    background: linear-gradient(145deg, var(--cv-honey), var(--cv-gold) 70%);
    color: #041530; display: grid; place-items: center;
    transition: transform .18s var(--ease, ease), filter .18s ease;
}
.cv-input button:hover { transform: translateY(-2px); filter: brightness(1.06); }
.cv-input button:focus-visible { outline: 2px solid var(--cv-gold); outline-offset: 2px; }

/* ── expanded ────────────────────────────────────────────────────────────── */
.cv-pop.is-max {
    right: 0; bottom: 0; top: 0; left: 0;
    width: 100vw; height: 100dvh; border-radius: 0; border: 0;
}
.cv-pop.is-max .cv-head { aspect-ratio: auto; height: clamp(120px, 22vh, 230px); }
.cv-pop.is-max .cv-body { padding-inline: max(14px, calc((100vw - 900px) / 2)); }
body.cv-maxed .cv-fab { display: none; }

/* ── small screens ───────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .cv-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; }
    .cv-fab-art { width: 36px; height: 36px; }
    .cv-pop { right: 8px; left: 8px; bottom: 80px; width: auto; height: min(78dvh, 560px); }
}

@media (prefers-reduced-motion: reduce) {
    .cv-fab { animation: none; }
    .cv-fab::before { animation: none; opacity: 0; }
    .cv-pop { transition: opacity .2s ease; transform: none; }
    .cv-pop.is-open { transform: none; }
    .cv-msg { animation: none; }
}