/* 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-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: 120px; /* Trismeg logo default 180px */
  --logo-size-h: 120px; /* Trismeg logo default 70px*/
  --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-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;
}
.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;
}


#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; */
}

/* 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; */
}
.chat-stream {
  padding: 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: 2px;
}

.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;
}

/* 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: 10px;                 /* sits inside the reserved padding */
  bottom: 8px;                 /* aligns with meta baseline */
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;

  /* soft glass + gold ring */
  background: color-mix(in oklab, #fbbf24 12%, transparent);
  border: 1px solid color-mix(in oklab, #f59e0b 65%, transparent);
  box-shadow:
    0 6px 14px rgba(0,0,0,.14),
    0 0 0 3px color-mix(in oklab, #fbbf24 12%, transparent);

  color: #854d0e;              /* readable amber-900 */
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
  z-index: 2;
}

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

/* hover/pressed */
.msg-joggle-fab:hover{
  background: color-mix(in oklab, #fbbf24 18%, transparent);
  box-shadow:
    0 8px 18px rgba(0,0,0,.18),
    0 0 0 4px color-mix(in oklab, #fbbf24 16%, transparent);
  transform: translateY(-1px);
}
.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.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;
}

/* 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 */
}

/* <<< Talvi Nugget history tableview */


/* Lesson viewer / Talvi Nugget — Modal  >>>> */
.nugget-modal-overlay{
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(3px);
  display: none;
  z-index: 4000;
  opacity: 0;
  transition: opacity .18s ease;
}
.nugget-modal-overlay.show{ display:block; opacity: 1; }

/* Panel */
.nugget-modal{
  position: fixed;
  inset: 15% 15%;                 /* your preferred size */
  z-index: 4001;
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(0,0,0,.05), transparent 60%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--panel) 98%, transparent),
      color-mix(in oklab, var(--panel) 93%, transparent)
    );
  border: 1px solid color-mix(in oklab, var(--border) 75%, transparent);
  border-radius: 20px;
  box-shadow:
    0 28px 70px rgba(0,0,0,.28),
    0 8px 22px rgba(0,0,0,.12),
    0 1px 0 rgba(255,255,255,.75) inset;   /* soft inner rim */
  overflow: hidden;
  transform: scale(.985);
  opacity: .98;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.nugget-modal-overlay.show .nugget-modal{ transform: scale(1); opacity: 1; }

/* subtle top ridge */
.nugget-modal::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:12px;
  border-radius:20px 20px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent);
  pointer-events:none;
}

/* Content area */
.nugget-modal-body{ position: relative; padding: 14px 16px 18px; height: 100%; }
.nugget-viewer-host{
  position: relative;
  width: 100%; height: calc(100% - 0px);
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 22px 40px rgba(2,6,23,.16),
    0 6px 18px rgba(2,6,23,.10),
    0 0 0 1px color-mix(in oklab, var(--border) 85%, transparent) inset;
}
/* soft drop under the viewport */
.nugget-viewer-host::after{
  content:"";
  position:absolute; left:8%; right:8%; bottom:-10px; height:18px;
  filter: blur(12px);
  background: radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,.18), transparent);
  pointer-events:none;
}

/* The iframe fills only inside the modal */
.nugget-modal .nugget-viewer-host iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block; background:#fff; border-radius:16px;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.05) inset;  /* hairline rim */
}

/* Close button — cleaner, friendlier */
.nugget-modal-close{
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-size: 18px; line-height: 1;
  color: #dc2626;                               /* red icon/emojis */
  background: #fff;                             /* neutral disc */
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  cursor: pointer;
  z-index: 4002;
  box-shadow:
    0 2px 10px rgba(0,0,0,.10),
    0 0 0 4px rgba(220,38,38,.08);              /* soft red ring */
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.nugget-modal-close:hover{
  box-shadow:
    0 4px 16px rgba(0,0,0,.14),
    0 0 0 5px rgba(220,38,38,.12);
}
.nugget-modal-close:active{ transform: translateY(1px); }
.nugget-modal-close:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--primary) 60%, transparent);
  outline-offset: 2px;
}


/* <<<<< Lesson viewer / Talvi Nugget — Modal  */


/* 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: 17px;
  height: 17px;
  aspect-ratio: 1 / 1;
  /* margin-right: 6px; */
  object-fit: contain;
  display: block;
}

/* 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;
}


/* —— 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%;
}

/* 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: 680px;
  margin: 40px auto 80px; /* extra bottom space */
  padding: 0 20px;
  height: 500px;
}


body[data-page="magic-login"] h1.auth-title {
  text-align: left;
  margin-bottom: 24px;
}

body[data-page="magic-login"] .card {
  background: var(--panel);
  padding: 32px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}

body[data-page="magic-login"] .auth-subtitle {
  margin-bottom: 20px;
  line-height: 1.5;
}

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

body[data-page="magic-login"] .auth-input {
  height: 52px;
  padding: 12px 16px;
  font-size: 15px;
}

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

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

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

body[data-page="magic-login"] .auth-back a {
  font-size: 14px;
  text-decoration: none;
  color: var(--link-color, var(--bg-grad-blue-darker));
  font-weight: 500;
}

body[data-page="magic-login"] .auth-back a:hover {
  text-decoration: underline;
}


/* 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:hover {
  opacity: 0.9;
}

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