/* =========================
   Core theme & resets
   ========================= */
:root{
  --bg:#f7f8fb;
  --card:#ffffff;
  --ink:#0b1020;
  --muted:#606a7a;
  --line:#e5e7ef;
  --brand:#4f46e5;
  --brand-dark:#111827;
  --brand-primary: var(--color-primary, #5b3df5);
  --brand-primary-hover: var(--color-primary-600, #4b2de6);
  --text-muted: #687088;
  --card-bg: #f3f4f8;
  --card-border: #e7e9ef;
  --radius:14px;
  --color-primary: #5b3df5;       /* matches config default */
  --color-primary-600: #4b2de6;   /* hover */

  /* Layout sizing */
  --sidebar-w:260px;
  --shell-pad:24px;
  --topbar-h:58px;
  --chat-max: 1200px;
  --sidebar-bg:#f3f4f8;
  --column-w: min(var(--chat-max), calc(100% - 2 * var(--shell-pad)));

  /* composer height budget for safe bottom padding */
  --composer-h:64px; /* ~44px button + paddings */

  /* reading caps for assistant text */
  --assistant-text-max: 120ch;
  --assistant-text-pct: 90%;

  /* cards */
  --border: #e5e7eb;
  --surface-1: #ffffff;
  --surface-2: #f6f7fb;
  --muted-2: #9ca3af;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* App shell (sidebar + main) */
.app{ display:flex; min-height:100vh; }

/* =========================
   Sidebar
   ========================= */
 .sidebar{
   position: sticky;         /* stays pinned while the right pane scrolls */
   top: 0;
   width: var(--sidebar-w);
   flex: 0 0 var(--sidebar-w);   /* fixed column in the flex row */
   height: 100vh;                 /* full viewport height */
   overflow: auto;                /* <-- independent scroll */
   -webkit-overflow-scrolling: touch;

   background: var(--sidebar-bg);
   border-right: 1px solid var(--line);
   display: flex;
   flex-direction: column;
   padding: 18px;
 }
 /* Header row with right-aligned ellipsis */
.sidebar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:6px 0 8px;
}

/* reuse existing .sidebar-label; remove its bottom margin if any */
.sidebar-label{ margin-bottom:0; }

/* Ellipsis button */
.sidebar-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px; height:22px;
  border-radius:8px;
  color:#9aa2b3; text-decoration:none;
}
.sidebar-more:hover{
  color:#111827;
  background:#e9ebf3;
}
.sidebar a.recent-item,
.sidebar .recent-item {
  display: block;                 /* take the full row */
  padding: 10px 12px;             /* restore left/right space */
  border-radius: 10px;
  color: #6a7282;
  text-decoration: none;          /* kill underline */
  overflow: hidden;               /* single line with ellipsis */
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar a.recent-item:hover,
.sidebar .recent-item:hover {
  background: #e9ebf3;           /* same hover as before */
  color: #111827;
}

.brand{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.brand .dot{ width:24px; height:24px; background:var(--brand); border-radius:999px; }

.brand-logo{
  width:48px;
  height:48px;
  display:block;
  object-fit:contain;
}

/* Brand link should look like plain content, not a browser link */
.brand-link{
  display:flex;               /* lay out logo + text like before */
  align-items:center;
  gap:10px;
  text-decoration:none;       /* no underline */
  color:inherit;              /* keep your brand color */
}
.brand-link:hover,
.brand-link:focus{
  text-decoration:none;       /* no underline on hover/focus */
  outline:none;
}
.brand-name{
  font-weight:800;
  font-size:2rem;
  color:#111827;
  white-space:nowrap;         /* prevent wrapping to a new line */
}

.sidebar-section{ margin: 5px 0; }
.sidebar-label{
  font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:#8b93a3; margin-bottom:8px;
}
.sidebar-item{
  display:flex; align-items:center; gap:10px;
  padding:12px 12px;
  border-radius:12px;
  color:#29304b; text-decoration:none;
}
.sidebar-item i{
  color:#6b7280;
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  text-align: center;
}
.sidebar-item:hover{ background:#e9ebf3; }
.sidebar-item.active{ background:#e5e7ff; color:#111827; }
[data-general-row="1"]{
  position: relative;
  padding-right: 44px;
}
.assistant-new-thread{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  border-radius: 6px;
}
.sidebar-item:hover .assistant-new-thread,
.sidebar-item.active .assistant-new-thread{
  color: #111827;
}
.assistant-new-thread:hover{
  background: rgba(17, 24, 39, 0.08);
}

.recent-item{ padding:10px 12px; color:#6a7282; border-radius:10px; }
.recent-item:hover{ background:#e9ebf3; }

.sidebar-divider{
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 10px 0;
}

.sidebar-spacer{ flex:1; }
.sidebar-footer{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.sidebar-link{ display:inline-flex; align-items:center; gap:8px; color:#6a7282; text-decoration:none; }
.sidebar-link:hover{ color:#111827; }
.sidebar-list{ list-style: none; margin: 0; padding: 0; }
.sidebar-list li{ margin: 0; padding: 0; }


/* --- Chats page --- */
.toolbar { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin: 0 0 1rem; }
.input-sm, .select-sm, .btn-sm { height: 36px; }
.input-sm, .select-sm { padding: 0 .75rem; }
.check { display:inline-flex; align-items:center; gap:.4rem; color:#374151; font-size:.9rem; }

.card-list { display:flex; flex-direction:column; gap:12px; }
.chat-card {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.chat-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 6px 16px rgba(30, 64, 175, 0.12);
  background: #f8fafc;
}
.chat-card.is-editing {
  cursor: default;
}
.chat-card.is-editing:hover {
  border-color: #e5e7eb;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  background: #fff;
}
.chat-title a { text-decoration:none; color:#0f172a; font-weight:600; }
.chat-title a:hover { text-decoration:underline; }
.chat-meta { color:#6b7280; font-size:.875rem; margin-top:4px; }

.chat-title__edit {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: #0f172a;
  font-weight: 600;
  text-decoration: underline;
  cursor: text;
}
.chat-title__edit:hover {
  color: #1d4ed8;
}
.chat-title__input {
  width: 100%;
  font: inherit;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  outline: none;
}
.chat-title__input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

/* Chat cards need a positioned container for the X button */
.chat-card { position: relative; }

/* Match Files delete button */
.chat-card .delete{
  position:absolute; right:.5rem; top:.5rem;
  border:0; background:none; cursor:pointer;
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.chat-card .delete:hover { background:#f1f3fb; }

/* Search-only toolbar */
.searchbar { margin: 0 0 1rem; }
.input-full { width: 100%; }

/* Cards already styled earlier; just center the load-more */
.loadmore-wrap { display: flex; justify-content: center; }
#loadMoreChats[hidden] { display: none; }

.chart-card {
  max-width: 720px;
  margin-top: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.chart-card .msg-bubble {
  flex: 1 1 auto;
}
.chart-title {
  font-weight: 600;
  margin: 4px 0 8px;
}
.chart-frame {
  position: relative;
  width: 100%;
  height: 300px;       /* controls chart height – tweak per need */
}
.chart-frame canvas {
  position: absolute;
  inset: 0;
}

/* --- Composer "+" pop menus --- */
.pop{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow: 0 12px 28px rgba(16,24,40,.12);
  padding:6px;
  min-width: 220px;
  z-index: 1000;
}
.pop--level2{ min-width: 260px; }

.pop-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:0;
  background:none;
  text-align:left;
  cursor:pointer;
  color:#111827;
  border-radius:8px;
}
.pop-item:hover{ background:#f3f4f8; }
.pop-item i{ width:18px; text-align:center; color:#6b7280; }

.pop-sep{ height:1px; background:var(--line); margin:6px; }

.pop-title{
  font-weight:700;
  font-size:.9rem;
  color:#29304b;
  padding:6px 8px 4px;
}

.pop-list{ padding:4px; max-height: 300px; overflow:auto; }
.pop-empty{ color:#6b7280; padding:10px 12px; }

.pop-row .pop-text{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pop-carat{
  margin-left:auto;
  color:#9aa2b3;
}
.pop { transform-origin: right bottom; }

/* =========================
   Main column (topbar + content)
   ========================= */
 .main{
   flex: 1;
   display: flex;
   flex-direction: column;
   min-width: 0;
   background: #fff;
   overflow: hidden;            /* important so only inner regions scroll */
 }
.content{
  height: calc(100vh - var(--topbar-h));
  display: flex;
  flex-direction: column;
  overflow: hidden;                 /* no page-level scroll behind the bar */
}

.topbar{ background:var(--card); border-bottom:1px solid var(--line); z-index: 10; position: relative; }
.topnav{ display:flex; align-items:center; justify-content:flex-end; gap:18px; padding:14px 18px; }
.topnav-link{ color:#6a7282; text-decoration:none; }
.topnav-link:hover{ color:#111827; }
.topnav-form{ margin:0; }
.topnav-link--button{
  background:none;
  border:none;
  padding:0;
  font:inherit;
  cursor:pointer;
  color: inherit;
}
.topnav-link--button:hover{ color:#111827; }
.avatar{
  width:28px; height:28px; border-radius:999px;
  background:#0f172a; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600;
}
.menu   { z-index: 1000; }
.menu.hidden { display: none !important; }


/* =========================
   HERO (initial state)
   ========================= */
.hero-center,
.hero.full-center{
  min-height:calc(100vh - var(--topbar-h) - 100px);
  display:flex; align-items:center; justify-content:center;
  padding:0 var(--shell-pad);
}
.hero-inner{
  text-align:center; max-width:64rem; width:100%; padding:2rem; margin:0 auto;
}
.hero-title{ font-size:2rem; font-weight:800; margin:0 0 .5rem; }
@media (min-width:768px){ .hero-title{ font-size:2.5rem; } }
.hero-subtitle{ color:var(--muted); margin:0 0 1rem; font-size:1.3rem; }

/* Center hero to SAME width as chat — use 100% of the main column, not 100vw */
.hero .hero-inner,
.hero .composer--hero,
.hero-center .hero-inner,
.hero-center .composer--hero{
  width: var(--column-w);
  margin: 0 auto;
}
/* =========================
   Composer (shared styles)
   ========================= */
.composer{
 position: relative;
 display: flex; align-items: center;
 width: 100%;
 max-width: none;                    /* <- remove 760px cap */
 background: var(--card);
 border: 2px solid #dfe3ec;
 border-radius: 999px;
 padding: 8px;
 box-shadow: 0 1px 0 rgba(0,0,0,.02);
 margin: 0 auto;
}

/* Only when the textarea grows: keep corners stable like chat apps (without changing initial style). */
.composer.is-multiline{
  border-radius: 18px;
  align-items: flex-end;
}
.composer-input{
  flex:1; border:0; outline:0;
  font-size:16px; padding:10px 12px 10px 16px; background:transparent;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4;
  resize: none;
  overflow: hidden;
}

.composer-input::placeholder{
  font-family: inherit;
  font-weight: inherit;
}
.composer-btn{
  background:var(--brand-dark); color:#fff; border:0;
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; cursor:pointer;
}
.composer-btn:hover{ filter:brightness(1.05); }
.composer-btn:disabled,
.composer-btn.composer-btn--pac-disabled{
  opacity:0.6; cursor:not-allowed; pointer-events:auto;
}
.composer-btn:disabled:hover{ filter:none; }

/* Docked composer – SAME centered width as messages */
.composer--docked{
  position: static;                 /* was sticky */
  margin: 16px auto;
  background: var(--card);
}
.docker-assistant-name {
  color: var(--brand);
}

.quick-prompts{
  display:flex;
  text-align:center;
  flex-wrap:wrap;
  gap:10px;
  margin:14px auto 0;
  width:min(var(--chat-max), calc(100% - 2 * var(--shell-pad)));
  justify-content:center;     /* NEW */
}

/* =========================
   Assistant prompt shells
   ========================= */
.assistant-hero{
  position: relative;
  padding: 0 var(--shell-pad);
  background: #ffffff;
  overflow: hidden;
  min-height: calc(100vh - var(--topbar-h));
  display: flex;
}

.assistant-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  pointer-events: none;
}

.assistant-hero--plan::before{
  background-image: url("/static/images/plan.jpg");
  opacity: 0.12;
}

.assistant-hero--prospect::before{
  background-image: url("/static/images/prospect.jpg");
  opacity: 0.1;
}

.assistant-hero--service::before{
  background-image: url("/static/images/service.jpg");
  opacity: 0.1;
}

.assistant-hero-inner{
  max-width: var(--chat-max);
  margin: 0 auto;
  color: #0f172a;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  z-index: 1;
  text-align: center;
  flex: 1;
  min-height: calc(100vh - var(--topbar-h) - 100px);
  padding: 2rem 0;
}

.assistant-hero-main{
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding: 0 clamp(24px, 6vw, 100px);
}

.assistant-tab-row{
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 0 0 1rem;
  width: 100%;
  justify-content: flex-start;
}

.assistant-tab{
  border: none;
  background: transparent;
  color: #4b5563;
  font-weight: 500;
  font-size: 1.1rem;
  padding: 0 0 0.35rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease;
}

.assistant-tab.is-active{
  color: #5b3df5;
  border-color: #5b3df5;
  font-weight: 700;
}

.assistant-prompt-card{
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.6rem 0.6rem 0.3rem;
  background: #ffffff;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
  width: 100%;
  min-height: 64px;
}

.assistant-prompt-card.is-multiline{
  border-radius: 18px;
  align-items: flex-end;
}

.assistant-upload{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #4b5563;
  cursor: pointer;
  padding: 0;
}

.assistant-input-wrap{
  display: flex;
  align-items: stretch;
  width: 100%;
  position: relative;
}

.assistant-input{
  width: 100%;
  border: none;
  outline: none;
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
}

.assistant-submit{
  border: none;
  background: #5b3df5;
  color: #fff;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(91, 61, 245, 0.25);
}

.assistant-submit:hover{
  filter: brightness(1.05);
}

.assistant-meta{
  margin-top: auto;
  padding-top: 2.5rem;
  text-align: center;
  color: #64748b;
}

.assistant-meta-title{
  font-weight: 600;
  font-size: 1rem;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}

.assistant-meta-subtitle{
  margin-top: 0.35rem;
  font-size: 0.9rem;
}

/* =========================
   Thread (chat after first Q)
   ========================= */
.thread{
 flex: 1;
 min-height: 0;
 display: flex;
 flex-direction: column;
}

/* Page-level scrolling; center the message column, keep space for composer */
.messages{
  flex: 1;
  overflow: auto;                   /* scroll inside here */
  padding: 24px 0 16px;             /* small bottom cushion; no overlay now */
  gap: 14px;
}

/* Make the message list AND the composer use the same column geometry */
#thread .messages,
#thread .composer--docked{
  width: var(--column-w);
  margin-left: auto;
  margin-right: auto;
}

/* Message roles */
.msg{ display:flex; width:100%; }
.msg--assistant{ justify-content:flex-start; } /* ⬅ left edge matches composer */
.msg--user     { justify-content:flex-end; }   /* ➡ right-aligned */

.msg--assistant .msg-bubble{
  background: transparent;
  border: 0;
  padding: 0;
  width: min(100%, 80ch);
  max-width: 100%;
}
.msg--assistant .prose{
  max-width: 100%;                 /* not centered/narrowed */
  margin: 0 auto;
}

/* User message pill (light) */
.msg--user .msg-bubble{
  background: var(--sidebar-bg);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 16px 6px 16px 16px; /* TL TR BR BL */
  max-width: 80ch;
  padding: 10px 14px;
}

/* Assistant as document (no bubble) */
.msg--assistant .msg-bubble{
  background:transparent;
  color:var(--ink);
  border:0;
  padding:0;
}

/* Typing indicator */
.msg-bubble--typing{ display:flex; gap:6px; align-items:center; }
.msg-bubble--typing span{
  display:inline-block; width:6px; height:6px; background:#94a3b8; border-radius:50%;
  animation:blink 1s infinite;
}
.msg-bubble--typing .dot2{ animation-delay:.15s; }
.msg-bubble--typing .dot3{ animation-delay:.3s; }
@keyframes blink{ 0%,80%,100%{opacity:.2} 40%{opacity:1} }

.sys-hint--processing{
  display:flex;
  align-items:center;
  gap:12px;
}

.sys-hint--processing .msg-bubble--typing{
  display:inline-flex;
}

.sys-hint--processing .sys-hint__text{
  display:inline-block;
}


/* 1) Use gap between messages */
#thread .messages{
  display: flex;                 /* gap now works */
  flex-direction: column;
  gap: 18px;                     /* add a little breathing room */
}

/* 2) Assistant: span the full message column (same width as composer) */
#thread .msg--assistant .msg-bubble{
  width: 100% !important;        /* override width:min(100%,80ch) */
  max-width: none;
  padding: 0;                    /* keep document look */
}
#thread .msg--assistant .prose{
  width: 100%;
  max-width: none;               /* don't cap to 92ch for assistant docs */
  margin: 0;                     /* no centering gutter */
}

/* 3) User: compact, right-aligned; never full width */
#thread .msg--user .msg-bubble{
  max-width: min(50%, 80ch);     /* ~half the column, but still readable cap */
}

/* Text-only assistant messages: gently inset & centered */
#thread .msg--assistant:not(.has-embed) .msg-bubble{
  max-width: min(var(--assistant-text-max), var(--assistant-text-pct));
}

/* Rich HTML inside assistant text */
#thread .msg--assistant:not(.has-embed) .prose{
  max-width: min(var(--assistant-text-max), var(--assistant-text-pct));
}

/* Embed rows keep full width for maps/charts/etc. */
#thread .msg--assistant.has-embed .msg-bubble{ width:100%; max-width:none; }

#thread .msg--assistant .prose p{
  margin: 0 0 .55em;
}
#thread .msg--assistant .prose p:last-child{
  margin-bottom: 0;
}

/* =========================================
   Prose (assistant rich content)
   ========================================= */
.prose{
 font-size: 16px;
 line-height: 1.6;
 max-width: 92ch;                    /* was 80ch; keep readability but wider */
}
.prose > * + *{ margin-top:.75em; }
.prose h2{ font-size:1.375rem; line-height:1.25; font-weight:800; margin-top:1.2em; }
.prose h3{ font-size:1.1rem;   line-height:1.35; font-weight:700; margin-top:1em; }
.prose p{ margin:0; }
.prose ul,.prose ol{ padding-left:1.25rem; }
.prose li{ margin:.25em 0; }
.prose code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:.95em; background:rgba(2,6,23,.05); padding:.1em .35em; border-radius:4px;
}
.prose pre{
  background:var(--sidebar-bg);
  color:var(--ink);
  border:1px solid var(--line);
  padding:12px 14px; border-radius:10px; overflow:auto;
}
.prose pre code{ background:transparent; padding:0; color:inherit; }
.prose blockquote{
  border-left:3px solid var(--line);
  padding-left:.75rem; color:#475569;
}
.prose table{ border-collapse:collapse; width:100%; }
.prose th,.prose td{ border:1px solid var(--line); padding:6px 8px; text-align:left; }
.prose a{ color:#1f4cff; text-decoration:none; }
.prose a:hover{ text-decoration:underline; }


/* Make the assistant block center inside the messages column */
.msg--assistant .msg-bubble{
  width: 100%;           /* same reading width as .prose, but centered */
}

.msg--assistant .prose{
  margin: 0 auto;                    /* ensure the rich content centers */
}

/* Ensure content never underlaps the sticky composer */
.messages{
  padding-bottom: calc(var(--composer-h) + 24px);
  padding-left: 10px;
  padding-right: 10px;
}

/* --- topbar gets positioning anchor for the dropdown --- */
.topbar{ position: relative; }

/* --- avatar becomes a button (keeps your look) --- */
.avatar{
  border: 0;
  cursor: pointer;
}

/* --- dropdown menu --- */
.menu{
  position: absolute;
  right: 18px;
  top: 58px;
  width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 6px 0;
  z-index: 50;
}
.menu-item{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  color: #374151; text-decoration: none;
}
.menu-item i{ width: 18px; text-align: center; color: #6b7280; }
.menu-item:hover{ background: #f3f4f6; }
.menu-item--danger{ color: #e11d48; }
.menu-item--danger i{ color: #e11d48; }

/* --- new chat button in sidebar --- */
.sidebar-btn{
  width: 100%;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed #d8dbe7;
  background: #fafbff;
  color: #29304b;
  cursor: pointer;
  margin: 4px 0 14px;
}
.sidebar-btn:hover{ background: #eef1ff; }

/* --- files list --- */
.file-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  color:#6a7282; text-decoration:none;
}
.file-item i{ color:#6b7280; width:16px; text-align:center; }
.file-item:hover{ background:#e9ebf3; }

.file-list { list-style:none; padding:0; margin:0; }
.file-row { display:flex; align-items:center; gap:.5rem; padding:.25rem 0; }
.file-link { display:flex; align-items:center; gap:.5rem; flex:1; min-width:0; text-decoration:none; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-more { background:none; border:0; cursor:pointer; }

/* --- files page --- */
.filters { display:flex; gap:.5rem; align-items:center; margin-bottom:1rem; }
.filters .btn { margin-top:0; } /* override global button margin */
.files-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.file-card {
  position:relative;
  display:flex;
  gap:.75rem;
  padding:.75rem;
  border:1px solid var(--border);
  border-radius:12px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.file-card:hover{
  border-color: #c7d2fe;
  box-shadow: 0 6px 16px rgba(30, 64, 175, 0.12);
  background: #f8fafc;
}
.file-card.is-editing{
  cursor: default;
}
.file-card.is-editing:hover{
  border-color: var(--border);
  box-shadow: none;
  background: #fff;
}
.file-card .thumb { display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:12px; background:var(--surface-2); font-size:26px; }
.file-card .name { display:block; font-weight:600; margin-bottom:.25rem; text-decoration:none; }
.file-card .file-name__edit{
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--brand-dark);
  text-align: left;
  cursor: text;
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-card .file-name__edit:hover{
  color: #1d4ed8;
}
.file-card .file-name__input{
  width: 100%;
  font: inherit;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  outline: none;
}
.file-card .file-name__input:focus{
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}
.file-card .thread { display:block; font-size:.9rem; color:var(--muted); text-decoration:none; max-width: 420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-card .thread:hover { text-decoration: underline; }
.file-card .threads .thread-link { text-decoration: none; }
.file-card .threads .thread-link:hover { text-decoration: underline; }
.file-card .date { font-size:.8rem; color:var(--muted-2); }
.file-card .delete {
  position:absolute; right:.5rem; top:.5rem;
  border:0; background:none; cursor:pointer;
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.file-card .delete:hover { background: #f1f3fb; }

/* Keep long filenames away from the action buttons */
.files-grid .file-card .meta { padding-right: 64px; }

.file-card .action:hover{ background:#f1f3fb; }

/* Give content more room (was 64px) */
.files-grid .file-card .meta { padding-right: 48px; }

/* Stack actions vertically at the top-right */
.file-card .actions{
  position: absolute;
  right: .5rem;
  top: .5rem;
  display: flex;
  flex-direction: column;     /* trash on top, + underneath */
  gap: 6px;
}

/* Unified action button look */
.file-card .action{
  border: 0;
  background: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.file-card .action:hover{ background:#f1f3fb; }

/* 🔧 Override legacy absolute rule that caused overlap */
.file-card .delete{ position: static !important; }
.file-card .actions .delete,
.file-card .actions .attach{ position: static; }  /* ensure both stay stacked */

/* “and X more…” line */
.file-card .thread-more{ color:var(--muted-2); font-size:.85rem; }

.files-grid .file-card .threads {
  margin-top: 2px;
  display: flex;
  flex-direction: column;  /* one-per-line */
  gap: 2px;
}

.files-grid .file-card .thread-link {
  display: block;
  max-width: 100%;
  white-space: nowrap;      /* no wrap */
  overflow: hidden;         /* hide overflow */
  text-overflow: ellipsis;  /* add … */
  text-decoration: none;
}

.files-grid .file-card .thread-link:hover {
  text-decoration: underline; /* underline on hover only */
}

.files-grid .file-card {
  display: flex;
  gap: 12px;
}
.files-grid .file-card .meta {
  flex: 1;
  min-width: 0;            /* ← critical for ellipsis inside flex */
}

/* One-per-line thread links, clipped with … */
.files-grid .file-card .threads {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;            /* allow children to shrink */
}
.files-grid .file-card .thread-link {
  display: block;
  width: 100%;             /* give it a width to measure against */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.files-grid .file-card .thread-link:hover { text-decoration: underline; }

/* Optional: also ellipsize the main filename line */
.files-grid .file-card .name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.files-grid .file-card a,
.files-grid .file-card a:visited {
  color: var(--brand-dark);   /* or use var(--ink) if you prefer */
  text-decoration: none;
  cursor: pointer;
}

/* Keep underline on hover for chat thread links only */
.files-grid .file-card .thread-link:hover {
  text-decoration: underline;
}
/* --- files add + in prompt --- */
.chat-input { display:flex; align-items:center; gap:.5rem; }
.upload-trigger { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; cursor:pointer; }
.hidden { display:none; }
.chat-input.dragover { outline:2px dashed var(--primary); outline-offset:4px; }

/* --- ellipsis row --- */
.sidebar-ellipsis{ padding:8px 0; text-align:center; color:#a0a6b5; }

/* --- assistant selection stays highlighted --- */
.assistant-item, .file-item { cursor:pointer; }
.assistant-item.active, .file-item.active,
.assistant-item:focus, .file-item:focus { background:#e5e7ff; color:#111827; }

/* ===== Sidebar truncation fixes ===== */

/* Make the row itself behave well in a flex line */
.file-item{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;              /* allow children to shrink for ellipsis */
}

/* Keep the icon a fixed width so text has predictable space */
.file-item i{
  flex: 0 0 16px;
  width: 16px;
  text-align: center;
}

/* The text span gets the ellipsis */
.file-item span{
  flex: 1 1 auto;
  min-width: 0;              /* IMPORTANT for text-overflow in flex */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-card:hover{
  border-color: var(--brand);
}


/* Files page filters — match Recent search styling */
.files-filters{
  display: grid;
  grid-template-columns: 1fr 160px 160px auto; /* search grows */
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.files-filters .input,
.files-filters .select,
.files-filters .btn{
  height: 44px;
}
@media (max-width: 900px){
  .files-filters{ grid-template-columns: 1fr; }
  .files-filters .btn{ justify-self: start; }
}

/* Slightly wider cards */
.files-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* Recent chats: single-line with ellipsis, no wrapping */
.recent-item{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 10px 12px;        /* keep your hover look consistent */
  border-radius: 10px;
}

/* Keep the same hover feedback you had */
.recent-item:hover{ background:#e9ebf3; }

/* (Optional) If you want assistant rows to also truncate long names */
.assistant-item span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}


/* Ellipsis for long items in sidebar lists */
.truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quick prompt chips under hero composer */
.quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px auto 0;
  width: min(var(--chat-max), calc(100% - 2 * var(--shell-pad)));
  justify-content: center;    /* <— center chips under the bar */
}
.chip {
  border: 1px solid #9ca3af;
  background: #f8fafc;
  padding: 8px 12px;
  color: #475569;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  box-shadow: 4px 4px 10px rgba(15, 23, 42, 0.2);
}
.chip:hover { filter: brightness(0.98); }

/* Simple dropdown menu styling (if you need it) */
.menu {
  position: absolute;
  top: 54px;
  right: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  min-width: 180px;
  z-index: 10;
}
.menu .menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; color: #374151; text-decoration: none;
}
.menu .menu-item:hover { background: #f3f4f8; }
.menu .menu-item.danger { color: #dc2626; }

/* ===== Shared form + controls (site-wide) ===== */
.form { display:grid; gap:14px; }

.form-grid-2 {
  display:grid; gap:12px;
}
.form-grid-2 > div {
  margin-top: 14px;   /* tweak as needed (12–16px looks good) */
}
@media (min-width: 720px){
  .form-grid-2 { grid-template-columns: 1fr 1fr; }
}

.label { font-weight: 700; color:#111827; font-size:14px; }
.help  { color: var(--text-muted); font-size: 13px; }

.input, .select, .textarea {
  width:100%;
  height:44px;
  border-radius:10px;
  border:1px solid var(--line);
  padding:0 12px; font:inherit; outline:none; background:#fff;
}
.textarea { height:auto; min-height:96px; padding:10px 12px; resize:vertical; }

.input:focus, .select:focus, .textarea:focus {
  border-color:#c3c8d8;
  box-shadow:0 0 0 3px rgba(79,70,229,.12);
}

.input[readonly], .select[disabled]{
  background:#f6f7fb;
  color:#6b7280;
}

.field-readonly .value {
  padding:10px 12px; border:1px solid #e7e9ef; border-radius:10px; background:#f6f7fb;
}

/* Buttons (site-wide) */
.btn{
  height:44px; padding:0 20px; border-radius:10px; border:0; cursor:pointer;
  font-weight:600; display:inline-flex; align-items:center; justify-content:center;
  font-size: 1rem; margin-top: 1rem;
}
.btn-primary{ background: var(--brand-primary); color:#fff; }
.btn-primary:hover{ background: var(--brand-primary-hover); }
.btn-ghost{ background:#eef1ff; color:#1f2645; }
.btn-ghost {
  background:#eef1ff;
  color:#1f2645;
  text-decoration: none;
}
.btn-ghost:hover {
  filter:brightness(.98);
  text-decoration: none;
}

/* ===== Centered page layout (same width math as hero/chat) ===== */
.page {
  display: block;
  width: 100%;
  padding: 24px 0;
}
.page-inner {
  width: var(--column-w);              /* respects sidebar width */
  margin: 0 auto;                      /* center horizontally */
  padding: 0 var(--shell-pad);
}

/* Page titles */
.page-title {
  margin: 0 0 18px;
  font-weight: 800;
  text-align: center;                  /* centered horizontally */
  text-transform: capitalize;          /* “Your profile” -> “Your Profile” */
  font-size: 2rem;
}
@media (min-width: 768px){ .page-title{ font-size: 2.5rem; } }

.content > .page{
  flex: 1 1 auto;
  min-height: 0;               /* critical for flex containers to allow inner overflow */
  overflow: auto;              /* page becomes the scroll container */
  -webkit-overflow-scrolling: touch;
}

.page-inner{ padding-bottom: 24px; } /* breathing room at bottom */

/* Slightly larger form typography (for profile/settings pages) */
.form-lg { font-size: 15.5px; }        /* body font stays 14px elsewhere */
.form-lg .label { font-size: 15px; }
.form-lg .help  { font-size: 13.5px; }
.form-lg .input,
.form-lg .select,
.form-lg .textarea { font-size: 15.5px; }

.form-actions {
  display: flex;
  justify-content: center;   /* center horizontally */
  gap: 12px;
  margin-top: 20px;
}
.form-actions .btn {
  min-width: 100px;          /* ensures buttons feel balanced */
}

/* Assistant hint under docked composer */
.assistant-hint{
  text-align:center;
  color: var(--text-muted);
  font-size: 13px;            /* slightly smaller than form text */
  margin: 6px auto 18px;      /* a little breathing room below the bar */
}
.assistant-hint a{
  color: var(--brand-dark);
  text-decoration: none;
  font-weight: 600;
}
.assistant-hint a:hover{
  text-decoration: underline;
}
/* =========================
   Utilities
   ========================= */
.hidden{ display:none !important; }

.pac-container { z-index: 2147483647 !important; }

.embed-followup{
  flex: 0 0 400px;
  margin: 8px 0 0 8px;
  padding: 10px 12px;
}

.embed-followup h3 { margin: 12px 0 6px; font-size: 1rem; }

.embed-followup ul {
  margin: 10px 0 0 0;
  padding-left: 0 !important;
  list-style: none;
}

.embed-followup li {
  position: relative;
  margin: 10px 0;
  padding-left: 1.1rem; /* space for the custom bullet */
}

.embed-followup li + li { margin-top:10px; }

.embed-followup li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
}

.embed-followup a { text-decoration: underline; }

.embed-followup.no-bullets ul { padding-left: 0 !important; }
.embed-followup.no-bullets li { padding-left: 0; padding-top: 10px;}
.embed-followup.no-bullets li::before { content: none; }

.msg--assistant .embed-bottom{
  flex: 1 1 100%;
  width: 100%;
  order: 3;
  margin-top: 12px;
  padding: 12px 14px;
}

.msg--assistant.has-embed{
  flex-wrap: wrap;
  align-items: flex-start;
}

.msg--assistant.has-embed .msg-bubble{
  flex: 1 1 0%;
  min-width: 0;
}

/* Force bottom block to BREAK and span full width on the next line */
.embed-bottom{
  flex: 1 1 100%;
  width: 100%;
  order: 3;
  margin-top: 12px;
  padding: 12px 14px;
}

/* Make bottom text match normal assistant message reading width/typography */
.msg--assistant.has-embed .embed-bottom,
.msg--assistant.has-embed .embed-bottom .prose{
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  line-height: 1.6;
}
.msg--assistant.has-embed .embed-bottom p{ margin: 0 0 .55em; }

/* Stack followups under the map on narrow screens */
@media (max-width: 900px){
  .msg--assistant.has-embed .embed-followup{
    flex: 1 1 100%;
    margin: 10px 0 0;
  }
}

/* Optional inner typography (from the server's HTML snippet) */
.lm-bottom-msg { display: grid; gap: 6px; }
.lm-bottom-title{
  font-weight: 600;
  color: #111827;
}
.lm-bottom-body{
  color: #374151;
}

/* =========================================================
   LOGIN PAGE (unchanged)
   ========================================================= */
   /* Login header row */
.login-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 6px;
}
.login-brand .title{ margin:0; line-height:1; }
.login-brand .logo-dot{ flex:0 0 28px; }
.full-center{
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.full-center .center-card{
  margin:0;
  width:560px;
  max-width:min(92vw, 720px);
  min-height:420px;
  padding:32px 36px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.05);
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
}
.full-center .logo-dot{ width:28px; height:28px; background:var(--brand); border-radius:999px; }
.title{ margin:6px 0 4px; font-size:2rem; font-weight:800; }
.muted{ color:#6a7282; margin:0 0 10px; }
.alert{
  width:100%;
  background:#fef3c7; color:#92400e;
  border:1px solid #fde68a; border-radius:10px;
  padding:10px 12px;
}
.form{ width:100%; display:flex; flex-direction:column; gap:10px; }
.label{ font-weight:600; color:#374151; }
.input{
  width:100%; height:42px; border-radius:10px; border:1px solid var(--line);
  padding:0 12px; font:inherit; outline:none; background:#fff;
}
.input:focus{ border-color:#c3c8d8; box-shadow:0 0 0 3px rgba(79,70,229,.12); }
.btn{ height:44px; padding:0 16px; border-radius:10px; border:0; cursor:pointer; font-weight:600; }
.btn-primary{ background:#5850ec; color:#fff; }
.btn-primary:hover{ filter:brightness(1.05); }
@media (max-width:640px){
  .full-center .center-card{ width:94vw; min-height:360px; padding:24px; }
  .full-center .logo-dot{ width:22px; height:22px; }
}


/* =========================================================
   Sweet Alert styling
   ========================================================= */

   .swal2-popup .swal2-confirm,
   .swal2-popup .swal2-cancel {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     height: 38px;
     padding: 0 14px;
     border-radius: 10px;
     font-weight: 600;
     border: 0;
     cursor: pointer;
   }

   /* Use a margin to create space between the two buttons */
   .swal2-popup .swal2-confirm {
     /* This creates a 10px space to the right of the confirm button */
     margin-right: 10px;
     /* Use the root brand variable */
     background: var(--brand);
     color: #fff;
   }
   .swal2-popup .swal2-confirm:hover {
     filter: brightness(1.05);
   }

   .swal2-popup .swal2-cancel {
     background: #e5e7eb;
     color: #111827;
   }
   .swal2-popup .swal2-cancel:hover {
     filter: brightness(0.98);
   }

   .swal2-popup {
     border-radius: 14px;
   }

   .swal2-textarea {
     width: 90%;
   }

   .swal2-html-container { max-height: 360px; overflow: auto; text-align: left; }

   /* ===== Assistants directory ===== */
   .assist-h2{
     margin: 6px 0 2px;
     font-weight: 800;
     text-align: center;
     font-size: 1.15rem;              /* small bump over sidebar label */
   }
   .assist-subtle{
     margin: 0 0 14px;
     color: var(--text-muted);
     text-align: center;
     font-size: .95rem;
   }

   .assist-grid{
     display: grid;
     gap: 16px;
     grid-template-columns: 1fr;
   }
   @media (min-width: 900px){
     .assist-grid{ grid-template-columns: 1fr 1fr; }
   }

   .assist-card{
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 14px;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     border-radius: 14px;
     text-decoration: none;
     color: inherit;
   }
   .assist-card:hover{ background: #f7f8ff; }

   .assist-card--disabled{
     opacity: .7;
     pointer-events: none;
   }

   .assist-icon{
     flex: 0 0 72px;
     width: 72px; height: 72px;
     border: 2px solid #d9dde8;
     border-radius: 12px;
     display:flex; align-items:center; justify-content:center;
     font-size: 28px;
     color: #1f2937;
     background: #fff;
   }

   .assist-body{ min-width: 0; }
   .assist-name{
     font-weight: 800;
     margin-bottom: 4px;
     font-size: 1.05rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .assist-desc{
     color: var(--text-muted);
     font-size: .97rem;
     /* 3-line clamp w/ ellipsis */
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }