/* =====================================================================
   INTELEO — Component library
   ===================================================================== */

/* ---- Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500;
  line-height: 1; letter-spacing: 0;
  padding: 11px 18px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap; text-decoration: none;
}
.btn:active { transform: translateY(0.5px); }
.btn svg { width: 16px; height: 16px; }
.btn-lg { padding: 14px 24px; font-size: var(--fs-base); border-radius: var(--r-md); }
.btn-sm { padding: 8px 13px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-icon { padding: 9px; }

.btn-primary { background: var(--brand-600); color: #fff; box-shadow: var(--glow-brand); }
.btn-primary:hover { background: var(--brand-500); color:#fff; }
.btn-secondary { background: var(--surface-2); color: var(--text-strong); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--text-strong); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text-strong); }
.btn-outline { background: transparent; color: var(--brand-300); border-color: rgba(91,155,255,0.4); }
.btn-outline:hover { background: rgba(59,130,246,0.1); color: var(--brand-300); }
.btn-danger { background: var(--danger); color: #fff; }
.btn:disabled,.btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* ---- Cards --------------------------------------------------------- */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.card-hover { transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.card-hover:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--sh-lg); }
.card-pad-lg { padding: var(--sp-8); }
.card-flush { padding: 0; overflow: hidden; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* ---- Badges (base) ------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 500; line-height: 1;
  padding: 5px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-sq { border-radius: var(--r-sm); font-family: var(--font-mono); letter-spacing: .02em; }

.badge-info    { color: var(--info);    background: var(--info-bg);    border-color: var(--info-bd); }
.badge-success { color: var(--success); background: var(--success-bg); border-color: var(--success-bd); }
.badge-warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-bd); }
.badge-danger  { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger-bd); }
.badge-brand   { color: var(--brand-300); background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.34); }
.badge-neutral { color: var(--text-muted); background: var(--surface-2); border-color: var(--border); }

/* ---- Status badge (report pipeline) -------------------------------- */
.status { display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-sm); font-weight:500; }
.status .dot { width:7px; height:7px; border-radius:50%; flex:none; }
.status .dot.pulse { box-shadow: 0 0 0 0 currentColor; animation: pulse 1.8s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(56,189,248,.5)} 70%{box-shadow:0 0 0 6px rgba(56,189,248,0)} 100%{box-shadow:0 0 0 0 rgba(56,189,248,0)} }
.status-queued  { color: var(--text-subtle); }   .status-queued .dot{background:var(--text-subtle)}
.status-running { color: var(--info); }           .status-running .dot{background:var(--info)}
.status-review  { color: var(--warning); }        .status-review .dot{background:var(--warning)}
.status-ready   { color: var(--success); }         .status-ready .dot{background:var(--success)}
.status-error   { color: var(--danger-text); }     .status-error .dot{background:var(--danger-text)}

/* ---- Risk badge ---------------------------------------------------- */
.risk { display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-xs); font-weight:600;
  padding:5px 11px 5px 9px; border-radius:var(--r-pill); border:1px solid; letter-spacing:.01em; }
.risk .lvl { width:8px; height:8px; border-radius:2px; flex:none; }
.risk-low      { color:var(--risk-low);      background:rgba(45,212,191,.1);  border-color:rgba(45,212,191,.32);} .risk-low .lvl{background:var(--risk-low)}
.risk-moderate { color:var(--risk-moderate); background:rgba(251,191,36,.1);  border-color:rgba(251,191,36,.32);} .risk-moderate .lvl{background:var(--risk-moderate)}
.risk-elevated { color:var(--risk-elevated); background:rgba(251,146,60,.1);  border-color:rgba(251,146,60,.32);} .risk-elevated .lvl{background:var(--risk-elevated)}
.risk-high     { color:var(--risk-high);     background:rgba(248,113,113,.1); border-color:rgba(248,113,113,.34);} .risk-high .lvl{background:var(--risk-high)}
.risk-critical { color:#fff; background:var(--risk-critical); border-color:var(--risk-critical);} .risk-critical .lvl{background:#fff}

/* ---- Source credibility badge -------------------------------------- */
.cred { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-2xs); font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; padding:4px 8px; border-radius:var(--r-sm); border:1px solid; }
.cred .bars { display:inline-flex; gap:1.5px; align-items:flex-end; height:10px; }
.cred .bars i { width:2.5px; background:currentColor; border-radius:1px; opacity:.3; }
.cred .bars i:nth-child(1){height:4px}.cred .bars i:nth-child(2){height:7px}.cred .bars i:nth-child(3){height:10px}
.cred-high   { color:var(--success); background:var(--success-bg); border-color:var(--success-bd);} .cred-high .bars i{opacity:1}
.cred-medium { color:var(--warning); background:var(--warning-bg); border-color:var(--warning-bd);} .cred-medium .bars i:nth-child(-n+2){opacity:1}
.cred-low    { color:var(--text-subtle); background:var(--surface-2); border-color:var(--border);} .cred-low .bars i:nth-child(1){opacity:1}

/* ---- Source type chip --------------------------------------------- */
.src-chip { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--fs-xs);
  font-weight:500; padding:4px 9px; border-radius:var(--r-sm); background:var(--surface-2);
  border:1px solid var(--border); color:var(--text-muted); }
.src-chip .sq { width:6px; height:6px; border-radius:1.5px; background:var(--chart-1); }

/* ---- Evidence claim row (the core component) ----------------------- */
.evidence { border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-1); overflow:hidden; }
.evidence + .evidence { margin-top:10px; }
.evidence-claim { display:flex; gap:12px; padding:14px 16px; }
.evidence-claim .tag { flex:none; width:3px; border-radius:2px; }
.evidence-claim.is-fact   .tag{ background:var(--ev-fact); }
.evidence-claim.is-infer  .tag{ background:var(--ev-infer); }
.evidence-claim.is-verify .tag{ background:var(--ev-verify); }
.evidence-body { flex:1; min-width:0; }
.evidence-thesis { color:var(--text-strong); font-size:var(--fs-base); line-height:var(--lh-snug); }
.evidence-meta { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:10px; align-items:center; }
.evidence-meta .m { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); color:var(--text-subtle); }
.evidence-meta .m .mono { color:var(--text-muted); }
.ev-kind { font-size:var(--fs-2xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding:3px 7px; border-radius:var(--r-xs); }
.ev-kind.is-fact   { color:var(--ev-fact);   background:rgba(45,212,191,.12); }
.ev-kind.is-infer  { color:var(--ev-infer);  background:rgba(139,155,255,.14); }
.ev-kind.is-verify { color:var(--ev-verify); background:rgba(251,191,36,.12); }

/* confidence meter */
.conf { display:inline-flex; align-items:center; gap:7px; }
.conf .track { width:54px; height:5px; border-radius:3px; background:var(--surface-4); overflow:hidden; }
.conf .fill { height:100%; border-radius:3px; background:var(--success); }
.conf .val { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-muted); }

/* citation */
.cite { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:var(--fs-xs);
  padding:2px 7px; border-radius:var(--r-xs); background:rgba(59,130,246,.12); color:var(--brand-300);
  border:1px solid rgba(59,130,246,.28); cursor:pointer; }
.cite:hover{ background:rgba(59,130,246,.2); }

/* ---- Risk score card ----------------------------------------------- */
.riskscore { display:flex; align-items:center; gap:18px; }
.riskscore .gauge { position:relative; width:96px; height:96px; flex:none; }
.riskscore .gauge svg { transform:rotate(-90deg); }
.riskscore .gauge .num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.riskscore .gauge .num b { font-family:var(--font-display); font-size:26px; color:var(--text-strong); line-height:1; }
.riskscore .gauge .num span { font-size:var(--fs-2xs); color:var(--text-subtle); text-transform:uppercase; letter-spacing:.08em; margin-top:2px; }

/* ---- Inputs -------------------------------------------------------- */
.field { display:flex; flex-direction:column; gap:7px; }
.label { font-size:var(--fs-sm); font-weight:500; color:var(--text); }
.label .req { color:var(--danger-text); }
.hint { font-size:var(--fs-xs); color:var(--text-subtle); }
.input, .select, .textarea {
  width:100%; font-family:var(--font-sans); font-size:var(--fs-base); color:var(--text-strong);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md);
  padding:11px 14px; transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.input::placeholder,.textarea::placeholder{ color:var(--text-faint); }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--border-focus); box-shadow:var(--ring); background:var(--surface-2); }
.textarea{ resize:vertical; min-height:96px; line-height:var(--lh-normal); }
.input.is-error,.select.is-error{ border-color:var(--danger-bd); box-shadow:0 0 0 3px rgba(244,80,95,.18); }
.input.is-valid{ border-color:var(--success-bd); }
.field-msg{ font-size:var(--fs-xs); display:flex; align-items:center; gap:5px; }
.field-msg.err{ color:var(--danger-text); }
.field-msg.ok{ color:var(--success); }
.input-group{ position:relative; display:flex; align-items:center; }
.input-group .ic{ position:absolute; left:13px; width:16px; height:16px; color:var(--text-subtle); pointer-events:none; }
.input-group .input{ padding-left:38px; }

.check { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:var(--fs-sm); color:var(--text); line-height:1.5; }
.check input{ position:absolute; opacity:0; }
.check .box{ width:18px; height:18px; border-radius:5px; border:1.5px solid var(--border-strong); background:var(--surface-2); flex:none; margin-top:1px; display:flex; align-items:center; justify-content:center; transition:all var(--transition); }
.check input:checked + .box{ background:var(--brand-600); border-color:var(--brand-600); }
.check input:checked + .box svg{ opacity:1; }
.check .box svg{ width:12px; height:12px; color:#fff; opacity:0; }
.check input:focus-visible + .box{ box-shadow:var(--ring); }

/* toggle */
.toggle{ position:relative; width:40px; height:22px; flex:none; }
.toggle input{ position:absolute; opacity:0; }
.toggle .track{ position:absolute; inset:0; background:var(--surface-4); border-radius:999px; transition:background var(--transition); }
.toggle .track::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform var(--transition); }
.toggle input:checked + .track{ background:var(--brand-600); }
.toggle input:checked + .track::after{ transform:translateX(18px); }

/* ---- Tables -------------------------------------------------------- */
.table-wrap{ border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface-1); }
table.tbl{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.tbl thead th{ text-align:left; font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-subtle); padding:13px 16px; background:var(--surface-2); border-bottom:1px solid var(--border); white-space:nowrap; }
.tbl tbody td{ padding:14px 16px; border-bottom:1px solid var(--border-subtle); color:var(--text); vertical-align:middle; }
.tbl tbody tr:last-child td{ border-bottom:none; }
.tbl tbody tr{ transition:background var(--transition); }
.tbl tbody tr:hover{ background:var(--surface-2); }
.tbl .t-strong{ color:var(--text-strong); font-weight:500; }
.tbl .t-mono{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-muted); }

/* ---- Tabs ---------------------------------------------------------- */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--border); }
.tab{ padding:11px 16px; font-size:var(--fs-sm); font-weight:500; color:var(--text-muted); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--transition), border-color var(--transition); background:none; border-top:none; border-left:none; border-right:none; }
.tab:hover{ color:var(--text-strong); }
.tab.active{ color:var(--text-strong); border-bottom-color:var(--brand-500); }

.seg{ display:inline-flex; padding:3px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); gap:2px; }
.seg button{ padding:7px 14px; font-size:var(--fs-sm); font-weight:500; color:var(--text-muted); background:none; border:none; border-radius:var(--r-sm); cursor:pointer; transition:all var(--transition); }
.seg button.active{ background:var(--surface-4); color:var(--text-strong); }

/* ---- Accordion ----------------------------------------------------- */
.acc{ border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-1); overflow:hidden; }
.acc + .acc{ margin-top:10px; }
.acc summary{ list-style:none; cursor:pointer; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-weight:500; color:var(--text-strong); font-size:var(--fs-lg); }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary .chev{ width:18px; height:18px; color:var(--text-subtle); transition:transform var(--transition); flex:none; }
.acc[open] summary .chev{ transform:rotate(180deg); }
.acc .acc-body{ padding:0 20px 20px; color:var(--text-muted); line-height:var(--lh-relaxed); }

/* ---- Breadcrumbs --------------------------------------------------- */
.crumbs{ display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--text-subtle); flex-wrap:wrap; }
.crumbs a{ color:var(--text-muted); }
.crumbs a:hover{ color:var(--text-strong); }
.crumbs .sep{ color:var(--text-faint); }
.crumbs .cur{ color:var(--text-strong); }

/* ---- Pagination ---------------------------------------------------- */
.pager{ display:inline-flex; gap:4px; }
.pager a, .pager span{ min-width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 10px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface-1);
  color:var(--text-muted); font-size:var(--fs-sm); cursor:pointer; transition:all var(--transition); }
.pager a:hover{ border-color:var(--border-strong); color:var(--text-strong); }
.pager .cur{ background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.pager .gap{ border:none; background:none; }

/* ---- Alerts -------------------------------------------------------- */
.alert{ display:flex; gap:12px; padding:14px 16px; border-radius:var(--r-md); border:1px solid; }
.alert .ic{ width:18px; height:18px; flex:none; margin-top:1px; }
.alert .at{ font-weight:600; color:var(--text-strong); font-size:var(--fs-sm); }
.alert .ad{ font-size:var(--fs-sm); color:var(--text-muted); margin-top:2px; line-height:var(--lh-normal); }
.alert-info{ background:var(--info-bg); border-color:var(--info-bd); } .alert-info .ic{ color:var(--info); }
.alert-success{ background:var(--success-bg); border-color:var(--success-bd); } .alert-success .ic{ color:var(--success); }
.alert-warning{ background:var(--warning-bg); border-color:var(--warning-bd); } .alert-warning .ic{ color:var(--warning); }
.alert-danger{ background:var(--danger-bg); border-color:var(--danger-bd); } .alert-danger .ic{ color:var(--danger-text); }

/* red flag */
.redflag{ display:flex; gap:12px; padding:13px 15px; border-radius:var(--r-md); background:var(--danger-bg); border:1px solid var(--danger-bd); border-left:3px solid var(--danger); }
.redflag .ic{ width:18px; height:18px; color:var(--danger-text); flex:none; margin-top:1px; }
.redflag .ti{ font-size:var(--fs-sm); font-weight:500; color:var(--text-strong); }
.redflag .de{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; }

/* ---- Tooltip ------------------------------------------------------- */
.tip{ position:relative; display:inline-flex; }
.tip .tip-pop{ position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--surface-4); color:var(--text-strong); font-size:var(--fs-xs); padding:7px 11px; border-radius:var(--r-sm);
  border:1px solid var(--border-strong); white-space:nowrap; box-shadow:var(--sh-md); opacity:0; pointer-events:none;
  transition:opacity var(--transition); z-index:50; }
.tip .tip-pop::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--surface-4); }
.tip:hover .tip-pop{ opacity:1; }

/* ---- Modal --------------------------------------------------------- */
.modal-scrim{ position:fixed; inset:0; background:rgba(5,9,15,0.7); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:24px; z-index:100; }
.modal{ background:var(--surface-1); border:1px solid var(--border-strong); border-radius:var(--r-xl); width:100%; max-width:480px; box-shadow:var(--sh-xl); overflow:hidden; }
.modal-head{ padding:22px 24px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.modal-head h3{ font-size:var(--fs-h4); }
.modal-body{ padding:14px 24px; color:var(--text-muted); line-height:var(--lh-normal); }
.modal-foot{ padding:18px 24px; display:flex; gap:10px; justify-content:flex-end; border-top:1px solid var(--border-subtle); margin-top:8px; }

/* ---- Toast --------------------------------------------------------- */
.toast{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; background:var(--surface-3); border:1px solid var(--border-strong);
  border-radius:var(--r-md); box-shadow:var(--sh-lg); max-width:380px; }
.toast .ic{ width:18px; height:18px; flex:none; margin-top:1px; }
.toast.ok .ic{ color:var(--success); } .toast.err .ic{ color:var(--danger-text); } .toast.info .ic{ color:var(--info); }
.toast .tt{ font-weight:500; color:var(--text-strong); font-size:var(--fs-sm); }
.toast .td{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; }

/* ---- Skeleton ------------------------------------------------------ */
.sk{ background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%); background-size:200% 100%; border-radius:var(--r-sm); animation:shimmer 1.4s infinite; }
@keyframes shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.sk-line{ height:12px; border-radius:6px; } .sk-title{ height:20px; border-radius:6px; } .sk-circle{ border-radius:50%; }

/* ---- Empty state --------------------------------------------------- */
.empty{ text-align:center; padding:var(--sp-12) var(--sp-6); }
.empty .em-ic{ width:56px; height:56px; margin:0 auto var(--sp-4); border-radius:var(--r-lg); background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-subtle); }
.empty h4{ font-size:var(--fs-h4); margin-bottom:6px; }
.empty p{ color:var(--text-subtle); font-size:var(--fs-sm); max-width:360px; margin:0 auto var(--sp-5); }

/* ---- Workflow timeline --------------------------------------------- */
.timeline{ display:flex; flex-direction:column; }
.tl-step{ display:flex; gap:14px; }
.tl-rail{ display:flex; flex-direction:column; align-items:center; flex:none; }
.tl-node{ width:24px; height:24px; border-radius:50%; border:2px solid var(--border-strong); background:var(--surface-1); display:flex; align-items:center; justify-content:center; flex:none; }
.tl-node svg{ width:13px; height:13px; }
.tl-line{ width:2px; flex:1; background:var(--border); min-height:18px; }
.tl-step.done .tl-node{ border-color:var(--success); background:var(--success); color:#04211c; }
.tl-step.done .tl-line{ background:var(--success); }
.tl-step.active .tl-node{ border-color:var(--info); color:var(--info); box-shadow:0 0 0 4px rgba(56,189,248,.18); }
.tl-step.pending .tl-node{ color:var(--text-faint); }
.tl-content{ padding-bottom:20px; }
.tl-content .ts-title{ font-size:var(--fs-sm); font-weight:500; color:var(--text-strong); }
.tl-content .ts-meta{ font-size:var(--fs-xs); color:var(--text-subtle); margin-top:2px; font-family:var(--font-mono); }

/* ---- Entity graph preview ------------------------------------------ */
.graph{ position:relative; border:1px solid var(--border); border-radius:var(--r-lg); background:
  radial-gradient(circle at 30% 20%, rgba(59,130,246,.06), transparent 60%), var(--surface-1); overflow:hidden; }
.graph svg .edge{ stroke:var(--border-strong); stroke-width:1.5; }
.graph svg .node circle{ fill:var(--surface-3); stroke:var(--brand-500); stroke-width:1.5; }
.graph svg .node.main circle{ fill:var(--brand-600); stroke:var(--brand-400); }
.graph svg .node.risk circle{ stroke:var(--danger); }
.graph svg text{ fill:var(--text-muted); font-family:var(--font-sans); font-size:9px; }

/* ---- RAG chat widget ----------------------------------------------- */
.rag{ border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface-1); overflow:hidden; display:flex; flex-direction:column; }
.rag-head{ padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.rag-head .ico{ width:30px; height:30px; border-radius:var(--r-sm); background:rgba(59,130,246,.14); display:flex; align-items:center; justify-content:center; color:var(--brand-400); }
.rag-body{ padding:16px; display:flex; flex-direction:column; gap:14px; }
.rag-msg{ max-width:84%; padding:11px 14px; border-radius:var(--r-md); font-size:var(--fs-sm); line-height:var(--lh-normal); }
.rag-msg.user{ align-self:flex-end; background:var(--brand-600); color:#fff; border-bottom-right-radius:4px; }
.rag-msg.bot{ align-self:flex-start; background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-bottom-left-radius:4px; }
.rag-msg .sources{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.rag-input{ padding:12px 14px; border-top:1px solid var(--border); display:flex; gap:10px; align-items:center; }
.rag-input .input{ background:var(--surface-2); }

/* ---- Section helpers ----------------------------------------------- */
.section{ padding-block: var(--sp-24); }
.section-sm{ padding-block: var(--sp-16); }
hr.div{ border:none; border-top:1px solid var(--border); margin:0; }