/* ==========================================================================
   FILE        assets/assistant.css
   UPLOAD TO   public_html/assets/assistant.css
   LOAD        by el_page_end, with Ask EdgelitCV's markup, for a signed-in
               customer on welcome, account, the CV builder and the Updater
   WHAT IT IS  Ask EdgelitCV's look (spec 011, FR-2; Section 3, Option 1 of
               the mock-ups Jace chose on 28 October): a button at the
               bottom right; a panel 380 px wide from the right edge on a
               computer, the page unchanged beneath it; the whole screen on
               a phone. The site's own tokens (edgelit.css), so it reads as
               part of the page.
   VERSION     R35b (2026-10-29)
   NOTE        ?v=r35b: R35 as far as 31e669f went live with R36 (pull request
               #77, 28 October 23:47); the rest (the star and "Ask EdgelitCV"
               on every screen) changes this sheet again, so browsers must
               fetch it anew. R37 (?v=r37) went live first; r35b has never
               been served, so it still reaches every browser fresh.
   CHANGES     R35b (Jace's Q8): the round button is a small star and "Ask
               EdgelitCV" on every screen; ask-full needs no rules of its own.
               R37 (the review's fix 6): a visitor's End and delete, a quiet
               44 px button above the panel's note, on every width.
               R35 (spec 012): the header's Ask EdgelitCV item, lit while the
               assistant is open; on a computer the panel's top is set below
               the header by assistant.js; its list of three (Translucent,
               Scaled to fit, Page only) and the two views; on a phone a
               sheet over the lower part of the screen, the page fitted and
               usable above it; the round button sits in its head, lit,
               where Close was, and shuts it, so the phone's sheet has no
               Close; the round button is a small star and "Ask EdgelitCV"
               on every screen (Jace).
               R34 (spec 011, FR-15): the Undo on a change's line.
               R31 (spec 011, slice S1): first version.

   Unlayered, and loaded after the page's own sheets: the CV app puts the
   site's sheets in a cascade layer and AES's rules for its content win over
   them, so these rules, outside any layer, win for the assistant's own
   elements without !important. Every selector is the assistant's own.
   ========================================================================== */

.ask-btn[hidden] { display: none; }
/* R35: the header's item reads as the other links (edgelit.css); lit while the assistant is open. */
header.nav .nav-links a.nav-ask[hidden] { display: none; }
header.nav .nav-links a.nav-ask { cursor: pointer; }

/* R35 (spec 012, FR-7, FR-8): the list of three under the header's item, and the two views on a computer. */
.ask-views[hidden] { display: none; }
.ask-views {
  position: fixed; z-index: 80; display: flex; flex-direction: column; gap: 2px; min-width: 210px; padding: 6px;
  border-radius: 12px; border: 1px solid rgba(220,232,255,.35); background: var(--panel, #162133);
  box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 24px rgba(220,232,255,.15);
}
.ask-view {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 10px 14px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-2, #C9D4E6); text-align: left; cursor: pointer;
  font: 700 .8rem/1.2 var(--f-head, "Orbitron", system-ui, sans-serif); letter-spacing: .04em;
}
.ask-view::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(220,232,255,.5); flex: 0 0 auto; }
.ask-view[aria-pressed="true"] { background: rgba(220,232,255,.12); color: #FFFFFF; }
.ask-view[aria-pressed="true"]::before { background: var(--edge, #DCE8FF); box-shadow: 0 0 10px var(--edge, #DCE8FF); border-color: transparent; }
.ask-view:hover { background: rgba(220,232,255,.08); color: #FFFFFF; }
.ask-view:focus-visible { outline: 2px solid var(--edge, #DCE8FF); outline-offset: 1px; }
/* While the panel is open the round button would sit under it (and show through it): it stands aside. */
html.ask-open .ask-btn { visibility: hidden; }
/* Translucent: the backlit page seen through the panel; its words keep their own solid bubbles. */
html.ask-see .ask-panel { background: rgba(16,24,38,.55); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
/* Scaled to fit: the page in the space left of the panel, scaled down whole (assistant.js sets --ask-z). */
html.ask-fit { padding-right: 380px; }
html.ask-fit body > :not(dialog):not(.ask-btn):not(.ask-views):not(script):not(link):not(style) { zoom: var(--ask-z, 1); }
header.nav .nav-links a.nav-ask[aria-expanded="true"] { color: var(--edge, #DCE8FF); text-shadow: 0 0 12px rgba(220,232,255,.55); }
.ask-btn {
  position: fixed; z-index: 45;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 12px 18px 12px 14px; margin: 0;
  border-radius: 999px; border: 1px solid rgba(220,232,255,.5);
  background: var(--panel, #162133); color: var(--ink, #EEF3FB);
  font: 700 .85rem/1 var(--f-head, "Orbitron", system-ui, sans-serif); letter-spacing: .05em; text-transform: none;
  box-shadow: 0 0 0 1px rgba(220,232,255,.15), 0 10px 30px rgba(0,0,0,.5), 0 0 24px rgba(220,232,255,.25);
  cursor: pointer;
}
.ask-btn:hover { border-color: var(--edge, #DCE8FF); }
.ask-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--edge, #DCE8FF); box-shadow: 0 0 12px var(--edge, #DCE8FF); flex: 0 0 auto; }
/* R35 (Jace): the button is a small four-point star and "Ask EdgelitCV", on a computer and a phone alike. The markup
   also carries the dot and the word "AI" (el-page.php), which stay hidden; .ask-ai, by contrast, is a reply's line. */
.ask-btn .ask-dot { display: none; }
.ask-star { display: block; flex: 0 0 auto; width: 14px; height: 14px; fill: var(--edge, #DCE8FF); filter: drop-shadow(0 0 5px rgba(220,232,255,.9)); }
.ask-btn .ask-w-ai { display: none; }

.ask-panel {
  position: fixed; z-index: 70; inset: 0 0 0 auto;
  width: 380px; max-width: 100vw; height: 100%; max-height: none; margin: 0; padding: 0;
  background: var(--bg, #101826); color: var(--ink, #EEF3FB);
  border: 0; border-left: 1px solid rgba(220,232,255,.35); box-shadow: -20px 0 60px rgba(0,0,0,.6);
  font: 500 1.02rem/1.45 var(--f-body, "Rajdhani", system-ui, sans-serif);
}
.ask-panel[open] { display: flex; flex-direction: column; }
.ask-panel::backdrop { background: rgba(6,10,18,.55); }
.ask-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 14px; border-bottom: 1px solid var(--line, rgba(220,232,255,.14));
}
.ask-head h2 { margin: 0; font: 700 1rem/1.2 var(--f-head, "Orbitron", sans-serif); letter-spacing: .05em; color: #FFFFFF; outline: none; }
.ask-sub { margin: 6px 0 0; font: 400 .7rem/1.3 var(--f-mono, ui-monospace, monospace); letter-spacing: .18em; text-transform: uppercase; color: var(--mute, #A8B5CB); }
.ask-close, .ask-send {
  min-height: 44px; min-width: 64px; padding: 10px 14px; border-radius: 10px; cursor: pointer;
  font: 700 .8rem/1.2 var(--f-head, "Orbitron", sans-serif); letter-spacing: .04em;
}
.ask-close { background: transparent; color: var(--ink-2, #C9D4E6); border: 1px solid var(--line, rgba(220,232,255,.25)); }
.ask-send { background: var(--edge, #DCE8FF); color: var(--btn-ink, #06122B); border: 0; }
.ask-send:disabled { opacity: .5; cursor: default; }
.ask-lines { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ask-line { max-width: 88%; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-line.ask-ai, .ask-line.ask-did, .ask-line.ask-not { align-self: flex-start; background: var(--panel-2, #1B2840); border: 1px solid var(--line, rgba(220,232,255,.14)); border-top-left-radius: 4px; }
.ask-line.ask-you { align-self: flex-end; background: var(--edge, #DCE8FF); color: var(--btn-ink, #06122B); border-top-right-radius: 4px; }
.ask-line.ask-did, .ask-line.ask-not { font-size: .92rem; color: var(--ink-2, #C9D4E6); }
.ask-undo { display: block; margin-top: 8px; min-height: 44px; min-width: 64px; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--ink, #EEF3FB); border: 1px solid rgba(220,232,255,.35); font: 700 .78rem/1.2 var(--f-head, "Orbitron", sans-serif); }
.ask-undo:disabled { opacity: .5; cursor: default; }
.ask-where { display: block; margin-bottom: 4px; font: 400 .66rem/1.2 var(--f-mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.ask-empty { color: var(--mute, #A8B5CB); }
.ask-status { margin: 0; padding: 0 18px; min-height: 1.2em; font-size: .9rem; color: var(--mute, #A8B5CB); }
.ask-form { display: flex; gap: 8px; align-items: flex-end; padding: 12px 18px; border-top: 1px solid var(--line, rgba(220,232,255,.14)); }
.ask-form textarea {
  flex: 1; min-width: 0; min-height: 44px; max-height: 160px; resize: vertical; margin: 0;
  padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(220,232,255,.25);
  background: var(--panel, #162133); color: var(--ink, #EEF3FB); font: inherit;
}
.ask-note { margin: 0; padding: 0 18px calc(12px + env(safe-area-inset-bottom, 0px)); font-size: .78rem; line-height: 1.35; color: var(--mute, #A8B5CB); }
/* R37 (the review's fix 6): a visitor's End and delete, quiet beside the Send button, and shown on a phone too (where
   .ask-close is hidden, so it has a class of its own). */
.ask-end { margin: 0; padding: 0 18px 8px; }
.ask-end button { min-height: 44px; padding: 8px 14px; border-radius: 10px; cursor: pointer; background: transparent;
  color: var(--ink-2, #C9D4E6); border: 1px solid var(--line, rgba(220,232,255,.25)); font: 700 .78rem/1.2 var(--f-head, "Orbitron", sans-serif); }
.ask-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 720px) {
  /* R35 (spec 012, FR-9, Jace's choice b): on a phone a sheet over the lower part of the screen, the page still in
     view and usable above it (the sheet is not modal). */
  .ask-panel { width: 100vw; border-left: 0; top: 42vh; top: 42dvh; height: 58vh; height: 58dvh;
    border-top: 1px solid rgba(220,232,255,.45); border-radius: 18px 18px 0 0; box-shadow: 0 -20px 60px rgba(0,0,0,.6); }
  /* Jace's Q7 (image 3): while the sheet is open the round button sits in its head, at the right, where Close was, lit,
     and shuts it; so the sheet has no Close on a phone (Escape and the menu's item shut it too). Its words on one line. */
  html.ask-open .ask-btn { visibility: visible; z-index: 75; top: calc(42vh + 12px); top: calc(42dvh + 12px); bottom: auto;
    right: 16px; white-space: nowrap; padding: 10px 14px 10px 12px;
    border-color: var(--edge, #DCE8FF); box-shadow: 0 0 0 1px rgba(220,232,255,.4), 0 0 22px rgba(220,232,255,.55); }
  .ask-close { display: none; }
  html.ask-open .ask-head { padding-right: 196px; }   /* the button's words, in full, beside the head's */
  /* The page gets room at its foot while the sheet is open, so all of it scrolls into view above the sheet. */
  html.ask-split body { padding-bottom: 58vh; padding-bottom: 58dvh; }
  .ask-head { padding-top: 14px; }
  .ask-btn { padding: 12px 16px 12px 12px; }
}
/* ask-full (the landing page's button, R36) asked for the star and the full name; every button now has them, so the
   class needs no rules of its own. */
@media (prefers-reduced-motion: reduce) {
  .ask-btn, .ask-panel { transition: none; }
}