/* trismeg_rag_chat.css */
:root {
  --bg: #f6f7fb;
  --panel: #ffffff;
  --muted: #4b5563;
  --text: #0b1220;
  --primary: #2563eb;
  --primary-ink: #ffffff;
  --border: #e5e7eb;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --chip-pdf: #26c7dc;
  --chip-epub: #0f766e;
  --chip-video: #1960ac;
  --chip-audio: #16a34a;
  --chip-text: #e8eb25;
  --chip-application:#951876c6;
  --chip-ppt:#6e2ac0c6;
  --chip-scorm:#c13386c6;
  --chip-scorm-pdf: #26c7dc;
  --chip-scorm-video: #1960ac;
  --chip-scorm-audio: #16a34a;
  --chip-scorm-text: #e8eb25;
  --chip-more-details:  var(--bg-grad-green);       /* green 500 @ 40% */
  --chip-lesson: #cfa20a;     /* gold */
  --chip-lesson-fg: #3a2b00;  /* readable on light bg */
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --btn-bg: #f3f4f6;
  --btn-text: #111827;
  --input-bg: #ffffff;
  --input-text: #0b1220;
  --clickable-text: #0b1220;
  --clickable-bg: rgb(34 197 94 / 20%);        /* green 500 @ 40% */
  --clickable-hover-bg: rgb(34 197 94 / 40%);  /* green 500 @ 60% */
  --nugget-hl: rgb(34 197 94 / 20%); 
  
  /* original */
  --bg-grad-1: #e6f6ef;        /* light mint */
  --bg-grad-2: #eef2ff;        /* light indigo */
  --brand-green-1: #def6e1;    /* emerald */
  --brand-green-2: #16dd47;    /* green */

  /* later sweep vars */
  --bg-grad-green: #d8f7e7;    /* softer emerald tint */
  --bg-grad-green-darker: #a6ecc8;    /* softer emerald tint */
  --bg-grad-blue:  #cbe6ff;    /* soft azure */
  --bg-grad-blue-darker:  #90c0ec;    /* soft azure */

  /* CTA ramps (earlier) */
  --cta-start: color-mix(in oklab, var(--brand-green-2) 55%, white);
  --cta-mid:   var(--brand-green-1);
  --cta-end:   var(--brand-green-2);

  /* slightly lighter start colour (used once, but kept) */
  --brand-green-0: color-mix(in oklab, var(--brand-green-2) 70%, white);

  /* “lite” tones (final CTAs use these) */
  --brand-green-1-lite: color-mix(in oklab, var(--brand-green-1) 100%, #16dd47);
  --brand-green-2-lite: color-mix(in oklab, var(  --brand-green-1) 70%, #16dd47);

  /* shared card tokens */
  --card-radius: 16px;
  --card-shadow-1: 0 12px 26px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.08);
  --card-shadow-0: 0 8px 18px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);


  /* layout tuning */
  --sidebar-w: 320px;
  --history-row-h: 72px; /* constant height for history rows */
  --input-max-h: 180px; /* query input max height*/
  --hl-bg: rgba(250, 204, 21, .35); /* a readable “marker” yellow used for text marking in viewers */
  --logo-size-w: 180px; /* Trismeg logo */
  --logo-size-h: 70px; /* Trismeg logo */
  --chat-stream-max-h: 60vh;  /* was 25vh */
  --history-max-h: 55vh;    
}

/* light theme overrides */
[data-theme="dark"] {
/* dark theme defaults */
 /* Core surfaces & text */
  --bg: #0f1722;                   /* deep blue-grey */
  --panel: #121c28;                /* card/panel */
  --muted: #9aa7bb;
  --text: #f5f7fb;

  /* Brand & status keep identity but tuned for contrast on dark */
  --primary: #8ab3ff;              /* lighter primary for dark bg */
  --primary-ink: #0b1220;
  --border: #273749;               /* subtle but visible */
  --success: #39da83;
  --warning: #f0b34a;
  --danger: #ff6b6b;

  /* Chips – reuse hues; add a bit more fill so they read on dark */
  --chip-pdf: #26c7dc;
  --chip-epub: #5eead4;
  --chip-video: #79aaff;           /* brighten video blue */
  --chip-audio: #39da83;
  --chip-text: #f4f27a;
  --chip-application:#d67be7;
  --chip-ppt:#b18cff;
  --chip-scorm:#ff87c9;
  --chip-scorm-pdf: #26c7dc;
  --chip-scorm-video: #79aaff;
  --chip-scorm-audio: #39da83;
  --chip-scorm-text: #f4f27a;
  --chip-more-details:  var(--bg-grad-green);    
  /* Clickables */
  --btn-bg: #182335;
  --btn-text: #eef2f8;
  --input-bg: #0f1622;
  --input-text: #eef2f8;
  --clickable-text: #0b1220;
  --clickable-bg: rgb(34 197 94 / 28%);
  --clickable-hover-bg: rgb(34 197 94 / 44%);
  --nugget-hl: rgb(34 197 94 / 24%);
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  /* Gradients adapted for dark */
  --bg-grad-1: #0e2a22;
  --bg-grad-2: #0c2039;
  --brand-green-1: #27c36b;
  --brand-green-2: #16dd47;

  --bg-grad-green: #123c31;
  --bg-grad-green-darker: #0f332a;
  --bg-grad-blue:  #0f2c4a;
  --bg-grad-blue-darker:  #0b223a;

  /* CTA ramps (keep the ramp; shift toward brighter mids on dark) */
  --cta-start: color-mix(in oklab, var(--brand-green-2) 70%, #1a1f2a);
  --cta-mid:   color-mix(in oklab, var(--brand-green-1) 90%, #1a1f2a);
  --cta-end:   var(--brand-green-2);

  --brand-green-0: color-mix(in oklab, var(--brand-green-2) 60%, white);
  --brand-green-1-lite: color-mix(in oklab, var(--brand-green-1) 100%, #1a1f2a);
  --brand-green-2-lite: color-mix(in oklab, var(--brand-green-1) 70%, #16dd47);

  /* Shadows – gentler, spread slightly more on dark */
  --card-shadow-1: 0 14px 28px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.40);
  --card-shadow-0: 0 10px 22px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.38);

  --radius: 14px;
  /* shared card tokens */
  --card-radius: 16px;

  /* layout tuning */
  --sidebar-w: 320px;
  --history-row-h: 72px; /* constant height for history rows */
  --input-max-h: 180px; /* query input max height*/
  --hl-bg: rgba(250, 204, 21, .35); /* a readable “marker” yellow used for text marking in viewers */
  --logo-size-w: 225px; /* Trismeg logo */
  --logo-size-h: 53px; /* Trismeg logo */
  --chat-stream-max-h:60vh;  /* was 25vh */
  --history-max-h: 55vh;  
}


* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(59,130,246,.12), transparent 60%), var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
}

/* Nav */
.trismeg-nav { position: sticky; top: 0; background: color-mix(in oklab, var(--panel) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); z-index: 10; }
.nav-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;  /* left | center | right */
  align-items: center;
  gap: 12px;
  background: var(--panel, #fff);
}
.brand { font-weight: 700; letter-spacing: .3px; }
.menu {
  padding: 20px;
  justify-self: center;         /* <-- centers in the middle column */
  display: inline-flex;
  align-items: center;
  gap: 18px;                    /* use gap instead of per-link margins */
  flex-wrap: wrap;
}
.menu a {
  color: var(--muted);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
}

.menu a.active, .menu a:hover {
  color: var(--text);
  background: color-mix(in oklab, var(--bg-grad-blue) 60%, transparent);
}

.user-box { justify-self: end; display: inline-flex; align-items: center; gap: 8px; margin-right: 20px;}

.user-email { color: var(--muted); font-size: 14px; }
.brand-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.header-logo {
  /* padding: 10px; */
  margin-left: 20px;
  width: var(--logo-size-w);
  height: var(--logo-size-h);
  display: inline-block;
  flex: 0 0 auto;
  opacity: 0.95;
  margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 6px;
}
.header-logo:hover { opacity: 1; }

.nav-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}


/* GET ANSWERS  >>> */
/* Layout: fixed-width sidebar + independent scroll areas */
.layout {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w); /* chat | right */
  gap: 16px;
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
  min-height: 0;
  padding-bottom: 20px;
}


.right-column {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;                     /* don't stretch with page */
  height: var(--chat-stream-max-h);      /* <- exact target height */
  min-height: 0;                         /* allow children to shrink */
  min-width: 290px;
}

/* Ensure chat stretches the same row height */
.chat-pane { align-self: stretch; }

/* Inside right column, lists must fill available height — remove 50vh cap */
.right-column .history-pane {
  flex: 1 1 0;
  min-height: 0;                         /* so inner scroller works */
}

.right-column .history-list {
  max-height: none !important;
}

body.lesson-plans-disabled .nuggets-pane {
  display: none !important;
}


#newChatBtn,
.mobile-new-chat {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Helvetica, Arial;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Ensure the history list doesn't crop on the right and scrolls nicely */
#historyList {
  overflow-y: auto;
  padding-right: 8px;        /* keep content clear of scrollbar */
  box-sizing: border-box;
  /* min-width: 290px; */
}

#historyList .history-empty {
  padding: 14px 2px;
  color: var(--muted, #6b7280);
  font-size: 14px;
  line-height: 1.4;
}

/* Lay out each row so the star sits at the bottom-right */
.history-item {
  display: grid;
  grid-template-columns: auto 1fr auto; /* bin | content | star */
  grid-template-rows: auto auto;        /* title | date */
  gap: 4px 8px;
  align-items: start;
  padding: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;                      /* allow text ellipsis inside grid */
  box-sizing: border-box;
}

/* Title/date mapping + overflow safety */
.history-item .title {
  grid-column: 1;
  grid-row: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.history-item .date {
  grid-column: 1;
  grid-row: 2;
  font-size: 12px;
  opacity: .7;
}


/* Optional: ensure long words don’t force horizontal overflow */
.history-item, .history-item * {
  word-break: break-word;
}

/* --- FAVOURITE STAR --- */
/* Neutral button look; avoid global button styles leaking in */
.history-item .fav-star {
  background:transparent; border:1px solid var(--border-subtle, rgba(0,0,0,.08));
  border-radius:8px; padding:4px 6px; min-width:28px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1; color: var(--muted);
}

/* Make yellow when active (higher specificity than generic button styles) */
.history-item .fav-star.active {
  color:#f59e0b; /* amber */
  border-color: rgba(245, 158, 11, .35);
  background: rgba(245, 158, 11, .10);
}

/* Optional: hover affordance */
.history-item .fav-star:hover {
  background: var(--hover, rgba(0,0,0,.04));
}

/* Position: bottom-right of the row (works with your grid setup) */
.history-item .fav-star {
  /* grid-column: 3; */
  /* grid-row: 2; */
  align-self: end;
  justify-self: end;
}


/* Mirror the star button but bottom-left */
.history-item .del-btn {
  background: transparent;
  color: inherit;
  border: 1px solid var(--border-subtle, rgba(0,0,0,.08));
  border-radius: 8px;
  padding: 4px 6px;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.history-item .del-btn:hover {
  background: var(--hover, rgba(0,0,0,.04));
}

/* Container for star and delete */
.history-item .actions {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  justify-self: end;

  display: inline-flex;
  gap: 10px;              /* fixed spacing between buttons */
}

/* Remove any margins that might collapse/expand spacing */
.history-item .actions .fav-star,
.history-item .actions .del-btn {
  margin: 0;
}

/* --- GROUP HEADER TIDY --- */
.history-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px;
  padding: 0 4px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-fg, #667085);
  opacity: 1;                 /* crisper than a low-opacity label */
}

.history-group-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle, rgba(0,0,0,.08));
  border-radius: 1px;
}

/* Remove top margin on the first header in the list */
#historyList .history-group-header:first-child {
  margin-top: 6px;
}

/* COnfirm favorite model */

/* --- Favourite confirmation modal --- */
#favConfirmOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.3);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#favConfirmModal {
  background: var(--panel-bg, #fff);
  color: var(--fg, #111);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  padding: 16px 18px;
  min-width: 260px;
  max-width: 90vw;
  transform: scale(.98);
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
}

#favConfirmOverlay.show #favConfirmModal {
  opacity: 1;
  transform: scale(1);
}

#favConfirmMsg {
  font-size: 14px;
}

#favConfirmActions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#favConfirmOk {
  border: 1px solid var(--border-subtle, rgba(0,0,0,.1));
  background: var(--hover, rgba(0,0,0,.04));
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}


/* Chat */
.chat-pane {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: minmax(0, var(--chat-stream-max-h)) auto auto;
  overflow: hidden;
  min-height: 0;
  /* min-width: 0; */
}

.active-agent-banner {
  position: sticky;
  top: 0;
  z-index: 8;
  width: calc(100% - 20px);
  margin: 0 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--panel) 98%, #fff 2%), color-mix(in oklab, var(--panel) 94%, var(--bg) 6%));
  box-shadow:
    0 18px 24px rgba(15,23,42,.10),
    0 5px 10px rgba(15,23,42,.06);
}

.active-agent-banner.hidden {
  display: none;
}

.active-agent-banner__identity,
.active-agent-banner__actions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.active-agent-switcher {
  min-width: min(560px, 58vw);
  display: inline-grid;
  gap: 2px;
}

.active-agent-switcher[hidden] {
  display: none;
}

.active-agent-switcher span {
  color: #8a94a6;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.active-agent-switcher select {
  width: 100%;
  min-height: 30px;
  padding: 0 32px 0 10px;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}

.active-agent-switcher select:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: .72;
}

.active-agent-switcher select:focus {
  outline: none;
  border-color: rgba(75,63,175,.42);
  box-shadow: 0 0 0 3px rgba(75,63,175,.12), inset 0 1px 0 rgba(255,255,255,.62);
}

.active-agent-role-logo {
  position: relative;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(59,130,246,.12);
  background: linear-gradient(145deg, #f8fbff, #eef6ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 5px 12px rgba(15,23,42,.06);
}

.active-agent-role-logo img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  border-radius: 7px;
  display: block;
}

.active-agent-role-logo--fallback::after {
  content: "AI";
  color: #4b3faf;
  font-size: 11px;
  font-weight: 900;
}

.active-agent-banner__copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.active-agent-banner__eyebrow {
  color: #8a94a6;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.active-agent-banner__copy strong {
  max-width: min(430px, 46vw);
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-agent-skills-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 10px 0 12px;
  border: 1px solid rgba(16,185,129,.24);
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg-grad-green) 78%, #fff 22%);
  color: #047857;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.active-agent-skills-btn:hover,
.active-agent-skills-btn:focus {
  outline: none;
  border-color: rgba(16,185,129,.38);
  box-shadow: 0 0 0 3px rgba(16,185,129,.10), inset 0 1px 0 rgba(255,255,255,.55);
}

.active-agent-skills-btn span {
  min-width: 18px;
  min-height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #047857;
  font-size: 11px;
}

.active-agent-skills-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(430px, calc(100vw - 42px));
  max-height: min(380px, 62vh);
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 22px 48px rgba(15,23,42,.16);
}

.active-agent-skills-panel.hidden {
  display: none;
}

.active-agent-skills-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.active-agent-skills-panel__head strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}

.active-agent-skills-panel__head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.active-agent-skills-panel__head button {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-size: 15px;
  font-weight: 850;
  cursor: pointer;
}

.active-agent-skills-list {
  display: grid;
  gap: 8px;
}

.active-agent-skill-item {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
}

.active-agent-skill-item strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.active-agent-skill-item p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.active-agent-skill-item span {
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(75,63,175,.08);
  color: #4b3faf;
  font-size: 11px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-agent-skills-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 720px) {
  .active-agent-banner {
    width: calc(100% - 20px);
    margin: 0 10px 12px;
    border-radius: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .active-agent-banner__copy strong {
    max-width: 48vw;
  }

  .active-agent-switcher {
    min-width: 100%;
    order: 3;
  }

  .active-agent-skills-panel {
    left: 0;
    right: auto;
    width: 100%;
  }
}

.chat-stream {
  padding: 16px 10px 10px;
  overflow-y: auto;    
  overflow-x: hidden;
  min-width: 0;
  min-height: 0;
  max-height: unset;    /* remove any old max-height calc(...) */
}
.message { 
  display: grid; 
  grid-template-columns: 40px 1fr; 
  gap: 12px; 
  padding: 12px; 
  border-radius: 12px; 
  border: 1px solid var(--border); 
  background: color-mix(in oklab, var(--panel) 86%, black 0%); 
  margin-bottom: 12px; 
  cursor: default;   
  width: 75%;         /* <- 75% of chat stream width */
  max-width: 75%;
  align-items: start;
}

.message.user {
  margin-left: auto;  /* push right */
  width: 50%; 
  background: color-mix(in oklab, var(--panel) 92%, black 0%);
}
.message.assistant {
  margin-right: auto;   /* push left */
}
.message .avatar {  width: 40px; height: 40px; border-radius: 50%; background: var(--input-bg); display: grid; place-items: center; font-size: 18px; }
.message .bubble { white-space: pre-wrap; }
.message .meta { font-size: 12px; color: var(--muted); margin-top: 6px; }
.message.clickable { cursor: pointer; }

/* Highlight the currently selected assistant message */
.message.assistant.selected {
  box-shadow: 0 0 0 2px var(--clickable-bg); 
  border-color: transparent;
}
.message.assistant.selected:hover {
  box-shadow: 0 0 0 2px var(--clickable-hover-bg);
}

/* Accessibility: keyboard focus */
.message.assistant.clickable:focus-visible {
  outline: 2px solid var(--clickable-bg);
  outline-offset: 4px;
}

.message .avatar {
  width: 30px;
  height: 30px;
  /* border-radius: 50%; */
  overflow: hidden;
  background: var(--input-bg, #f4f4f5);
  display: grid;
  place-items: center;
}
.message.assistant .avatar {
  width: 40px;
  height: 40px;
  /* border-radius: 50%; */
  overflow: hidden;
  background: var(--input-bg, #f4f4f5);
  display: grid;
  place-items: center;
  top: 10px;
}
.message .avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* keep icon aspect */
  display: block;
}

.message.assistant .bubble a,
#answerFullInput.answer-full-html a {
  display: inline;
  padding: 1px 5px;
  border-radius: 7px;
  color: color-mix(in oklab, var(--brand-green-2) 72%, #12332f);
  background: color-mix(in oklab, var(--brand-green-2) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand-green-2) 26%, transparent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-decoration: none;
  font-weight: 700;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.message.assistant .bubble a:hover,
#answerFullInput.answer-full-html a:hover {
  color: color-mix(in oklab, var(--brand-green-2) 52%, #09201d);
  background: color-mix(in oklab, var(--brand-green-2) 22%, transparent);
  border-color: color-mix(in oklab, var(--brand-green-2) 42%, transparent);
  box-shadow: 0 4px 12px rgba(76, 167, 160, 0.14);
}

.message.assistant .bubble a:focus-visible,
#answerFullInput.answer-full-html a:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--brand-green-2) 42%, transparent);
  outline-offset: 2px;
}

/* Reserve space at the bottom-right for the trophy button */
.message > div:nth-child(2){
  position: relative;          /* ensures .msg-joggle-fab positions here */
  padding-right: 48px;         /* room for the badge */
  padding-bottom: 6px;         /* keeps it off the meta line */
}

/* Floating trophy pinned to the content column */
.msg-joggle-fab {
  position: absolute;
  right: 2px;
  bottom: 4px;

  width: 20px;
  height: 20px;

  display: inline-flex;          /* FIX: match feedback buttons */
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  background: #fff;
  border: 1px solid rgba(245, 158, 11, 0.45);

  box-shadow:
    0 3px 8px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255,255,255,0.75);

  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;

  z-index: 2;
}

.msg-joggle-fab:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 12px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.82);
}

.msg-joggle-fab .emoji{
  font-size: 12px;             /* crisp, not squashed */
  line-height: 1;
}

.msg-joggle-fab:active{ transform: translateY(0); }

/* dark theme tweak (keeps the same vibe) */
[data-theme="dark"] .msg-joggle-fab{
  background: color-mix(in oklab, #f59e0b 18%, transparent);
  border-color: color-mix(in oklab, #f59e0b 70%, transparent);
  color: #fbbf24;
}


/* Skeleton lines inside the assistant bubble while loading */
.assistant-loading .bubble { position: relative; }

/* light/dark friendly colours */
:root {
  --skel-a: rgba(0,0,0,.06);
  --skel-b: rgba(0,0,0,.14);
}
[data-theme="dark"] {
  --skel-a: rgba(255,255,255,.10);
  --skel-b: rgba(255,255,255,.22);
}

/* shimmering placeholder lines */
.skel-line {
  display: block;
  height: 11px;
  border-radius: 6px;
  margin: 8px 0;
  background: linear-gradient(90deg, var(--skel-a), var(--skel-b), var(--skel-a));
  background-size: 200% 100%;
  animation: skel-shimmer 1.2s ease-in-out infinite;
}
.skel-line.l1 { width: 66%; }
.skel-line.l2 { width: 50%; }
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Slimmer shimmer lines */
.assistant-loading .skel-line {
  height: 7px;            /* was ~10–11px */
  margin: 4px 0;          /* was ~6–8px */
  border-radius: 4px;     /* a bit tighter */
}

/* Slightly shorter line widths to reduce overall height feel */
.assistant-loading .skel-line.l1 { width: 64%; }
.assistant-loading .skel-line.l2 { width: 46%; }

/* Sources */
/* Viewer loader */
#sourceViewer .viewer-loading {
  display: grid;
  gap: .5rem;
  align-content: center;
  justify-items: center;
  min-height: 200px;
  font-size: 0.95rem;
  opacity: 0.9;
}
#sourceViewer .viewer-frame {
  width: 100%;
  height: 60vh;
  border: 0;
  display: block;
}
/* Reuse your typing dots if you have them; otherwise: */
.ai-typing-dots { display: inline-flex; gap: .35rem; }
.ai-typing-dots i {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: currentColor; opacity: .4; animation: dotPulse 1.2s infinite;
}
.ai-typing-dots i:nth-child(2){ animation-delay: .15s }
.ai-typing-dots i:nth-child(3){ animation-delay: .3s }
@keyframes dotPulse {
  0%, 100% { transform: translateY(0); opacity: .4 }
  50% { transform: translateY(-4px); opacity: 1 }
}

.sources { border-top: 1px solid var(--border); padding: 16px 20px; background: color-mix(in oklab, var(--panel) 95%, transparent); min-width: 0; overflow: hidden;}
.sources.hidden { display: none; }
.source-balloons {  
  display: flex;
  flex-wrap: wrap;          /* wrap onto multiple rows */
  gap: 10px;                /* row + column gap */
  max-height: 180px;        /* chips get their own scroll if too many */
  overflow-y: auto;
  overflow-x: hidden;       /* never widen the pane */
  padding-bottom: 6px;
  margin-bottom: 6px;
}
/* Sources clickable 'chips' */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--input-bg);          /* neutral */
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 13px;
  white-space: nowrap;
  min-width: 0;                     /* allow shrink */
  max-width: 100%;
  transition: background-color 140ms ease, border-color 140ms ease;
  border-width: 3px;         
  background: transparent;     
  --chip-bg: var(--panel);
  background: var(--chip-bg);
}
.chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 26ch;            /* tweak to taste */
}
.chip .type {
  opacity: .8;
  font-size: 12px;
}
/* Hover = same color, just more see-through (60%) */
.chip:hover { 
  background: color-mix(in oklab, var(--chip-bg) 60%, transparent);
  cursor: pointer;
}

/* If you have a distinct active bg, declare it and hover will auto-use it */
.chip.active { --chip-bg: var(--chip-active-bg, #fff); background: var(--chip-bg); }

/* ===== Type rings (consolidated to use --chip-bg) ===== */
.chip.pdf   { border-color: var(--chip-pdf);         --chip-bg: color-mix(in oklab, var(--chip-pdf) 15%, transparent); }
.chip.epub  { border-color: var(--chip-epub);        --chip-bg: color-mix(in oklab, var(--chip-epub) 15%, transparent); }
.chip.video { border-color: var(--chip-video);       --chip-bg: color-mix(in oklab, var(--chip-video) 15%, transparent); }
.chip.audio { border-color: var(--chip-audio);       --chip-bg: color-mix(in oklab, var(--chip-audio) 15%, transparent); }
.chip.text  { border-color: var(--chip-text);        --chip-bg: color-mix(in oklab, var(--chip-text) 15%, transparent); }
.chip.application { border-color: var(--chip-application); --chip-bg: color-mix(in oklab, var(--chip-application) 15%, transparent); }
.chip.ppt   { border-color: var(--chip-ppt);         --chip-bg: color-mix(in oklab, var(--chip-ppt) 15%, transparent); }

/* SCORM subtypes */
.chip.scorm.video       { border-color: var(--chip-scorm-video); --chip-bg: color-mix(in oklab, var(--chip-scorm-video) 15%, transparent); }
.chip.scorm.audio       { border-color: var(--chip-scorm-audio); --chip-bg: color-mix(in oklab, var(--chip-scorm-audio) 15%, transparent); }
.chip.scorm.pdf         { border-color: var(--chip-scorm-pdf);   --chip-bg: color-mix(in oklab, var(--chip-scorm-pdf) 15%, transparent); }
.chip.scorm.ppt         { border-color: var(--chip-scorm-ppt);   --chip-bg: color-mix(in oklab, var(--chip-scorm-ppt) 15%, transparent); }
.chip.scorm.text        { border-color: var(--chip-scorm-text);  --chip-bg: color-mix(in oklab, var(--chip-scorm-text) 15%, transparent); }
.chip.scorm.application { border-color: var(--chip-application); --chip-bg: color-mix(in oklab, var(--chip-application) 15%, transparent); }

/* Keep your extra accents */
.chip.ppt   { box-shadow: inset 0 0 0 2px var(--chip-ppt); }
.chip.scorm { box-shadow: inset 0 0 0 2px var(--chip-text); }

/* "More details" chip */
.chip.details {
  border-color: var(--bg-grad-green-darker);
  --chip-bg: color-mix(in oklab, var( --chip-more-details) 100%, transparent);
}
.chip.details .label strong { font-weight: 700; }

/* Lesson chip */
.chip.lesson {
  border-color: var(--chip-lesson);
  color: var(--chip-lesson-fg);
  background: color-mix(in oklab, var(--chip-lesson) 18%, transparent);
}
.chip.lesson:hover,
.chip.lesson:focus-visible {
  background: color-mix(in oklab, var(--chip-lesson) 28%, transparent);
}
.chip.lesson.active {
  background: color-mix(in oklab, var(--chip-lesson) 40%, transparent);
}


/* CHIP OVERIDE >> BUG WITH DOUBLE BORDER */
/* --- Ensure SCORM chips render a single, clean border --- */
.chip.scorm,
.chip.scorm.video,
.chip.scorm.audio,
.chip.scorm.pdf,
.chip.scorm.text,
.chip.scorm.ppt,
.chip.scorm.application {
  /* keep only the 3px border you’ve defined elsewhere */
  box-shadow: none !important;     /* kill legacy ring shadows */
  outline: 0 !important;           /* kill legacy outlines acting as rings */
  border-width: 3px;               /* enforce single ring thickness */
  
}

/* If an old ring uses pseudo-elements, nuke them for scorm only */
.chip.scorm::before,
.chip.scorm::after {
  content: none !important;
  display: none !important;
}

/* Optional: preserve accessibility focus ring without adding a second border */
.chip.scorm:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.35);  /* or your focus colour var */
  outline-offset: 2px;
  box-shadow: none !important;
}


.source-viewer { margin-top: 12px; padding: 12px; border: 1px dashed var(--border); border-radius: 12px; min-height: 450px; background: var(--input-bg); min-width: 0; }
.source-viewer .meta-row { margin-top: 8px; font-size: 12px; color: var(--muted); }

/* File viewer canvas & overlay */
.viewer-canvas-wrap { width: 100%; overflow: auto; border-radius: 8px; }
.viewer-canvas-wrap canvas { display: block; max-width: 100%; height: auto; }
.viewer-overlay { mix-blend-mode: multiply; }
.source-viewer iframe,
.source-viewer video,
.source-viewer audio { max-width: 100%; }

.source-viewer:empty::before {
  content: "Select a source or More details";
  opacity: 0.6;
  display: block;
  padding: 16px;
}
.source-viewer {
  max-height: 70vh;
  overflow-y: scroll;
}

.source-viewer.scorm-active,
#sourceViewer.scorm-active,
.file-viewer.scorm-active {
  max-height: none;
  overflow: visible;
}

#sourceViewer iframe.scorm-viewer-frame,
.source-viewer iframe.scorm-viewer-frame,
.file-viewer iframe.scorm-viewer-frame {
  display: block;
  width: 100%;
  min-height: clamp(500px, 58vh, 560px);
  max-height: min(68vh, 640px);
}

/* Bigger + bold for the full answer editor */
#answerFullInput.input.textarea,
#answerFullInput.answer-full-html {
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.5;

  /* make it *at least* 300px tall */
  min-height: 300px;
  height: auto;

  /* good ergonomics for long content */
  overflow-y: auto;
  box-sizing: border-box;
}


/* Contenteditable placeholder */
#answerFullInput.answer-full-html[contenteditable="false"]:empty:before {
  content: attr(data-placeholder);
  opacity: 0.5;
  pointer-events: none;
}


/* PDF toolbar layout */
.viewer-toolbar{
  display:flex;
  align-items:center;
  justify-content:center;   /* center horizontally */
  gap:12px;
  flex-wrap:wrap;
  margin: 6px 0 10px;
}

.viewer-pagebox{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.viewer-pagebox .page-input{
  width: 6ch;               /* visible width */
  min-width: 56px;
  padding: 4px 8px;
  line-height: 1.2;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 6px;
  background: var(--surface-1, #fff);
  color: inherit;
}

.viewer-pagebox .page-total{
  opacity:.75;
}

/* Composer */
.composer { display: grid; grid-template-columns: 44px 1fr 140px; gap: 10px; padding: 12px; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--panel) 95%, transparent);   align-items: start;}
.input { width: 100%; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--input-bg); color: var(--input-text); }
.btn {
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid transparent;   /* remove dark border */
  color: var(--clickable-text);
  background: var(--clickable-bg);
  cursor: pointer;
  transition: background-color 140ms ease, opacity 140ms ease;
}
.btn.small { height: 36px; padding: 0 10px; }
.btn:hover { background: var(--clickable-hover-bg); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary { background: var(--clickable-bg); }
.btn.primary:hover { background: var(--clickable-hover-bg); }
.btn.icon { width: 44px; display: grid; place-items: center; }

/* Composer placeholder styling: same family as 'Get answers', lighter weight */
.composer .input::placeholder,
.composer .textarea::placeholder,
.composer input.input::placeholder,
.composer textarea.input::placeholder {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Helvetica, Arial;
  font-weight: 800;   /* less bold than the button */
  letter-spacing: .2px;
  opacity: .90;
}

/* Cross-browser fallbacks */
.composer .input::-webkit-input-placeholder,
.composer .textarea::-webkit-input-placeholder,
.composer input.input::-webkit-input-placeholder,
.composer textarea.input::-webkit-input-placeholder { font-family: inherit; font-weight: 800; letter-spacing: .2px; opacity: .90; }

.composer .input::-moz-placeholder,
.composer .textarea::-moz-placeholder,
.composer input.input::-moz-placeholder,
.composer textarea.input::-moz-placeholder { font-family: inherit; font-weight: 800; letter-spacing: .2px; opacity: .90; }

.composer .input:-ms-input-placeholder,
.composer .textarea:-ms-input-placeholder,
.composer input.input:-ms-input-placeholder,
.composer textarea.input:-ms-input-placeholder { font-family: inherit; font-weight: 800; letter-spacing: .2px; opacity: .90; }



/* Make the submit button (“Get answers”) use a cleaner, bolder font */
.btn.primary {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Helvetica, Arial;
  font-weight: 700;
  letter-spacing: .2px;
}


.input.textarea {
  min-height: 44px;
  max-height: var(--input-max-h);
  height: auto;               
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.4;
  resize: none;                 /* user resizes via typing */
  overflow-y: auto;             /* scroll when reaching max height */
  white-space: pre-wrap;
}
/* History sidebar: independent scroll + constant row height */
.history-pane {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  display: grid;
  grid-template-rows: auto 1fr; /* header | list scroll */
  overflow: hidden; /* contain the scroll area */
  min-height: 0;
  align-self: start;
}
.history-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.history-list {
  overflow: auto;            /* its own scroll */
  display: grid;
  gap: 8px;
  max-height: var(--history-max-h);
  overflow-y: auto;
  overflow-x: hidden;
}
.history-item {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in oklab, var(--panel) 95%, transparent);
  cursor: pointer;
  overflow: hidden;          /* enforce constant height */
  height: var(--history-row-h);
  margin-bottom: 10px;
}
.history-item .title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-item .date {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Selected history cell uses the clickable scheme */
.history-item.active {
  background: var(--clickable-bg);     
  color: var(--clickable-text);
  border-color: transparent;
  outline: none;                       
  transition: background-color 140ms ease;
}
.history-item.active:hover {
  box-shadow: var(--card-shadow-1); 
}

#historyList .history-item:hover {
   box-shadow: var(--card-shadow-1); 
}


/* Ensure inner text contrasts correctly in both themes */
.history-item.active .title,
.history-item.active .date {
  color: var(--clickable-text);
}
.history-item.active .date { opacity: 0.85; }

/* Cards */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); max-width: 560px; }
label { display: block; margin-bottom: 6px; color: var(--muted); }
input[type="password"], input[type="email"], input[type="text"] { width: 100%; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--input-bg); color: var(--input-text); }
.muted { color: var(--muted); font-size: 13px; }



/* Lesson/Talvi nugget model */
/* ────────────────────────────────────────────────────────────
   Talvi Nuggets (dedicated list under Chat history)
   ──────────────────────────────────────────────────────────── */
/* Talvi Nugget history tableview >>> */

/* Optional legacy bits (safe to keep if used elsewhere) */
.nuggets-wrap { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.nuggets-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.nuggets-title { font-size: 14px; margin: 0; }

/* Use the same scroll/spacing behaviour as history; ensure a tiny pad on the right
   so content never sits under the scrollbar */
#nuggetList.history-list {
  grid-auto-rows: auto;      /* height adapts to content */
  padding-right: 8px;
  overflow-x: hidden;
  min-width: 290px;

}
/* Highlight the nugget row that’s “in scope” (modal or sources) */
#nuggetList .nugget-item.active-scope {
  box-shadow: 0 2px 0 rgba(255,255,255,.35) inset;
  background: #fff;
  box-shadow: var(--card-shadow-1) !important;
}
/* === Nugget list (cleaned) ========================================== */

.history-group-header,
.nugget-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  top: 20px;
  margin: 10px 0 6px;
  padding: 0 4px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-fg, #667085);
}
.nugget-group-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle, rgba(0,0,0,.08));
  border-radius: 1px;
  
}

.history-group-header {
  height: 20px;
}

/* Cell container — matches History visual language */
#nuggetList .nugget-item {
  display: grid;
  grid-template-rows: auto auto;        /* title | foot */
  row-gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in oklab, var(--panel) 95%, transparent);
  cursor: pointer;

  /* prevent any right-edge clipping */
  width: 100%;
  max-width: 100%;
  min-width: 281px;   /* maintain your min width */
  max-height: 140px;
  overflow: visible;
  height: 120px;

}

/* Two-line title with ellipsis; tooltip applied from JS when truncated */
.nugget-item .title {
  font-size: 14px;
  font-weight: 600;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;          /* 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  min-width: 0;
}

/* Footer row: date (left) | actions (right) */
.nugget-item .foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-top: 6px;
  min-width: 0;
}

/* Date (left) */
.nugget-item .date-foot {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

/* Actions (right) — mirror chat history buttons */
.nugget-item .actions {
  display: inline-flex;
  gap: 10px;
}

/* Delete button style (same vibe as history) */
.nugget-item .del-btn {
  background: transparent;
  color: inherit;
  border: 1px solid var(--border-subtle, rgba(0,0,0,.08));
  border-radius: 8px;
  padding: 4px 6px;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nugget-item .del-btn:hover {
  background: var(--hover, rgba(0,0,0,.04));
}

/* Group headers (Talvi Nuggets only) */
#nuggetList .nugget-group-header{
  display:flex; align-items:center; gap:8px;
  margin: 6px 0 4px; padding:0 4px;
  font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--muted-fg, #667085);
}
#nuggetList .nugget-group-header::after{
  content:""; flex:1; height:1px;
  background: var(--border-subtle, rgba(0,0,0,.08)); border-radius:1px;
}

/* Favourite star inside nugget actions */
.nugget-item .fav-star{
  background:transparent; border:1px solid var(--border-subtle, rgba(0,0,0,.08));
  border-radius:8px; padding:4px 6px; min-width:28px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1; color: var(--muted);
}
.nugget-item .fav-star:hover{ background: var(--hover, rgba(0,0,0,.04)); }
.nugget-item .fav-star.active{
  color:#f59e0b; /* amber */
  border-color: rgba(245, 158, 11, .35);
  background: rgba(245, 158, 11, .10);
}

/* Hover affordance, consistent with history cells */
#nuggetList .nugget-item:hover {
  background: color-mix(in oklab, var(--panel) 90%, transparent);
}

/* Highlighted (active) nugget row */
#nuggetList .nugget-item.highlight {
  background: var(--nugget-hl) !important;   /* your 10% green */
  border-color: transparent;
  transition: background-color 160ms ease;
}

/* === Empty state ===================================================== */
#nuggetList .nuggets-empty {
  display: grid;
  min-width: 280px;
  max-height: 130px;
  grid-template-rows: auto auto;
  gap: 8px;
  place-items: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: color-mix(in oklab, var(--panel) 96%, transparent);
  color: var(--muted);
  padding: 12px;
}
#nuggetList .nuggets-empty .hint {
  font-size: 13px;
  color: var(--muted);
}
#nuggetList .nuggets-empty .btn.small {
  height: 30px;
  padding: 0 10px;
  font-weight: 700;
}

/* === Removed legacy selectors (kept empty to avoid 404s in hot reload) */
/* .history-group-header, .nugget-group-header, .nugget-progress, .nugget-item .finished */
/* .history-group-header,
.nugget-group-header,
.nugget-progress,
.nugget-item .finished { display: none !important; } */

/* OVERIDES DUE TO LARGE GAP BETWEEN CELLS */
/* Tight, single-column list with predictable spacing */
#nuggetList {
  display: grid;                 /* or flex; both fine */
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;   /* prevent stretched rows */
  grid-auto-flow: row;
  gap: 12px;                     /* actual spacing between cells */
  align-content: start;          /* avoid space-between stretching */
  justify-content: stretch;
  padding: 0;                    /* no extra padding unless desired */
  margin: 0;
}

/* Defensive: kill stray margins from children that could add gaps */
#nuggetList > * {
  margin: 0 !important;
}

/* If your pane wrapper was forcing spacing, pin it to the top */
.nuggets-pane,
#nuggetsPane {
  align-content: start !important;
  justify-content: stretch !important;
}

/* Ensure rows don’t accidentally reserve extra space */
#nuggetList .nugget-item {
  min-height: unset;
  max-height: none;   /* or keep 140px if you really want a cap */
}


/* Gold Nugget Image overrides >>>>>>*/

/* ==== Nugget icon sizing & alignment ==== */

/* Header/title icon (e.g., "Talvi Nuggets") */
.nugget-icon {
  width: 28px;            /* smaller = sits nicely with 20–22px headings */
  height: 28px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: inline-block;
  vertical-align: -6px;   /* nudge down to align with baseline */
  margin-right: 3px;          
  margin-left: 4px;  
}

/* Chip-sized icon (inside small badges/chips) */
.nugget-chip-icon {
  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  vertical-align: -5px;
  margin-right: 3px;
}

/* Floating action badge icon (message FAB) */
.nugget-fab-icon {
  width: 12px;
  height: 12px;
  object-fit: contain;
  display: block;
  transform: translateY(0.5px);   /* micro optical centring */
}

/* Empty state illustration — smaller & centered */
.nugget-empty-icon {
  width: 28px;            /* was larger; shrinking for balance */
  height: 28px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px;    /* center + breathing room above CTA */
}

/* If your header has tight line-height, keep the icon from stretching it */
.history-title {
  line-height: 1.2;
}

/* <<<<<< Gold Nugget Image overrides */


/* <<< GET ANSWERS */

/* Avatar circles (initials-based) */
.avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 700;
  color: var(--text);
  user-select: none;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
}
.avatar-inline { width: 28px; height: 28px; font-size: 12px; }
.avatar-large  { width: 96px; height: 96px; font-size: 36px; }

/* Account identity card layout */
.account-identity {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}
.account-identity .identity-text .name  { font-size: 18px; font-weight: 700; }
.account-identity .identity-text .email { font-size: 14px; opacity: .85; }
.account-identity .identity-text .uid   { font-size: 13px; color: var(--muted); }


/* Sun–moon theme toggle */
.theme-toggle {
  position: relative;
  width: 64px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--clickable-bg);  
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  cursor: pointer;
  transition: background-color 140ms ease;
}
.theme-toggle:hover { background: var(--clickable-hover-bg); }
.theme-toggle .icon { font-size: 16px; line-height: 1; pointer-events: none; }
.theme-toggle .thumb {
  position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: 50%;
  /* solid thumb for contrast in both themes */
  background: var(--text);
  transition: left 160ms ease;
}
/* move thumb to the right in light mode */
[data-theme="light"] .theme-toggle .thumb { left: 35px; }

/* Optional focus ring */
.theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }


/* Center the login card only on the login page */
[data-page="login"] .page {
  max-width: 560px;       /* matches .card max-width */
  margin: 40px auto;      /* centers the page content */
  padding: 0 20px;
}

[data-page="login"] .card {
  margin: 16px auto 0;    /* centers the card block */
}

[data-page="login"] .header-logo {
  margin: 15px;    /* to match the menu bar once logged in*/
  margin-left: 20px;
  margin-top: 15px;
  margin-bottom: 14px;
}

[data-page="login"] h1 {
  text-align: center;     /* optional, looks nicer */
}


/* Center the Account page content and its cards */
[data-page="account"] .page {
  max-width: 720px;      
  margin: 24px auto;     /* centres the page block */
  padding: 0 20px;
}

[data-page="account"] .card {
  margin-left: auto;     /* centres each card */
  margin-right: auto;
}

[data-page="account"] h1 {
  text-align: center;    /* optional */
}


/* Center the How-to page content and its cards */
[data-page="how-to"] .page {
  max-width: 720px;      
  margin: 24px auto;     /* centres the page block */
  padding: 0 20px;
}

[data-page="how-to"] .card {
  margin-left: auto;     /* centres each card */
  margin-right: auto;
}

[data-page="how-to"] h1 {
  text-align: center;    /* optional */
}


/* Mobile responseive design */


/* Keep the header on top at all sizes */
.trismeg-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg, #fff); /* ensure it paints over content in both themes */
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}



/* Full-page click blocker */
#uiBlocker {
  position: fixed;
  inset: 0;
  pointer-events: auto;         /* capture all clicks */
  background: transparent;      /* keep it invisible; change if you want a veil */
  cursor: progress;
  z-index: 2147483647;          /* above everything */
  display: none;
}

/* Role choice modal  in login.html */
.rcm-backdrop[hidden] { display: none !important; }
.rcm-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: rgba(0,0,0,.45);
  pointer-events: auto; /* ensure clicks are captured */
}
.rcm-dialog {
  width: min(520px, 92vw);
  background: var(--panel, #fff);
  color: var(--fg, #0b1220);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2);
  pointer-events: auto; /* clicks allowed inside */
}
.rcm-header {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border, #e5e7eb);
}
.rcm-close {
  width: 28px; height: 28px; line-height: 26px; text-align: center;
  border-radius: 6px; border: 1px solid var(--border, #e5e7eb);
  background: #fff; color: #b91c1c; font-weight: 700; font-size: 16px;
}
.rcm-close:hover { background: #fee2e2; border-color: #fecaca; }
.rcm-body { padding: 14px 16px; }
.rcm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rcm-btn {
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border, #e5e7eb); background: #f3f4f6; cursor: pointer;
}
.rcm-btn.admin { background: #eef6ff; }
.rcm-btn.assistant { background: #ecfdf5; }

/* UI V2 20/10/2025 */
/* ===== Global floating app + background gradient ===== */
/* Consolidated tokens (last values win) */

/* Background: use the later, stronger sweep (wins) */
html, body {
  background:
    linear-gradient(120deg, var(--bg-grad-green) 0%, var(--bg-grad-blue) 100%),
    radial-gradient(1400px 700px at -10% 0%, #e8fff3 0%, #0000 70%),
    radial-gradient(1200px 700px at 110% 100%, #e8f0ff 0%, #0000 65%),
    var(--bg);                 /* fallback token */
  min-height: 100svh;
  width: 100%;
}

/* Floating shell (last values win, deduped) */
.site-shell {
  max-width: 1200px;
  margin: 24px auto 72px !important;
  padding-left: clamp(8px, 3vw, 24px);
  padding-right: clamp(8px, 3vw, 24px);
  border-radius: 24px;
  background: var(--panel);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.10),
    0 8px 20px rgba(0, 0, 0, 0.06);
  overflow: visible; /* latest guard to avoid clipping */
}
.site-shell .layout { background: #fafbfc; padding-bottom: 24px; }

/* Gutters to keep body gradient visible */
.site-shell {
  margin-left: auto !important;
  margin-right: auto !important;
}
.site-shell {
  margin-left: clamp(8px, 3vw, 24px) !important;
  margin-right: clamp(8px, 3vw, 24px) !important;
  margin-bottom: clamp(40px, 6vh, 80px) !important;
}


/* Nav on white + active underline (later values win) */
.trismeg-nav {
  background: #fff !important;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0 !important;
  backdrop-filter: blur(8px);
}
.menu a { position: relative; }
.menu a.active {
  background: transparent;
  color: var(--text);
}
.menu a.active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand-green-1), var(--bg-grad-blue));
}

/* Tables rounded */
table,
.table,
.table-view {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
}
table thead th,
.table thead th {
  background: color-mix(in oklab, var(--panel) 92%, #0000);
}

/* Inputs rounding (safe global enhancement) */
input[type="text"],
input[type="email"],
input[type="password"],
input.input,
textarea.input {
  border-radius: 12px;
}

/* Messages: later 3D spec + selected/active */
.message {
  border-radius: 14px;
  background: color-mix(in oklab, var(--panel) 96%, #0000);
  border: 1px solid color-mix(in oklab, var(--border) 90%, #0000);
  box-shadow:
    0 12px 26px rgba(0,0,0,.10),
    0 4px 10px rgba(0,0,0,.07);
}
.message.user { background: color-mix(in oklab, var(--panel) 98%, #0000); }
.message.assistant { background: color-mix(in oklab, var(--panel) 94%, #0000); }

/* Selected / active chat message (deduped identical blocks) */
#chatStream .message.selected,
.message.active,
.message.is-active {
  background: #fff;
  border: 1px solid var(--brand-green-2) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.12),
    0 4px 10px rgba(0,0,0,.08);
}

/* History “table view” cells (+ selected state) */
.history-right .history-item,
.history-right .item,
.history-right .row,
.history-right li,
.history .history-item {
  background: color-mix(in oklab, var(--panel) 96%, #0000);
  border: 1px solid color-mix(in oklab, var(--border) 90%, #0000);
  border-radius: 12px;
  box-shadow:
    0 10px 22px rgba(0,0,0,.10),
    0 3px 8px rgba(0,0,0,.06);
}
.history-right .history-item + .history-item,
.history-right .item + .item,
.history-right .row + .row,
.history-right li + li { margin-top: 8px; }
.history-right .history-item.selected,
.history-right .history-item.active,
.history-right .history-item[aria-current="true"] {
  background: #fff;
  border-color: var(--brand-green-2) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.10),
    0 3px 8px rgba(0,0,0,.06);
}

/* Buttons 3D (later version) */
.btn {
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 8px 18px rgba(0,0,0,.10);
  transition: transform .06s ease, box-shadow .12s ease, filter .12s ease;
  transform: translateZ(0);
}
.btn:hover {
  box-shadow:
    0 2px 0 rgba(0,0,0,.05),
    0 10px 24px rgba(0,0,0,.14);
  filter: brightness(1.01);
}
.btn:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(0,0,0,.06),
    0 8px 16px rgba(0,0,0,.16);
}

/* Primary CTAs — use the final “lite” gradient block (wins) */
#sendBtn, #micBtn, #newChatBtn,
[data-page] .btn-primary,
[data-page] button.primary,
[data-page] .cta,
[data-page="login"] #loginBtn,
[data-page="account"] #logoutBtn {
  background: linear-gradient(
    145deg,
    color-mix(in oklab, var(  --bg-grad-green) 55%, white) 0%,
    var(  --bg-grad-green) 45%,
    var( --bg-grad-green) 100%
  );
  border: 2px solid color-mix(in oklab,  var( --bg-grad-green-darker) 70%, #0000);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 5px 10px lightgrey;
  color: black !important;
  font-weight: 800 !important;
  font-size: 14px;
}
#micBtn { width: 44px; padding: 0; }
#sendBtn:hover, #micBtn:hover, #newChatBtn:hover,
[data-page] .btn-primary:hover,
[data-page] button.primary:hover,
[data-page] .cta:hover { filter: brightness(1.03); }
[data-page] .btn-primary:disabled,
[data-page] button.primary:disabled,
[data-page] .cta:disabled,
#sendBtn:disabled, #micBtn:disabled, #newChatBtn:disabled {
  color: black !important;
  font-weight: 800 !important;
  font-size: 14px;
}

/* Chat / Sources structure */
/* Chat pane: final state is transparent with rounding (wins over earlier solid) */
.chat-pane {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  --chat-stream-max-h: 58vh; /* cap inside pane */
}
#chatStream {
  border-radius: 16px;
  max-height: var(--chat-stream-max-h);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: transparent;
}

/* Sources: use the final “square top + undercast” (wins) */
#sourcesSection.sources,
#sourcesWrap,
.view-sources,
.sources {
  margin-top: 0 !important;
  margin-bottom: 16px;
  border-top: 1px solid var(--border) !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,0.03),
    0 16px 28px -14px rgba(0,0,0,0.22);
  background-clip: padding-box;
}
#sourceBalloons .chip { box-shadow: 0 4px 8px rgba(0,0,0,.08); }
/* Remove unwanted top spacing above the View Sources heading */
.sources > h4 {
  margin-top: 0;       /* kill the browser default margin */
  padding-top: 0;      /* ensure no padding is sneaking in */
  line-height: 1.2;    /* optional: makes it tighter and cleaner */
  margin-bottom: 6px;
  padding-bottom: 0;
}
.sources {
  padding-top: 7px;
}

/* History/Sources containers 3D */
.history-right,
.history,
.history-pane {
  border-radius: 16px;
  overflow: clip;
  background: var(--panel);
  box-shadow:
    0 18px 40px rgba(0,0,0,.10),
    0 6px 14px rgba(0,0,0,.06);
  border: 1px solid var(--border);
}

/* Viewer + “More details” cards */
#sourceViewer,
.source-viewer,
.file-viewer {
  display: block;
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 100%;
  box-sizing: border-box;
  margin: 12px 0 16px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--card-shadow-0);
}
#sourceViewer video,
#sourceViewer iframe,
#sourceViewer canvas,
#sourceViewer img { border-radius: 8px; }

/* “More details” editor */
.input.textarea.answer-full-html,
.answer-full-html {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--card-shadow-1) !important;
  padding: 12px 14px;
  resize: vertical;
  outline: none;
}
.input.textarea.answer-full-html:focus {
  border-color: color-mix(in oklab, var(--brand-green-2) 55%, var(--border)) !important;
}

/* Composer — use the final polished layout + later top shadow */
.composer {
  display: grid;
  grid-template-columns: auto 1fr auto; /* mic | input | send */
  gap: 8px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  position: relative;
  z-index: 1; /* sits above chat stream */
  box-shadow:
    0 -10px 18px rgba(0,0,0,.08); /* soft shadow on the top edge */
}
.composer .btn { margin: 0; }
#composerInput,
.composer textarea,
.composer .text-input {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--border) 90%, #0000);
  background: #fff;
  box-shadow:
    0 2px 6px rgba(0,0,0,.06) inset,
    0 1px 0 rgba(0,0,0,.03);
  outline: none;
}
/* #composerInput:focus,
.composer textarea:focus {
  border-color: color-mix(in oklab, var(--brand-green-2) 55%, var(--border));
} */

/* Nuggets cards + active state */
.nuggets-pane .nugget-item {
  box-sizing: border-box; /* prevents size jump when border changes */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--card-shadow-0);
  transition: box-shadow .12s ease, transform .06s ease, border-color .12s ease;
}
.nuggets-pane .nugget-item:hover { box-shadow: var(--card-shadow-1); }
.nuggets-pane .nugget-item.selected
{
  background: #fff;
  border-color: #f4b400 !important;
  border-width: 1px;
  box-shadow: var(--card-shadow-1) !important;
}

/* HOW-TO / ACCOUNT / LOGIN page polish (kept as-is) */
[data-page="how-to"] .page-content > * {
  max-width: 720px;
  margin: 0 auto;
}
[data-page="how-to"] .page-content section,
[data-page="how-to"] .page-content article,
[data-page="how-to"] .page-content .guide-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow-1);
  padding: 20px;
}
[data-page="how-to"] h1 { margin: 16px auto 16px; max-width: 720px; }
[data-page="how-to"] hr,
[data-page="how-to"] .rule {
  border: 0; height: 1px; background: var(--border);
  max-width: 720px; margin: 12px auto 20px;
}
[data-page="account"] .page-content {
  max-width: 920px;
  margin: 16px auto 24px;
  padding: 0 16px 20px;
  box-sizing: border-box;
}
[data-page="account"] .page-content .card,
[data-page="account"] .page-content section,
[data-page="account"] .page-content .panel,
[data-page="account"] .page-content .box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow-1);
  padding: 18px;
  margin: 16px 0;
}
[data-page="account"] .page-content h1 {
  max-width: 920px;
  margin: 16px auto 8px;
}
[data-page="account"] .page-content .actions .btn,
[data-page="account"] #logoutBtn { min-width: 96px; }

[data-page="login"] .page-content {
  max-width: 560px;
  margin: 16px auto 24px;
  padding: 0 16px 80px;
  box-sizing: border-box;
}
[data-page="login"] .page-content .card,
[data-page="login"] .page-content form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow-1);
  padding: 18px;
}
[data-page="login"] .page-content h1 { text-align: center; margin: 16px 0 12px; }
[data-page="login"] input[type="email"],
[data-page="login"] input[type="password"] {
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--border) 92%, #0000);
  background: #fff;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.06);
}
[data-page="login"] #loginBtn { width: 110px; }

/* How-to guide card specifics + inline nugget icon */
[data-page="how-to"] .page-content { max-width: 760px; margin: 16px auto 24px; padding: 12px 16px 20px; box-sizing: border-box; }
[data-page="how-to"] .guide-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--card-shadow-1);
  padding: 18px 20px;
  margin: 12px 0 16px;
}
[data-page="how-to"] .guide-card h1 { margin: 4px 0 14px; }
[data-page="how-to"] .guide-card ol { margin: 0; padding-left: 20px; }
.nugget-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -3px;
  margin: 0 4px;
  border-radius: 4px;
}


/* FIXES UI 20/10/25  */

/* --- FINAL OVERRIDES (append at end) ------------------------------------ */

/* a) Force the floating shell to stay perfectly centred on desktop */
.site-shell {
  display: block;
  max-width: 1200px;
  margin: 24px auto 64px !important;   /* centered horizontally + bottom gap */
  margin-left: auto !important;         /* hard-enforce centring */
  margin-right: auto !important;
}



/* b) Ensure a visible gap between main.layout and the shell edge */
.site-shell .layout {
  background: #fafbfc;                  /* keep your current sheet colour */
  padding-bottom: 16px !important;      /* subtle breathing room at the bottom */
  /* (optional, uncomment if you also want a top gap)
     padding-top: 12px !important;
  */
}


/* Ensure the inner <form> stays flat as well (safety) */
[data-page="login"] .page-content form {
  box-shadow: none !important;
  border-radius: 0 !important;
  border: 0px !important;
}

/* =========================================================
   PowerView Login Page (aligned with Magic Login)
   ========================================================= */

body[data-page="login"] .page-content {
  max-width: 620px;
  margin: 26px auto 0;
  padding: 0 20px;
  box-sizing: border-box;
}

body[data-page="login"] .site-shell,
body[data-page="magic-login"] .site-shell {
  padding-bottom: clamp(32px, 5vh, 56px);
}

body[data-page="login"] .page-content h1 {
  text-align: left;
  margin: 0 0 16px;
  font-size: clamp(24px, 2.7vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

body[data-page="login"] .page-content .card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, color-mix(in oklab, var(--panel) 96%, white), color-mix(in oklab, var(--bg-grad-blue) 12%, var(--panel))),
    var(--panel);
  padding: 30px 34px;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10), 0 4px 14px rgba(15, 23, 42, 0.06);
  border: 1px solid color-mix(in oklab, var(--border) 78%, var(--bg-grad-blue));
  margin: 0 0 20px;
}

body[data-page="login"] .page-content .card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  height: 5px;
  background: linear-gradient(90deg, transparent, var(--bg-grad-green-darker), var(--bg-grad-blue-darker));
  opacity: .72;
}

body[data-page="login"] #loginForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: transparent;
}

body[data-page="login"] #loginForm label {
  color: var(--muted);
  font-weight: 800;
}

body[data-page="login"] input[type="email"],
body[data-page="login"] input[type="password"] {
  height: 48px;
  padding: 12px 16px;
  font-size: 15px;
  border: 1px solid color-mix(in oklab, var(--border) 82%, var(--bg-grad-blue-darker));
  border-radius: 14px;
  background: color-mix(in oklab, var(--panel) 94%, white);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

body[data-page="login"] input[type="email"]:focus,
body[data-page="login"] input[type="password"]:focus {
  outline: 3px solid color-mix(in oklab, var(--bg-grad-green-darker) 24%, transparent);
  border-color: color-mix(in oklab, var(--bg-grad-green-darker) 58%, var(--border));
}

body[data-page="login"] .auth-actions-row {
  margin-top: 6px;
  gap: 12px;
}

body[data-page="login"] .auth-actions-row .btn {
  min-width: 0;
  min-height: 44px;
  padding-left: 24px;
  padding-right: 24px;
}

body[data-page="login"] #loginBtn {
  width: fit-content;
}

body[data-page="login"] .auth-alt-actions .btn.ghost {
  font-size: 14px;
  padding-inline: 22px;
}

body[data-page="login"] .auth-footnote {
  margin: 4px 0 0;
}


/* —— Fix A: Composer should NOT have bottom rounding (fused to Sources) —— */
.composer {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: 0 !important;     /* no seam above Sources */
  margin-bottom: 0 !important;     /* sits flush with Sources */
}

/* —— Fix B: Remove the gap between the header and the main layout —— */
/* kill any stray spacing after the nav */
.trismeg-nav { margin-bottom: 0 !important; }

/* remove top margin/padding the layout might re-introduce */
.site-shell .layout {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* in case the first child inside the layout has its own top margin */
.site-shell .layout > *:first-child {
  margin-top: 0 !important;
}


/* Nav → content breathing room (small, consistent) */
.trismeg-nav { margin-bottom: 0 !important; }  /* no accidental extra gap */
.site-shell .layout {
  padding-top: 12px !important;                /* subtle space under nav */
}

/* --- Ensure targets can host a pseudo-element --- */
#chatStream .message,
.history-right .history-item,
.nuggets-pane .nugget-item { position: relative; }

/* --- Neutralize any full-border highlight on active/selected states --- */
#chatStream .message.selected,
#chatStream .message.active,
#chatStream .message.is-active,
.history-right .history-item.selected,
.history-right .history-item.active,
.history-right .history-item[aria-current="true"],
.nuggets-pane .nugget-item.selected,
.nuggets-pane .nugget-item.active-scope {
  border-color: var(--border) !important;   /* remove green/yellow outline */
  /* no change to shadows/backgrounds */
}

/* --- Stripe color per component --- */
#chatStream .message.selected,
#chatStream .message.active,
#chatStream .message.is-active,
.history-right .history-item.selected,
.history-right .history-item.active,
.history-right .history-item[aria-current="true"] { --stripe-color: var(--brand-green-1); }

.nuggets-pane .nugget-item.selected,
.nuggets-pane .nugget-item.active-scope { --stripe-color: #f4b300af; } /* orangey-yellow */

/* --- Draw the stripe on the LEFT edge, starting at TOP-LEFT, 50% height --- */
#chatStream .message.selected::before,
#chatStream .message.active::before,
#chatStream .message.is-active::before,
.history-right .history-item.selected::before,
.history-right .history-item.active::before,
.history-right .history-item[aria-current="true"]::before,
.nuggets-pane .nugget-item.selected::before,
.nuggets-pane .nugget-item.active-scope::before {
  content: "";
  position: absolute;
  left: -1px;                     /* sit over the left border; use 2px to keep inside */
  top: 0px;                         /* start at the very top-left corner */
  width: 10px;                     /* stripe thickness */
  height: 100%;                    /* only the top half */
  z-index: 1;                     /* above the card border */
  pointer-events: none;
  /* rounded bottom end only (matches screenshot look) */
  border-radius: 6px;
  background: linear-gradient(180deg, var(--stripe-color) 75%, var(--bg-grad-blue));
}


.nuggets-pane .nugget-item.selected::before,
.nuggets-pane .nugget-item.active-scope::before {
  background: linear-gradient(180deg, var(--stripe-color) 75%, #fff);
  width: 8px;
  height: 100%;
}

.history-right .history-item.selected::before,
.history-right .history-item.active::before,
.history-right .history-item[aria-current="true"]::before
{
  width: 8px;                     /* stripe thickness */
  height: 100%;      
}

/* Hide avatar for user messages & collapse spacing */
.message.no-avatar .avatar { display: none !important; }

/* In most flex/grid layouts this removes the left gap cleanly */
.message.no-avatar .content { margin-left: 0 !important; }

/* If your message container uses grid with a fixed first column, this helps: */
.message.no-avatar {
  grid-template-columns: 1fr !important; /* safe if you're already using grid */
}


/* Bold heading above the assistant bubble */
.message.assistant .content .user-input-heading {
  font-weight: 800;
  font-size: 1.3rem;      /* keep it slightly larger than body */
  line-height: 1.3;
  margin: 0 0 6px;         /* a little space above the bubble */
  color: var(--text);
  word-wrap: break-word;   /* long queries don’t overflow */
}


/* NAV: lock a clean height + vertical centering (fixes “short” menu) */

.trismeg-nav .menu { display:flex; align-items:center; gap: 24px; }
.trismeg-nav .menu a { padding: 12px 8px; font-weight: 800; font-size: 14px;}  /* keeps underline in the right spot */


/* ACCOUNT: center the content area and the cards themselves */
[data-page="account"] .page-content {
  max-width: 920px;
  margin: 16px auto 24px;   /* <- centers the whole page-content block */
  padding: 0 16px 20px;
  box-sizing: border-box;
}

/* Ensure every primary block inside the account page centers */
[data-page="account"] .page-content .card,
[data-page="account"] .page-content section,
[data-page="account"] .page-content .panel,
[data-page="account"] .page-content .box {
  width: min(760px, 100%);  /* a pleasant readable width */
  margin: 16px auto;        /* <- centers each card */
}



/* RESPONSIVE */ /* Slightly tighter on small screens */ 
@media (max-width: 720px) { .site-shell .layout { padding-top: 8px !important; } } 
/* Keep mobile gutters exactly as you already designed */ 
@media (max-width: 640px) { .site-shell { margin: 12px 12px calc(56px + env(safe-area-inset-bottom)) !important; } }
@media (max-width: 740px){ .site-shell { margin-top: 12px !important; } body { padding-bottom: 8px; } } 
@media (max-width: 640px) { .site-shell { margin: 12px 12px 64px !important; border-radius: 20px; } .site-shell .layout { padding-top: 12px; padding-bottom: 16px; } } 
@media (max-width: 380px) { .site-shell { margin: 8px 8px calc(48px + env(safe-area-inset-bottom)) !important; } } /* Responsive tweak */ 
@media (max-width: 900px){ .nugget-modal{ inset: 12% 6%; border-radius: 18px; } .nugget-modal-close{ width: 44px; height: 44px; font-size: 20px; } } /* ——— Mobile layout fixes (keep desktop as-is) ——— */ 
@media (max-width: 980px) { 
  /* Header should always sit above content */ 
  .trismeg-nav { position: sticky; top: 0; z-index: 2000; background: var(--panel, #fff); } 
  /* Single column grid; chat first, right column second */ 
  .layout { grid-template-columns: 1fr; gap: 12px; } 
  /* Right column must NOT have a fixed height on mobile */ 
  .right-column { grid-column: 1 / -1; height: auto !important; align-self: stretch; } 
  /* Inside the right column, panes become simple blocks (no fixed-height grid + no hidden overflow) */ 
  .history-pane { display: block; /* instead of grid container */ overflow: visible !important; 
  /* let content define height */ min-height: 0 !important; } 
  /* Remove desktop flex expectation on right-column children */ 
  .right-column .history-pane { flex: initial !important; } 
  /* Lists: turn off desktop “grid with fixed row height + max-height” */ 
  .history-list, #historyList, #nuggetList { display: block !important; grid-auto-rows: auto !important; max-height: none !important; height: auto !important; overflow: visible !important; padding-right: 0; 
  /* no inner scrollbar on mobile */ } 
  /* If you prefer internal scroll (optional), uncomment: .history-right .history-list, .nuggets-pane .history-list { max-height: 40vh !important; overflow: auto !important; }
  */ /* Chat: let rows size naturally; prevent narrow bubbles */ 
  .chat-pane { grid-template-rows: auto auto auto; /* instead of minmax(..., var(--chat-stream-max-h)) */ } 
  .chat-stream { max-height: none; } 
  /* .message, .message.user, .message.assistant { width: 100%; max-width: 100%; } */ 
  /* Chips area: avoid eating vertical space on small screens */ 
  .source-balloons { max-height: 120px; } } 
  /* Mobile refinements */ 
  @media (max-width: 980px) { 
    /* A. Chat: keep the pane compact; let the stream scroll */ 
    .chat-pane { 
      /* keep your grid; just stop it getting too tall on phones */ max-height: 82vh; /* pane cap */ grid-template-rows: auto auto auto; 
    } 
    .chat-stream { /* the chat log itself scrolls */ max-height: clamp(360px, 58vh, 640px); overflow-y: auto; min-height: 260px; } 
    /* B. Lists: bring back the spacing between rows */ .history-list, #historyList, #nuggetList { display: grid !important; /* keep grid so gap works */ grid-auto-rows: auto !important; 
      /* no fixed row height on mobile */ gap: 8px !important; 
      /* row spacing */ max-height: none !important; height: auto !important; overflow: visible !important; 
      /* page scrolls; lists don't trap scroll */ padding-right: 0; /* no inner scrollbar gutter on mobile */ width: 100% !important; 
    } 
    .history-list, #historyList { min-height: 140px; } 
    /* Make the Nuggets list truly full-width on mobile */ 
    .nuggets-pane, #nuggetList { width: 100% !important; box-sizing: border-box; } 
    #nuggetList { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; 
    /* single column that stretches */ justify-items: stretch !important; 
    /* children fill the column */ 
    min-width: 0 !important; 
    /* override desktop min-width */ } /* Ensure every child fills the list width (incl. empty state) */ 
    #nuggetList .nugget-item, #nuggetList .nuggets-empty { width: 100% !important; max-width: 100% !important; min-width: 0 !important; /* override desktop 280px */ box-sizing: border-box; } 
    /* Optional: if you prefer internal scroll inside each list instead, swap the overflow rules above for these two lines per list type: */ /* .history-right .history-list, .nuggets-pane .history-list { max-height: 40vh !important; overflow: auto !important; } */ } 
    /* --- Fix View Sources being cut off on mobile --- */
    @media (max-width: 980px) { 
      /* Let the pane expand with the viewer; only the stream should be capped */ 
      .chat-pane { max-height: none !important; overflow: visible !important; } 
    /* The sources section must be allowed to grow */ .sources { overflow: visible !important; } /* Make the viewer itself sensible on phones */ 
    #sourceViewer { width: 100%; display: block; min-height: 220px; 
      /* your default */ 
    } 
    /* For iframe/pdf/video viewers */ #sourceViewer .viewer-frame { height: clamp(320px, 62vh, 720px); /* visible but not massive */ max-width: 100%; } /* For canvas-based PDF viewer */ #sourceViewer .viewer-canvas-wrap { max-height: 62vh; /* scroll inside the viewer if tall */ overflow: auto; } } 
    @media (max-width: 720px) { .nav-inner { display: grid; grid-template-columns: 1fr auto; } .menu { justify-self: start; order: 3; grid-column: 1 / -1; } } /* Clamp on small screens to avoid squish; let them span more width */ 
    @media (max-width: 720px) {
      .message, .message.assistant { width: 95%; max-width: 95%; } 
      .message, .message.user { width: 80%; max-width: 80%; }
    }



/* MOBILE FIXES 20/10/25 */

/* =========================================================
   A) Chat History pane/card is wider than everything else
   --------------------------------------------------------- */
/* Keep the right column cards inside the shell gutters */
.history-right,
.history-pane {
  max-width: 100%;
  /* min-width: none; */
  min-width: 320px;
}

/* Lists and their children should never exceed their container */
.history-list,
#historyList {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible;              /* avoid inner scrollbars fighting page scroll */
}
.history-list > *,
#historyList > * {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* On narrow screens ensure the history panel follows the same inner padding rhythm */
@media (max-width: 980px) {
  .history-right .panel,
  .history-right .card,
  .history-pane .panel,
  .history-pane .card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   B) Long email breaks the nav
   --------------------------------------------------------- */
/* Make the right cluster flex nicely and clamp the email width */
.trismeg-nav .nav-right { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  min-width: 0;                   /* allows children to shrink */
}

/* Try a few common hooks for the email element */
.trismeg-nav .user-email,
.trismeg-nav .account-email,
.trismeg-nav [data-user-email] {
  max-width: clamp(120px, 22vw, 260px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep the overall bar stable in height and alignment */
.trismeg-nav,
.trismeg-nav .nav-inner {
  min-height: 56px;
  align-items: center;
}
.trismeg-nav .menu { flex: 0 0 auto; }
.trismeg-nav .logo { flex: 0 0 auto; }

/* =========================================================
   C) Theme toggle should not push/break layout
   --------------------------------------------------------- */
.theme-toggle,
.theme-switch,
[data-theme-toggle] {
  flex: 0 0 auto;
  align-self: center;
  margin-left: 4px;
}

/* On small screens, keep the right cluster from wrapping badly */
@media (max-width: 720px) {
  .trismeg-nav .nav-right {
    gap: 8px;
    max-width: 48%;
    justify-content: flex-end;
  }
}


/* DARK */

/* ===========================
   DARK THEME – token overrides
   =========================== */
:root[data-theme="dark"] {
  /* surfaces */
  --bg: #0e1621;                     /* deep teal/blue dusk */
  --panel: #131b26;                  /* card/panel surface */
  --border: #233041;                 /* subtle border on dark */

  /* text */
  --text: #e7edf6;
  --muted: #9db0c7;

  /* inputs/buttons */
  --btn-bg: #1a2431;
  --btn-text: #e7edf6;
  --input-bg: #0f1824;
  --input-text: #e7edf6;

  /* chips / clickable */
  --clickable-text: var(--text);
  --clickable-bg: rgb(34 197 94 / 20%);
  --clickable-hover-bg: rgb(34 197 94 / 40%);
  --nugget-hl: rgb(34 197 94 / 22%);

  /* gradients (background wash) */
  --bg-grad-1: #0b2a25;
  --bg-grad-2: #0b1f34;
  --bg-grad-green: #0f3a30;
  --bg-grad-green-darker: #0a2c24;
  --bg-grad-blue: #0e2c4a;
  --bg-grad-blue-darker: #0a2238;

  /* CTA ramps keep the same hue but tuned for dark */
  --brand-green-1: #2dbd6b;
  --brand-green-2: #16dd47;
  --brand-green-0: color-mix(in oklab, var(--brand-green-2) 65%, #ffffff);
  --brand-green-1-lite: color-mix(in oklab, var(--brand-green-1) 85%, #1a1a1a);
  --brand-green-2-lite: color-mix(in oklab, var(--brand-green-1) 65%, #1a1a1a);

  /* shadows get shorter/softer on dark */
  --card-shadow-1: 0 16px 28px rgba(0,0,0,.32), 0 4px 10px rgba(0,0,0,.24);
  --card-shadow-0: 0 10px 20px rgba(0,0,0,.26), 0 2px 6px rgba(0,0,0,.20);
}

/* Body gradient on dark */
:root[data-theme="dark"] html,
:root[data-theme="dark"] body {
  background:
    linear-gradient(120deg, var(--bg-grad-green) 0%, var(--bg-grad-blue) 100%),
    radial-gradient(1200px 700px at -10% 0%, var(--bg-grad-green-darker) 0%, #0000 70%),
    radial-gradient(1200px 700px at 110% 100%, var(--bg-grad-blue-darker) 0%, #0000 65%);
}

/* ===========================
   NAV + LAYOUT
   =========================== */
:root[data-theme="dark"] .trismeg-nav {
  background: color-mix(in oklab, var(--panel) 98%, transparent) !important;
  border-bottom: 1px solid var(--border);
}
:root[data-theme="dark"] .site-shell .layout {
  background: color-mix(in oklab, var(--panel) 96%, transparent); /* fixes “grey sheet” in Get Answers */
}

/* long email should truncate nicely in the header */
.trismeg-nav .user-email {
  max-width: min(36vw, 220px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===========================
   GENERIC CARDS / HEADINGS
   =========================== */
:root[data-theme="dark"] .message,
:root[data-theme="dark"] .message.user,
:root[data-theme="dark"] .message.assistant,
:root[data-theme="dark"] [data-page] .page-content .card,
:root[data-theme="dark"] [data-page] .page-content section,
:root[data-theme="dark"] [data-page] .page-content .panel,
:root[data-theme="dark"] [data-page] .page-content .box,
:root[data-theme="dark"] .nuggets-pane .nugget-item,
:root[data-theme="dark"] .history-right .history-item,
:root[data-theme="dark"] .composer,
:root[data-theme="dark"] #sourceViewer,
:root[data-theme="dark"] .source-viewer,
:root[data-theme="dark"] .file-viewer,
:root[data-theme="dark"] #answerFull,
:root[data-theme="dark"] .answer-full,
:root[data-theme="dark"] .long-answer {
  background: color-mix(in oklab, var(--panel) 98%, #0000) !important;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow-0);
}

/* Selected/active states should NOT flip to white on dark */
:root[data-theme="dark"] .message.active,
:root[data-theme="dark"] .message.is-active,
:root[data-theme="dark"] #chatStream .message.selected,
:root[data-theme="dark"] .history-right .history-item.selected,
:root[data-theme="dark"] .history-right .history-item[aria-current="true"],
:root[data-theme="dark"] .nuggets-pane .nugget-item.active-scope,
:root[data-theme="dark"] .nuggets-pane .nugget-item.selected {
  background: color-mix(in oklab, var(--panel) 94%, #0000) !important;
}

/* “stripe on the left” accent keeps working on dark */
:root[data-theme="dark"] .message.assistant.is-active::before,
:root[data-theme="dark"] .nuggets-pane .nugget-item.active-scope::before,
:root[data-theme="dark"] .history-right .history-item[aria-current="true"]::before {
  background: linear-gradient(180deg, var(--brand-green-2) 0%, #fff0 100%);
}

/* ===========================
   GET ANSWERS specifics
   =========================== */
/* active chat row & active message bubble should use dark panel */
:root[data-theme="dark"] .history-right .history-item.selected,
:root[data-theme="dark"] .history-right .history-item.active {
  border-color: color-mix(in oklab, var(--brand-green-2) 55%, var(--border));
}

/* “More details / long answer” viewer area */
:root[data-theme="dark"] .input.textarea.answer-full-html,
:root[data-theme="dark"] .answer-full-html {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--card-shadow-1) !important;
}

/* chips stay legible */
:root[data-theme="dark"] #sourceBalloons .chip {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* ===========================
   ACCOUNT / HOW-TO / LOGIN pages
   =========================== */
:root[data-theme="dark"] [data-page="account"] .page-content .card,
:root[data-theme="dark"] [data-page="how-to"] .guide-card,
:root[data-theme="dark"] [data-page="login"] .page-content .card {
  background: var(--panel) !important;   /* fixes (a)(b)(f) */
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ensure we never force white in forms */
:root[data-theme="dark"] [data-page="login"] .page-content form,
:root[data-theme="dark"] [data-page="login"] input[type="email"],
:root[data-theme="dark"] [data-page="login"] input[type="password"] {
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: color-mix(in oklab, var(--border) 90%, #0000) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
}

/* guide separators */
:root[data-theme="dark"] [data-page="how-to"] hr,
:root[data-theme="dark"] [data-page="how-to"] .rule {
  background: var(--border);
}

/* ===========================
   BUTTONS / CTAs
   =========================== */
:root[data-theme="dark"] #sendBtn,
:root[data-theme="dark"] #micBtn,
:root[data-theme="dark"] #newChatBtn,
:root[data-theme="dark"] [data-page] .btn-primary,
:root[data-theme="dark"] [data-page] button.primary,
:root[data-theme="dark"] [data-page] .cta {
  background: linear-gradient(145deg, var(--brand-green-0) 0%, var(--brand-green-1) 45%, var(--brand-green-2) 100%);
  color: #fff !important;
  border: 1px solid color-mix(in oklab, var(--brand-green-2) 70%, #0000);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 12px 24px rgba(0,0,0,.35);
}

/* ===========================
   “Gray sheet” under Chat History width on mobile
   =========================== */
.history-right { max-width: 100%; }
@media (max-width: 980px){
  .history-right .history-list,
  #historyList { width: 100% !important; }
}

/* ===========================
   Dark-mode toggle should show on all pages without breaking layout
   =========================== */
.trismeg-nav .mode-toggle { display: inline-flex; align-items: center; gap: 6px; }
.trismeg-nav .mode-toggle input { vertical-align: middle; }


/* MOBILE-ONLY NAV LAYOUT FIX (<= 640px) */
/* MOBILE NAV: logo + user on first row, menu full-width below */
@media (max-width: 640px) {
  .trismeg-nav .nav-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;     /* row 1: brand + user | row 2: menu */
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    width: 100%;
    min-width: 0;                       /* allow children to shrink */
  }

  /* Brand/logo at top-left */
  .trismeg-nav .logo,
  .trismeg-nav .brand,
  .trismeg-nav .site-logo {
    grid-column: 1;
    grid-row: 1;
    flex: 0 0 auto;
  }

  /* User box at top-right; clamp + ellipsize long emails */
  .trismeg-nav .user-box {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 52vw;                    /* room for the logo on the left */
    min-width: 0;
    overflow: hidden;
  }
  .trismeg-nav .user-box .user-email,
  .trismeg-nav .user-box a,
  .trismeg-nav .user-box span {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Menu takes the entire second row (full width under the logo) */
  .trismeg-nav .menu {
    grid-column: 1 / -1;                /* span both columns */
    grid-row: 2;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;                        /* prevent overflow */
    overflow: hidden;
    padding-top: 8px;
    border-top: 1px solid var(--border); /* subtle divider under row 1 */
  }
  .trismeg-nav .menu a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
  }

  /* Safety: never allow the header to cause horizontal scroll */
  .trismeg-nav { overflow-x: clip; }
}

/* FIX CHAT HISTORY SCROLL */
/* ==== Chat History: restore internal scroll ==== */
/* Works whether your list id is #historyList or class .history-list */

.history-pane .history-list,
#historyList {
  display: block;
  width: 100%;
  max-height: var(--history-max-h, 55vh); /* uses your token if set */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;      /* smooth iOS scroll */
  overscroll-behavior: contain;
  padding-right: 6px;                      /* avoids shadow clipping */
}

/* Ensure parent containers don't block the scroll area */
.history-pane,
.history-right {
  overflow: visible;   /* no clipping around the list */
  min-height: 0;       /* important when parent is flex/grid */
}

/* Slightly lower cap on small screens */
@media (max-width: 640px) {
  .history-pane .history-list,
  #historyList {
    max-height: 48vh;
  }
}


/* LOG IN FIXES AFTER ADDING SMART LINK */

/* Login form actions */
.auth-actions-row{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Group the secondary actions next to the primary button */
.auth-alt-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Keep buttons visually aligned and similar height */
.auth-actions-row .btn{
  min-width:130px;
  justify-content:center;
}

/* Slightly smaller ghost buttons so primary stands out */
.auth-alt-actions .btn.ghost{
  padding-inline:14px;
  font-size:13px;
}

/* Login footnote */
.auth-footnote{
  margin-top:10px;
}


/* =========================================================
   Magic Login Page (scoped by [data-page="magic-login"])
   ========================================================= */

body[data-page="magic-login"] .page-content {
  max-width: 620px;
  margin: 26px auto 0;
  padding: 0 20px;
  min-height: 0;
}


body[data-page="magic-login"] h1.auth-title {
  text-align: left;
  margin: 0 0 16px;
  font-size: clamp(24px, 2.7vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

body[data-page="magic-login"] .card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, color-mix(in oklab, var(--panel) 96%, white), color-mix(in oklab, var(--bg-grad-blue) 12%, var(--panel))),
    var(--panel);
  padding: 30px 34px;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10), 0 4px 14px rgba(15, 23, 42, 0.06);
  border: 1px solid color-mix(in oklab, var(--border) 78%, var(--bg-grad-blue));
  margin-bottom: 20px;
}

body[data-page="magic-login"] .card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  height: 5px;
  background: linear-gradient(90deg, transparent, var(--bg-grad-green-darker), var(--bg-grad-blue-darker));
  opacity: .72;
}

body[data-page="magic-login"] .auth-subtitle {
  max-width: 560px;
  margin: 0 0 18px;
  line-height: 1.5;
  color: var(--text);
  font-size: 16px;
}

body[data-page="magic-login"] .auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body[data-page="magic-login"] .auth-label {
  color: var(--muted);
  font-weight: 800;
}

body[data-page="magic-login"] .auth-input {
  height: 48px;
  padding: 12px 16px;
  font-size: 15px;
  border: 1px solid color-mix(in oklab, var(--border) 82%, var(--bg-grad-blue-darker));
  border-radius: 14px;
  background: color-mix(in oklab, var(--panel) 94%, white);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

body[data-page="magic-login"] .auth-input:focus {
  outline: 3px solid color-mix(in oklab, var(--bg-grad-green-darker) 24%, transparent);
  border-color: color-mix(in oklab, var(--bg-grad-green-darker) 58%, var(--border));
}

body[data-page="magic-login"] #magic-btn {
  margin-top: 6px;
  width: fit-content;
  padding-left: 28px;
  padding-right: 28px;
}

body[data-page="magic-login"] .auth-hint {
  margin-top: 14px;
}

/* Back link styling */
body[data-page="magic-login"] .auth-back {
  margin: 6px 0 0;
}

body[data-page="magic-login"] .auth-back a {
  display: inline-flex;
  align-items: center;
  min-height: 14px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  text-decoration: none;
  color: transparent;
  font-weight: 800;
  box-shadow: none;
}

body[data-page="magic-login"] .auth-back a:hover {
  background: transparent;
  border-color: transparent;
  color: transparent;
}


/* Toasts */
.toast-stack {
  position: fixed; top: 16px; right: 16px;
  display: grid; gap: 10px; z-index: 5000;
}
.toast {
  min-width: 280px; max-width: 420px;
  border-radius: 12px;
  padding: 12px 14px;
  color: #0b1b0f;
  background:
    linear-gradient(120deg, var(--bg-grad-green) 0%, var(--bg-grad-blue) 100%),
    #f6fff9;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.08);
}
.toast .t-title { font-weight: 800; margin-bottom: 2px; }
.toast .t-msg   { opacity: .85; font-size: .92rem; }
.toast.info     { background: #f5f8ff; }
.toast.error    { background: #fff5f5; }
.toast .t-close {
  float: right; border: 0; background: transparent; cursor: pointer;
  font-weight: 700; opacity: .6;
}
.toast .t-close:hover { opacity: 1; }

/* Account identity card layout */
.account-identity {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  border-radius: 12px;
}
.account-identity .identity-text .name  { font-size: 18px; font-weight: 700; }
.account-identity .identity-text .email { font-size: 14px; opacity: .85; }
.account-identity .identity-text .uid   { font-size: 13px; color: var(--muted); }

/* NEW: Admin / Assistant switch row */
.account-switch {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 250px;
}

.card {
  border-radius: 12px;
}

.page.page-account{
  min-height: 1000px;
}
/* Pending stste on Talvi nugget */

.nugget-item .foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.nugget-item .actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.nugget-item .actions-row {
  display: flex;
  gap: 6px;
}

.status-pill {
  font-size: 11px;
  line-height: 1.3;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
  white-space: nowrap;
}

.status-approved {
  background: rgba(46, 204, 113, 0.12); /* soft green */
  color: #27ae60;
}

.status-pending {
  background: rgba(243, 156, 18, 0.12); /* soft orange */
  color: #e67e22;
}

/* User name click account nav */

.user-box{
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.user-box:hover{
  opacity: 0.9;
}
.user-box:focus{
  outline: 2px solid var(--border);
  outline-offset: 2px;
  border-radius: 10px;
}

.user-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}

.user-box.active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--brand-green-1),
    var(--bg-grad-blue)
  );
}

.ui-block-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;

  /* BLOCK interaction without visually hiding UI */
  pointer-events: all;

  /* VERY subtle visual cue */
  background: transparent;
}

.ui-block-card{
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 8px 12px;
  border-radius: 999px;

  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);

  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

.ui-block-spinner{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid color-mix(in oklab, var(--text) 25%, transparent);
  border-top-color: var(--brand-green-1);
  animation: ui-spin 1s linear infinite;
}


@keyframes ui-spin{
  to { transform: rotate(360deg); }
}

/* FileViewer local busy overlay (inside mount) */
.fv-busy{
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  pointer-events: none; /* viewer remains blocked by global blocker; this is visual only */
}

.fv-busy-card{
  width: min(420px, 92%);
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(0,0,0,0.14);
}

.fv-busy-title{
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--text);
}

.fv-busy-sub{
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.fv-busy-bar{
  height: 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--panel) 85%, var(--text) 15%);
  overflow: hidden;
}

.fv-busy-bar-inner{
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg, var(--brand-green-1), var(--bg-grad-blue));
  border-radius: 999px;
  animation: fv-busy-slide 1.1s ease-in-out infinite;
}

@keyframes fv-busy-slide{
  0%   { transform: translateX(-60%); }
  100% { transform: translateX(260%); }
}

.source-viewer,
.file-viewer-mount{
  position: relative;
}

.nav-inner {
  display: flex;
  align-items: center;
}

.menu {
  margin: 0 auto;
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.powered-by-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  text-decoration: none;
  line-height: 1;
}

.powered-by-link[hidden] {
  display: none !important;
}

.powered-by-link:hover {
  opacity: 0.9;
}

.powered-by-logo {
  height: 25px;
  width: auto;
  margin-right: 20px;
  margin-top: 10px;
  margin-bottom: 0x;
  /* object-fit: contain; */
  display: block;
}

/* Custom audio player */
.fv-cc {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel) 92%, transparent);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  min-height: 42px; /* avoids layout jumping */
}

.fv-cc[data-empty="1"] {
  opacity: 0.55;
}

/* Audio captions (inside FileViewer) */
.fv-audio-cc {
  margin-top: 12px;
  padding: 14px 16px;

  border-radius: 14px;
  border: 1px solid var(--border);

  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--panel) 96%, transparent),
      color-mix(in oklab, var(--panel) 90%, transparent)
    );

  font-size: 16px;              /* bigger than body */
  font-weight: 700;
  line-height: 1.55;

  color: var(--text);
  text-align: center;

  min-height: 56px;             /* avoids layout jump */
  display: flex;
  align-items: center;
  justify-content: center;

  transition:
    background-color 120ms ease,
    opacity 120ms ease,
    transform 120ms ease;
}

/* Empty / no active caption */
.fv-audio-cc[data-empty="1"] {
  opacity: 0.45;
  font-style: italic;
}

/* Subtle “caption change” feel */
.fv-audio-cc:not([data-empty="1"]) {
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 6px 14px rgba(0,0,0,.06);
}

/* Dark theme tuning */
[data-theme="dark"] .fv-audio-cc {
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--panel) 94%, transparent),
      color-mix(in oklab, var(--panel) 86%, transparent)
    );
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 10px 22px rgba(0,0,0,.25);
}


/* File Viewer file summary  */


/* ─────────────────────────────────────────────
   File Summary panel (FileViewer)
   ───────────────────────────────────────────── */

.fv-shell{
  position: relative;
  display: flex;
  gap: 12px;
  width: 100%;
  min-height: 420px;
}

.fv-main{
  flex: 1 1 auto;
  min-width: 0;
}

.fv-topbar{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 50;
  display: inline-flex;
  gap: 8px;
}

.fv-summary-btn {
  height: 34px;
  font-weight: 700;
  cursor: pointer;
}


.fv-summary-panel{
  flex: 0 0 360px;
  max-width: 420px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in oklab, var(--panel) 92%, transparent);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: none;
}

.fv-shell.fv-summary-open .fv-summary-panel{
  display: block;
}

.fv-summary-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.fv-summary-title{
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
  line-height: 1.25;
}

.fv-summary-close{
  flex: 0 0 auto;           /* ✅ never shrink */
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(0,0,0,.12));
  background: transparent;
  color: var(--text, #111);
  cursor: pointer;
  display: grid;
  place-items: centre;      /* ✅ centres the X */
  line-height: 1;           /* ✅ stops weird baseline squeeze */
  font-size: 20px;
}
.fv-summary-close:hover{
  background: color-mix(in oklab, var(--panel, #fff) 80%, black 5%);
}

.fv-summary-download{
  flex: 0 0 auto;
  min-height: 30px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--primary, #10b981) 45%, var(--border, rgba(0,0,0,.12)));
  background: color-mix(in oklab, var(--primary, #10b981) 12%, var(--panel, #fff));
  color: var(--text, #111);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 0 12px;
  white-space: nowrap;
}

.fv-summary-download:hover{
  background: color-mix(in oklab, var(--primary, #10b981) 18%, var(--panel, #fff));
}

.fv-summary-download:disabled{
  cursor: wait;
  opacity: .7;
}

[data-theme="dark"] .fv-summary-close{
  border-color: rgba(255,255,255,.10);
}

[data-theme="dark"] .fv-summary-download{
  border-color: rgba(255,255,255,.14);
}

.fv-summary-body{
  padding: 12px;
  max-height: 60vh;
  overflow: auto;
}

.fv-summary-loading{
  min-height: 270px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 24px 18px;
  text-align: center;
  color: var(--muted);
}

.fv-summary-loading-orb{
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(145deg, color-mix(in oklab, var(--bg-grad-green) 56%, white), color-mix(in oklab, var(--bg-grad-blue) 35%, white));
  border: 1px solid color-mix(in oklab, var(--bg-grad-green-darker) 52%, transparent);
  box-shadow: 0 8px 20px rgba(42, 109, 82, .14);
}

.fv-summary-loading .spinner{
  width: 21px;
  height: 21px;
  border-radius: 999px;
  border: 3px solid color-mix(in oklab, var(--bg-grad-green-darker) 28%, transparent);
  border-top-color: color-mix(in oklab, var(--brand-green-2) 70%, var(--bg-grad-blue));
  animation: fvSpin 0.8s linear infinite;
}

.fv-summary-loading-kicker{
  color: color-mix(in oklab, var(--brand-green-2) 58%, var(--text));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.fv-summary-loading-title{
  color: var(--text, #0b1220);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

.fv-summary-loading-status{
  max-width: 285px;
  min-height: 2.8em;
  font-size: 13px;
  line-height: 1.4;
}

.fv-summary-loading-progress{
  --summary-progress: 12%;
  width: min(100%, 276px);
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg-grad-green) 35%, var(--border));
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
}

.fv-summary-loading-progress span{
  display: block;
  width: var(--summary-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bg-grad-green-darker), var(--brand-green-2), var(--bg-grad-blue));
  transition: width 700ms cubic-bezier(.2,.85,.25,1);
}

.fv-summary-loading-steps{
  width: min(100%, 290px);
  display: flex;
  justify-content: space-between;
  color: color-mix(in oklab, var(--muted) 85%, transparent);
  font-size: 10px;
  font-weight: 700;
}

.fv-summary-loading-steps span{
  transition: color 180ms ease, transform 180ms ease;
}

.fv-summary-loading-steps .is-active{
  color: color-mix(in oklab, var(--brand-green-2) 66%, var(--text));
  transform: translateY(-1px);
}

.fv-summary-loading-steps .is-complete{
  color: color-mix(in oklab, var(--bg-grad-green-darker) 85%, var(--text));
}

.fv-summary-loading-meta{
  color: color-mix(in oklab, var(--muted) 82%, transparent);
  font-size: 11px;
}

@media (max-width: 480px){
  .fv-summary-loading{
    min-height: 230px;
    padding: 18px 14px;
    gap: 8px;
  }

  .fv-summary-loading-orb{
    width: 46px;
    height: 46px;
  }

  .fv-summary-loading-title{
    font-size: 15px;
  }
}

@keyframes fvSpin{ to{ transform: rotate(360deg); } }

.fv-summary-item{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: color-mix(in oklab, var(--panel) 94%, transparent);
  margin-bottom: 10px;
}

.fv-summary-item h4{
  margin: 0 0 8px;
  font-size: 13px;
}
.fv-summary-item p{
  font-size: 11px;
}

.fv-summary-actions{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.fv-summary-actions .btn.small{
  height: 32px;
}

.fv-shell {
  display: flex;
  gap: 14px;
}

.fv-main {
  flex: 1 1 auto;
  min-width: 0; /* important for overflow */
}

/* hidden by default */
.fv-summary-panel {
  display: none;
}

/* open state */
.fv-shell.fv-summary-open .fv-summary-panel {
  display: flex;
  flex: 0 0 20%;
  max-width: 20%;
  min-width: 200px; /* optional, stops it becoming too small */
}

.fv-summary-panel {
  flex-direction: column;
  border-left: 1px solid var(--border, rgba(0,0,0,.08));
  background: var(--panel-bg, #fff);
  border-radius: 12px;
  overflow: hidden;
}

.fv-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
}

.fv-summary-body {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 540px; /* ✅ height limit you asked for */
  padding: 10px 10px;
}

/* tighter cards */
.fv-summary-item {
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
}

.fv-summary-item .btn.small {
  font-weight: 600;
}

.fv-summary-item h4 {
  margin: 0 0 8px 0;
  font-size: 13px;
  line-height: 1.2;
}

.fv-summary-html {
  font-size: 11px;
  line-height: 1.45;
}

.fv-summary-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/* .fv-summary-body { max-height: calc(100vh - 260px); } */

.fv-shell.fv-summary-open .fv-topbar {
  display: none;
}


/* 3d effect ppf File Summary */
.fv-summary-item{
  border-radius: 14px;
  background: var(--panel, #fff);
  border: 1px solid color-mix(in oklab, var(--border, rgba(0,0,0,.12)) 70%, transparent);

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.08),
    0 3px 10px rgba(0, 0, 0, 0.06);
}

.fv-summary-item:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.10),
    0 6px 14px rgba(0, 0, 0, 0.08);
}

/* Stick title and close */
.fv-summary-head{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel, #fff);
}


/* Selected summary card */
.fv-summary-item.is-active{
  position: relative;
}

/* left vertical gradient stripe */
.fv-summary-item.is-active::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;

  /* Match card radius so it feels native */
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;

  background:
    linear-gradient(120deg, var(--bg-grad-green) 0%, var(--bg-grad-blue) 100%),
    radial-gradient(1400px 700px at -10% 0%, #e8fff3 0%, #0000 70%),
    radial-gradient(1200px 700px at 110% 100%, #e8f0ff 0%, #0000 65%),
    var(--bg);
}

/* small padding nudge so content doesn't feel cramped */
.fv-summary-item.is-active{
  padding-left: 14px;
}

/* ─────────────────────────────────────────────
   Compact side-panel headers (History + Nuggets)
   ───────────────────────────────────────────── */

.history-pane {
  padding: 10px; /* was 14px */
}

.history-header {
  margin-bottom: 6px; /* was 10px */
  min-height: unset;
}

/* Header titles */
.history-header h2,
.history-title {
  margin: 0;
  font-size: 14px;        /* was ~18–20px */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2px;
}

/* Nugget icon tighter alignment */
.history-title .nugget-icon {
  width: 18px;            /* was 28px */
  height: 18px;
  vertical-align: -3px;
  margin-right: 4px;
}

/* New Chat button: slimmer */
.history-header .btn {
  height: 26px;           /* was 44px */
  padding: 0 10px;
  font-size: 10px;
  font-weight: 600;
}

/* ─────────────────────────────────────────────
   Compact table view rows (History + Nuggets)
   ───────────────────────────────────────────── */

/* Shared title styling */
.history-item .title,
.nugget-item .title {
  font-size: 12px;        /* was ~14–15px */
  font-weight: 600;
  line-height: 1.25;
  padding-top: 4px;
}

/* Dates */
.history-item .date,
.nugget-item .date-foot {
  font-size: 11.5px;      /* was ~12px */
  line-height: 1.2;
  opacity: 0.75;
}

/* Reduce internal padding slightly */
.history-item {
  padding: 8px 10px;      /* was 10px */
}

.nugget-item {
  padding: 10px;          /* was 12px */
}

/* Action buttons: visually lighter, same hit area */
.history-item .del-btn,
.history-item .fav-star,
.nugget-item .del-btn,
.nugget-item .fav-star {
  font-size: 12px;
  padding: 3px 5px;
  min-width: 26px;
  height: 26px;
}

/* ─────────────────────────────────────────────
   Reduce Talvi Nugget cell height
   ───────────────────────────────────────────── */

#nuggetList .nugget-item {
  height: auto;           /* 🚨 remove the fixed 100px */
  min-height: unset;
  padding: 8px 10px;      /* tighter vertical padding */
  row-gap: 4px;           /* was 6px */
}

.nugget-item .foot {
  margin-top: 2px;        /* was ~6px */
  row-gap: 2px;
  align-items: center;
}

.nugget-item .foot {
  margin-top: 2px;        /* was ~6px */
  row-gap: 2px;
  align-items: center;
}

.nugget-item .title {
  line-height: 1.2;
}

/* ─────────────────────────────────────────────
   Tighten spacing between header and group label
   ───────────────────────────────────────────── */

/* Kill default h2 margins completely */
.history-header h2 {
  margin: 0;
}

/* Make header itself tighter */
.history-header {
  margin-bottom: 4px;   /* was ~6–10px */
}

/* Pull group header closer to the title */
.history-group-header {
  margin-top: 0px;      /* was ~10–14px */
}

.history-group-header {
  line-height: 1.1;
}

/* Compact header CTA: New Chat */
.history-header #newChatBtn {
  height: 30px;              /* override .btn 44px */
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700 !important;

  border-width: 1px;         /* slimmer than CTA default */
  border-radius: 999px;      /* pill looks lighter in headers */
  box-shadow: 0 1px 0 rgba(0,0,0,.05);  /* reduce “floating” height */

  line-height: 28px;         /* keeps text vertically centred */
}



/* ─────────────────────────────────────────────────────────────
   MOBILE: Get Answers tightening (nav, chat, composer, side lists)
   Paste near end of trismeg_rag_chat.css so it overrides earlier rules
   ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {

  /* Page gutters tighter */
  .layout {
    margin: 10px auto;
    padding: 0 12px;
    gap: 12px;
  }

  /* ── Nav: make it compact and usable ─────────────────────── */
  .nav-inner {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
  }

  .brand-wrap {
    justify-content: center;
  }

  .header-logo {
    margin: 0;
    width: 160px;
    height: auto;
  }

  .menu {
    padding: 6px 0;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .menu a {
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
  }

  .header-right,
  .user-box {
    justify-content: center;
    margin-right: 0;
  }

  /* ── Chat: keep it clean and readable ────────────────────── */
  .chat-pane {
    border-radius: 16px;
  }

  .chat-stream {
    padding: 12px;
    max-height: 48vh;
    overflow-y: auto;
  }

  /* Messages full width, better typography */
  .message,
  .message.user,
  .message.assistant {
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 14px;
    grid-template-columns: 34px 1fr;
    gap: 10px;
  }

  .message .avatar {
    width: 28px;
    height: 28px;
  }

  .message.assistant .avatar {
    width: 34px;
    height: 34px;
  }

  .message .bubble {
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: anywhere; /* fixes long numbers wrecking layout */
  }

  .message .meta {
    font-size: 11px;
    margin-top: 4px;
    opacity: 0.75;
  }

  .message .heading.user-input-heading {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 4px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* ── Composer: make input usable ─────────────────────────── */
  .composer {
    grid-template-columns: 40px 1fr 112px;
    gap: 8px;
    padding: 10px;
    align-items: center;
  }

  #micBtn.btn.icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  #sendBtn.btn.primary {
    height: 40px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    padding: 0 10px;
  }

  /* The key fix: stop the textarea becoming a tall awkward block */
  #userInput.input.textarea {
    min-height: 40px;
    height: 40px;
    max-height: 96px;
    padding: 9px 10px;
    line-height: 1.25;
    font-size: 14px;
    border-radius: 12px;
    resize: none;
  }

  /* ── Sources: keep it compact ────────────────────────────── */
  .sources {
    padding: 12px;
  }

  .sources h4 {
    margin: 0 0 8px 0;
    font-size: 13px;
  }

  .source-balloons {
    max-height: 92px;
    gap: 8px;
  }

  .chip {
    padding: 7px 10px;
    font-size: 12px;
  }

  /* ── Right column: restore independent scrolling lists ───── */
  .right-column {
    height: auto !important;
    gap: 12px;
    min-width: 0;
  }

  .history-pane {
    padding: 10px;
    border-radius: 16px;
    overflow: hidden; /* important, list scroll inside */
  }

  .history-header {
    margin-bottom: 6px;
  }

  .history-header h2,
  .history-title {
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 650;
  }

  /* NEW: cap the list height and re-enable y scroll */
  #historyList.history-list,
  #nuggetList.history-list {
    display: grid !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    max-height: 34vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 6px;
    -webkit-overflow-scrolling: touch;
  }

  /* Rows slightly tighter */
  .history-item {
    padding: 8px 10px;
  }

  .history-item .title {
    font-size: 13px;
    line-height: 1.25;
  }

  .history-item .date {
    font-size: 11px;
    opacity: 0.75;
  }

  /* Nuggets: avoid dead space and keep to content height */
  #nuggetList .nugget-item {
    height: auto;
    padding: 8px 10px;
    row-gap: 4px;
    min-width: 0;
  }

  .nugget-item .title {
    font-size: 13px;
    line-height: 1.25;
  }

  .nugget-item .date-foot {
    font-size: 11px;
    opacity: 0.75;
  }

  .status-pill {
    font-size: 11px;
    padding: 2px 8px;
    line-height: 1.2;
  }

  /* Header New Chat: keep it compact in the panel */
  .history-header #newChatBtn {
    height: 28px;
    line-height: 26px;
    padding: 0 10px;
    font-size: 12px;
    border-width: 1px;
    border-radius: 999px;
    box-shadow: 0 1px 0 rgba(0,0,0,.05);
  }


  /* a) Send button: visually small (emoji-like) */
  #sendBtn.btn.primary {
    width: 44px;                 /* become icon button */
    min-width: 44px;
    padding: 0;
    font-size: 18px;             /* emoji size */
    font-weight: 800;
    letter-spacing: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
  }

  /* b) Make textarea usable again (don’t get stuck tall + narrow) */
  .composer {
    grid-template-columns: 44px 1fr 44px;  /* mic | input | send */
    align-items: center;
  }

  #userInput.input.textarea {
    width: 100%;
    min-height: 44px;
    height: 44px !important;  
    max-height: 120px;
    padding: 10px 12px;
    line-height: 1.25;
    font-size: 15px;
    border-radius: 14px;
    overflow-y: auto;
  }

  /* Make the placeholder less chunky on mobile */
  .composer textarea::placeholder {
    font-weight: 650;
    opacity: 0.7;
  }

  /* e) Remove avatars on mobile (more space for content) */
  .message {
    grid-template-columns: 1fr !important;  /* kill avatar column */
  }
  .message .avatar {
    display: none !important;
  }

  /* tighten message padding a touch */
  .message,
  .message.user,
  .message.assistant {
    padding: 10px 12px;
  }

  /* c) FileViewer toolbar: stop overlap + tame File Summary button */
  .viewer-toolbar {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  .viewer-toolbar .file-summary-btn,
  .viewer-toolbar .btn-file-summary,
  .viewer-toolbar [data-role="file-summary"],
  .viewer-toolbar button[data-action="file-summary"],
  .viewer-toolbar button#fileSummaryBtn {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 999px;
    white-space: nowrap;
  }

  /* ensure toolbar never overlays content */
  .viewer-canvas-wrap {
    position: relative;
    z-index: 0;
  }


  /* ─────────────────────────────────────────────
     Composer textarea: readable writing space
     ───────────────────────────────────────────── */

  #userInput.input.textarea {
    /* Show ~5 lines immediately */
    min-height: 120px;
    height: 120px !important;   /* override any inline autosize */
    max-height: 220px;

    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.45;

    border-radius: 16px;
    resize: none;
    overflow-y: auto;
  }

  /* ─────────────────────────────────────────────
     Placeholder: make it calm, not shouty
     ───────────────────────────────────────────── */

  #userInput::placeholder {
    font-size: 13px;            /* was effectively ~15–16px */
    font-weight: 500;           /* kill heavy CTA weight */
    line-height: 1.3;
    opacity: 0.6;
    letter-spacing: 0;
  }

  /* iOS / WebKit placeholder variants */
  #userInput::-webkit-input-placeholder {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.6;
  }

  #userInput::-moz-placeholder {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.6;
  }
  

  /* ─────────────────────────────────────────────
     Composer alignment: pin buttons to bottom
     ───────────────────────────────────────────── */

  .composer {
    align-items: end;   
  }

  /* Ensure buttons sit on the same baseline */
  #micBtn,
  #sendBtn {
    align-self: end;
    margin-bottom: 6px;          /* subtle breathing room */
  }

  /* ─────────────────────────────────────────────
     Input text: slightly smaller & denser
     ───────────────────────────────────────────── */

  #userInput.input.textarea {
    font-size: 14px;             /* was 15px */
    line-height: 1.4;            /* slightly tighter */
  }
}

@media (max-width: 720px) {

  /* ─────────────────────────────────────────────
     FileViewer: stop overlays, make summary below
     ───────────────────────────────────────────── */

  /* Make shell a normal vertical stack */
  .fv-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Main viewer stays first */
  .fv-main {
    order: 1;
  }

  /* Topbar becomes an in-flow row (no overlay) */
  .fv-topbar {
    order: 2;
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: auto !important;

    display: flex;
    justify-content: flex-end;
    padding: 0 2px;
  }

  /* The AI File Summary button: compact */
  .fv-summary-btn {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
  }

  /* Summary panel: always below viewer */
  .fv-summary-panel {
    order: 3;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;

    border-radius: 14px;
    overflow: hidden;
  }

  /* On mobile we do NOT want it as a sidebar that squeezes the PDF.
     Keep it hidden until opened. */
  .fv-summary-panel {
    display: none;
  }
  .fv-shell.fv-summary-open .fv-summary-panel {
    display: block;
  }

  /* Summary head compact */
  .fv-summary-head {
    padding: 10px 10px 8px;
    gap: 8px;
  }
  .fv-summary-title {
    font-size: 13px;
    font-weight: 700;
  }
  .fv-summary-close {
    width: 28px;
    height: 28px;
    border-radius: 10px;
  }

  /* d) Summary content as horizontal scroll rail */
  .fv-summary-body {
    padding: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Summary items become cards in a row */
  .fv-summary-body > div {
    display: inline-flex;
    gap: 10px;
  }

  .fv-summary-item {
    display: inline-flex;
    flex-direction: column;
    vertical-align: top;
    width: 260px;             /* tweak: 240–300 */
    max-width: 78vw;
    white-space: normal;

    border-radius: 14px;
    padding: 10px;
  }

  .fv-summary-item h4 {
    font-size: 13px;
    line-height: 1.2;
    margin: 0 0 6px 0;
  }

  .fv-summary-html {
    font-size: 12.5px;
    line-height: 1.35;
  }

  .fv-summary-actions .btn.small {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 10px;
  }

  /* c) PDF toolbar: ensure it never gets visually covered */
  .viewer-toolbar {
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    gap: 8px;
  }

  .viewer-pagebox {
    gap: 6px;
  }
}

/* ─────────────────────────────────────────────────────────────
   EXTRA SMALL MOBILE (iPhone widths etc.)
   Fix overflow in right column + nav truncation
   Applies only under 450px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 450px) {

  /* Prevent the page from ever having horizontal scroll */
  html, body {
    overflow-x: hidden;
  }

  /* Layout gutters tighter */
  .layout {
    padding: 0 10px;
  }

  /* Ensure any column containers can shrink */
  .right-column,
  .history-pane,
  .history-list,
  #historyList,
  #nuggetList {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Kill the desktop “safety” min-widths that break small phones */
  #historyList {
    min-width: 0 !important;
  }
  #nuggetList.history-list {
    min-width: 0 !important;
  }

  /* Rows must not impose a minimum width */
  .history-item,
  #nuggetList .nugget-item,
  #nuggetList .nuggets-empty {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Title truncation: allow shrink without pushing layout */
  .history-item .title,
  .nugget-item .title {
    min-width: 0;
    max-width: 100%;
  }

  /* Actions area must not force overflow */
  .history-item .actions,
  .nugget-item .actions {
    min-width: 0;
  }

  /* ── Nav: ensure "Account" never gets cut off ─────────────── */

  /* Give the menu full width and make it horizontally scrollable */
  .menu {
    width: 100%;
    max-width: 100%;
    padding: 4px 6px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 6px;  
    /* keep pills from touching screen edge */
    scroll-padding-left: 8px;
    scroll-padding-right: 8px;
  }

  .menu a {
    font-size: 11px;          /* smaller than before */
    padding: 6px 6px;
    letter-spacing: -0.2px;  /* critical: reduces width */
    white-space: nowrap;

    /* Allow items to shrink instead of truncating */
    max-width: none;
    overflow: visible;
    text-overflow: clip;

    flex: 1 1 auto;           /* ⬅️ KEY FIX */
    text-align: center;
  }

  /* Logo block should not force nav wrap */
  .brand-wrap,
  .header-logo {
    max-width: 100%;
  }
}

/* Force nav link sizing on ultra-small screens */
@media (max-width: 450px) {

  /* Higher specificity: nav.menu a */
  nav.menu a,
  header .menu a,
  .trismeg-nav .menu a {
    font-size: 11px !important;
    line-height: 1.1 !important;
    padding: 6px 6px !important;
    letter-spacing: -0.2px !important;
    white-space: nowrap !important;

    /* stop any truncation styling */
    overflow: visible !important;
    text-overflow: clip !important;

    /* allow tabs to share width */
    flex: 1 1 0% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  /* If any rule is scaling the menu container, neutralise it */
  .trismeg-nav .menu,
  header .menu,
  nav.menu {
    transform: none !important;
  }
  /* Give text more space above underline/gradient */
  .trismeg-nav .menu a {
    padding-bottom: 10px;
  }

  /* Push the active underline / gradient down */
  .trismeg-nav .menu a.active::after {
    bottom: -4px;           /* increase gap below text */
  }
}


/* ─────────────────────────────────────────────
   FileViewer: Fullscreen button + fullscreen layout
   ───────────────────────────────────────────── */

.fv-fsbar{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 60;
  display: inline-flex;
  gap: 8px;
}

.fv-close-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(0,0,0,.12));
  background: color-mix(in oklab, var(--panel, #fff) 88%, transparent);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 22px rgba(0,0,0,.10);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.fv-close-btn:hover,
.fv-close-btn:focus-visible{
  background: color-mix(in oklab, var(--panel, #fff) 80%, black 6%);
}

.fv-fs-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(0,0,0,.12));
  background: color-mix(in oklab, var(--panel, #fff) 88%, transparent);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 22px rgba(0,0,0,.10);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.fv-fs-btn:hover{
  background: color-mix(in oklab, var(--panel, #fff) 80%, black 6%);
}

/* Active source remains unambiguous while its file is open. */
#sourceBalloons .chip.active,
#sourceBalloons .chip.selected{
  outline: 3px solid #20a85a;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(32, 168, 90, .18);
}

.scroll-to-top-btn{
  position: fixed;
  /* Keep the fixed control inside the 1200px application shell on desktop. */
  right: max(32px, calc((100vw - 1200px) / 2 + 16px), env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 200;
  width: 46px;
  height: 46px;
  border: 2px solid color-mix(in oklab, var(--bg-grad-green-darker) 70%, #0000);
  border-radius: 999px;
  background: linear-gradient(145deg, color-mix(in oklab, var(--bg-grad-green) 55%, white) 0%, var(--bg-grad-green) 45%, var(--bg-grad-green) 100%);
  color: #111;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 5px 10px lightgrey;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* The component uses the HTML hidden attribute. Override the display:grid
   declaration above so the browser can actually hide the floating control. */
.scroll-to-top-btn[hidden]{
  display: none !important;
}

/* A live FileViewer owns its scroll inside the document canvas.  The old
   source-viewer overflow created a second scrollbar which could move the PDF
   toolbar out of reach. */
#sourceViewer.file-viewer-active{
  max-height: none !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
}

.scroll-to-top-btn svg{
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scroll-to-top-btn:hover,
.scroll-to-top-btn:focus-visible{
  filter: brightness(1.03);
  transform: translateY(-1px);
}

@media (max-width: 720px){
  .scroll-to-top-btn{
    right: max(20px, env(safe-area-inset-right, 0px));
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
  }
}

[data-theme="dark"] .fv-fs-btn{
  border-color: rgba(255,255,255,.12);
  background: color-mix(in oklab, var(--panel) 86%, transparent);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

/* CSS-based fullscreen overlay (used as fallback or to enhance the fullscreen API) */
.fv-shell.fv-fullscreen{
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  padding: 12px;
  border-radius: 0;
  background: color-mix(in oklab, var(--panel, #fff) 96%, transparent);
  box-sizing: border-box;
}

/* Ensure the main viewer can actually fill height */
.fv-shell.fv-fullscreen .fv-main{
  height: 100%;
  min-height: 0;
}

/* Keep PDF canvas area usable in fullscreen */
.fv-shell.fv-fullscreen .viewer-canvas-wrap{
  max-height: calc(100vh - 120px);
  overflow: auto;
}

/* If summary panel is open in fullscreen, keep it scrollable */
.fv-shell.fv-fullscreen .fv-summary-panel{
  max-height: calc(100vh - 24px);
}
/* ─────────────────────────────────────────────
   Fullscreen: centre document
   ───────────────────────────────────────────── */

.fv-shell.fv-fullscreen .viewer-canvas-wrap {
  display: flex;
  justify-content: center;   /* ⬅️ centre horizontally */
  align-items: flex-start;   /* keep top aligned vertically */
  overflow: auto;
}

/* Ensure canvas itself doesn't stretch */
.fv-shell.fv-fullscreen .viewer-canvas-wrap canvas {
  max-width: 100%;
  height: auto;
}

/* ─────────────────────────────────────────────
   FileViewer summary panel: use full available height
   ───────────────────────────────────────────── */


/* In fullscreen give the shell a strict height so children can fill */
.fv-shell.fv-fullscreen {
  height: 100vh;
}

/* Summary panel fills its grid cell and becomes a flex column */
.fv-summary-panel {
  height: 100%;
  min-height: 0;              /* critical for nested scrolling */
  display: flex;
  flex-direction: column;
}

/* Header fixed, body fills remainder and scrolls */
.fv-summary-head {
  flex: 0 0 auto;
}

.fv-summary-body {
  flex: 1 1 auto;
  min-height: 0;              /* critical */
  overflow-y: auto;
  overflow-x: hidden;
}

/* ─────────────────────────────────────────────
   FileViewer summary panel visibility (fix)
   Only show panel when fv-summary-open is present
   ───────────────────────────────────────────── */

/* Default: summary panel is hidden */
.fv-shell .fv-summary-panel {
  display: none;
}

/* Head fixed, body fills and scrolls */
.fv-shell.fv-summary-open .fv-summary-head {
  flex: 0 0 auto;
}

.fv-shell.fv-summary-open .fv-summary-body {
  flex: 1 1 auto;
  min-height: 0; /* critical */
  overflow-y: auto;
  overflow-x: hidden;
}

/* Fullscreen height context */
.fv-shell.fv-fullscreen {
  height: 100vh;
}

/* ─────────────────────────────────────────────
   Summary open layout: no squeeze + no dead space
   ───────────────────────────────────────────── */



/* Main viewer takes remaining space and can grow */
.fv-shell.fv-summary-open .fv-main {
  flex: 1 1 auto;
  min-width: 0;               /* critical so it can shrink without overflow */
}

/* Summary panel has a capped width so it doesn’t steal too much */
.fv-shell.fv-summary-open .fv-summary-panel {
  flex: 0 0 320px;            /* fixed panel width */
  max-width: 320px;
  width: 320px;
  min-width: 320px;           /* small safety */
}


/* Smaller modal variant (dialogs such as "existing nugget" choice) */
.nugget-modal.nugget-modal--choice{
  inset: auto;                              /* override viewer sizing */
  top: 12vh;
  left: 50%;
  transform: translateX(-50%) scale(.985);  /* keep your pop animation */
  width: min(720px, calc(100vw - 28px));
  height: auto;
  max-height: calc(100vh - 24vh);
  overflow: hidden;
}

.nugget-modal-overlay.show .nugget-modal.nugget-modal--choice{
  transform: translateX(-50%) scale(1);
}

/* Do not force full-height body for small dialogs */
.nugget-modal.nugget-modal--choice .nugget-modal-body{
  height: auto;
  padding: 14px 16px 16px;
}

/* Reduce the close button size slightly for dialogs */
.nugget-modal.nugget-modal--choice .nugget-modal-close{
  width: 36px;
  height: 36px;
  font-size: 16px;
}

/* Optional: tighten heading and paragraph spacing inside dialog */
.nugget-modal.nugget-modal--choice h2{
  margin: 0 0 6px;
  font-size: 18px;
}
.nugget-modal.nugget-modal--choice p{
  margin: 0 0 12px;
}

/* ---- Nugget type modal: responsive, not massive ---- */
.nugget-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

.nugget-modal-overlay.show{
  display:flex;
}

.nugget-modal{
  width: min(760px, 96vw);
  max-height: min(680px, 92vh);
  background: #fff;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(2,6,23,.25);
  position: relative;
  overflow: hidden;
}

.nugget-modal-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.9);
  background: #fff;
  cursor: pointer;
  font-weight: 800;
}

/* Body becomes a 3 row layout: head / scroll list / actions */
.nugget-modal-body{
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 18px;
  height: 100%;
}

.nugget-modal-head h2{
  margin: 0 0 6px;
  font-size: 18px;
}

.nugget-modal-head p{
  margin: 0;
}

/* Scroll region for options */
.nugget-modal-list{
  overflow: auto;
  padding-right: 6px;  /* room for scrollbar */
}

/* Keep actions visible */
.nugget-modal-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid rgba(226,232,240,.9);
}

/* Mobile tuning */
@media (max-width: 520px){
  .nugget-modal{
    width: 96vw;
    max-height: 92vh;
    border-radius: 14px;
  }
  .nugget-modal-body{
    padding: 14px;
  }
  .nugget-modal-actions{
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---- Overlay must centre its dialog (force flex) ---- */
.nugget-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.45);
  display: none;
  padding: 18px;
  z-index: 9999;
}

.nugget-modal-overlay.show{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---- Modal sizing and internal layout ---- */
.nugget-modal{
  width: min(760px, 96vw);
  max-height: min(680px, 92vh);
  background: #fff;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(2,6,23,.25);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Close button stays top-right */
.nugget-modal-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.9);
  background: #fff;
  cursor: pointer;
  font-weight: 800;
}

/* Body must be able to shrink so the list can overflow */
.nugget-modal-body{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  flex: 1;
  min-height: 0; /* critical: allows children to overflow/scroll */
}

/* Your head is fine */
.nugget-modal-head h2{ margin: 0 0 6px; font-size: 18px; }
.nugget-modal-head p{ margin: 0; }

/* Scroll region */
.nugget-modal-list{
  flex: 1;
  min-height: 0;      /* critical */
  overflow: auto;     /* critical */
  padding-right: 6px; /* room for scrollbar */
}

/* Keep actions visible */
.nugget-modal-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid rgba(226,232,240,.9);
}



/* ============================================================
   Talvi Nugget dialogs ONLY (type picker + existing choice)
   Do NOT affect the main viewer modal (#nuggetModalOverlay)
   ============================================================ */

/* Turn these two overlays into true centred dialog hosts */
#nuggetTypeModalOverlay,
#existingNuggetChoiceOverlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(3px);
  display: none;
  z-index: 4100; /* above main UI; viewer modal uses 4000/4001 */
  padding: 18px;
}

#nuggetTypeModalOverlay.show,
#existingNuggetChoiceOverlay.show{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The dialog panel itself (NOT the big viewer modal) */
#nuggetTypeModalOverlay .nugget-modal,
#existingNuggetChoiceOverlay .nugget-modal{
  position: relative;     /* override fixed inset:15% 15% used by viewer modal */
  inset: auto;
  margin: 0;
  width: min(760px, calc(100vw - 36px));
  max-height: min(720px, calc(100vh - 36px));
  overflow: hidden;
}

/* Nice pop animation but scoped */
#nuggetTypeModalOverlay .nugget-modal,
#existingNuggetChoiceOverlay .nugget-modal{
  transform: scale(.985);
  opacity: .98;
  transition: transform .18s ease, opacity .18s ease;
}

#nuggetTypeModalOverlay.show .nugget-modal,
#existingNuggetChoiceOverlay.show .nugget-modal{
  transform: scale(1);
  opacity: 1;
}

/* Make the type modal body behave like: header / scroll list / actions */
#nuggetTypeModalOverlay .nugget-modal-body{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  flex: 1;
  min-height: 0; /* critical so the list can scroll */
}

/* Scroll region */
#nuggetTypeModalOverlay .nugget-modal-list{
  flex: 1;
  min-height: 0;  /* critical */
  overflow: auto; /* critical */
  padding-right: 6px;
}

/* Actions pinned at bottom */
#nuggetTypeModalOverlay .nugget-modal-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid rgba(226,232,240,.9);
}

/* Existing nugget choice: slightly narrower and not too tall */
#existingNuggetChoiceOverlay .nugget-modal{
  width: min(640px, calc(100vw - 36px));
  max-height: min(520px, calc(100vh - 36px));
}

/* Mobile: buttons stack nicely */
@media (max-width: 520px){
  #nuggetTypeModalOverlay .nugget-modal-actions{
    flex-direction: column;
    align-items: stretch;
  }
}

.existing-nugget-list{
  max-height: 280px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  gap: 10px;
}

.nugget-choice-item{
  width: 100%;
  text-align: left;
  height: auto;
  padding: 12px 12px;
  border-radius: 12px;
  display: grid;
  gap: 4px;
}

.nugget-choice-item .title{
  font-weight: 700;
  line-height: 1.25;
}

.nugget-choice-item .meta{
  font-size: 12px;
  opacity: 0.75;
}

/* =========================
   TALVI NUGGET SELECTOR MODAL
   ========================= */

.nugget-modal-body{
  padding: 22px 22px 18px;
}

.nugget-choice-head h2{
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.2;
}

.nugget-choice-head .muted{
  margin: 0 0 14px;
  opacity: 0.75;
}

/* List */
.existing-nugget-list{
  display: grid;
  gap: 10px;
  margin: 10px 0 16px;
}

/* Less green: neutral card with subtle accent on hover/active */
/* Talvi nugget selector cards */

.nugget-choice-item{
  width:100%;
  text-align:left;
  padding:14px 16px;
  border-radius:14px;

  border:1px solid rgba(40,160,90,0.18);

  /* subtle green background */
  background:linear-gradient(
    180deg,
    rgba(40,160,90,0.10),
    rgba(40,160,90,0.06)
  );

  transition:all .15s ease;
}

/* hover */
.nugget-choice-item:hover{
  background:linear-gradient(
    180deg,
    rgba(40,160,90,0.16),
    rgba(40,160,90,0.10)
  );

  border-color:rgba(40,160,90,0.30);

  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

/* selected */
.nugget-choice-item.is-active{
  background:linear-gradient(
    180deg,
    rgba(40,160,90,0.22),
    rgba(40,160,90,0.16)
  );

  border-color:rgba(40,160,90,0.45);

  box-shadow:0 8px 22px rgba(0,0,0,0.12);
}

/* title */
.nugget-choice-item .title{
  font-size:15px;
  font-weight:600;
  margin-bottom:4px;
}

/* meta */
.nugget-choice-item .meta{
  font-size:13px;
  opacity:0.7;
}

.nugget-choice-item .title{
  font-weight: 650;
  font-size: 15px;
  line-height: 1.25;
  margin-bottom: 6px;
}

.nugget-choice-item .meta{
  font-size: 13px;
  opacity: 0.75;
}

/* Footer: button right aligned, no cancel */
.nugget-choice-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
}

/* ===============================
   TALVI NUGGET TYPE MODAL
   =============================== */

.nugget-type-modal{
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
  border-radius: 24px;

  background: linear-gradient(120deg, var(--bg-grad-green) 0%, var(--bg-grad-blue) 100%);

  border: 1px solid rgba(255,255,255,0.35);

  box-shadow:
    0 30px 90px rgba(15,23,42,0.22),
    0 8px 28px rgba(15,23,42,0.12),
    inset 0 1px 0 rgba(255,255,255,0.45);

  backdrop-filter: blur(12px);
}

.nugget-type-modal .nugget-modal-body{
  display:grid;
  gap:20px;
  padding:28px;
}

/* ===============================
   HEADER
   =============================== */

.nugget-type-modal-head h2{
  margin:0 0 6px;
  font-size:22px;
}

.nugget-type-modal-head .muted{
  font-size:15px;
  color:#475569;
}

/* ===============================
   CLOSE BUTTON
   =============================== */

.nugget-type-modal .nugget-modal-close{
  position:absolute;
  top:16px;
  right:16px;

  width:40px;
  height:40px;

  border-radius:999px;

  border:1px solid rgba(148,163,184,0.25);
  background:rgba(255,255,255,0.8);

  font-weight:700;
  color:#dc2626;

  cursor:pointer;

  box-shadow:
    0 6px 18px rgba(15,23,42,0.12),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

.nugget-type-modal .nugget-modal-close:hover{
  background:#fff;
}

/* ===============================
   LIST
   =============================== */

.nugget-type-list{
  display:grid;
  gap:12px;

  max-height:60vh;
  overflow:auto;
}

/* ===============================
   CARD
   =============================== */

.nugget-type-option{
  display:block;
  cursor:pointer;
}

.nugget-type-option-main{

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:16px 18px;

  border-radius:20px;

  border:1px solid rgba(255,255,255,0.45);

  background:rgba(255,255,255,0.78);

  box-shadow:
    0 10px 26px rgba(15,23,42,0.08),
    0 2px 8px rgba(15,23,42,0.05),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(148,163,184,0.12);

  transition:
    transform .15s ease,
    box-shadow .18s ease,
    background .18s ease;
}

/* hover elevation */

.nugget-type-option:hover .nugget-type-option-main{

  transform:translateY(-2px);

  background:rgba(255,255,255,0.9);

  box-shadow:
    0 18px 40px rgba(15,23,42,0.12),
    0 4px 12px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

/* ===============================
   LEFT SIDE
   =============================== */

.nugget-type-option-left{
  display:flex;
  gap:14px;
  align-items:flex-start;
  flex:1;
}

.nugget-type-icon-wrap{

  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border-radius:14px;

  border:1px solid rgba(34,197,94,0.25);

  background:
    linear-gradient(180deg,
      rgba(220,252,231,0.9),
      rgba(255,255,255,0.9)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 4px 10px rgba(15,23,42,0.08);
}

.nugget-type-icon{
  width:22px;
  height:22px;
}

.nugget-type-copy strong{
  display:block;
  font-size:15px;
  color:#0f172a;
}

.nugget-type-copy .muted{
  font-size:13px;
  color:#475569;
}

/* ===============================
   RADIO BUTTON
   =============================== */

.nugget-type-option input[type="radio"]{

  width:20px;
  height:20px;

  margin-left:14px;

  accent-color:#16a34a;

  cursor:pointer;
}

/* IMPORTANT
   do NOT style the card when selected */

.nugget-type-option input[type="radio"]:checked + *{
  outline:none;
}

/* ===============================
   ACTIONS
   =============================== */

.nugget-type-modal .nugget-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;

  padding-top:16px;

  border-top:1px solid rgba(255,255,255,0.35);
}

.nugget-type-modal .btn{
  min-width:110px;
  padding:14px 20px;
  border-radius:18px;
}

.nugget-type-modal .btn.primary{

  background:
    linear-gradient(
      180deg,
      rgba(220,252,231,0.95),
      rgba(187,247,208,0.92)
    );

  border:1px solid rgba(34,197,94,0.35);

  box-shadow:
    0 10px 26px rgba(34,197,94,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

/* ===============================
   MOBILE
   =============================== */

@media (max-width:720px){

  .nugget-type-modal{
    width:calc(100vw - 20px);
    border-radius:20px;
  }

  .nugget-type-modal .nugget-modal-body{
    padding:18px;
  }

  .nugget-type-option-main{
    padding:14px;
  }

  .nugget-type-copy strong{
    font-size:14px;
  }

  .nugget-type-copy .muted{
    font-size:12px;
  }

  .nugget-type-modal .nugget-modal-actions{
    flex-direction:column-reverse;
  }

  .nugget-type-modal .btn{
    width:100%;
  }
}


/* ===============================
   ICON COLOUR THEMES
   =============================== */

/* base icon tint behaviour */

.nugget-type-icon-wrap{
  transition: background .18s ease, border-color .18s ease;
}

.nugget-type-option:hover .nugget-type-icon-wrap{
  transform: translateY(-1px);
}

/* ===============================
   LESSON PLAN (PDF colour)
   =============================== */

.nugget-type-lesson .nugget-type-icon{
  color: var(--chip-pdf);
}

.nugget-type-lesson .nugget-type-icon-wrap{
  border-color: color-mix(in srgb, var(--chip-pdf) 30%, white);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--chip-pdf) 10%, white),
      rgba(255,255,255,0.95)
    );
}

/* ===============================
   HOW TO (VIDEO colour)
   =============================== */

.nugget-type-how_to .nugget-type-icon{
  color: var(--chip-video);
}

.nugget-type-how_to .nugget-type-icon-wrap{
  border-color: color-mix(in srgb, var(--chip-video) 30%, white);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--chip-video) 10%, white),
      rgba(255,255,255,0.95)
    );
}

/* ===============================
   CHECKLIST (TEXT colour)
   =============================== */

.nugget-type-checklist .nugget-type-icon{
  color: #b4b81c;
}

.nugget-type-checklist .nugget-type-icon-wrap{
  border-color: color-mix(in srgb, var(--chip-text) 35%, white);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--chip-text) 15%, white),
      rgba(255,255,255,0.95)
    );
}

/* ===============================
   SUPPORT SCRIPT (AUDIO colour)
   =============================== */

.nugget-type-support_script .nugget-type-icon{
  color: var(--chip-audio);
}

.nugget-type-support_script .nugget-type-icon-wrap{
  border-color: color-mix(in srgb, var(--chip-audio) 30%, white);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--chip-audio) 12%, white),
      rgba(255,255,255,0.95)
    );
}

/* ===============================
   INFO SHEET (SCORM colour)
   =============================== */

.nugget-type-info_sheet .nugget-type-icon{
  color: var(--chip-scorm);
}

.nugget-type-info_sheet .nugget-type-icon-wrap{
  border-color: color-mix(in srgb, var(--chip-scorm) 35%, white);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--chip-scorm) 10%, white),
      rgba(255,255,255,0.95)
    );
}

/* ===============================
   QUIZ (APPLICATION colour)
   =============================== */

.nugget-type-quiz .nugget-type-icon{
  color: var(--chip-application);
}

.nugget-type-quiz .nugget-type-icon-wrap{
  border-color: color-mix(in srgb, var(--chip-application) 30%, white);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--chip-application) 12%, white),
      rgba(255,255,255,0.95)
    );
}

/* ===============================
   FLASHCARDS (PPT colour)
   =============================== */

.nugget-type-flashcards .nugget-type-icon{
  color: var(--chip-ppt);
}

.nugget-type-flashcards .nugget-type-icon-wrap{
  border-color: color-mix(in srgb, var(--chip-ppt) 30%, white);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--chip-ppt) 12%, white),
      rgba(255,255,255,0.95)
    );
}

.nugget-type-icon-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}

.nugget-type-icon{
  width:22px;
  height:22px;
  display:block;
  color:currentColor;
  flex:0 0 auto;
}

/* =========================
   TALVI EXISTING NUGGET CHOICE MODAL
   ========================= */

.nugget-modal--choice .existing-nugget-list{
  display:grid;
  gap:16px;
  margin-top:18px;
}

.nugget-modal--choice .nugget-choice-item{
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
  box-shadow:none;
}

.nugget-modal--choice .nugget-choice-item:hover{
  background:transparent;
  box-shadow:none;
}

.nugget-modal--choice .nugget-choice-item .nugget-type-option-card{
  display:grid;
  grid-template-columns: 1fr;
  align-items:center;
  gap:0;
  min-height:86px;
  padding:18px 20px;
  border-radius:22px;
  background:rgba(255,255,255,0.72);
  border:1px solid rgba(255,255,255,0.42);
  box-shadow:
    0 12px 26px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.70),
    inset 0 -1px 0 rgba(148, 163, 184, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease;
}

.nugget-modal--choice .nugget-choice-item:hover .nugget-type-option-card{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.82);
  border-color: rgba(134, 239, 172, 0.45);
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -1px 0 rgba(148, 163, 184, 0.10);
}

.nugget-modal--choice .nugget-choice-item:active .nugget-type-option-card{
  transform: translateY(0);
}

.nugget-modal--choice .nugget-type-option-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.nugget-modal--choice .nugget-type-copy{
  display:grid;
  gap:4px;
  min-width:0;
}

.nugget-modal--choice .nugget-type-title{
  display:block;
  font-size:15px;
  font-weight:800;
  line-height:1.25;
  color:#111827;
}

.nugget-modal--choice .nugget-type-desc{
  display:block;
  font-size:13px;
  line-height:1.4;
  color:#475569;
}

.nugget-modal--choice .nugget-choice-actions{
  display:flex;
  justify-content:flex-end;
}

@media (max-width: 720px){
  .nugget-modal--choice .nugget-choice-item .nugget-type-option-card{
    min-height:78px;
    padding:16px;
    border-radius:18px;
  }
}

/* Loading progress text steps  */
.ai-progress-text {
  transition: opacity 0.25s ease;
}



/* =========================
   TALVI NUGGET VIEWER MODAL
   FINAL CLEAN VERSION
   ========================= */

/* overlay only for the main nugget viewer */
#nuggetModalOverlay.nugget-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#nuggetModalOverlay.nugget-modal-overlay.show{
  display: flex;
}

/* main viewer modal only */
#nuggetModalOverlay .nugget-modal[aria-label="Talvi Nugget Viewer"]{
  position: relative;
  inset: auto;
  margin: 0;
  width: min(1320px, calc(100vw - 40px));
  height: min(920px, calc(100vh - 40px));
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);

  display: flex;
  flex-direction: column;

  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #ffffff;

  box-shadow:
    0 28px 90px rgba(15, 23, 42, 0.24),
    0 10px 30px rgba(15, 23, 42, 0.14);
}

/* body must fully fill modal */
#nuggetModalOverlay .nugget-modal[aria-label="Talvi Nugget Viewer"] .nugget-modal-body{
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

/* iframe host fills everything */
#nuggetModalOverlay .nugget-modal[aria-label="Talvi Nugget Viewer"] .nugget-viewer-host{
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  background: #fff;
}

/* iframe itself */
#nuggetModalOverlay .nugget-modal[aria-label="Talvi Nugget Viewer"] .nugget-viewer-host iframe{
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  background: #fff;
}

/* close button */
#nuggetModalOverlay .nugget-modal[aria-label="Talvi Nugget Viewer"] .nugget-modal-close{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 40;

  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;

  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255,255,255,0.94);

  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.75);

  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

#nuggetModalOverlay .nugget-modal[aria-label="Talvi Nugget Viewer"] .nugget-modal-close:hover{
  background: #fff;
  transform: translateY(-1px);
}

/* tablet */
@media (max-width: 900px){
  #nuggetModalOverlay.nugget-modal-overlay{
    padding: 14px;
  }

  #nuggetModalOverlay .nugget-modal[aria-label="Talvi Nugget Viewer"]{
    width: calc(100vw - 28px);
    height: calc(100vh - 28px);
    max-width: calc(100vw - 28px);
    max-height: calc(100vh - 28px);
    border-radius: 20px;
  }

  #nuggetModalOverlay .nugget-modal[aria-label="Talvi Nugget Viewer"] .nugget-modal-close{
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    font-size: 16px;
  }
}

/* small mobile */
@media (max-width: 520px){
  #nuggetModalOverlay.nugget-modal-overlay{
    padding: 10px;
  }

  #nuggetModalOverlay .nugget-modal[aria-label="Talvi Nugget Viewer"]{
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    border-radius: 16px;
  }

  #nuggetModalOverlay .nugget-modal[aria-label="Talvi Nugget Viewer"] .nugget-modal-close{
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
}

/* very small mobile */
@media (max-width: 450px){
  #nuggetModalOverlay.nugget-modal-overlay{
    padding: 6px;
  }

  #nuggetModalOverlay .nugget-modal[aria-label="Talvi Nugget Viewer"]{
    width: calc(100vw - 12px);
    height: calc(100vh - 12px);
    max-width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    border-radius: 14px;
  }

  #nuggetModalOverlay .nugget-modal[aria-label="Talvi Nugget Viewer"] .nugget-modal-close{
    top: 8px;
    right: 8px;
    width: 38px;
    height: 38px;
    font-size: 14px;
  }
}

/* =========================
   TALVI NUGGET VIEWER MODAL
   ========================= */

#nuggetModalOverlay{
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#nuggetModalOverlay.show{
  display: flex;
}

#nuggetModalOverlay .nugget-modal{
  width: min(1500px, calc(100vw - 48px));
  height: min(920px, calc(100vh - 48px));
  max-width: 1500px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#nuggetModalOverlay .nugget-modal-body{
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

#nuggetViewerHost{
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  overflow: hidden;
}

#nuggetViewerHost iframe.viewer-frame{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 0;
  background: #fff;
}

/* =========================
   AI LOADING EXPERIENCE
   ========================= */

.ai-loading{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 2px;
}

.ai-loading-viewer{
  padding: 20px;
}

/* header row */
.ai-loading-header{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #475569;
  font-weight: 500;
}

/* animated dot */
.ai-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  animation: aiPulse 1.2s infinite ease-in-out;
}

@keyframes aiPulse{
  0%,100%{ transform: scale(0.9); opacity: 0.6; }
  50%{ transform: scale(1.2); opacity: 1; }
}

/* progress bar */
.ai-loading-bar{
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(148,163,184,0.2);
  overflow: hidden;
}

.ai-loading-progress{
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #22c55e,
    #38bdf8,
    #22c55e
  );
  background-size: 200% 100%;
  animation: aiProgress 1.6s linear infinite;
}

@keyframes aiProgress{
  0%{ background-position: 0% 0; }
  100%{ background-position: 200% 0; }
}

/* =========================
   AI LOADING EXPERIENCE
   ========================= */

.ai-loading{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 10px 2px;
}

.ai-loading-viewer{
  padding: 22px 24px;
}

.ai-loading-header{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #475569;
  font-weight: 700;
}

.ai-dot{
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #4ade80;
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45);
  animation: aiDotPulse 1.35s ease-in-out infinite;
}

@keyframes aiDotPulse{
  0%{
    transform: scale(0.9);
    opacity: 0.75;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.35);
  }
  50%{
    transform: scale(1.15);
    opacity: 1;
    box-shadow: 0 0 0 8px rgba(74, 222, 128, 0);
  }
  100%{
    transform: scale(0.9);
    opacity: 0.75;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
  }
}

.ai-loading-bar{
  position: relative;
  width: 100%;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.18);
}

/* THIS is the animated moving bar */
.ai-loading-progress{
  position: absolute;
  top: 0;
  left: -38%;
  width: 38%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(34, 197, 94, 0.25) 0%,
    rgba(34, 197, 94, 0.95) 40%,
    rgba(45, 212, 191, 0.95) 70%,
    rgba(56, 189, 248, 0.25) 100%
  );
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.24);
  animation: aiLoadSweep 1.4s ease-in-out infinite;
}

@keyframes aiLoadSweep{
  0%{
    left: -38%;
  }
  100%{
    left: 100%;
  }
}

/* Suggested questions */
.suggested-questions {
  margin: 0 24px 14px;
}

.suggested-questions.hidden {
  display: none;
}

.suggested-questions-inner {
  width: min(720px, 100%);
  padding: 18px 20px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.05),
    0 3px 8px rgba(0, 0, 0, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.suggested-questions-copy h3 {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #667085;
}

.suggested-questions-copy p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
  color: #475467;
}

.suggested-questions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.suggested-question-chip {
  appearance: none;
  border: 1px solid rgba(146, 208, 177, 0.6);
  background: linear-gradient(180deg, #f9fdfb 0%, #f3fbf7 100%);
  color: #1f2937;
  border-radius: 999px;
  padding: 11px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
}

.suggested-question-chip:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ffffff 0%, #f5fcf8 100%);
  border-color: rgba(146, 208, 177, 0.85);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.suggested-question-chip:focus-visible {
  outline: 2px solid #8fd1b0;
  outline-offset: 2px;
}

.suggested-questions-empty {
  font-size: 13px;
  color: #667085;
}

.chat-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-stream {
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 768px) {
  .suggested-questions {
    margin: 0 12px 12px;
  }

  .suggested-questions-inner {
    width: 100%;
    padding: 16px 14px;
    border-radius: 20px;
    box-shadow:
      0 12px 24px rgba(0, 0, 0, 0.05),
      0 2px 6px rgba(0, 0, 0, 0.035),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }

  .suggested-questions-copy h3 {
    margin: 0 0 6px;
    font-size: 12px;
    letter-spacing: 0.1em;
  }

  .suggested-questions-copy p {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
    max-width: 22ch;
  }

  .suggested-questions-list {
    gap: 10px;
  }

  .suggested-question-chip {
    width: 100%;
    justify-content: center;
    display: flex;
    text-align: center;
    padding: 14px 14px;
    font-size: 13px;
    line-height: 1.25;
    border-radius: 999px;
  }
}

@media (max-width: 480px) {
  .suggested-questions {
    margin: 0 10px 10px;
  }

  .suggested-questions-inner {
    padding: 14px 12px;
    border-radius: 18px;
  }

  .suggested-question-chip {
    padding: 13px 12px;
    font-size: 12.5px;
  }
}


/* Feedback UI */
.feedback-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.feedback-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 6px 14px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.feedback-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 18px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

.feedback-btn.is-active-up {
  border-color: rgba(100, 190, 135, 0.55);
  background: linear-gradient(180deg, #f8fdf9 0%, #eefaf1 100%);
}

.feedback-btn.is-active-down {
  border-color: rgba(243, 122, 122, 0.45);
  background: linear-gradient(180deg, #fff9f9 0%, #fff1f1 100%);
}

.feedback-btn svg {
  width: 18px;
  height: 18px;
  stroke: #344054;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.feedback-btn.is-active-up svg {
  stroke: #1f7a43;
}

.feedback-btn.is-active-down svg {
  stroke: #b42318;
}

.message-feedback-wrap {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.sources-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sources-topbar h4 {
  margin: 0;
}

.feedback-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
}

.feedback-overlay.show {
  display: flex;
}

.feedback-modal {
  width: min(560px, 100%);
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 30px 60px rgba(15, 23, 42, 0.18),
    0 10px 24px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.feedback-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 12px;
}

.feedback-modal-head h3 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.2;
}

.feedback-subtitle {
  margin: 0;
  color: #667085;
  font-size: 14px;
}

.feedback-close-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

.feedback-modal-body {
  padding: 8px 22px 0;
}

.feedback-field {
  display: block;
  margin-bottom: 16px;
}

.feedback-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #344054;
}

.feedback-label em {
  font-style: normal;
  color: #b42318;
}

.feedback-select,
.feedback-textarea {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  padding: 12px 14px;
  font: inherit;
  color: #101828;
  box-sizing: border-box;
}

.feedback-textarea {
  resize: vertical;
  min-height: 120px;
}

.feedback-char-count {
  margin-top: 6px;
  text-align: right;
  font-size: 12px;
  color: #667085;
}

.feedback-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 22px 22px;
}

.feedback-image-dropzone {
  display: grid;
  gap: 3px;
  padding: 13px;
  border: 1px dashed #78cfc9;
  border-radius: 12px;
  color: #24424a;
  background: #f5ffff;
  cursor: pointer;
}
.feedback-image-dropzone.is-dragging { background: #e6fbf4; border-color: #30ae82; }
.feedback-image-dropzone small, .feedback-label small { color: #68758a; font-weight: 500; }
.feedback-image-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.feedback-image-item { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 5px 8px; border-radius: 999px; background: #edf9f7; font-size: 12px; overflow-wrap: anywhere; }
.feedback-image-item button { border: 0; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; }

@media (max-width: 768px) {
  .feedback-modal {
    border-radius: 20px;
  }

  .feedback-modal-head {
    padding: 18px 16px 10px;
  }

  .feedback-modal-body {
    padding: 8px 16px 0;
  }

  .feedback-modal-actions {
    padding: 16px;
    flex-direction: column-reverse;
  }

  .feedback-modal-actions .btn {
    width: 100%;
  }
}

/* Clean up Feedback UI */
.message-feedback-wrap {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.message.assistant .content {
  min-width: 0;
}

.feedback-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.feedback-actions.is-locked .feedback-btn:not(.is-active-up):not(.is-active-down):not(.copy-btn) {
  display: none;
}

.feedback-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 6px 14px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

.feedback-btn:hover {
  transform: translateY(-1px);
}

.feedback-btn[disabled] {
  cursor: default;
  opacity: 1;
}

.feedback-btn.is-active-up {
  border-color: rgba(100, 190, 135, 0.55);
  background: linear-gradient(180deg, #f8fdf9 0%, #eefaf1 100%);
}

.feedback-btn.is-active-down {
  border-color: rgba(243, 122, 122, 0.45);
  background: linear-gradient(180deg, #fff9f9 0%, #fff1f1 100%);
}

/* Feedback UI in sources */
.source-viewer-shell {
  position: relative;
}

.viewer-feedback-anchor {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.viewer-feedback-anchor:empty {
  display: none;
}

/* ===== Feedback: assistant message ===== */
.message-feedback-wrap {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.feedback-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.feedback-actions.is-locked .feedback-btn:not(.is-active-up):not(.is-active-down):not(.copy-btn) {
  display: none;
}

.feedback-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.75);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

.feedback-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 16px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

.feedback-btn[disabled] {
  cursor: default;
  opacity: 1;
}

.feedback-btn svg {
  width: 15px;
  height: 15px;
  stroke: #344054;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.feedback-btn.is-active-up {
  border-color: rgba(100, 190, 135, 0.55);
  background: linear-gradient(180deg, #f8fdf9 0%, #eefaf1 100%);
}

.feedback-btn.is-active-up svg {
  stroke: #1f7a43;
}

.feedback-btn.is-active-down {
  border-color: rgba(243, 122, 122, 0.45);
  background: linear-gradient(180deg, #fff9f9 0%, #fff1f1 100%);
}

.feedback-btn.is-active-down svg {
  stroke: #b42318;
}

/* ===== Feedback: viewer top-right ===== */
.source-viewer-shell {
  position: relative;
}

.viewer-feedback-anchor {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.viewer-feedback-anchor:empty {
  display: none;
}

/* keep feedback clear of the viewer edge */
.viewer-feedback-anchor .feedback-actions {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

/* We do not need a duplicate dynamic heading anymore */
.sources-topbar {
  display: none !important;
}

/* More feedback UI tidy */
.message-feedback-wrap {
  margin-top: 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.feedback-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.feedback-actions.is-locked .feedback-btn:not(.is-active-up):not(.is-active-down):not(.copy-btn) {
  display: none;
}

.feedback-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 3px 8px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255,255,255,0.75);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

.feedback-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 12px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.82);
     background: linear-gradient(180deg, #f8fdf9 0%, #eefaf1 100%);
}

.feedback-btn[disabled] {
  cursor: default;
  opacity: 1;
}

.feedback-btn svg {
  width: 14px;
  height: 14px;
  stroke: #344054;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.feedback-btn.is-active-up {
  border-color: rgba(100, 190, 135, 0.5);
  background: linear-gradient(180deg, #f8fdf9 0%, #eefaf1 100%);
}

.feedback-btn.is-active-up svg {
  stroke: #1f7a43;
}

.feedback-btn.is-active-down {
  border-color: rgba(243, 122, 122, 0.4);
  background: linear-gradient(180deg, #fff9f9 0%, #fff1f1 100%);
}

.feedback-btn.is-active-down svg {
  stroke: #b42318;
}

.source-viewer-shell {
  position: relative;
}

.viewer-feedback-anchor {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.viewer-feedback-anchor:empty {
  display: none;
}

.viewer-feedback-anchor .feedback-actions {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.07);
}


.feedback-btn {
  position: relative;
}

/* tooltip */
.feedback-btn::after {
  content: attr(data-label);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #111827;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.feedback-btn:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* User Onbording */

.talvi-onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
}

.talvi-onboarding-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.34);
}

.talvi-onboarding-spotlight {
  position: absolute;
  border-radius: 16px;
  border: 2px solid rgba(148, 232, 190, 0.95);
  box-shadow:
    0 0 0 9999px rgba(15, 23, 42, 0.20),
    0 0 0 6px rgba(148, 232, 190, 0.14),
    0 16px 34px rgba(0, 0, 0, 0.18);
  transition: all 180ms ease;
}

.talvi-onboarding-card {
  position: absolute;
  width: 320px;
  max-width: calc(100vw - 40px);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: var(--shadow);
  pointer-events: auto;
}

.talvi-onboarding-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.talvi-onboarding-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.talvi-onboarding-skip {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}

.talvi-onboarding-skip:hover {
  color: var(--text);
}

.talvi-onboarding-progress {
  font-size: 13px;
  font-weight: 700;
  color: var(--success);
  margin-bottom: 8px;
}

.talvi-onboarding-title {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.2;
}

.talvi-onboarding-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

.talvi-onboarding-target {
  position: relative;
  z-index: 5001;
}

@media (max-width: 980px) {
  .talvi-onboarding-card {
    width: min(320px, calc(100vw - 24px));
  }
}

.talvi-onboarding-overlay.hidden {
  display: none !important;
}

.talvi-onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
}

.talvi-onboarding-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.22);
  transition: opacity 160ms ease;
}

.talvi-onboarding-overlay.is-suspended {
  display: none !important;
}

.talvi-onboarding-overlay.is-modal-step .talvi-onboarding-backdrop {
  background: rgba(15, 23, 42, 0.10);
}

.talvi-onboarding-spotlight {
  position: absolute;
  border-radius: 16px;
  border: 2px solid rgba(148, 232, 190, 0.95);
  box-shadow:
    0 0 0 9999px rgba(15, 23, 42, 0.12),
    0 0 0 6px rgba(148, 232, 190, 0.14),
    0 16px 34px rgba(0, 0, 0, 0.14);
  transition: all 180ms ease;
}

.talvi-onboarding-overlay.is-modal-step .talvi-onboarding-spotlight {
  box-shadow:
    0 0 0 9999px rgba(15, 23, 42, 0.05),
    0 0 0 6px rgba(148, 232, 190, 0.14),
    0 16px 34px rgba(0, 0, 0, 0.10);
}

.talvi-onboarding-card {
  position: absolute;
  width: 370px;
  max-width: calc(100vw - 40px);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: var(--shadow);
  pointer-events: auto;
}

.history-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-demo {
  background: color-mix(in oklab, var(--chip-lesson) 22%, transparent);
  border-color: color-mix(in oklab, var(--chip-lesson) 45%, transparent);
  color: var(--text);
  font-weight: 800;
}

.btn-demo:hover {
  background: color-mix(in oklab, var(--chip-lesson) 32%, transparent);
}

.talvi-onboarding-card-final {
  width: 440px;
  max-width: calc(100vw - 40px);
  text-align: left;
}

.talvi-onboarding-card-final .talvi-onboarding-title {
  font-size: 32px;
  line-height: 1.05;
  margin-bottom: 10px;
}

.talvi-onboarding-card-final .talvi-onboarding-body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  opacity: 0.9;
}

.talvi-onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.talvi-onboarding-overlay.is-modal-step .talvi-onboarding-card {
  width: 380px;
  max-width: calc(100vw - 40px);
}

.talvi-onboarding-overlay.is-modal-step .talvi-onboarding-card .talvi-onboarding-title {
  font-size: 18px;
  line-height: 1.15;
}

.talvi-onboarding-overlay.is-modal-step .talvi-onboarding-card .talvi-onboarding-body {
  font-size: 14px;
  line-height: 1.45;
}

.talvi-onboarding-overlay.is-modal-step .talvi-onboarding-card {
  width: 400px;
  max-width: calc(100vw - 40px);
}

.talvi-onboarding-overlay.is-modal-step .talvi-onboarding-body {
  font-size: 14px;
  line-height: 1.5;
}

/* Copy answer button */
.copy-btn svg {
  width: 14px;
  height: 14px;
}

/* Slight green confirmation state, but still clickable */
.feedback-btn.copy-btn.is-copied,
.panel-copy-btn.is-copied {
  border-color: rgba(100, 190, 135, 0.5);
  background: linear-gradient(180deg, #f8fdf9 0%, #eefaf1 100%);
}

.feedback-btn.copy-btn.is-copied svg,
.panel-copy-btn.is-copied svg {
  stroke: #1f7a43;
}

/* More details header layout */
.answer-full-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.answer-full-panel .panel-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.answer-full-panel .panel-copy-btn {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.feedback-btn {
  position: relative;
}

.message-feedback-wrap,
.feedback-actions,
.feedback-btn-wrap {
  overflow: visible !important;
}

.message.assistant .content,
.message.assistant,
.message .content {
  overflow: visible;
}

.feedback-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;

  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background: rgba(17, 24, 39, 0.96);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 9999;
}

.feedback-btn[data-tooltip]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%) translateY(4px);

  width: 8px;
  height: 8px;
  background: rgba(17, 24, 39, 0.96);
  rotate: 45deg;

  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 9998;
}

.feedback-btn[data-tooltip]:hover::after,
.feedback-btn[data-tooltip]:hover::before,
.feedback-btn[data-tooltip]:focus-visible::after,
.feedback-btn[data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================
   Talvi Security (Subtle Inline)
   ========================= */

.talvi-security-inline {
  margin-bottom: 0px;
}

.talvi-security-inline-link {
  display: flex;
  align-items: center;
  gap: 8px;

  width: 100%;
  padding: 8px 10px;

  border-radius: 10px;

  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.08);

  text-decoration: none;
  color: rgba(6, 95, 70, 0.8);

  font-size: 12px;
  font-weight: 500;

  transition: all 0.18s ease;
}

/* Icon */
.talvi-security-inline-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  border-radius: 6px;

  background: rgba(16, 185, 129, 0.08);
  color: #10b981;

  flex-shrink: 0;
}

/* Text */
.talvi-security-inline-link strong {
  font-weight: 600;
  color: #065f46;
}

/* Hover (very light) */
.talvi-security-inline-link:hover {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.15);
}



/* =========================
   How To Guide Refresh
   ========================= */

.howto-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 24px 56px;
}

.howto-hero {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}

.howto-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.12);
  color: #0f766e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.howto-page h1 {
  margin: 0 0 14px;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.02;
}

.howto-hero-intro {
  margin: 0 auto;
  max-width: 760px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--muted);
}

.howto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
}

.howto-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px 24px;
  border-radius: 22px;
  background: var(--panel);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.howto-step-no {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.10),
    rgba(59, 130, 246, 0.08)
  );
  border: 1px solid rgba(16, 185, 129, 0.12);
  color: #0f766e;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
}

.howto-card-body h2 {
  margin: 2px 0 10px;
  font-size: 28px;
  line-height: 1.15;
}

.howto-card-body p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.howto-card-body ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.howto-card-body li {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.6;
}

.howto-trust-panel {
  max-width: 920px;
  margin: 28px auto 0;
  padding: 28px 30px;
  border-radius: 24px;
  background: linear-gradient(
    135deg,
    rgba(236, 253, 245, 0.92),
    rgba(239, 246, 255, 0.88)
  );
  border: 1px solid rgba(16, 185, 129, 0.10);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.howto-trust-kicker {
  margin-bottom: 8px;
  color: #0f766e;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.howto-trust-panel h2 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.1;
}

.howto-trust-panel p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

@media (max-width: 760px) {
  .howto-page {
    padding: 28px 16px 40px;
  }

  .howto-hero-intro {
    font-size: 17px;
  }

  .howto-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }

  .howto-step-no {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .howto-card-body h2 {
    font-size: 24px;
  }

  .howto-card-body p,
  .howto-card-body li,
  .howto-trust-panel p {
    font-size: 15px;
  }

  .howto-trust-panel {
    padding: 22px 18px;
  }

  .howto-trust-panel h2 {
    font-size: 26px;
  }
}

/* Stronger backdrop for final congratulations step */
.talvi-onboarding-overlay.is-final-step .talvi-onboarding-backdrop {
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.talvi-onboarding-overlay.is-final-step .talvi-onboarding-card {
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.20),
    0 8px 24px rgba(15, 23, 42, 0.10);
}

/* =========================
   General feedback button
   ========================= */

.nuggets-footer-actions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.btn-general-feedback {
  width: 100%;
  justify-content: center;
  font-weight: 700;
  border-radius: 12px;
}

.btn-general-feedback:hover {
  transform: translateY(-1px);
}

.nuggets-footer-actions {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
  display: flex;
  justify-content: center;
}

.btn-general-feedback {
  width: auto;
  height: 20px;
  min-width: 140px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.12);
  color: #0f172a;
  box-shadow: none;
}

.btn-general-feedback:hover {
  transform: none;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.18);
}

/* =========================
   Onboarding
   ========================= */

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
}

.onboarding-overlay.hidden {
  display: none;
}

.onboarding-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 14, 24, 0.46);
  backdrop-filter: blur(2px);
}

.onboarding-hole {
  position: absolute;
  border-radius: 18px;
  box-shadow:
    0 0 0 9999px rgba(9, 14, 24, 0.46),
    0 0 0 2px rgba(255,255,255,0.92),
    0 18px 48px rgba(0,0,0,0.22);
  transition: all 180ms ease;
}

.onboarding-target-active {
  position: relative;
  z-index: 5002 !important;
  pointer-events: auto !important;
}

.onboarding-target-active::before,
.onboarding-target-active::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 18px;
  pointer-events: none;
}

.onboarding-target-active::before {
  border: 3px solid rgba(34, 197, 94, 0.95);
  box-shadow:
    0 0 0 8px rgba(34, 197, 94, 0.18),
    0 8px 24px rgba(34, 197, 94, 0.18);
  animation: onboardingPulseRing 1.2s ease-out infinite;
}

.onboarding-target-active::after {
  inset: auto;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #22c55e;
  top: -14px;
  right: -8px;
  box-shadow:
    0 0 0 0 rgba(34,197,94,0.65);
  animation: onboardingPingDot 1.2s ease-out infinite;
}

.onboarding-target-bounce {
  transform-origin: center;
}

.onboarding-tooltip {
  position: absolute;
  z-index: 5003;
  width: min(320px, calc(100vw - 32px));
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: var(--shadow);
  pointer-events: auto;
}

.onboarding-tooltip-title {
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 6px;
}

.onboarding-tooltip-copy {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.onboarding-tooltip-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.onboarding-tooltip-progress {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.onboarding-tooltip-skip {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}

.onboarding-click-nudge {
  position: fixed;
  z-index: 5004;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  pointer-events: none;
}

.onboarding-click-nudge::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 100%;
  width: 10px;
  height: 10px;
  background: #111827;
  transform: rotate(45deg) translateY(-4px);
}


@keyframes onboardingPingDot {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
  100% { box-shadow: 0 0 0 12px rgba(34,197,94,0); }
}


/* New support section */

.talvi-support-pane {
  gap: 10px;
}

.talvi-support-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.talvi-support-actions .btn {
  flex: 1 1 auto;
}

/* =========================
   Talvi Help & Support
   ========================= */

.talvi-support-pane {
  padding: 12px;
}

.talvi-support-pane .history-header {
  margin-bottom: 10px;
}

.talvi-support-pane .history-title,
.talvi-support-pane h2 {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
}

/* Two clean equal buttons */
.talvi-support-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.talvi-support-actions .btn,
.talvi-support-actions .btn-demo,
.talvi-support-actions .btn-general-feedback {
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

/* Demo button: premium but not oversized */
.talvi-support-actions .btn-demo {
  background: color-mix(in oklab, var(--chip-lesson) 16%, #fff);
  border: 1px solid color-mix(in oklab, var(--chip-lesson) 40%, transparent);
  color: var(--text);
}

.talvi-support-actions .btn-demo:hover {
  background: color-mix(in oklab, var(--chip-lesson) 24%, #fff);
}

/* Feedback button: softer secondary action */
.talvi-support-actions .btn-general-feedback {
  background: color-mix(in oklab, var(--bg-grad-green) 45%, #fff);
  border: 1px solid color-mix(in oklab, var(--bg-grad-green-darker) 28%, transparent);
  color: var(--text);
}

.talvi-support-actions .btn-general-feedback:hover {
  background: color-mix(in oklab, var(--bg-grad-green) 62%, #fff);
}

/* Security strip */
.talvi-security-inline {
  margin: 0;
}

.talvi-security-inline-link {
  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;
  min-height: 44px;
  padding: 10px 12px;

  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(16, 185, 129, 0.06),
    rgba(16, 185, 129, 0.035)
  );
  border: 1px solid rgba(16, 185, 129, 0.10);

  text-decoration: none;
  color: rgba(6, 95, 70, 0.88);

  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.talvi-security-inline-link:hover {
  background: linear-gradient(
    180deg,
    rgba(16, 185, 129, 0.09),
    rgba(16, 185, 129, 0.05)
  );
  border-color: rgba(16, 185, 129, 0.16);
  transform: translateY(-1px);
}

.talvi-security-inline-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  background: rgba(16, 185, 129, 0.10);
  color: #10b981;
}

.talvi-security-inline-link strong {
  font-weight: 700;
  color: #065f46;
}

/* Mobile */
@media (max-width: 720px) {
  .talvi-support-pane {
    padding: 12px;
  }

  .talvi-support-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .talvi-support-actions .btn,
  .talvi-support-actions .btn-demo,
  .talvi-support-actions .btn-general-feedback {
    height: 34px;
    min-height: 34px;
    font-size: 11.5px;
    padding: 0 10px;
  }

  .talvi-security-inline-link {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 12.5px;
  }
}

/* =========================
   Talvi Help & Support
   compact version
   ========================= */

.talvi-support-pane {
  padding: 10px 12px 12px;
}

.talvi-support-pane .history-header {
  margin-bottom: 8px;
}

.talvi-support-pane .history-title,
.talvi-support-pane h2 {
  margin: 0;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
}

/* keep the two actions tight and equal */
.talvi-support-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.talvi-support-actions .btn,
.talvi-support-actions .btn-demo,
.talvi-support-actions .btn-general-feedback {
  width: 100%;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

/* compact security row */
.talvi-security-inline {
  margin: 0;
}

.talvi-security-inline-link {
  display: flex;
  align-items: center;
  gap: 8px;

  width: 100%;
  min-height: 38px;
  padding: 8px 10px;

  border-radius: 12px;
  text-decoration: none;

  font-size: 12px;
  line-height: 1.2;
}

.talvi-security-inline-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.talvi-security-inline-link strong {
  font-weight: 700;
}

/* =========================
   Talvi Help & Support
   final layout fix
   ========================= */

/* Do not let the support card participate in shared sidebar height */
.right-column > .talvi-support-pane {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch;
}

/* Keep only Chat History and Talvi Nuggets as the flexible panels */
.right-column > .history-pane:not(.talvi-support-pane) {
  flex: 1 1 0;
  min-height: 0;
}

/* Compact support card sizing */
.talvi-support-pane {
  padding: 10px 10px 10px !important;
  gap: 0 !important;
}

.talvi-support-pane .history-header {
  margin-bottom: 6px !important;
}

.talvi-support-pane .history-title,
.talvi-support-pane h2 {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.talvi-support-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px !important;
}

.talvi-support-actions .btn,
.talvi-support-actions .btn-demo,
.talvi-support-actions .btn-general-feedback {
  width: 100%;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 11.5px !important;
  line-height: 1 !important;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

.talvi-security-inline {
  margin: 0 !important;
}

.talvi-security-inline-link {
  width: 100%;
  min-height: 34px !important;
  padding: 7px 10px !important;
  gap: 8px !important;

  border-radius: 10px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
}

.talvi-security-inline-icon {
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
  flex: 0 0 auto;
}

.talvi-security-inline-link strong {
  font-weight: 700;
}

/* ===== Talvi onboarding confetti ===== */
.talvi-onboarding-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6666;
  overflow: hidden;
}

.talvi-confetti-piece {
  position: absolute;
  top: -24px;
  width: 10px;
  height: 18px;
  border-radius: 3px;
  opacity: 0.92;
  animation-name: talviConfettiFall;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}

.talvi-confetti-piece:nth-child(5n + 1) { background: #16dd47; }
.talvi-confetti-piece:nth-child(5n + 2) { background: #26c7dc; }
.talvi-confetti-piece:nth-child(5n + 3) { background: #f4b400; }
.talvi-confetti-piece:nth-child(5n + 4) { background: #8ab3ff; }
.talvi-confetti-piece:nth-child(5n + 5) { background: #ff7cc8; }

@keyframes talviConfettiFall {
  0% {
    transform: translate3d(0, -20px, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.95;
  }
  100% {
    transform: translate3d(calc((var(--drift, 0.5) - 0.5) * 180px), 110vh, 0) rotate(680deg);
    opacity: 0;
  }
}
/* =========================================================
   FINAL File Summary responsive fix
   Keep summary BELOW the file on tablet + mobile
   ========================================================= */
@media (max-width: 980px) {

  /* The viewer wrapper must stack vertically once summary is open */
  #sourceViewer .fv-shell,
  #sourceViewer .fv-shell.fv-summary-open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Main viewer stays full width */
  #sourceViewer .fv-shell .fv-main,
  #sourceViewer .fv-shell.fv-summary-open .fv-main {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Top bar becomes an in-flow row */
  #sourceViewer .fv-shell .fv-topbar,
  #sourceViewer .fv-shell.fv-summary-open .fv-topbar {
    order: 2 !important;
    display: flex !important;
    justify-content: flex-end !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    width: 100% !important;
    padding: 0 2px !important;
  }

  /* Summary panel must NEVER be a right sidebar in mobile/tablet layout */
  #sourceViewer .fv-shell .fv-summary-panel,
  #sourceViewer .fv-shell.fv-summary-open .fv-summary-panel {
    order: 3 !important;
    position: static !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* Hidden until opened */
  #sourceViewer .fv-shell .fv-summary-panel {
    display: none !important;
  }

  #sourceViewer .fv-shell.fv-summary-open .fv-summary-panel {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Head */
  #sourceViewer .fv-summary-head {
    flex: 0 0 auto !important;
    position: static !important;
    padding: 10px 10px 8px !important;
    gap: 8px !important;
  }

  #sourceViewer .fv-summary-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  #sourceViewer .fv-summary-close {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }

  /* Body wrapper */
  #sourceViewer .fv-summary-body,
  #sourceViewer .fv-shell.fv-summary-open .fv-summary-body {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 10px !important;
    white-space: normal !important;
  }

  /* Horizontal card rail */
  #sourceViewer .fv-summary-body > div,
  #sourceViewer .fv-shell.fv-summary-open .fv-summary-body > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    width: 100% !important;
    min-width: 0 !important;
    padding-bottom: 4px !important;

    scroll-snap-type: x proximity;
  }

  /* Individual cards */
  #sourceViewer .fv-summary-item,
  #sourceViewer .fv-shell.fv-summary-open .fv-summary-item {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 78% !important;
    width: 78% !important;
    min-width: 78% !important;
    max-width: 78% !important;

    white-space: normal !important;
    vertical-align: top !important;
    overflow: hidden !important;
    scroll-snap-align: start;
  }

  #sourceViewer .fv-summary-html {
    max-height: 180px !important;
    overflow: auto !important;
  }

  #sourceViewer .fv-summary-actions {
    margin-top: 8px !important;
    display: flex !important;
    justify-content: flex-end !important;
  }
}

/* =========================================================
   FINAL mobile AI File Summary sizing fix
   Keep viewer compact and summary cards narrower
   ========================================================= */
@media (max-width: 980px) {

  /* The viewer container itself must not enforce desktop height */
  #sourceViewer,
  .source-viewer {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 10px !important;
  }

  /* Main file area should size naturally */
  #sourceViewer .fv-main,
  #sourceViewer .fv-shell .fv-main,
  #sourceViewer .fv-shell.fv-summary-open .fv-main {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Video / iframe / media should stay visibly useful but not huge */
  #sourceViewer .viewer-frame,
  #sourceViewer video,
  #sourceViewer iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(220px, 42vh, 420px) !important;
    display: block !important;
  }

  /* PDF canvas wrapper should stay compact too */
  #sourceViewer .viewer-canvas-wrap {
    max-height: 48vh !important;
    overflow: auto !important;
  }

  /* Summary panel sits below, but shouldn't stretch the viewer */
  #sourceViewer .fv-summary-panel,
  #sourceViewer .fv-shell.fv-summary-open .fv-summary-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Horizontal rail */
  #sourceViewer .fv-summary-body {
    padding: 8px !important;
    overflow: hidden !important;
  }

  #sourceViewer .fv-summary-body > div,
  #sourceViewer .fv-shell.fv-summary-open .fv-summary-body > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-bottom: 2px !important;
  }

  /* Narrower cards */
  #sourceViewer .fv-summary-item,
  #sourceViewer .fv-shell.fv-summary-open .fv-summary-item {
    flex: 0 0 240px !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;

    display: flex !important;
    flex-direction: column !important;
    white-space: normal !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #sourceViewer .fv-summary-html {
    max-height: 140px !important;
    overflow: auto !important;
  }

  #sourceViewer .fv-summary-actions {
    margin-top: 8px !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  #sourceViewer .fv-summary-actions .btn.small {
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}

/* Slightly tighter on very small phones */
@media (max-width: 400px) {
  #sourceViewer .fv-summary-item,
  #sourceViewer .fv-shell.fv-summary-open .fv-summary-item {
    flex-basis: 220px !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }

  #sourceViewer .viewer-frame,
  #sourceViewer video,
  #sourceViewer iframe {
    height: clamp(200px, 38vh, 340px) !important;
  }
}

/* =========================================================
   CANONICAL FileViewer responsive summary layout
   One source of truth
   ========================================================= */

/* ---------- Desktop / large tablet ---------- */
.fv-shell {
  position: relative;
  display: flex;
  gap: 12px;
  width: 100%;
  min-height: 0;
  align-items: flex-start;
}

.fv-main {
  flex: 1 1 auto;
  min-width: 0;
}

.fv-topbar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 30;
  display: inline-flex;
  gap: 8px;
}

.fv-shell .fv-summary-panel {
  display: none;
}

.fv-shell.fv-summary-open {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.fv-shell.fv-summary-open .fv-summary-panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 320px;
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.fv-shell.fv-summary-open .fv-topbar {
  display: none;
}

/* Audio uses native browser controls, so keep viewer actions in the reserved
   row above the player instead of overlaying the play/progress controls. */
.fv-shell.fv-audio-viewer{
  box-sizing: border-box;
  padding-top: 56px;
}

@media (max-width: 980px) {
  .fv-shell.fv-audio-viewer .fv-topbar{
    order: 0 !important;
  }
}

.fv-summary-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 2;
}

.fv-summary-title-row,
.fv-summary-download-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 10px;
}

.fv-summary-title-row {
  justify-content: space-between;
}

.fv-summary-download-row {
  justify-content: flex-start;
}

.fv-summary-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
}

.fv-summary-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: 18px;
}

.fv-summary-download {
  flex: 0 0 auto;
  min-height: 30px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--primary, #10b981) 45%, var(--border));
  background: color-mix(in oklab, var(--primary, #10b981) 12%, var(--panel));
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 0 12px;
  white-space: nowrap;
}

.fv-summary-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 540px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
}

.fv-summary-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: color-mix(in oklab, var(--panel) 94%, transparent);
  margin-bottom: 10px;
  box-sizing: border-box;
}

.fv-summary-item h4 {
  margin: 0 0 8px 0;
  font-size: 13px;
  line-height: 1.2;
}

.fv-summary-html {
  font-size: 12px;
  line-height: 1.45;
}

.fv-summary-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/* ---------- Mobile + tablet ---------- */
@media (max-width: 980px) {
  #sourceViewer,
  .source-viewer {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 10px !important;
  }

  .fv-shell,
  .fv-shell.fv-summary-open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  .fv-main {
    order: 1;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .fv-topbar {
    order: 2;
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0 2px !important;
  }

  .fv-shell .fv-summary-panel {
    display: none !important;
  }

  .fv-shell.fv-summary-open .fv-summary-panel {
    order: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .fv-shell.fv-summary-open .fv-topbar {
    display: none !important;
  }

  .fv-summary-head {
    padding: 10px 10px 8px !important;
    gap: 8px !important;
    position: static !important;
  }

  .fv-summary-title {
    flex: 1 1 auto;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  .fv-summary-download {
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  .fv-summary-close {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }

  /* viewer sizing */
  #sourceViewer .viewer-frame,
  #sourceViewer video,
  #sourceViewer iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(220px, 42vh, 360px) !important;
    display: block !important;
  }

  #sourceViewer .viewer-canvas-wrap {
    max-height: 48vh !important;
    overflow: auto !important;
  }

  /* summary rail */
  .fv-summary-body {
    padding: 10px !important;
    overflow: hidden !important;
    max-height: none !important;
  }

  .fv-summary-body > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-bottom: 4px !important;
  }

  .fv-summary-item {
    flex: 0 0 240px !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    white-space: normal !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .fv-summary-html {
    max-height: 140px !important;
    overflow: auto !important;
  }

  .fv-summary-actions {
    margin-top: 8px !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  .fv-summary-actions .btn.small {
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  .fv-summary-item {
    flex: 0 0 220px !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }

  #sourceViewer .viewer-frame,
  #sourceViewer video,
  #sourceViewer iframe {
    height: clamp(200px, 38vh, 320px) !important;
  }
}

/* =========================================================
   FINAL mobile File Summary overflow fix
   Root cause: grid/flex min-width overflow
   ========================================================= */
@media (max-width: 980px) {

  /* 1) Critical: allow all layout children to shrink inside the mobile grid */
  .layout,
  .layout > *,
  .chat-pane,
  #sourcesSection,
  #sourceViewer,
  .source-viewer,
  .source-viewer-shell,
  .fv-shell,
  .fv-main,
  .fv-summary-panel,
  .fv-summary-body {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2) The chat pane must never widen beyond the viewport */
  .chat-pane {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 3) Sources section must stay inside the chat pane */
  #sourcesSection.sources {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 4) Viewer container must stay bounded */
  #sourceViewer,
  .source-viewer,
  .source-viewer-shell {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 5) Viewer shell stacks vertically and cannot blow out */
  #sourceViewer .fv-shell,
  #sourceViewer .fv-shell.fv-summary-open {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* 6) Keep media visible and sane */
  #sourceViewer video,
  #sourceViewer iframe,
  #sourceViewer .viewer-frame {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(220px, 42vh, 360px) !important;
    object-fit: contain !important;
  }

  /* 7) Summary panel below viewer, bounded */
  #sourceViewer .fv-summary-panel,
  #sourceViewer .fv-shell.fv-summary-open .fv-summary-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }

  /* 8) Summary body must not create page width */
  #sourceViewer .fv-summary-body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 10px !important;
  }

  /* 9) This is the important rail fix:
        the inner row scrolls horizontally,
        but it cannot expand the parent */
  #sourceViewer .fv-summary-body > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    padding-bottom: 4px !important;
  }

  /* 10) Cards stay fixed-width inside the rail */
  #sourceViewer .fv-summary-item,
  #sourceViewer .fv-shell.fv-summary-open .fv-summary-item {
    flex: 0 0 220px !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;

    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    white-space: normal !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* 11) Text area inside each card scrolls vertically if needed */
  #sourceViewer .fv-summary-html {
    max-height: 140px !important;
    overflow: auto !important;
  }
}

@media (max-width: 980px) {
  .talvi-onboarding-card.mobile-bottomsheet {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: 38vh;
    overflow: auto;
    z-index: 5003;
    border-radius: 20px;
  }

  .talvi-onboarding-card.mobile-topsheet {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 76px !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: 34vh;
    overflow: auto;
    z-index: 5003;
    border-radius: 20px;
  }

  .talvi-onboarding-overlay.is-mobile-bottomsheet .talvi-onboarding-spotlight {
    transition: all 180ms ease;
  }

  .sources.mobile-onboarding-open .source-balloons,
  .source-balloons.mobile-onboarding-open {
    max-height: none !important;
    overflow-y: visible !important;
  }

  .source-balloons.mobile-onboarding-open {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .talvi-onboarding-overlay.is-mobile-modal-step .talvi-onboarding-backdrop {
    background: rgba(15, 23, 42, 0.12);
  }
}


/* =========================
   Help & Support Typography Fix
   ========================= */

.talvi-support-pane {
  font-family: inherit;
}

/* Title matches other panels */
.talvi-support-pane .history-title {
  font-family: inherit;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.2px;
}

/* Buttons match system buttons */
.talvi-support-pane .btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* Ensure consistency with nugget/chat cards */
.talvi-support-pane .talvi-security-inline-link {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
}

/* User message must be positioned */
.message.user {
  position: relative;
}

/* Copy button */
.message.user .msg-copy-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;

  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;
  border: 1px solid rgba(15,23,42,0.08);

  background: rgba(255,255,255,0.9);
  color: #475569;

  cursor: pointer;
  transition: all 0.15s ease;
}

/* Hover */
.message.user .msg-copy-btn:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15,23,42,0.08);
}

/* Icon size */
.message.user .msg-copy-btn svg {
  width: 16px;
  height: 16px;
}

/* User and assistant chat shape */
.message.user {
  border-radius: 16px 16px 4px 16px !important;
}

.message.assistant {
  border-radius: 16px 16px 16px 4px !important;
}

#chatStream .message.assistant.selected::before,
#chatStream .message.assistant.active::before,
#chatStream .message.assistant.is-active::before {
  content: "";
  position: absolute;
  left:0px;                     /* sit over the left border; use 2px to keep inside */
  top: 0%;                         /* start at the very top-left corner */
  width: 10px;                     /* stripe thickness */
  height: 100%;                    /* only the top half */
  z-index: 1;                     /* above the card border */
  pointer-events: none;
  /* rounded bottom end only (matches screenshot look) */
   border-top-left-radius: 16px !important;
  border-bottom-left-radius: 4px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  background: linear-gradient(180deg, var(--stripe-color) 75%, var(--bg-grad-blue));
}


/* =========================
   Talk to file strip
   ========================= */

.talk-to-file {
  margin: 10px 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in oklab, var(--panel) 96%, transparent);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

.talk-to-file.hidden {
  display: none;
}

.talk-to-file-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.talk-to-file-label {
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
}

.talk-to-file-help {
  font-size: 12px;
  color: var(--muted);
}

.talk-to-file-chip-mount {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* source chips become positioning roots for the talk button
#sourceBalloons .chip {
  position: relative;
  padding-right: 36px;
} */

/* little talk button on top-right of normal source chip */
.source-talk-btn {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  z-index: 2;
}

.source-talk-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.16);
}

.source-talk-btn svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* selected talk-to-file chip */
.talk-to-file-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  padding-right: 34px;
  border-radius: 999px;
  border: 3px solid var(--danger);
  background: color-mix(in oklab, var(--danger) 12%, transparent);
  color: var(--text);
  min-width: 0;
  max-width: 100%;
}

.talk-to-file-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 34ch;
}

.talk-to-file-chip .type {
  opacity: .8;
  font-size: 12px;
}

.talk-to-file-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  border: 1px solid color-mix(in oklab, var(--danger) 55%, var(--border));
  border-radius: 999px;
  background: var(--panel);
  color: var(--danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

.talk-to-file-remove:hover {
  background: color-mix(in oklab, var(--danger) 10%, var(--panel));
}

/* message label for file-focused mode */
.file-focus-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--danger) 35%, var(--border));
  background: color-mix(in oklab, var(--danger) 9%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  max-width: 100%;
}

.file-focus-badge .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 34ch;
}

@media (max-width: 980px) {
  .talk-to-file {
    margin: 10px 8px 0;
  }

  .talk-to-file-help {
    width: 100%;
  }
}

#sourceBalloons .chip {
  position: relative;
}

#sourceBalloons .chip:not(.details):not(.lesson) {
  padding-right: 36px;
}

#sourceBalloons .chip.details,
#sourceBalloons .chip.lesson {
  padding-right: 12px !important;
}

.file-focus-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--danger) 30%, var(--border));
  background: color-mix(in oklab, var(--danger) 7%, transparent);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  max-width: 100%;
}

.file-focus-badge .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 28ch;
}

/* Markdown  helpers  */
.message .bubble {
  white-space: normal;
  overflow-wrap: anywhere;
}

.message .bubble p {
  margin: 0 0 10px;
}

.message .bubble p:last-child {
  margin-bottom: 0;
}

.message .bubble ul,
.message .bubble ol {
  margin: 8px 0 10px 20px;
  padding: 0;
}

.message .bubble li + li {
  margin-top: 4px;
}

.message .bubble h1,
.message .bubble h2,
.message .bubble h3,
.message .bubble h4,
.message .bubble h5,
.message .bubble h6 {
  margin: 0 0 10px;
  line-height: 1.25;
}

.message .bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: rgba(127,127,127,.14);
  padding: 2px 6px;
  border-radius: 6px;
}

.message .bubble pre {
  overflow: auto;
  padding: 12px;
  border-radius: 10px;
  background: rgba(127,127,127,.12);
}

.message .bubble pre code {
  background: transparent;
  padding: 0;
}

.message .bubble blockquote {
  margin: 10px 0;
  padding-left: 12px;
  border-left: 3px solid var(--border);
  color: var(--muted);
}

.message .bubble table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}

.message .bubble th,
.message .bubble td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.message .bubble a {
  color: var(--primary);
  text-decoration: underline;
}

/* =========================
   Talk to file strip
   ========================= */

.talk-to-file {
  margin: 8px 12px 0;
  padding: 7px 12px 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in oklab, var(--panel) 96%, transparent);
  box-shadow: 0 6px 14px rgba(0,0,0,.05);
}

.talk-to-file.hidden {
  display: none;
}

.talk-to-file-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.talk-to-file-label {
  font-weight: 800;
  font-size: 12px;
  color: var(--text);
  line-height: 1.15;
}

.talk-to-file-help {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.15;
}

.talk-to-file-chip-mount {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* little talk button on top-right of normal source chip */
.source-talk-btn {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-grad-green);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  z-index: 2;
}

.source-talk-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.16);
}

.source-talk-btn svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* selected talk-to-file chip */
.talk-to-file-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  padding-right: 28px;
  border-radius: 999px;
  border: 3px solid var(--danger);
  background: color-mix(in oklab, var(--danger) 10%, transparent);
  color: var(--text);
  min-width: 0;
  max-width: 100%;
  min-height: 34px;
}

.talk-to-file-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 30ch;
  font-size: 12px;
  line-height: 1.1;
}

.talk-to-file-chip .type {
  opacity: .8;
  font-size: 11px;
  line-height: 1.1;
}

.talk-to-file-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border: 1px solid color-mix(in oklab, var(--danger) 55%, var(--border));
  border-radius: 999px;
  background: var(--panel);
  color: var(--danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  font-size: 14px;
  line-height: 1;
}

.talk-to-file-remove:hover {
  background: color-mix(in oklab, var(--danger) 10%, var(--panel));
}

/* black/white tooltip style shared with copy button */
.source-talk-btn[data-tooltip],
.talk-to-file-remove[data-tooltip] {
  position: absolute;
}

.source-talk-btn[data-tooltip]::after,
.talk-to-file-remove[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-2px);
  background: #111827;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  z-index: 30;
}

.source-talk-btn[data-tooltip]::before,
.talk-to-file-remove[data-tooltip]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translateX(-50%) translateY(-2px);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #111827;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  z-index: 30;
}

.source-talk-btn[data-tooltip]:hover::after,
.source-talk-btn[data-tooltip]:hover::before,
.source-talk-btn[data-tooltip]:focus-visible::after,
.source-talk-btn[data-tooltip]:focus-visible::before,
.talk-to-file-remove[data-tooltip]:hover::after,
.talk-to-file-remove[data-tooltip]:hover::before,
.talk-to-file-remove[data-tooltip]:focus-visible::after,
.talk-to-file-remove[data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 980px) {
  .talk-to-file {
    margin: 8px 8px 0;
  }

  .talk-to-file-help {
    width: 100%;
  }
}

/* =========================================================
   FINAL TALK-TO-FILE OVERRIDES
   Keep this at the very end of the stylesheet
   ========================================================= */

#talkToFileSection.talk-to-file {
  margin: 6px 12px 0 !important;
  padding: 6px 12px 7px !important;
}

#talkToFileSection .talk-to-file-head {
  gap: 8px !important;
  margin-bottom: 5px !important;
}

#talkToFileSection .talk-to-file-label {
  font-size: 11px !important;
  line-height: 1.1 !important;
}

#talkToFileSection .talk-to-file-help {
  font-size: 10px !important;
  line-height: 1.1 !important;
}

#talkToFileSection .talk-to-file-chip-mount {
  gap: 6px !important;
}

#talkToFileSection .talk-to-file-chip {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  padding-right: 26px !important;
  min-height: 30px !important;
  border-radius: 999px !important;
  border: 3px solid var(--danger) !important;
  background: color-mix(in oklab, var(--danger) 9%, transparent) !important;
  max-width: 100% !important;
}

#talkToFileSection .talk-to-file-chip strong {
  font-size: 11px !important;
  line-height: 1.05 !important;
  max-inline-size: 28ch !important;
}

#talkToFileSection .talk-to-file-chip .type {
  font-size: 10px !important;
  line-height: 1 !important;
}

#talkToFileSection .talk-to-file-remove {
  top: -8px !important;
  right: -8px !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* =========================================================
   FINAL TOOLTIP OVERFLOW FIX
   ========================================================= */

.sources,
#sourcesSection,
.source-balloons,
#sourceBalloons {
  overflow: visible !important;
}

#sourceBalloons {
  max-height: none !important;
}

#sourceBalloons .chip,
#sourceBalloons .source-talk-btn,
#talkToFileSection .talk-to-file-remove {
  overflow: visible !important;
}

/* Put the tooltip above the icon instead of below */
.source-talk-btn[data-tooltip]::after,
.talk-to-file-remove[data-tooltip]::after {
  top: auto !important;
  bottom: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(2px) !important;
  z-index: 9999 !important;
}

.source-talk-btn[data-tooltip]::before,
.talk-to-file-remove[data-tooltip]::before {
  top: auto !important;
  bottom: calc(100% + 2px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(2px) rotate(180deg) !important;
  z-index: 9999 !important;
}

.source-talk-btn[data-tooltip]:hover::after,
.source-talk-btn[data-tooltip]:hover::before,
.source-talk-btn[data-tooltip]:focus-visible::after,
.source-talk-btn[data-tooltip]:focus-visible::before,
.talk-to-file-remove[data-tooltip]:hover::after,
.talk-to-file-remove[data-tooltip]:hover::before,
.talk-to-file-remove[data-tooltip]:focus-visible::after,
.talk-to-file-remove[data-tooltip]:focus-visible::before {
  transform: translateX(-50%) translateY(0) !important;
}

/* =========================================================
   FINAL SOURCE CHIP / VIEWER INTERACTION FIX
   ========================================================= */

#sourcesSection {
  position: relative;
}

#sourceBalloons {
  position: relative;
  z-index: 5;
}

#sourceViewer,
#answerFullPanel {
  position: relative;
  z-index: 1;
}

/* Keep the chips clearly interactive above anything rendered below */
#sourceBalloons .chip {
  position: relative;
  z-index: 6;
}

/* Prevent viewer content from visually or interactively creeping upward */
#sourceViewer iframe,
#sourceViewer canvas,
#sourceViewer video,
#sourceViewer audio,
#sourceViewer .viewer-frame,
#sourceViewer .viewer-canvas-wrap {
  position: relative;
  z-index: 1;
}

/* =========================================================
   FINAL TALK-TO-FILE UX TWEAKS
   ========================================================= */

#talkToFileSection .talk-to-file-help {
  color: var(--muted) !important;
}

#talkToFileSection .talk-to-file-remove {
  border: 1px solid color-mix(in oklab, var(--muted) 32%, var(--border)) !important;
  color: var(--muted) !important;
  background: var(--panel) !important;
}

#talkToFileSection .talk-to-file-remove:hover {
  background: color-mix(in oklab, var(--muted) 10%, var(--panel)) !important;
  color: var(--text) !important;
}

/* =========================================================
   FINAL TALK-TO-FILE VISUAL OVERRIDES
   Keep this at the very end of the stylesheet
   ========================================================= */

#talkToFileSection .talk-to-file-chip {
  border: 2px solid color-mix(in oklab, var(--muted) 28%, var(--border)) !important;
  background: color-mix(in oklab, var(--bg-grad-blue) 8%, transparent) !important;
  color: var(--text) !important;
}

#talkToFileSection .talk-to-file-chip .label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

#talkToFileSection .talk-to-file-chip .glyph {
  flex: 0 0 auto !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

#talkToFileSection .talk-to-file-chip strong {
  color: var(--text) !important;
}

#talkToFileSection .talk-to-file-remove {
  border: 1px solid color-mix(in oklab, var(--muted) 30%, var(--border)) !important;
  color: var(--muted) !important;
  background: var(--panel) !important;
}

#talkToFileSection .talk-to-file-remove:hover {
  background: color-mix(in oklab, var(--muted) 10%, var(--panel)) !important;
  color: var(--text) !important;
}

.message .file-focus-badge {
  border: 1px solid color-mix(in oklab, var(--muted) 28%, var(--border)) !important;
  background: color-mix(in oklab, var(--bg-grad-blue) 7%, transparent) !important;
  color: var(--text) !important;
}

.message .file-focus-badge .glyph {
  flex: 0 0 auto !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.message .file-focus-badge .name {
  color: var(--text) !important;
}

/* =========================================================
   TALK-TO-FILE + FILE BADGE COLOUR PLAYGROUND
   Change ONLY these values to experiment
   ========================================================= */

:root {
  --ttf-border: #8b5cf6;
  --ttf-bg: rgba(139, 92, 246, 0.2);
  --ffb-border: #8b5cf6;
  --ffb-bg: rgba(139, 92, 246, 0.2);
}

/* Talk-to-file chip */
#talkToFileSection .talk-to-file-chip {
  border: 1.5px solid var(--ttf-border) !important;
  background: var(--ttf-bg) !important;
  color: var(--text) !important;
}

/* Remove button
#talkToFileSection .talk-to-file-remove {
  border: 1px solid var(--ttf-border) !important;
  color: var(--ttf-border) !important;
  background: transparent !important;
}

#talkToFileSection .talk-to-file-remove:hover {
  background: var(--ttf-bg) !important;
} */

/* In-message "Chatting to file" badge */
.message .file-focus-badge {
  border: 1px solid var(--ffb-border) !important;
  background: var(--ffb-bg) !important;
  color: var(--text) !important;
}

/* =========================================================
   Talk-to-file assistant suggested questions
   ========================================================= */

.assistant-suggested-questions {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.assistant-suggested-questions-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.assistant-suggested-questions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mentor-starter-freeform-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.assistant-suggested-question-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel) 94%, transparent);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  max-width: 100%;
  text-align: left;
}

.assistant-suggested-question-chip:hover,
.assistant-suggested-question-chip:focus-visible {
  background: color-mix(in oklab, var(--bg-grad-blue) 22%, var(--panel));
  border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
  outline: none;
}

.assistant-suggested-question-chip:active {
  transform: translateY(1px);
}

.assistant-suggested-question-chip {
  position: relative;
}

/* =========================================================
   Suggested question tooltip support
   ========================================================= */

.suggested-question-chip,
.assistant-suggested-question-chip {
  position: relative;
  overflow: visible !important;
}

/* Shared tooltip body */
.suggested-question-chip[data-tooltip]::after,
.assistant-suggested-question-chip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: #101828;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 120ms ease,
    transform 120ms ease,
    visibility 120ms ease;
  z-index: 9999;
}

/* Shared tooltip arrow */
.suggested-question-chip[data-tooltip]::before,
.assistant-suggested-question-chip[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(2px) rotate(180deg);
  width: 10px;
  height: 10px;
  background: #101828;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 120ms ease,
    transform 120ms ease,
    visibility 120ms ease;
  z-index: 9999;
}

/* Show on hover / keyboard focus */
.suggested-question-chip[data-tooltip]:hover::after,
.suggested-question-chip[data-tooltip]:hover::before,
.suggested-question-chip[data-tooltip]:focus-visible::after,
.suggested-question-chip[data-tooltip]:focus-visible::before,
.assistant-suggested-question-chip[data-tooltip]:hover::after,
.assistant-suggested-question-chip[data-tooltip]:hover::before,
.assistant-suggested-question-chip[data-tooltip]:focus-visible::after,
.assistant-suggested-question-chip[data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.suggested-question-chip[data-tooltip]:hover::before,
.suggested-question-chip[data-tooltip]:focus-visible::before,
.assistant-suggested-question-chip[data-tooltip]:hover::before,
.assistant-suggested-question-chip[data-tooltip]:focus-visible::before {
  transform: translateX(-50%) translateY(0) rotate(180deg);
}

/* =========================================
   Assistant suggested question chips
   EXACT match to .suggested-question-chip
   ========================================= */

.assistant-suggested-question-chip {
  appearance: none !important;
  border: 1px solid rgba(146, 208, 177, 0.6) !important;
  background: linear-gradient(180deg, #f9fdfb 0%, #f3fbf7 100%) !important;
  color: #1f2937 !important;
  border-radius: 999px !important;
  padding: 11px 16px !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease !important;
  position: relative !important;
}

.assistant-suggested-question-chip:hover {
  transform: translateY(-1px) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f5fcf8 100%) !important;
  border-color: rgba(146, 208, 177, 0.85) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

.assistant-suggested-question-chip:focus-visible {
  outline: 2px solid #8fd1b0 !important;
  outline-offset: 2px !important;
}

.assistant-suggested-question-chip:active {
  transform: translateY(0) !important;
}

/* Tooltip base */
[data-tooltip] {
  position: relative;
}

/* Tooltip bubble */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  
  background: #000;
  color: #fff;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;

  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 50;
}

/* Tooltip arrow */
[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  
  border: 5px solid transparent;
  border-top-color: #000;

  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Show on hover */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
}

#sourceBalloons {
  overflow: visible;
}



/* =========================================================
   Source chip / details / lesson chip tooltip support
   ========================================================= */

#sourceBalloons .chip[data-tooltip] {
  position: relative !important;
  overflow: visible !important;
}

#sourceBalloons .chip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(2px);
  background: #111827;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  z-index: 9999;
}

#sourceBalloons .chip[data-tooltip]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%) translateY(2px) rotate(180deg);
  width: 10px;
  height: 10px;
  background: #111827;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  z-index: 9999;
}

#sourceBalloons .chip[data-tooltip]:hover::after,
#sourceBalloons .chip[data-tooltip]:hover::before,
#sourceBalloons .chip[data-tooltip]:focus-visible::after,
#sourceBalloons .chip[data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

#sourceBalloons .chip[data-tooltip]:hover::after,
#sourceBalloons .chip[data-tooltip]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

#sourceBalloons .chip[data-tooltip]:hover::before,
#sourceBalloons .chip[data-tooltip]:focus-visible::before {
  transform: translateX(-50%) translateY(0) rotate(180deg);
}


/* Prevent parent source-chip tooltip when hovering the talk-to-file button */
#sourceBalloons .chip[data-tooltip]:has(.source-talk-btn:hover)::after,
#sourceBalloons .chip[data-tooltip]:has(.source-talk-btn:hover)::before,
#sourceBalloons .chip[data-tooltip]:has(.source-talk-btn:focus-visible)::after,
#sourceBalloons .chip[data-tooltip]:has(.source-talk-btn:focus-visible)::before {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Keep the child talk button tooltip on top */
#sourceBalloons .source-talk-btn[data-tooltip] {
  z-index: 20 !important;
}


/* Suppress tool tips during onboarding */
/* Disable all non-onboarding tooltips while walkthrough is active */
body.talvi-onboarding-active [data-tooltip]::before,
body.talvi-onboarding-active [data-tooltip]::after,
body.talvi-onboarding-active [data-label]::before,
body.talvi-onboarding-active [data-label]::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Keep the onboarding nudge visible */
body.talvi-onboarding-active #onboardingClickNudge::after {
  content: "" !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Let the onboarding nudge arrow point to the actual target centre */
.onboarding-click-nudge::after {
  left: var(--nudge-arrow-left, 18px) !important;
}

.onboarding-click-nudge.is-below-target::after {
  top: auto !important;
  bottom: 100% !important;
  transform: rotate(45deg) translateY(4px) !important;
}


/* =========================
   Talvi Coach panel
   ========================= */

.talvi-coach-panel {
  margin: 10px 12px 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.08),
    0 4px 12px rgba(15, 23, 42, 0.05);
  overflow: visible;
}

.talvi-coach-panel.hidden {
  display: none;
}

.talvi-coach-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 75%, transparent);
  background: color-mix(in oklab, #f8f2ff 58%, #fff);
}

.talvi-coach-kicker {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, #7c3aed 65%, var(--muted));
}

.talvi-coach-change-file {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.talvi-coach-change-file:hover {
  color: var(--text);
}

.talvi-coach-body {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  padding: 20px 26px 24px;
}

.talvi-coach-avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(145deg, #48d3c7, #4f9df7);
  box-shadow: 0 10px 20px rgba(79, 157, 247, 0.25);
}

.talvi-coach-content {
  min-width: 0;
}

.talvi-coach-intro {
  padding: 14px 18px;
  border: 1px solid color-mix(in oklab, #48d3c7 28%, var(--border));
  border-radius: 18px;
  background: color-mix(in oklab, #ecfeff 72%, #fff);
  color: var(--text);
}

.talvi-coach-intro strong {
  color: color-mix(in oklab, #0f766e 70%, var(--text));
}

.talvi-coach-intro p {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.5;
}

.talvi-coach-starters {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.talvi-coach-starter-chip {
  width: 100%;
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, #48d3c7 36%, var(--border));
  background: #fff;
  color: color-mix(in oklab, #134e4a 75%, var(--text));
  font-weight: 750;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease,
    border-color 120ms ease;
}

.talvi-coach-starter-chip:hover {
  transform: translateY(-1px);
  background: color-mix(in oklab, #ecfeff 74%, #fff);
  border-color: color-mix(in oklab, #48d3c7 65%, var(--border));
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.09);
}

.talvi-coach-file-chip {
  border-color: color-mix(in oklab, #8b5cf6 70%, var(--border)) !important;
  background: color-mix(in oklab, #8b5cf6 12%, #fff) !important;
  color: color-mix(in oklab, #6d28d9 82%, var(--text)) !important;
  padding-right: 12px !important;
}

.talvi-coach-file-chip .glyph {
  font-size: 16px;
}

.talvi-coach-file-chip strong {
  max-inline-size: 34ch;
  font-size: 13px;
}

.talvi-coach-file-chip .type {
  opacity: 0.75;
}

@media (max-width: 720px) {
  .talvi-coach-body {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .talvi-coach-avatar {
    display: none;
  }

  .talvi-coach-top {
    align-items: flex-start;
  }

  .talvi-coach-change-file {
    padding-top: 4px;
  }
}

/* Compact Talvi Coach panel */
.talvi-coach-panel {
  margin: 8px 10px 0 !important;
  border-radius: 16px !important;
}

.talvi-coach-top {
  padding: 10px 14px !important;
  border-radius: 16px 16px 0 0 !important;
}

.talvi-coach-kicker {
  margin-bottom: 6px !important;
  font-size: 11px !important;
}

.talvi-coach-body {
  grid-template-columns: 38px 1fr !important;
  gap: 12px !important;
  padding: 14px 18px 16px !important;
}

.talvi-coach-avatar {
  width: 36px !important;
  height: 36px !important;
  font-size: 18px !important;
}

.talvi-coach-intro {
  padding: 10px 14px !important;
  border-radius: 14px !important;
}

.talvi-coach-intro p {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.talvi-coach-starters {
  gap: 8px !important;
  margin-top: 12px !important;
}

.talvi-coach-starter-chip {
  min-height: 40px !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
}

.talvi-coach-file-chip {
  min-height: 34px !important;
  padding: 6px 12px !important;
}

.talvi-coach-file-chip strong {
  font-size: 13px !important;
}

.talvi-coach-change-file {
  font-size: 13px !important;
}

.talvi-coach-starters.hidden {
  display: none !important;
}

/* Center the Coach avator */
.talvi-coach-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.talvi-coach-avatar svg,
.source-coach-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Make suggested question in the talk to file asssitant message same as coach  */
.assistant-suggested-question-chip {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;

  min-height: 44px;
  padding: 12px 20px;

  border-radius: 999px;
  border: 1px solid rgba(94, 234, 212, 0.7);
  background: #ffffff;

  color: #123836;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;

  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease;
}

.assistant-suggested-question-chip:hover {
  background: rgba(240, 253, 250, 0.95);
  border-color: rgba(45, 212, 191, 0.95);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.source-coach-btn {
  background: linear-gradient(145deg, #48d3c7, #4f9df7) !important;
  color: #fff !important;
  border: none !important;
}

.talvi-coach-avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(145deg, #48d3c7, #4f9df7);
  color: #fff;

  box-shadow: 0 10px 20px rgba(79, 157, 247, 0.25);
}


/* Match assistant suggested questions to Talvi Coach starter chips */
.assistant-suggested-question-chip {
  background: color-mix(in oklab, #ecfeff 72%, #fff) !important;
  border: 1px solid color-mix(in oklab, #48d3c7 55%, var(--border)) !important;
  color: color-mix(in oklab, #134e4a 82%, var(--text)) !important;
}

.assistant-suggested-question-chip:hover {
  background: color-mix(in oklab, #ecfeff 88%, #fff) !important;
  border-color: color-mix(in oklab, #48d3c7 75%, var(--border)) !important;
}



/* Talvi Coach: compact panel + consistent suggested question chips */
.talvi-coach-panel {
  margin: 6px 8px 0 !important;
  border-radius: 14px !important;
}

.talvi-coach-top {
  padding: 8px 12px !important;
  border-radius: 14px 14px 0 0 !important;
  gap: 10px !important;
}

.talvi-coach-kicker {
  margin-bottom: 4px !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
}

.talvi-coach-body {
  grid-template-columns: 34px 1fr !important;
  gap: 10px !important;
  padding: 10px 14px 12px !important;
}

.talvi-coach-avatar {
  width: 32px !important;
  height: 32px !important;
}

.talvi-coach-avatar svg {
  width: 17px !important;
  height: 17px !important;
}

.talvi-coach-intro {
  padding: 8px 12px !important;
  border-radius: 12px !important;
}

.talvi-coach-intro p {
  margin-top: 2px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.talvi-coach-starters {
  gap: 7px !important;
  margin-top: 9px !important;
}

.talvi-coach-starter-chip,
.assistant-suggested-question-chip {
  min-height: 38px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid color-mix(in oklab, #48d3c7 55%, var(--border)) !important;
  color: color-mix(in oklab, #134e4a 82%, var(--text)) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04) !important;
}

.talvi-coach-starter-chip:hover,
.assistant-suggested-question-chip:hover {
  background: color-mix(in oklab, #ecfeff 74%, #fff) !important;
  border-color: color-mix(in oklab, #48d3c7 75%, var(--border)) !important;
  transform: translateY(-1px);
}

.talvi-coach-file-chip {
  min-height: 30px !important;
  padding: 5px 10px !important;
}

.talvi-coach-file-chip strong {
  font-size: 12px !important;
}

.talvi-coach-change-file {
  font-size: 12px !important;
}

/* Get Answers composer refresh: voice input lives inside the text box */
.composer {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
  padding: 10px !important;
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 -10px 18px rgba(15, 23, 42, 0.08) !important;
}

.composer-input-shell {
  position: relative;
  min-width: 0;
  width: 100%;
}

.composer #userInput.input.textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  max-height: 144px;
  padding: 12px 52px 12px 14px !important;
  border: 1px solid color-mix(in oklab, var(--border) 76%, #48d3c7) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: var(--text) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  resize: none;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.composer #userInput.input.textarea:focus {
  border-color: color-mix(in oklab, #48d3c7 72%, var(--border)) !important;
  box-shadow:
    0 0 0 3px color-mix(in oklab, #48d3c7 18%, transparent),
    inset 0 1px 2px rgba(15, 23, 42, 0.04);
  outline: none;
}

.composer #userInput.input.textarea::placeholder {
  color: #8b98ad;
  font-size: 14px;
  font-weight: 800;
}

.composer #micBtn.composer-mic-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 32px !important;
  height: 32px;
  min-width: 32px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in oklab, #48d3c7 34%, var(--border)) !important;
  border-radius: 999px !important;
  background: color-mix(in oklab, #ecfeff 72%, #fff) !important;
  color: color-mix(in oklab, #0f766e 88%, var(--text)) !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06) !important;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.composer #micBtn.composer-mic-btn svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.composer #micBtn.composer-mic-btn:hover,
.composer #micBtn.composer-mic-btn:focus-visible {
  background: color-mix(in oklab, #ecfeff 90%, #fff) !important;
  border-color: color-mix(in oklab, #48d3c7 68%, var(--border)) !important;
  transform: translateY(-1px);
  outline: none;
}

.composer #micBtn.composer-mic-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

#sendBtn.btn.primary.composer-send-btn {
  min-width: 118px;
  height: 48px;
  min-height: 48px;
  padding: 0 18px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px !important;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}

#sendBtn.btn.primary.composer-send-btn .send-btn-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Get Answers secondary CTA consistency */
.history-header #newChatBtn,
.active-agent-skills-btn,
.talvi-support-actions .btn,
.talvi-support-actions .btn-demo,
.talvi-support-actions .btn-general-feedback,
.talvi-security-inline-link,
.suggested-question-chip,
.assistant-suggested-question-chip {
  border-radius: 14px !important;
  border: 1px solid color-mix(in oklab, #48d3c7 38%, var(--border)) !important;
  background: color-mix(in oklab, #ecfeff 54%, #fff) !important;
  color: color-mix(in oklab, #123836 88%, var(--text)) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
  font-weight: 800 !important;
}

.history-header #newChatBtn:hover,
.active-agent-skills-btn:hover,
.active-agent-skills-btn:focus-visible,
.talvi-support-actions .btn:hover,
.talvi-support-actions .btn-demo:hover,
.talvi-support-actions .btn-general-feedback:hover,
.talvi-security-inline-link:hover,
.suggested-question-chip:hover,
.assistant-suggested-question-chip:hover {
  background: color-mix(in oklab, #ecfeff 76%, #fff) !important;
  border-color: color-mix(in oklab, #48d3c7 62%, var(--border)) !important;
  transform: translateY(-1px);
}

.talvi-security-inline-link {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 720px) {
  .composer {
    grid-template-columns: minmax(0, 1fr) 48px !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .composer #userInput.input.textarea {
    min-height: 48px;
    max-height: 150px;
    padding: 12px 50px 12px 13px !important;
    font-size: 15px;
  }

  .composer #micBtn.composer-mic-btn {
    right: 8px;
    bottom: 8px;
    width: 32px !important;
    height: 32px;
  }

  #sendBtn.btn.primary.composer-send-btn {
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0 !important;
    border-radius: 14px !important;
  }

  #sendBtn.btn.primary.composer-send-btn .send-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* How To and Account refresh */
[data-page="how-to"] .howto-page-v2,
[data-page="account"] .account-page-v2 {
  width: min(1180px, calc(100% - 48px));
  max-width: 1180px !important;
  margin: 0 auto;
  padding: 34px 0 64px !important;
  box-sizing: border-box;
}

.howto-hero-v2,
.account-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin: 0 0 22px !important;
  padding: 26px 28px !important;
  border: 1px solid color-mix(in oklab, var(--border) 82%, #48d3c7) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(236, 253, 245, 0.72), rgba(255, 255, 255, 0.96) 46%, rgba(239, 246, 255, 0.58)),
    #ffffff !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06) !important;
  text-align: left !important;
}

.howto-hero-v2 h1,
.account-hero h1 {
  margin: 8px 0 8px !important;
  max-width: none !important;
  font-size: clamp(34px, 4vw, 52px) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.howto-hero-v2 .howto-hero-intro,
.account-hero p {
  max-width: 720px !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}

.howto-hero-badge,
.account-kicker,
.account-card-label,
.howto-section-head span {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  border: 1px solid color-mix(in oklab, #48d3c7 38%, var(--border));
  border-radius: 999px;
  background: color-mix(in oklab, #ecfeff 62%, #fff);
  color: color-mix(in oklab, #0f766e 86%, var(--text));
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.howto-primary-link {
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in oklab, #48d3c7 42%, var(--border));
  border-radius: 14px;
  background: color-mix(in oklab, #ecfeff 62%, #fff);
  color: color-mix(in oklab, #123836 88%, var(--text));
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.howto-primary-link:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, #48d3c7 66%, var(--border));
  background: color-mix(in oklab, #ecfeff 78%, #fff);
}

.howto-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 22px;
}

.howto-quick-card,
.howto-steps-panel,
.howto-trust-panel-v2,
.account-card {
  border: 1px solid color-mix(in oklab, var(--border) 88%, #48d3c7) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055) !important;
}

.howto-quick-card {
  padding: 18px !important;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.howto-quick-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, #48d3c7 48%, var(--border)) !important;
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08) !important;
}

.howto-quick-card span {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 12px;
  background: color-mix(in oklab, #ecfeff 70%, #fff);
  color: #0f766e;
  font-weight: 900;
}

.howto-quick-card h2 {
  margin: 0 0 7px;
  font-size: 22px;
  line-height: 1.15;
}

.howto-quick-card p,
.howto-step-body p,
.howto-trust-panel-v2 p,
.account-card p,
.account-card .muted {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.howto-steps-panel {
  padding: 22px !important;
  margin: 0 0 22px !important;
}

.howto-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.howto-section-head h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
}

.howto-accordion {
  display: grid;
  gap: 10px;
}

.howto-step {
  border: 1px solid color-mix(in oklab, var(--border) 88%, #48d3c7);
  border-radius: 14px;
  background: color-mix(in oklab, #ffffff 92%, #ecfeff);
  overflow: hidden;
}

.howto-step summary {
  min-height: 58px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.howto-step summary::-webkit-details-marker {
  display: none;
}

.howto-step summary::after {
  content: "+";
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in oklab, #ecfeff 72%, #fff);
  color: #0f766e;
  font-weight: 900;
}

.howto-step[open] summary::after {
  content: "-";
}

.howto-step summary strong {
  font-size: 18px;
}

.howto-step .howto-step-no {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 12px;
}

.howto-step-body {
  padding: 0 54px 16px 64px;
}

.howto-trust-panel-v2 {
  display: block;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px 24px !important;
  background:
    linear-gradient(135deg, rgba(236, 253, 245, 0.86), rgba(239, 246, 255, 0.76)),
    #ffffff !important;
}

.howto-trust-panel-v2 h2 {
  margin: 8px 0 8px !important;
  font-size: 28px !important;
}

[data-page="account"] .account-page-v2 {
  min-height: auto !important;
}

.account-hero {
  grid-template-columns: 1fr;
}

.account-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

[data-page="account"] .account-card {
  width: auto !important;
  max-width: none !important;
  min-height: 0;
  margin: 0 !important;
  padding: 22px !important;
}

.account-card h2 {
  margin: 8px 0 14px !important;
  font-size: 24px;
  line-height: 1.12;
}

.account-identity {
  grid-template-columns: auto 1fr !important;
  gap: 16px !important;
}

.account-identity .avatar-large {
  width: 64px;
  height: 64px;
  font-size: 26px;
  border-radius: 18px;
  background: color-mix(in oklab, #ecfeff 64%, #fff);
  border: 1px solid color-mix(in oklab, #48d3c7 34%, var(--border));
  color: #0f766e;
}

.account-identity .identity-text .name {
  margin-top: 8px;
  font-size: 22px;
  line-height: 1.1;
}

.account-identity .identity-text .email,
.account-identity .identity-text .uid {
  margin-top: 4px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.account-agent select.input {
  width: 100%;
  height: 46px;
  margin-top: 10px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--border) 84%, #48d3c7);
  background: #fff;
  font-weight: 650;
}

.account-action-row,
.privacy-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 14px 0;
  border-top: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
}

.account-action-row {
  border-top: 0;
  padding-top: 0;
}

.privacy-row + .privacy-row {
  margin-top: 2px !important;
}

.privacy-title,
.account-action-row strong {
  font-weight: 850 !important;
  color: var(--text);
}

.account-switch {
  width: 100% !important;
  margin-top: 12px !important;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
}

.account-switch #switchDestinationBtn {
  width: fit-content;
  min-width: 220px;
}

.account-secondary-btn {
  min-width: 120px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in oklab, #48d3c7 38%, var(--border)) !important;
  border-radius: 14px !important;
  background: color-mix(in oklab, #ecfeff 54%, #fff) !important;
  color: color-mix(in oklab, #123836 88%, var(--text)) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
  font-weight: 850 !important;
}

[data-page="account"] #logoutBtn.account-secondary-btn {
  background: color-mix(in oklab, #ecfeff 54%, #fff) !important;
  border: 1px solid color-mix(in oklab, #48d3c7 38%, var(--border)) !important;
  color: color-mix(in oklab, #123836 88%, var(--text)) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

.account-secondary-btn:hover {
  background: color-mix(in oklab, #ecfeff 76%, #fff) !important;
  border-color: color-mix(in oklab, #48d3c7 62%, var(--border)) !important;
  transform: translateY(-1px);
}

@media (max-width: 860px) {
  [data-page="how-to"] .howto-page-v2,
  [data-page="account"] .account-page-v2 {
    width: min(100% - 28px, 1180px);
    padding: 24px 0 44px !important;
  }

  .howto-hero-v2 {
    grid-template-columns: 1fr;
  }

  .howto-quick-grid,
  .account-grid-v2 {
    grid-template-columns: 1fr;
  }

  .howto-step-body {
    padding: 0 16px 16px 64px;
  }
}

@media (max-width: 560px) {
  .howto-hero-v2,
  .account-hero,
  [data-page="account"] .account-card,
  .howto-steps-panel,
  .howto-trust-panel-v2 {
    padding: 18px !important;
    border-radius: 16px !important;
  }

  .howto-hero-v2 h1,
  .account-hero h1 {
    font-size: 34px !important;
  }

  .howto-quick-card h2,
  .account-card h2 {
    font-size: 21px;
  }

  .howto-step summary {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 10px;
  }

  .howto-step-body {
    padding: 0 12px 14px 12px;
  }

  .account-action-row,
  .privacy-row {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .account-secondary-btn,
  .account-switch #switchDestinationBtn {
    width: 100%;
  }
}

.mcp-tool-call-panel {
  margin-top: 12px;
  border: 1px solid color-mix(in oklab, var(--border) 78%, #2f855a 22%);
  border-radius: 8px;
  background: color-mix(in oklab, var(--panel) 92%, #2f855a 8%);
  overflow: hidden;
}

.mcp-tool-call-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 82%, #2f855a 18%);
}

.mcp-tool-call-panel__head small {
  margin-left: auto;
  min-width: 0;
  color: var(--muted);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mcp-tool-call-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 6px;
  background: #2f855a;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0;
}

.mcp-tool-call-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mcp-tool-call-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
}

.mcp-tool-call-row + .mcp-tool-call-row {
  border-top: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
}

.mcp-tool-call-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2f855a;
}

.mcp-tool-call-row.is-error .mcp-tool-call-dot {
  background: #c2410c;
}

.mcp-tool-call-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.mcp-tool-call-main strong,
.mcp-tool-call-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mcp-tool-call-main small {
  color: var(--muted);
}

.mcp-tool-call-status {
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

/* Final How To / Account layout correction */
body[data-page="how-to"],
body[data-page="account"] {
  min-height: 100svh;
  overflow: hidden;
}

body[data-page="how-to"] .site-shell,
body[data-page="account"] .site-shell {
  height: calc(100svh - 48px);
  max-height: calc(100svh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}

body[data-page="how-to"] .trismeg-nav,
body[data-page="account"] .trismeg-nav {
  flex: 0 0 auto;
}

[data-page="how-to"] .howto-page-v2,
[data-page="account"] .account-page-v2 {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px 24px 48px !important;
  box-sizing: border-box;
}

.howto-hero-v2,
.account-hero,
.howto-quick-grid,
.howto-steps-panel,
.howto-trust-panel-v2,
.account-grid-v2 {
  width: 100% !important;
  max-width: none !important;
}

.howto-quick-grid,
.account-grid-v2 {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
}

.howto-hero-v2,
.account-hero {
  min-height: 0 !important;
  padding: 18px 22px !important;
  margin: 0 0 16px !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045) !important;
}

.howto-hero-v2 h1,
.account-hero h1 {
  margin: 6px 0 6px !important;
  font-size: clamp(26px, 2.25vw, 34px) !important;
  line-height: 1.08 !important;
}

.howto-hero-v2 .howto-hero-intro,
.account-hero p {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.howto-hero-badge,
.account-kicker,
.account-card-label,
.howto-section-head span {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #0f766e !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.11em !important;
  line-height: 1.2;
  text-transform: uppercase;
}

.howto-primary-link {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
}

.howto-quick-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.howto-quick-card {
  min-height: 0;
  padding: 16px !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04) !important;
}

.howto-quick-card span,
.howto-step .howto-step-no {
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  border-radius: 10px;
  font-size: 12px;
}

.howto-quick-card h2 {
  font-size: 18px;
  margin-bottom: 6px;
}

.howto-quick-card p,
.howto-step-body p,
.howto-trust-panel-v2 p,
.account-card p,
.account-card .muted {
  font-size: 14px;
  line-height: 1.42;
}

.account-mentor-memory {
  grid-column: 1 / -1;
}

.mentor-memory-context {
  width: 100%;
  min-height: 180px;
  max-height: 360px;
  margin: 14px 0 0;
  padding: 14px;
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.72);
  font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.mentor-memory-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
}

.howto-steps-panel,
.howto-trust-panel-v2 {
  padding: 18px !important;
  margin: 0 0 16px !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045) !important;
}

.howto-section-head {
  margin-bottom: 12px;
}

.howto-section-head h2,
.howto-trust-panel-v2 h2 {
  font-size: 22px !important;
  line-height: 1.12;
}

.howto-step summary {
  min-height: 48px;
  padding: 10px 12px;
}

.howto-step summary strong {
  font-size: 15px;
}

.howto-step summary::after {
  width: 24px;
  height: 24px;
  background: color-mix(in oklab, #ecfeff 60%, #fff);
}

.howto-step-body {
  padding: 0 48px 13px 54px;
}

.account-grid-v2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

[data-page="account"] .account-card {
  min-height: 210px;
  padding: 18px !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04) !important;
}

.account-card h2 {
  margin: 6px 0 12px !important;
  font-size: 20px;
}

.account-identity {
  align-items: flex-start !important;
  align-content: start;
}

.account-identity .avatar-large {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 22px;
}

.account-identity .identity-text .name {
  margin-top: 6px;
  font-size: 20px;
}

.account-identity .identity-text .email,
.account-identity .identity-text .uid,
.field-label,
.account-agent select.input {
  font-size: 14px;
}

.account-agent select.input {
  height: 42px;
  margin-top: 8px;
}

.account-action-row,
.privacy-row {
  padding: 12px 0;
  gap: 12px !important;
}

.privacy-title,
.account-action-row strong {
  font-size: 15px;
}

.account-secondary-btn,
.account-switch #switchDestinationBtn {
  min-height: 40px;
  height: 40px;
  border-radius: 12px !important;
  font-size: 13px;
}

.account-switch {
  margin-top: 10px !important;
  padding-top: 12px;
}

@media (max-width: 860px) {
  body[data-page="how-to"],
  body[data-page="account"] {
    overflow: auto;
  }

  body[data-page="how-to"] .site-shell,
  body[data-page="account"] .site-shell {
    height: auto;
    max-height: none;
    overflow: visible !important;
  }

  [data-page="how-to"] .howto-page-v2,
  [data-page="account"] .account-page-v2 {
    overflow: visible;
    padding: 18px 16px 38px !important;
  }

  .howto-hero-v2,
  .account-hero {
    grid-template-columns: 1fr;
  }

  .howto-quick-grid,
  .account-grid-v2 {
    grid-template-columns: 1fr;
  }

  [data-page="account"] .account-card {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .howto-hero-v2 h1,
  .account-hero h1 {
    font-size: 26px !important;
  }

  .howto-hero-v2,
  .account-hero,
  .howto-steps-panel,
  .howto-trust-panel-v2,
  [data-page="account"] .account-card {
    padding: 16px !important;
  }
}