/* ========================================================================== */
/*  JobsChat.ai — Chat (v4)                                                    */
/*  A premium, Apple-caliber reimagining of the chat surface.                  */
/*  Palette derives from the JobsChat logo gradient:                          */
/*     steel-blue #81B6CC → periwinkle #7A89D3 → violet #705CD8               */
/*  Light is the airy default; dark is a separately-crafted, deep theme.       */
/*  IMPORTANT: this file styles every element js/scripts-test.js depends on    */
/*  or injects at runtime. The JS is never edited; blue (#335FE9) components   */
/*  it injects are re-tinted via high-specificity !important overrides at the  */
/*  very end of this file.                                                     */
/* ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ─── Design tokens — LIGHT (default) ─────────────────────────────────────── */
:root {
  --canvas:        #F6F7FB;
  --surface:       #FFFFFF;
  --elevated:      #FFFFFF;
  --ink:           #1A2036;
  --secondary:     #5B6276;
  --muted:         #9AA0B0;
  --hairline:      #E8EAF1;
  --hairline-soft: #EEF0F6;
  --accent:        #6A5BD0;
  --accent-strong: #5A49C4;
  --accent-grad:   linear-gradient(135deg, #81B6CC 0%, #7A89D3 48%, #705CD8 100%);
  --accent-tint:   rgba(112, 92, 216, .08);
  --accent-tint-2: rgba(112, 92, 216, .14);
  --accent-ring:   rgba(112, 92, 216, .22);

  --history-item:  #F4F5FA;
  --chip-bg:       rgba(255, 255, 255, .72);

  --on-accent:     #FFFFFF;

  --shadow-xs: 0 1px 2px rgba(20, 28, 60, .05);
  --shadow-sm: 0 1px 3px rgba(20, 28, 60, .06);
  --shadow-md: 0 8px 30px rgba(20, 28, 60, .08);
  --shadow-lg: 0 18px 50px rgba(20, 28, 60, .14);

  --radius-lg: 20px;
  --radius:    16px;
  --radius-sm: 12px;
  --radius-xs: 10px;

  --bar-bg:        rgba(246, 247, 251, .72);   /* frosted input bar */
  --bar-bg-solid:  #F6F7FB;                     /* fallback when no blur */
  --panel-bg:      rgba(255, 255, 255, .80);
  --panel-bg-solid:#FFFFFF;

  --error-bg:      #FEF2F4;
  --error-ink:     #B4233A;
  --error-line:    #F7D2D9;

  --code-bg:       rgba(20, 28, 60, .055);

  --scroll-btn-offset: 132px;
}

/* ─── Design tokens — DARK (crafted, not an invert) ───────────────────────── */
body.dark-mode {
  --canvas:        #0F1118;
  --surface:       #181B26;
  --elevated:      #1E2230;
  --ink:           #ECEEF5;
  --secondary:     #AEB4C2;
  --muted:         #757C8C;
  --hairline:      rgba(255, 255, 255, .08);
  --hairline-soft: rgba(255, 255, 255, .06);
  --accent:        #9D8CF2;
  --accent-strong: #B0A2F6;
  --accent-grad:   linear-gradient(135deg, #8FC0D6 0%, #8A97E0 48%, #8674E8 100%);
  --accent-tint:   rgba(157, 140, 242, .14);
  --accent-tint-2: rgba(157, 140, 242, .20);
  --accent-ring:   rgba(157, 140, 242, .30);

  --history-item:  rgba(255, 255, 255, .045);
  --chip-bg:       rgba(255, 255, 255, .05);

  --on-accent:     #FFFFFF;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .30);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .30);
  --shadow-md: 0 10px 34px rgba(0, 0, 0, .45);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, .58);

  --bar-bg:        rgba(15, 17, 24, .66);
  --bar-bg-solid:  #0F1118;
  --panel-bg:      rgba(20, 23, 32, .72);
  --panel-bg-solid:#12141C;

  --error-bg:      #2A1620;
  --error-ink:     #FBC6D0;
  --error-line:    rgba(255, 120, 150, .26);

  --code-bg:       rgba(255, 255, 255, .07);
}

/* Anti-flash: paint the canvas before CSSOM/JS resolve the theme. */
html.jc-pre-dark  { background: #0F1118; }
html.jc-pre-light { background: #F6F7FB; }

/* ─── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* overflow:hidden pins the document so the iOS keyboard can't scroll the page.
   The layout is a fixed viewport with internal scroll regions. */
html, body { margin: 0; padding: 0; height: 100%; min-height: 100%; overflow: hidden; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); }
.bold-links a, #tooltip { font-weight: 700; }

::selection { background: var(--accent-tint-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Shell ───────────────────────────────────────────────────────────────── */
/* height:100% — the JS viewport sizer (for all mobile) overrides this inline
   with the visual-viewport height + a translate, exactly like the production
   chat. The transform it sets makes the fixed .version / #scrollButton resolve
   against .container, pinning them to the visible bottom. */
.container { display: flex; height: 100%; }

/* ─── Side panel ──────────────────────────────────────────────────────────── */
/* Premium separation from the chat: an elevated, faintly-frosted material with
   a soft drop shadow — no hard divider line. */
.panel {
  position: relative;
  width: 280px; max-width: 25vw;
  padding: 18px 16px 14px;
  background: var(--panel-bg-solid);
  color: var(--ink);
  height: 100%;
  z-index: 3;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 8px 0 30px -22px rgba(20, 28, 60, .35);
  transition: transform .34s cubic-bezier(.4, 0, .2, 1);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .panel { background: var(--panel-bg); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
}

.logo-container { text-align: center; padding: 6px 0 14px; flex-shrink: 0; }
.logo-container .logo { height: 30px; width: auto; }

/* History list */
.history {
  flex: 1; min-height: 0;
  overflow-y: auto;
  margin-top: 2px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.history:hover { scrollbar-color: var(--hairline) transparent; }
.history::-webkit-scrollbar { width: 5px; }
.history::-webkit-scrollbar-thumb { background: transparent; border-radius: 10px; }
.history:hover::-webkit-scrollbar-thumb { background: var(--hairline); }
.history::-webkit-scrollbar-track { background: transparent; }
.history, .history div { margin-top: 8px; font-size: .85rem; }

.history-chat {
  padding: 11px 13px;
  cursor: pointer;
  background: var(--history-item);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  line-height: 1.5;
  color: var(--secondary);
}
.history-chat:hover {
  background: var(--accent-tint);
  border-color: var(--accent-tint-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.history-chat strong { color: var(--ink); font-weight: 600; }

.instructions { font-size: .82rem; display: block; text-align: center; color: var(--muted); padding: 8px 6px; }

/* Soft fade where the scrolling history meets the footer buttons. */
.history-overlay {
  position: relative; width: 100%; height: 16px; left: 0; margin-top: 0;
  background: linear-gradient(to bottom, transparent, var(--panel-bg-solid));
  flex-shrink: 0; pointer-events: none;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .history-overlay { background: linear-gradient(to bottom, transparent, var(--panel-bg)); }
}

/* Panel footer buttons */
.panel-buttons {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  flex-shrink: 0;
  margin-bottom: 22px;
  display: flex; flex-direction: column; gap: 2px;
}
.panel-buttons > button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  color: var(--secondary);
  border-radius: var(--radius-xs);
  padding: 9px 12px;
  font-size: .88rem;
  transition: background .18s ease, color .18s ease;
}
.panel-buttons > button i { width: 18px; text-align: center; font-size: .98rem; opacity: .9; }
.panel-buttons > button:hover { background: var(--accent-tint); color: var(--accent); }
.panel-buttons > button a { color: inherit !important; text-decoration: none !important; }
.toggle-button {
  font-family: inherit; font-size: inherit; background: transparent; color: inherit;
  border: none; cursor: pointer; text-align: left;
}

.panel-copyright {
  flex-shrink: 0;
  font-size: .68rem;
  color: var(--muted);
  padding: 0 4px;
  letter-spacing: .01em;
}

/* ─── Chat container ──────────────────────────────────────────────────────── */
.chat-container {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  /* overflow:clip, NOT hidden. `hidden` is a scroll CONTAINER — it has no user
     scrollbar but is still scrollable programmatically. When a field is focused
     the keyboard opens and the app's scrollIntoView() lifts it into view by
     scrolling the nearest scrollable ancestor — which was THIS element — by ~66px,
     and that offset stuck (no scrollbar, nothing resets it), dragging the whole
     scroll area + input bar up and leaving an empty strip below the bar (Android
     only; tapping a suggestion chip skips it because the chip never focuses the
     field). `clip` clips identically but is NOT a scroll container, so it can
     never hold an offset. `hidden` kept first as a fallback for old engines. */
  overflow: hidden;
  overflow: clip;
  background: var(--canvas);
  isolation: isolate;
}
/* Two faint corner glows from the brand gradient behind the canvas. */
.chat-container::before,
.chat-container::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .05;
}
.chat-container::before { top: -14vw; right: -10vw; background: radial-gradient(circle at 30% 30%, #7A89D3, transparent 68%); }
.chat-container::after  { bottom: -16vw; left: -8vw; background: radial-gradient(circle at 70% 70%, #81B6CC, transparent 68%); }
body.dark-mode .chat-container::before { opacity: .16; }
body.dark-mode .chat-container::after  { opacity: .13; }

/* The scroll region. A centered reading column on wide screens; comfortable
   gutters on narrow ones. overflow-anchor:none keeps Chrome from fighting the
   in-flight smooth scrollOnSend() during streaming (inert on Safari). */
.chat-messages {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column;
  padding: 30px max(18px, calc((100% - 800px) / 2)) 14px;
  overflow-y: auto; overflow-x: hidden;
  overflow-anchor: none;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
  /* No CSS scroll-behavior here: the app sets scrollTop=scrollHeight every
     streaming frame for desktop follow; CSS smoothing would animate (and lag)
     each of those. The JS passes behavior:"smooth" explicitly where it wants it
     (scrollOnSend, the scroll-to-bottom button). */
}
.chat-messages::-webkit-scrollbar { width: 7px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 10px; }
.chat-messages::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.chat-messages::-webkit-scrollbar-track { background: transparent; }

/* ─── Welcome / hero — the WOW moment ─────────────────────────────────────── */
.introduction { color: var(--ink); position: relative; }
.introduction #typing-container { display: inline !important; min-height: 40px; margin-top: 50px; }

/* Gradient glow behind the logo mark. */
.welcome-logo-wrap { position: relative; display: inline-block; }
.welcome-logo-wrap::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 50%; transform: translate(-50%, -52%);
  width: 220px; height: 220px; border-radius: 50%;
  background: var(--accent-grad);
  opacity: .22; filter: blur(46px);
  animation: jc-glow-breathe 6s ease-in-out infinite;
}
body.dark-mode .welcome-logo-wrap::before { opacity: .34; }
@keyframes jc-glow-breathe {
  0%, 100% { opacity: .18; transform: translate(-50%, -52%) scale(1); }
  50%      { opacity: .30; transform: translate(-50%, -52%) scale(1.08); }
}
.introduction img { position: relative; display: block; margin: 0 auto; filter: drop-shadow(0 10px 24px rgba(112, 92, 216, .18)); }

/* The greeting line. It is inline-sized (1.5em) in both the HTML and the JS
   WELCOME_HTML; we give it real hero presence with an override scoped to the
   greeting (never the injected .intent-card, which is also a div child). */
.introduction > div:not(.intent-card) {
  font-size: 1.85rem !important;
  line-height: 1.16;
  letter-spacing: -0.025em;
  margin-top: 18px !important;
  color: var(--ink);
}
.introduction::after {
  content: "Search jobs, polish your CV, draft cover letters, or rehearse an interview — all in one chat. ✨";
  display: block;
  max-width: 30ch;
  margin: 12px auto 0;
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--secondary);
}

/* v4 FIX 2: flex row [upload] [textarea flex:1, borderless] [send] with
   align-items:center, so the icons sit at the EXACT vertical center of the
   field in every state. The field's border/shadow/radius live on the wrapper;
   the textarea is transparent and borderless inside it. */
.welcome-input-wrap {
  position: relative;
  margin-top: 30px;
  width: 540px; max-width: 92vw;
  display: flex; align-items: center; gap: 2px;
  padding: 0 8px;
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition: border-color .2s ease, box-shadow .25s ease;
}
.welcome-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-md), 0 0 0 4px var(--accent-ring);
}
.welcome-input-wrap textarea {
  flex: 1 1 auto; min-width: 0;
  padding: 16px 6px; margin: 0;
  font-size: 1rem; font-family: inherit;
  color: var(--ink);
  background: transparent; border: none; outline: none; box-shadow: none;
  resize: none;
  min-height: 56px; max-height: 150px; line-height: 1.5;
  scrollbar-width: none; -ms-overflow-style: none;
}
.welcome-input-wrap textarea::-webkit-scrollbar { width: 0; height: 0; }
.welcome-input-wrap textarea::placeholder { color: var(--muted); opacity: 1; }
.welcome-input-wrap button {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 40px; padding: 0;
  background: transparent; border: none; border-radius: 10px;
  color: var(--accent); cursor: pointer;
  font-size: 1.12rem;
  transition: color .18s ease, transform .18s ease, background .18s ease;
}
.welcome-input-wrap button:hover { color: var(--accent-strong); background: var(--accent-tint); transform: translateX(1px); }
.welcome-cv-btn {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  cursor: pointer; color: var(--secondary);
  transition: background .18s ease, color .18s ease;
}
.welcome-cv-btn:hover { background: var(--accent-tint); color: var(--accent); }
.welcome-cv-btn i { font-size: 18px; pointer-events: none; }

/* Suggestion chips */
.welcome-suggestions {
  margin-top: 18px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
  max-width: 540px;
}
.welcome-chip {
  font-family: inherit; font-size: .86rem; font-weight: 500;
  color: var(--secondary);
  background: var(--chip-bg);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, background .18s ease;
}
.welcome-chip:hover {
  color: var(--accent);
  border-color: var(--accent-tint-2);
  background: var(--accent-tint);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.welcome-chip:active { transform: translateY(0); }

/* ─── Messages ────────────────────────────────────────────────────────────── */
.user-message, .ai-message {
  position: relative;
  overflow-wrap: anywhere;
}
/* The gentle entrance is ONLY for freshly-created user bubbles. The assistant
   bubble is the SAME element that was the typing indicator (its class is swapped
   from .typing-indicator to .ai-message), so an entrance animation on
   .ai-message re-fires at that swap and fades the logo out + slides it up from
   below — the reported flicker. The original has no entrance on the assistant
   bubble; keeping it off here matches that. */
.user-message {
  animation: jc-msg-in .32s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes jc-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* User: right-aligned, the brand gradient as a subtle signature, no tail. */
.user-message {
  align-self: flex-end;
  max-width: 80%;
  width: fit-content;
  margin: 4px 0 16px auto;
  padding: 11px 16px;
  background: var(--accent-grad);
  color: var(--on-accent);
  border-radius: 18px 18px 6px 18px;
  white-space: pre-wrap; word-wrap: break-word; text-align: left;
  font-size: .95rem; line-height: 1.55;
  box-shadow: 0 6px 18px -8px rgba(112, 92, 216, .55), var(--shadow-xs);
}
.user-message.file-name {
  display: inline-flex; align-items: center;
  font-weight: 500;
}
.user-message.file-name i { opacity: .92; }

/* Assistant: clean flat text — no bubble, no dot, no tail. */
.ai-message {
  align-self: stretch;
  max-width: 100%;
  margin: 2px 0 20px;
  padding: 0;
  color: var(--ink);
  font-size: .96rem; line-height: 1.68;
  background: none; border: none; box-shadow: none;
}
.ai-message::after, .ai-message::before { content: none !important; }
.ai-message > :first-child { margin-top: 0; }
.ai-message > :last-child  { margin-bottom: 0; }

/* Live streaming block — flows as ordinary prose. */
.jc-live-block { display: block; }
.jc-live-block:empty { display: none; }

/* ─── Thinking state ──────────────────────────────────────────────────────── */
/* Box-identical to .ai-message (same display, padding, font metrics, alignment)
   so the logo spinner sits at the EXACT same position before and after the JS
   swaps this element's class from .typing-indicator to .ai-message — no vertical
   jump at the hand-off. (The spinner itself is reused, never recreated.) */
.typing-indicator {
  align-self: stretch;
  display: block;
  max-width: 100%;
  margin: 2px 0 16px;
  padding: 0;
  font-size: .96rem; line-height: 1.68;
  background: none; border: none; box-shadow: none;
}
.typing-indicator::after, .typing-indicator::before { content: none !important; }

.ai-message .status-block { margin: 2px 0; display: block; }
.ai-message .status-main {
  display: flex; align-items: center; justify-content: flex-start; gap: 9px;
  font-size: 1rem; line-height: 1.4;
  color: var(--ink); font-weight: 500;
}
.ai-message .status-main .status-main-text { flex: 0 1 auto; }
.ai-message .status-main .blinking-caret,
.ai-message .status-main .my-blinking-caret { display: inline-flex; align-items: center; }

.ai-message .status-sub,
.ai-message .temp-status {
  margin-top: 5px; line-height: 1.3;
  font-size: .8rem; font-weight: 500; position: relative;
  background: linear-gradient(90deg, var(--muted) 0%, var(--accent) 50%, var(--muted) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: jc-status-shimmer 1.5s ease-in-out infinite;
}
.ai-message .temp-status { display: block; }
@keyframes jc-status-shimmer {
  0%   { background-position: 200% 0; opacity: .6; }
  50%  { background-position: 100% 0; opacity: 1; }
  100% { background-position: 0 0;   opacity: .6; }
}

/* ─── Logo spinner / sparkle caret (mechanism ported from production) ──────── */
.lm-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lm-host {
  position: relative; display: inline-flex !important;
  width: 27px !important; height: 1em !important;
  vertical-align: middle; overflow: visible !important;
  animation: none !important; opacity: 1 !important;
}
.lm-host .lm-svg { position: absolute; left: 50%; top: 50%; width: 27px; height: 27px; transform: translate(-50%, -50%); }
.lm-hub { transform-box: view-box; transform-origin: 50% 50%; animation: lm-pop 1.73s ease-in-out infinite; }
@keyframes lm-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(.7); } }

.sparkle-cursor {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 18px !important; height: 18px !important; position: relative;
  vertical-align: text-bottom; margin-left: 2px; background: none !important;
}
.sparkle-cursor svg.star { position: absolute; fill: var(--accent); transition: fill .2s; }
.sparkle-cursor .star-lg { width: 14px; height: 14px; animation: sparkle-lg 1.4s ease-in-out infinite; }
.sparkle-cursor .star-sm { width: 8px; height: 8px; top: -2px; right: -1px; animation: sparkle-sm 1.4s ease-in-out infinite; }
@keyframes sparkle-lg { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.35); opacity: .25; } }
@keyframes sparkle-sm { 0%, 100% { transform: scale(.35); opacity: .25; } 50% { transform: scale(1); opacity: 1; } }

@keyframes blink-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.my-blinking-caret { display: inline-block; width: 2px; background-color: var(--ink); animation: blink-caret 1s infinite; margin-left: 2px; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; background-color: var(--accent-tint-2); } }
.blinking-caret { display: inline-block; width: 2px; height: 1em; background-color: var(--ink); animation: blink 1s infinite; }
@keyframes blink_after { 50% { border-color: var(--accent-tint-2) transparent transparent; } }
.blink { animation: blink 1s linear; }
.blink::after { animation: blink_after 1s linear; }

/* Sending dots (inside the send button) */
.typing-dots { position: relative; width: 42px; height: 5px; }
.dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: typingIndicator 1.4s infinite; }
/* All three lefts are EXPLICIT — a tight, even cluster like the original. The
   original only set dots 2 & 3 and let dot 1 fall back to its auto "static
   position", which resolved differently inside v4's flex composer (bunching one
   gap). Pinning all three to 14/21/28 gives even 7px steps and keeps them close
   together (2px apart) in every context. */
.dot:nth-child(1) { left: 14px; }
.dot:nth-child(2) { left: 21px; animation-delay: .2s; }
.dot:nth-child(3) { left: 28px; animation-delay: .4s; }
@keyframes typingIndicator { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }

/* ─── Markdown inside .ai-message ─────────────────────────────────────────── */
.md-p { margin: .55em 0; }
.md-p:first-child { margin-top: 0; }
.md-p:last-child  { margin-bottom: 0; }

.ai-message h1, .ai-message h2, .ai-message h3,
.ai-message h4, .ai-message h5, .ai-message h6 {
  font-weight: 600; line-height: 1.3; margin: .9em 0 .4em; letter-spacing: -0.01em; color: var(--ink);
}
.ai-message h1 { font-size: 1.32rem; }
.ai-message h2 { font-size: 1.16rem; }
.ai-message h3 { font-size: 1.05rem; }
.ai-message h4, .ai-message h5, .ai-message h6 { font-size: 1rem; }

.ai-message a, .ai-message a:visited { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-tint-2); transition: border-color .18s ease; }
.ai-message a:hover { border-bottom-color: var(--accent); }

.ai-message ul, .ai-message ol { margin: .5em 0; padding-left: 1.4em; }
.ai-message li { margin: .22em 0; }
.ai-message li::marker { color: var(--muted); }
.ai-message li > ul, .ai-message li > ol { margin: .2em 0; }
.ai-message ul:has(li > input[type="checkbox"]) { list-style: none; padding-left: .2em; }
.ai-message li > input[type="checkbox"] { margin-right: .5em; vertical-align: middle; accent-color: var(--accent); }

.ai-message blockquote {
  margin: .7em 0; padding: .3em 0 .3em 1em;
  border-left: 3px solid var(--accent);
  color: var(--secondary);
}
.ai-message hr { border: 0; border-top: 1px solid var(--hairline); margin: 1.1em 0; }

.ai-message :not(pre) > code {
  background: var(--code-bg);
  padding: .12em .38em; border-radius: 6px;
  font-size: .88em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.ai-message pre {
  background: var(--code-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: 14px 16px; margin: .7em 0;
  overflow-x: auto; max-width: 100%;
}
.ai-message pre code {
  background: none; padding: 0; font-size: .86em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre;
}

.ai-message table {
  border-collapse: collapse; margin: .7em 0; font-size: .9em;
  display: block; overflow-x: auto; max-width: 100%;
}
.ai-message th, .ai-message td { border: 1px solid var(--hairline); padding: 7px 11px; text-align: left; }
.ai-message thead th { background: var(--accent-tint); font-weight: 600; }
.ai-message tbody tr:nth-child(even) { background: rgba(20, 28, 60, .03); }
body.dark-mode .ai-message tbody tr:nth-child(even) { background: rgba(255, 255, 255, .035); }

.ai-message img { max-width: 100%; height: auto; border-radius: var(--radius-xs); }

/* ─── Job result cards ────────────────────────────────────────────────────── */
.jc-card-list { margin: 10px 0 6px; }
.jc-card-list .bold-links { min-width: 0; }
.jc-card-list .bold-links a { font-weight: 600; color: var(--accent); border-bottom: 1px solid transparent; transition: border-color .18s ease; }
.jc-card-list .bold-links a:hover { border-bottom-color: var(--accent); }
.jc-card-list img { display: block; border-radius: 11px !important; box-shadow: var(--shadow-xs); background: var(--surface); }
.jc-card-list .fade-in { opacity: 0; transition: opacity .3s; }
.jc-card-list .fade-in[data-loaded="yes"] { opacity: 1; }

/* The card is a flex row built inline by JS — we add the surface/padding it
   doesn't set inline (background/border/radius/padding/shadow are free to take). */
.jc-card-list > div {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 13px 15px !important;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.jc-card-list > div:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-tint-2);
}
.jc-card-list .bold-links { color: var(--secondary); font-size: .92rem; line-height: 1.5; }
.jc-card-list .bold-links strong { color: var(--ink); font-weight: 600; }

.jc-card-list .jc-card-extra {
  font-size: .85rem; color: var(--secondary);
  margin-top: 3px; display: flex; align-items: center; gap: 7px;
}
.jc-card-list .jc-card-extra i { width: 14px; text-align: center; opacity: .7; color: var(--accent); }

/* ─── Dividers (search warnings) ──────────────────────────────────────────── */
.divider { position: relative; margin: 26px 0; text-align: center; }
.divider-text {
  background: var(--canvas); color: var(--secondary);
  padding: 0 16px; position: relative; z-index: 1; font-size: .86rem;
}
.divider-text i { margin-right: 4px; color: var(--accent); }
.divider::before, .divider::after { content: ''; position: absolute; width: 46%; height: 1px; top: 50%; background: var(--hairline); }
.divider::before { left: 0; }
.divider::after { right: 0; }

/* ─── Error bubble (distinct soft card; assistant text is otherwise flat) ──── */
.error-message {
  align-self: flex-start;
  width: fit-content; max-width: 88%;
  margin: 2px 0 16px;
  padding: 11px 15px !important;
  background: var(--error-bg) !important;
  color: var(--error-ink) !important;
  border: 1px solid var(--error-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  font-size: .94rem; line-height: 1.55;
}

/* ─── Intent card ─────────────────────────────────────────────────────────── */
.intent-card {
  position: relative;
  margin: 16px auto 0;
  padding: 14px 18px 14px 42px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: .92rem; line-height: 1.55; text-align: left;
  max-width: 420px;
  box-shadow: var(--shadow-md);
}
.intent-card .sparkle-cursor {
  position: absolute !important; top: 15px; left: 13px;
  margin-left: 0 !important; vertical-align: baseline !important;
}

/* Intent blur */
.chat-blur { filter: blur(3px); opacity: .4; pointer-events: none; transition: filter .4s ease, opacity .4s ease; }
/* visual-focus is applied by the JS on load to hint at the input. We deliberately
   give it NO ring so no box appears around the field before the user taps it —
   the real focus ring shows only on actual focus via :focus-within. */

/* ─── Recovery placeholder ────────────────────────────────────────────────── */
/* (JS injects a baseline #jc-bg-recovery-styles; we refine it on-brand.) */
.jc-bg-placeholder { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; }
.jc-bg-placeholder .jc-bg-text {
  font-size: .92rem; font-weight: 500; line-height: 1.45;
  background: linear-gradient(90deg, var(--muted) 0%, var(--accent) 50%, var(--muted) 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
  animation: jc-status-shimmer 1.6s ease-in-out infinite !important;
}

/* ─── Input bar (frosted) ─────────────────────────────────────────────────── */
.chat-input {
  --composer-w: min(720px, 92%);
  position: relative;
  display: flex; justify-content: center; align-items: center;
  padding: 14px 0 calc(34px + env(safe-area-inset-bottom, 0px));
  background: var(--bar-bg-solid);
  border-top: 1px solid var(--hairline-soft);
  z-index: 100;
  transition: opacity .25s ease, transform .25s ease;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .chat-input {
    background: var(--bar-bg);
    border-top-color: transparent;
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    box-shadow: 0 -1px 0 var(--hairline-soft);
  }
}

/* v4 FIX 2: the field is a flex row [upload] [textarea flex:1, borderless]
   [send] with align-items:center. The icons stay at the EXACT vertical center
   of the field in every state — even when the bar's padding is asymmetric (for
   disclaimer clearance) or the JS grows padding-top to make room for the cv-bar.
   The border/shadow/radius live on .composer; the textarea is transparent. */
.chat-input .composer {
  display: flex; align-items: center; gap: 2px;
  width: var(--composer-w);
  padding: 0 6px;
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .25s ease;
}
.chat-input .composer:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm), 0 0 0 4px var(--accent-ring);
}
.chat-input textarea {
  flex: 1 1 auto; min-width: 0;
  padding: 14px 6px; margin: 0;
  font-size: 1rem; font-family: inherit; color: var(--ink);
  background: transparent; border: none; outline: none; box-shadow: none;
  min-height: 52px; max-height: 160px; line-height: 1.5; height: auto;
  resize: none;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.chat-input textarea::-webkit-scrollbar { width: 0; height: 0; }
.chat-input textarea::placeholder { color: var(--muted); opacity: 1; }

/* Upload icon — clean flex item, perfectly centered by the row. */
.cv-upload-btn {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: none; border-radius: 10px;
  cursor: pointer; color: var(--secondary);
  transition: background .18s ease, color .18s ease;
}
.cv-upload-btn i { font-size: 19px; pointer-events: none; }
.cv-upload-btn:hover { background: var(--accent-tint); color: var(--accent); }
.cv-upload-btn.uploading { color: var(--accent); }

/* Send control — a CLEAN ICON only. No circle / disc / ring / background. */
.chat-input button {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 40px; padding: 0;
  background: transparent !important; border: none; box-shadow: none;
  cursor: pointer;
  font-size: 1.18rem; line-height: 1;
  transition: transform .18s ease, opacity .18s ease;
}
.chat-input button:disabled { cursor: default; }
.chat-input button #sendButton {
  color: var(--accent);
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: filter .18s ease, transform .18s ease;
}
.chat-input button:hover:not(:disabled) { transform: translateX(1px) scale(1.06); }
.chat-input button:active:not(:disabled) { transform: scale(.96); }

/* CV upload progress bar — centered over the composer field. */
#cv-bar {
  display: flex; align-items: center; justify-content: center;
  position: absolute; left: 50%; transform: translateX(-50%); top: 8px;
  width: var(--composer-w); max-width: var(--composer-w); height: 40px;
  padding: 0 16px;
  background: var(--accent-tint);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: .88rem; overflow: hidden;
  transition: opacity .25s; color: var(--ink);
}
#cv-bar.hidden { height: 0; opacity: 0; pointer-events: none; }
#cv-bar .filename { overflow: hidden; text-overflow: ellipsis; max-width: 90%; white-space: nowrap; opacity: .75; transition: opacity .2s; }
#cv-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--accent-tint-2); transition: width .2s; }
#cv-bar .sheen { position: absolute; top: 0; bottom: 0; width: 100%; background: linear-gradient(120deg, transparent 10%, rgba(255, 255, 255, .35) 50%, transparent 90%); animation: slide 1.2s linear infinite; pointer-events: none; }
@keyframes slide { to { transform: translateX(250%); } }
#cv-bar .cancel { position: absolute; right: 12px; top: 50%; font: 16px/1 sans-serif; opacity: .6; transform: translateY(-50%); cursor: pointer; }
#cv-bar .cancel:hover { opacity: 1; }
#cv-bar.done .sheen { display: none; }
#cv-bar.done .cancel { right: 12px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--ink); border-radius: 50%; font-weight: 700; font-size: 11px; }
#cv-bar.done .filename { opacity: 1; animation: pulse .8s ease-out; }
#cv-bar.done .fill { background: rgba(52, 211, 153, .35); animation: fadeAway .8s ease-out forwards; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes fadeAway { to { opacity: 0; } }

/* Disclaimer — position:fixed, exactly like the production chat. On mobile the
   JS sizes .container to the visible viewport and transforms it; that transform
   makes this fixed element resolve against .container, so it stays pinned to the
   visible bottom (no empty strip below it). The field's bottom is held above it
   by the input bar's bottom padding, so it never overlaps the field. */
.version {
  position: fixed; z-index: 100;
  left: calc(50vw + (min(25vw, 280px) / 2)); transform: translateX(-50%);
  bottom: 9px;
  font-size: .72rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: min(70%, 760px); text-align: center;
  pointer-events: none; margin: 0;
}

/* Welcome ↔ chat transitions */
.chat-input.welcome-hidden { opacity: 0; transform: translateY(10px); pointer-events: none; position: absolute; bottom: 0; left: 0; right: 0; }
.version.welcome-hidden { opacity: 0; pointer-events: none; }

/* ─── Scroll-to-bottom button (a real floating control — circle is fine here) ─ */
.scrollButton {
  display: none; align-items: center; justify-content: center;
  position: fixed;
  left: calc(50vw + (min(25vw, 280px) / 2)); transform: translateX(-50%);
  bottom: var(--scroll-btn-offset, 132px);
  width: 44px; height: 44px; border: 0; padding: 0; background: transparent;
  z-index: 1002; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.scrollButton i.floating-button {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--secondary); font-size: 15px;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.scrollButton:hover i.floating-button { background: var(--accent-tint); color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.scrollButton:active i.floating-button { transform: translateY(0); }

/* ─── Mobile header / hamburger / close ───────────────────────────────────── */
.hamburger, .close-btn { position: fixed; top: 12px; cursor: pointer; }
.hamburger { display: none; background: transparent; border: none; left: 12px; z-index: 1000; padding: 8px; border-radius: 10px; transition: background .18s ease; }
.hamburger:hover { background: var(--accent-tint); }
.hamburger-line { display: block; width: 20px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: background .2s ease; }
.mobile-header {
  display: none; height: 54px; position: fixed; width: 100%; z-index: 2;
  justify-content: center; align-items: center;
  background: var(--bar-bg-solid);
  border-bottom: 1px solid var(--hairline-soft);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mobile-header { background: var(--bar-bg); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
}
.mobile-header .logo-mobile { height: 28px; width: auto; }
.close-btn { position: absolute; right: 14px; font-size: 17px; background: transparent; border: none; display: none; color: var(--secondary); padding: 8px; border-radius: 10px; transition: background .18s ease, color .18s ease; }
.close-btn:hover { background: var(--accent-tint); color: var(--accent); }

/* ─── Rating modal ────────────────────────────────────────────────────────── */
.overlay { z-index: 1000; display: none; position: fixed; inset: 0; background: rgba(15, 17, 24, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.promptBox {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  padding: 24px; background: var(--surface); border-radius: var(--radius-lg);
  z-index: 1001; display: none; width: 460px; max-width: 90%; max-height: 80%;
  border: 1px solid var(--hairline); box-shadow: var(--shadow-lg);
}
.promptText { color: var(--ink); margin: 0 0 4px; }
.promptTextarea {
  width: 100%; padding: 13px; margin-top: 12px;
  border: 1.5px solid var(--hairline); border-radius: var(--radius-sm);
  font-size: inherit; font-family: inherit; background: var(--canvas);
  height: 140px; margin-bottom: 14px; color: var(--ink); resize: vertical;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.promptTextarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.commentButton {
  padding: 11px 26px; border: none;
  background: var(--accent-grad); color: #fff;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 15px;
  font-family: inherit; font-weight: 600;
  box-shadow: 0 8px 20px -8px rgba(112, 92, 216, .6);
  transition: transform .18s ease, box-shadow .25s ease, filter .18s ease;
}
.commentButton:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: var(--shadow-md); }
.commentButton:active { transform: translateY(0); }
.closeButton { position: absolute; top: 16px; right: 16px; font-size: 15px; font-weight: 700; background: transparent; border: none; cursor: pointer; color: var(--muted); transition: color .2s; line-height: 1; padding: 4px; }
.closeButton:hover { color: var(--ink); }

.rate-buttons { fill: var(--muted); margin-right: 6px; transition: fill .2s, transform .2s; }
.rate-buttons:hover { transform: translateY(-1px); }
.rate-buttons:hover, .clicked-rate { fill: var(--accent); cursor: pointer; }

#tooltip { position: absolute; background: var(--ink); color: var(--canvas); padding: 6px 11px; border-radius: 8px; font-size: 13px; text-align: center; display: none; pointer-events: none; white-space: nowrap; z-index: 2000; box-shadow: var(--shadow-md); }

/* ─── Document download — premium primary action on the gradient ──────────── */
.doc-download {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; vertical-align: top;
  padding: 11px 20px; margin: 12px 0;
  background: var(--accent-grad); color: #fff !important;
  text-decoration: none !important; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 14px;
  box-shadow: 0 10px 24px -10px rgba(112, 92, 216, .6);
  transition: transform .2s ease, box-shadow .25s ease, filter .18s ease;
}
.doc-download .doc-fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; opacity: .92; font-weight: 500; }
.doc-download:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: var(--shadow-md); }
.doc-download:active { transform: translateY(0); }
.doc-download i, .doc-download .doc-lead { flex-shrink: 0; }

img.fade-in { opacity: 0; transition: opacity .4s ease; }
img[data-loaded="yes"].fade-in { opacity: 1; }

/* ─── Interview overlay chrome (parent only — iframe content untouched) ────── */
#interview-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8, 10, 18, .94); }
#interview-loading.hidden { display: none; }
#interview-loading .iv-spinner { width: 58px; height: 58px; border: 4px solid rgba(255, 255, 255, .18); border-top-color: #8A97E0; border-radius: 50%; animation: jcIvSpin 1s linear infinite; }
@keyframes jcIvSpin { to { transform: rotate(360deg); } }

/* ========================================================================== */
/*  DARK-MODE specifics (tokens above flip most of it automatically)          */
/* ========================================================================== */
body.dark-mode { background: var(--canvas); color: var(--ink); }
body.dark-mode a { color: var(--accent); }
body.dark-mode .hamburger-line { background: var(--ink); }
/* Keep the user gradient bubble legible; soften its glow in the dark. */
body.dark-mode .user-message { box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .65); }
body.dark-mode #cv-bar .filename { opacity: .85; }

/* ========================================================================== */
/*  MOBILE                                                                     */
/* ========================================================================== */
@media screen and (max-width: 768px) {
  .panel.closed { transform: translateX(-100%); }
  .panel { display: flex; flex-direction: column; width: 100%; max-width: 100%; position: fixed; z-index: 9999; height: 100%; overflow: hidden; box-shadow: none; padding: 16px; }
  .mobile-header { display: flex; top: 0; left: 0; }
  .chat-messages { padding-top: calc(14px + 54px + env(safe-area-inset-top, 0px)); }
  .close-btn, .hamburger { display: block; }

  .introduction { width: 320px; max-width: 88vw; }
  .introduction > div:not(.intent-card) { font-size: 1.55rem !important; }
  .introduction::after { font-size: .92rem; }
  .welcome-input-wrap { width: 100%; padding: 0 6px; }
  .welcome-input-wrap textarea { min-height: 60px; }
  .welcome-suggestions { padding: 0 8px; }

  .chat-input { --composer-w: 100%; padding-left: 16px; padding-right: 16px; }
  .chat-input textarea { font-weight: 500; }
  .chat-input textarea::placeholder { font-weight: 400; }
  #cv-bar { left: 50%; width: calc(100% - 32px); max-width: calc(100% - 32px); }

  .scrollButton { left: 50%; transform: translateX(-50%); bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }

  /* Shorter disclaimer copy on phones so it never wraps or crowds the field. */
  .version {
    display: block; position: fixed; left: 50%; transform: translateX(-50%);
    bottom: 7px;
    max-width: calc(100% - 120px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    z-index: 100; pointer-events: none; font-size: 0;
  }
  .version::before { content: "JobsChat may show irrelevant results"; display: inline-block; font-size: .72rem; color: inherit; }

  .promptBox { width: 100%; height: 100%; max-width: none; max-height: none; border: none; border-radius: 0; display: none; }
  .intent-card { max-width: 280px; font-size: .86rem; padding: 12px 14px 12px 38px; }
  .intent-card .sparkle-cursor { top: 13px; left: 11px; }
}

/* ========================================================================== */
/*  RE-TINT JS-INJECTED COMPONENTS (old blue #335FE9 → brand accent/gradient) */
/*  These rules intentionally live LAST and use !important + higher           */
/*  specificity so they beat the <style> blocks scripts-test.js appends to    */
/*  <head> at runtime (which load after this file and sometimes use           */
/*  !important themselves). The JS markup/behaviour is never touched.         */
/* ========================================================================== */

/* ── CV style fan (.cv-style-selector inside .jc-cv-style-fan) ────────────── */
.jc-cv-style-fan .cvs-tab,
.cv-style-selector .cvs-tab {
  border-color: var(--hairline) !important;
  color: var(--secondary) !important;
  background: transparent !important;
}
.jc-cv-style-fan .cvs-tab.active,
.cv-style-selector .cvs-tab.active {
  background: var(--accent-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px -8px rgba(112, 92, 216, .7) !important;
}
.jc-cv-style-fan .cvs-tab:hover:not(.active),
.cv-style-selector .cvs-tab:hover:not(.active) {
  border-color: var(--accent-tint-2) !important;
  color: var(--accent) !important;
}

.jc-cv-style-fan .cvs-frame,
.cv-style-selector .cvs-frame {
  border-color: var(--hairline) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-sm) !important;
}
.jc-cv-style-fan .cvs-name,
.cv-style-selector .cvs-name { color: var(--muted) !important; }

.jc-cv-style-fan .cvs-banner,
.cv-style-selector .cvs-banner {
  color: var(--accent) !important;
  background: var(--accent-tint) !important;
  border-radius: var(--radius-xs) !important;
  font-weight: 600 !important;
}
body.dark-mode .jc-cv-style-fan .cvs-banner,
body.dark-mode .cv-style-selector .cvs-banner {
  color: #fff !important;
  background: var(--accent-tint-2) !important;
}

@media (hover: hover) {
  .jc-cv-style-fan .cvs-card:hover .cvs-frame,
  .cv-style-selector .cvs-card:hover .cvs-frame {
    border-color: var(--accent) !important;
    box-shadow: var(--shadow-lg) !important;
  }
  .jc-cv-style-fan .cvs-card:hover .cvs-name,
  .cv-style-selector .cvs-card:hover .cvs-name { color: var(--ink) !important; }
}
@media (hover: none) {
  .jc-cv-style-fan .cvs-card:active .cvs-frame,
  .cv-style-selector .cvs-card:active .cvs-frame { border-color: var(--accent) !important; }
}

/* ── CV style magnifier (appended to <body>, no fan wrapper) ──────────────── */
body .cvs-mag-backdrop { background: rgba(15, 17, 24, .5) !important; }
body.dark-mode .cvs-mag-backdrop { background: rgba(0, 0, 0, .62) !important; }
body .cvs-mag-dialog { background: var(--surface) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; }
body .cvs-mag-tab {
  border-color: var(--hairline) !important; color: var(--secondary) !important; background: transparent !important;
}
body .cvs-mag-tab.active {
  background: var(--accent-grad) !important; color: #fff !important; border-color: transparent !important;
}
body .cvs-mag-arrow {
  border-color: var(--hairline) !important;
  background: var(--surface) !important;
  color: var(--accent) !important;
  box-shadow: var(--shadow-sm) !important;
}
body .cvs-mag-arrow:active { background: var(--accent-tint) !important; }
body .cvs-mag-preview { border-color: var(--hairline) !important; box-shadow: var(--shadow-md) !important; border-radius: 10px !important; }
body .cvs-mag-name { color: var(--ink) !important; }
body .cvs-mag-cancel { background: var(--canvas) !important; color: var(--secondary) !important; }
body.dark-mode .cvs-mag-cancel { background: var(--elevated) !important; color: var(--secondary) !important; }
body .cvs-mag-confirm {
  background: var(--accent-grad) !important; color: #fff !important;
  box-shadow: 0 8px 22px -8px rgba(112, 92, 216, .7) !important;
}

/* ── Interview launcher (.start-interview-btn) — premium gradient CTA ─────── */
body .start-interview-btn,
.ai-message .start-interview-btn {
  background: var(--accent-grad) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  padding: 11px 20px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 24px -10px rgba(112, 92, 216, .6) !important;
  transition: transform .2s ease, box-shadow .25s ease, filter .18s ease !important;
}
body .start-interview-btn:hover {
  background: var(--accent-grad) !important;
  filter: brightness(1.05) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}
body .start-interview-btn:active { transform: translateY(0) !important; }
body .start-interview-btn.started {
  background: var(--history-item) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
body .start-interview-btn.started:hover { background: var(--history-item) !important; transform: none !important; }

/* Interview close button hover (JS sets a light-blue hover with !important). */
body #interview-close-btn:hover { background: #F2F1FB !important; transform: scale(1.05); }