/* ── Training UI Styles ───────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600&display=swap');

/* ── Particle background ─────────────────────────────────────────────── */
#particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.particle { position: absolute; border-radius: 50%; background: var(--accent); opacity: 0; animation: float linear infinite; }
@keyframes float {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 0.2; }
  90%  { opacity: 0.05; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* ── Loading screen ──────────────────────────────────────────────────── */
#loading {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg);
}
.loader-hex { font-size: 44px; margin-bottom: 20px; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.1); opacity: .7; }
}
.loader-text { font-size: 14px; color: var(--text2); margin-bottom: 28px; }
.loader-bar  { width: 180px; height: 2px; background: var(--border2); border-radius: 99px; overflow: hidden; }
.loader-fill { height: 100%; background: var(--accent); border-radius: 99px; animation: load 2.5s ease-in-out forwards; }
@keyframes load { from { width: 0; } to { width: 100%; } }

/* ── Waiting screen ──────────────────────────────────────────────────── */
#waiting {
  display: none; position: fixed; inset: 0; z-index: 100; background: var(--bg);
  flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px;
}
.waiting-hex  { font-size: 44px; color: var(--accent); animation: pulse 2s ease-in-out infinite; }
.waiting-text { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -.3px; margin-top: 8px; }
.waiting-sub  { font-size: 13px; color: var(--text2); max-width: 380px; text-align: center; line-height: 1.6; padding: 0 24px; }

/* ── 4-phase setup progress screen ──────────────────────────────────── */
#setup-progress {
  display: none; position: fixed; inset: 0; z-index: 100; background: var(--bg);
  flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 32px;
}
.sp-icon {
  font-size: 64px; line-height: 1; height: 96px;
  display: flex; align-items: center; justify-content: center; position: relative;
}
/* Phase 1 — radar pulse */
.sp-icon.fetching { font-size: 48px; }
.sp-icon.fetching::before,
.sp-icon.fetching::after {
  content: ''; position: absolute; width: 96px; height: 96px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0; animation: radar 2s ease-out infinite;
}
.sp-icon.fetching::after { animation-delay: 1s; }
@keyframes radar {
  0%   { transform: scale(.4); opacity: .8; }
  100% { transform: scale(1.4); opacity: 0; }
}
/* Phase 2 — pulsing brain */
.sp-icon.learning { animation: brainpulse 1.6s ease-in-out infinite; }
@keyframes brainpulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 8px  rgba(108,92,231,.3)); }
  50%       { transform: scale(1.12); filter: drop-shadow(0 0 24px rgba(108,92,231,.7)); }
}
/* Phase 3 — spinning sparkles */
.sp-icon.generating { animation: spin 3.2s linear infinite; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* Phase 4 — typing dots */
.sp-icon.simulating { font-size: 48px; gap: 8px; }
.sp-icon.simulating .dot {
  width: 14px; height: 14px; border-radius: 50%; background: var(--accent);
  display: inline-block; margin: 0 4px; animation: typing 1.2s ease-in-out infinite;
}
.sp-icon.simulating .dot:nth-child(2) { animation-delay: .18s; }
.sp-icon.simulating .dot:nth-child(3) { animation-delay: .36s; }
@keyframes typing {
  0%, 80%, 100% { transform: translateY(0);    opacity: .4; }
  40%            { transform: translateY(-12px); opacity: 1; }
}
.sp-title    { font-size: 24px; font-weight: 600; color: var(--text); letter-spacing: -.4px; text-align: center; }
.sp-sub      { font-size: 13px; color: var(--text2); max-width: 440px; text-align: center; line-height: 1.6; }
.sp-counter  { font-size: 13px; color: var(--accent2); font-weight: 500; min-height: 18px; letter-spacing: .02em; }
.sp-bar-wrap { width: min(440px, 90vw); margin-top: 8px; }
.sp-bar      { height: 6px; background: var(--border2); border-radius: 99px; overflow: hidden; position: relative; }
.sp-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 99px; width: 0%; transition: width .6s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 12px rgba(108,92,231,.4);
}
.sp-phases { display: flex; justify-content: space-between; margin-top: 10px; font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.sp-phases span { flex: 1; text-align: center; transition: color .25s; }
.sp-phases span.active { color: var(--accent2); font-weight: 600; }
.sp-phases span.done   { color: var(--green); }

/* ── Topic badges ────────────────────────────────────────────────────── */
.topic-badge { font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 500; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 4px; }
.topic-admissions      { background: rgba(74,144,226,.15);  color: #4A90E2; border: 1px solid rgba(74,144,226,.3); }
.topic-fees            { background: rgba(253,203,110,.15); color: #FDCB6E; border: 1px solid rgba(253,203,110,.3); }
.topic-transfer        { background: rgba(155,89,182,.15);  color: #B07BD9; border: 1px solid rgba(155,89,182,.3); }
.topic-student_services{ background: rgba(0,184,148,.15);   color: #00B894; border: 1px solid rgba(0,184,148,.3); }
.topic-complaints      { background: rgba(225,112,85,.15);  color: #E17055; border: 1px solid rgba(225,112,85,.3); }
.topic-events          { background: rgba(0,206,201,.15);   color: #00CEC9; border: 1px solid rgba(0,206,201,.3); }
.topic-other           { background: rgba(136,136,168,.15); color: #8888A8; border: 1px solid rgba(136,136,168,.3); }

/* ── Header ──────────────────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(9,9,15,.85); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border); padding: 0 24px; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo         { display: flex; align-items: center; gap: 10px; }
.logo-name    { font-size: 15px; font-weight: 600; letter-spacing: -.3px; }
.logo-sep     { color: var(--border2); margin: 0 6px; }
.logo-sub     { font-size: 13px; color: var(--text2); }
.conf-wrap    { display: flex; flex-direction: column; align-items: center; min-width: 180px; position: relative; cursor: pointer; }
.conf-label   { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); margin-bottom: 5px; }
.conf-bar     { width: 100%; height: 6px; background: var(--border2); border-radius: 99px; overflow: hidden; }
.conf-fill    { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--red), var(--gold), var(--green)); transition: width .6s cubic-bezier(.4,0,.2,1); width: 0%; }
.conf-pct     { font-size: 11px; color: var(--text2); margin-top: 4px; text-align: center; }
.header-right { display: flex; align-items: center; gap: 12px; }
.streak       { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--gold); font-weight: 600; opacity: 0; transition: opacity .3s; }
.streak.show  { opacity: 1; }
.pill         { padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 500; background: var(--surface2); border: 1px solid var(--border2); color: var(--text2); }

/* ── Topic popover ───────────────────────────────────────────────────── */
#topic-popover {
  display: none; position: absolute; top: 100%; right: 0; margin-top: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; min-width: 240px; z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,.4); cursor: auto;
}
#topic-popover.show { display: block; }
#topic-popover .tp-title { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); margin-bottom: 8px; }
#topic-popover .tp-row   { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 4px 0; color: var(--text); gap: 12px; }
#topic-popover .tp-score { font-weight: 600; color: var(--text2); }
#topic-popover .tp-empty { font-size: 12px; color: var(--text3); }

/* ── Main content area ───────────────────────────────────────────────── */
main { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; }

/* ── Progress dots ───────────────────────────────────────────────────── */
.progress-row  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.progress-count{ font-size: 13px; color: var(--text3); }
.progress-dots { display: flex; gap: 4px; flex-wrap: wrap; max-width: 440px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border2); transition: all .3s; flex-shrink: 0; cursor: pointer; }
.dot.done-good        { background: var(--green); }
.dot.done-bad         { background: var(--red); }
.dot.done-use_original{ background: var(--accent2); }
.dot.current          { background: var(--accent); box-shadow: 0 0 8px var(--accent); transform: scale(1.3); }

/* ── Review card ─────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--border), 0 24px 64px rgba(0,0,0,.4); animation: cardIn .3s cubic-bezier(.4,0,.2,1);
}
@keyframes cardIn  { from { opacity:0; transform:translateY(12px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } }
.card-exiting      { animation: cardOut .25s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes cardOut { to { opacity:0; transform:translateY(-8px) scale(.99); } }

.card-meta   { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--surface2); }
.meta-left   { display: flex; align-items: center; gap: 12px; }
.avatar      { width: 38px; height: 38px; border-radius: 50%; background: var(--ag); border: 1px solid rgba(108,92,231,.3); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: var(--accent2); flex-shrink: 0; }
.meta-name   { font-size: 14px; font-weight: 500; }
.meta-source { font-size: 11px; color: var(--text3); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.source-tag  { font-size: 10px; padding: 2px 8px; border-radius: 20px; background: var(--border); color: var(--text2); }
.card-num    { font-size: 12px; color: var(--text3); }

/* Thread */
.thread { padding: 16px 20px; max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: rgba(0,0,0,.2); border-bottom: 1px solid var(--border); }
.bwrap    { display: flex; flex-direction: column; }
.bwrap.out{ align-items: flex-end; }
.bwrap.in { align-items: flex-start; }
.bsender  { font-size: 10px; color: var(--text3); margin-bottom: 3px; padding: 0 10px; }
.bubble   { max-width: 78%; padding: 9px 13px; border-radius: 12px; font-size: 13px; line-height: 1.55; word-break: break-word; }
.bubble.in  { background: var(--surface2); border: 1px solid var(--border2); border-bottom-left-radius: 3px; }
.bubble.out { background: var(--accent); color: #fff; border-bottom-right-radius: 3px; opacity: .6; }
.bubble.rtl { direction: rtl; text-align: right; }

/* Comparison columns */
.comparison { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.compare-col        { padding: 20px; position: relative; }
.compare-col:first-child { border-right: 1px solid var(--border); }
.compare-label      { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }
.dot-label          { width: 6px; height: 6px; border-radius: 50%; }
.label-before       { color: var(--text3); }
.label-before .dot-label { background: var(--text3); }
.label-after        { color: var(--accent2); }
.label-after  .dot-label { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.reply-bubble  { font-size: 13px; line-height: 1.65; padding: 12px 14px; border-radius: 10px; min-height: 80px; }
.reply-before  { background: rgba(255,255,255,.03); border: 1px solid var(--border); color: var(--text3); }
.reply-after   { background: var(--ag); border: 1px solid rgba(108,92,231,.2); color: var(--text); }
.reply-bubble.rtl { direction: rtl; text-align: right; }

/* Feedback section */
.feedback   { padding: 20px; }
.fb-q       { font-size: 13px; color: var(--text2); margin-bottom: 14px; }
.fb-buttons { display: flex; gap: 10px; margin-bottom: 14px; }
.fb-btn {
  flex: 1; padding: 14px 20px; border-radius: 10px; font-size: 14px; font-weight: 500; font-family: inherit;
  cursor: pointer; border: 1px solid transparent; transition: all .2s cubic-bezier(.4,0,.2,1);
  display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: -.1px;
}
.fb-good     { background: var(--gbg); color: var(--green); border-color: var(--gb); }
.fb-good:hover     { background: rgba(0,184,148,.2); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,184,148,.2); }
.fb-good.active    { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 0 20px rgba(0,184,148,.4); }
.fb-bad      { background: var(--rbg); color: var(--red); border-color: var(--rb); }
.fb-bad:hover      { background: rgba(225,112,85,.2); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(225,112,85,.2); }
.fb-bad.active     { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 0 20px rgba(225,112,85,.4); }
.fb-original { background: var(--ag); color: var(--accent2); border-color: rgba(108,92,231,.3); }
.fb-original:hover { background: rgba(108,92,231,.2); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(108,92,231,.2); }
.fb-original.active{ background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 20px rgba(108,92,231,.4); }
.fb-btn.dimmed { opacity: .25; }

.corr-wrap { display: none; animation: fadeIn .2s ease; }
.corr-wrap.open { display: block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.corr-label { font-size: 12px; color: var(--text2); margin-bottom: 8px; }
textarea.corr {
  width: 100%; font-family: inherit; font-size: 13px; padding: 11px 14px;
  border: 1px solid var(--border2); border-radius: 8px; background: var(--surface2);
  color: var(--text); resize: vertical; min-height: 72px; line-height: 1.55; outline: none; transition: border-color .15s;
}
textarea.corr:focus { border-color: var(--accent); }
textarea.corr::placeholder { color: var(--text3); }

/* Nav row */
.nav-row  { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.nav-hint { font-size: 11px; color: var(--text3); display: flex; gap: 12px; }
.kbd      { display: inline-block; padding: 2px 7px; border: 1px solid var(--border2); border-radius: 4px; font-size: 10px; background: var(--surface2); color: var(--text3); }
.btn-next { padding: 10px 22px; border-radius: 8px; font-size: 13px; font-weight: 500; font-family: inherit; background: var(--accent); color: #fff; border: none; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 6px; }
.btn-next:hover:not(:disabled) { background: #5849d4; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(108,92,231,.4); }
.btn-next:disabled { opacity: .3; cursor: not-allowed; transform: none; box-shadow: none; }

/* Card nav row */
#card-nav-row { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 14px; }
.card-nav-btn { padding: 8px 16px; border-radius: 8px; font-size: 12px; font-family: inherit; background: var(--surface); border: 1px solid var(--border2); color: var(--text); cursor: pointer; transition: all .15s; }
.card-nav-btn:hover:not(:disabled) { background: var(--surface2); border-color: var(--accent); }
.card-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
#card-of-n { font-size: 12px; color: var(--text2); min-width: 90px; text-align: center; }

/* Resume banner */
#resume-banner { display: none; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#resume-banner.show { display: flex; }
#resume-banner .rb-text    { font-size: 13px; color: var(--text2); }
#resume-banner .rb-actions { display: flex; gap: 8px; }
#resume-banner button { padding: 6px 14px; border-radius: 6px; font-size: 12px; font-family: inherit; cursor: pointer; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); }
#resume-banner button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Round banner */
#round-banner {
  display: none;
  background: rgba(108,92,231,.12); border: 1px solid rgba(108,92,231,.25);
  border-radius: 8px; padding: 8px 16px; font-size: 13px; color: var(--accent2);
  text-align: center; margin-bottom: 12px;
}

/* ── Done / post-review ──────────────────────────────────────────────── */
#done { display: none; flex-direction: column; align-items: center; text-align: center; padding: 60px 24px; max-width: 600px; margin: 0 auto; position: relative; z-index: 1; }
.done-icon  { font-size: 56px; margin-bottom: 24px; animation: bounce .6s cubic-bezier(.36,.07,.19,.97); }
@keyframes bounce { 0%,100% { transform:translateY(0); } 40% { transform:translateY(-20px); } 70% { transform:translateY(-10px); } }
.done-title { font-size: 26px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.5px; }
.done-sub   { font-size: 15px; color: var(--text2); margin-bottom: 40px; line-height: 1.6; }
.done-stats { display: flex; gap: 16px; margin-bottom: 40px; flex-wrap: wrap; justify-content: center; }
.done-stat  { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 28px; text-align: center; min-width: 100px; }
.done-stat .n { font-size: 32px; font-weight: 700; letter-spacing: -1px; }
.done-stat .t { font-size: 11px; color: var(--text2); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; }
.done-stat.g .n { color: var(--green); }
.done-stat.r .n { color: var(--red); }
.done-stat.a .n { color: var(--accent2); }

.learned { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; text-align: left; margin-bottom: 28px; }
.learned-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.learned-title::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.learned-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text); line-height: 1.5; padding: 8px 0; border-bottom: 1px solid var(--border); }
.learned-item:last-child { border-bottom: none; }
.done-confirm { font-size: 14px; color: var(--green); padding: 16px 24px; background: var(--gbg); border: 1px solid var(--gb); border-radius: 10px; max-width: 480px; line-height: 1.6; text-align: center; }

/* Post-review phases */
.phase { width: 100%; text-align: center; animation: cardIn .3s cubic-bezier(.4,0,.2,1); }
.phase h2 { font-size: 24px; font-weight: 700; margin-bottom: 10px; letter-spacing: -.4px; color: var(--text); }
.phase p  { font-size: 14px; color: var(--text2); margin-bottom: 20px; line-height: 1.6; max-width: 520px; margin-left: auto; margin-right: auto; }
.phase-actions { margin-top: 14px; display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }
.phase-btn { padding: 12px 26px; border-radius: 10px; font-size: 14px; font-weight: 500; font-family: inherit; background: var(--accent); color: #fff; border: none; cursor: pointer; transition: all .2s; }
.phase-btn:hover:not(:disabled) { background: #5849d4; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(108,92,231,.4); }
.phase-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.phase-skip   { font-size: 13px; color: var(--text3); text-decoration: none; }
.phase-skip:hover { color: var(--text2); }
.phase-status { margin-top: 14px; font-size: 13px; color: var(--text2); min-height: 18px; }
.phase-status.ok  { color: var(--green); }
.phase-status.err { color: var(--red); }
#train-progress { margin-top: 18px; padding: 18px 22px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; max-width: 480px; margin-left: auto; margin-right: auto; }
#train-status-text { font-size: 13px; color: var(--text); line-height: 1.5; }
#launch-done { margin-top: 20px; padding: 24px; background: var(--gbg); border: 1px solid var(--gb); border-radius: 12px; max-width: 520px; margin-left: auto; margin-right: auto; }
#launch-done h2 { color: var(--green); margin-bottom: 8px; }

/* ── Welcome / Teaser screens ────────────────────────────────────────── */
#welcome-screen, #teaser-screen, #generate-screen { position: relative; z-index: 1; }
#welcome-screen .ws-box {
  max-width: 520px; margin: 80px auto; text-align: center; padding: 0 24px;
}
#welcome-screen .ws-emoji { font-size: 48px; margin-bottom: 16px; }
#welcome-screen h1 { font-size: 28px; font-weight: 700; color: #fff; margin-bottom: 8px; }
#welcome-screen .ws-desc { color: #888; font-size: 15px; margin-bottom: 32px; }
#welcome-screen .ws-stats { display: flex; gap: 24px; justify-content: center; margin-bottom: 40px; }
#welcome-screen .ws-stat { background: #1a1a2e; border: 1px solid #2d2d4e; border-radius: 12px; padding: 24px 32px; text-align: center; }
#welcome-screen .ws-stat .n { font-size: 36px; font-weight: 700; color: #6C5CE7; }
#welcome-screen .ws-stat.green .n { color: #00b894; }
#welcome-screen .ws-stat .l { font-size: 12px; color: #888; margin-top: 4px; }
#welcome-screen .ws-cta { color: #aaa; font-size: 14px; margin-bottom: 28px; }
.ws-btn { background: #6C5CE7; color: #fff; border: none; padding: 14px 32px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
.ws-btn:hover { background: #5849d4; }

/* ── KB Intake Chat ───────────────────────────────────────────────────── */
.kb-chat-wrap    { max-width: 720px; margin: 40px auto; padding: 0 20px; }
.kb-chat-header  { text-align: center; margin-bottom: 20px; }
.kb-chat-title   { font-size: 22px; color: #fff; margin-bottom: 6px; font-weight: 600; }
.kb-chat-sub     { color: #888; font-size: 14px; margin-bottom: 12px; line-height: 1.5; }
.kb-chat-meta    { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.kb-facts-pill   { background: #1a1a2e; color: var(--accent2); padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1px solid #2d2d4e; }
.kb-stage-pill   { background: #1a1a2e; color: var(--gold); padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1px solid rgba(253,203,110,0.3); }
.kb-stage-pill.done { color: var(--green); border-color: rgba(0,184,148,0.4); }
.kb-chat-log     { background: #0d0d18; border: 1px solid #1e1e2e; border-radius: 12px; padding: 18px; height: 480px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.kb-chat-loading { color: #666; text-align: center; padding: 40px 0; font-size: 13px; }
.kb-msg-row      { display: flex; gap: 10px; align-items: flex-start; animation: msgIn .2s ease; }
@keyframes msgIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.kb-msg-row.user { justify-content: flex-end; }
.kb-msg-avatar   { width: 28px; height: 28px; border-radius: 50%; background: var(--ag); color: var(--accent2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.kb-msg-row.user .kb-msg-avatar { background: #2a2a3a; color: #ccc; order: 2; }
.kb-msg-bubble   { background: #1a1a2e; border: 1px solid #2d2d4e; padding: 10px 14px; border-radius: 12px; max-width: 80%; font-size: 14px; line-height: 1.55; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.kb-msg-row.bot  .kb-msg-bubble { border-bottom-left-radius: 3px; }
.kb-msg-row.user .kb-msg-bubble { background: var(--ag); border-color: rgba(108,92,231,.3); color: var(--accent2); border-bottom-right-radius: 3px; }
.kb-msg-bubble.rtl { direction: rtl; text-align: right; font-family: 'Noto Sans Arabic','Inter',sans-serif; }
/* File upload strip */
.kb-upload-strip { display: flex; gap: 8px; align-items: center; margin-top: 14px; background: #0d0d18; border: 1px dashed #2d2d4e; border-radius: 8px; padding: 10px 14px; transition: border-color .15s; }
.kb-upload-strip:hover { border-color: var(--accent); }
.kb-upload-label { flex: 1; display: flex; align-items: center; gap: 8px; cursor: pointer; overflow: hidden; }
.kb-upload-label input[type=file] { display: none; }
.kb-upload-icon { font-size: 16px; flex-shrink: 0; }
#kb-upload-text { font-size: 13px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.kb-upload-strip:hover #kb-upload-text { color: #aaa; }
#kb-upload-btn { background: var(--accent); color: #fff; border: none; padding: 7px 18px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .15s; flex-shrink: 0; }
#kb-upload-btn:hover:not(:disabled) { background: #5849d4; }
#kb-upload-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.kb-upload-status { font-size: 12px; padding: 8px 2px; display: flex; flex-direction: column; gap: 4px; }
.kb-upload-status .ulog-ok  { color: var(--green); }
.kb-upload-status .ulog-err { color: var(--red); }
.kb-upload-status .ulog-info{ color: #888; }

.kb-chat-input-row { display: flex; gap: 8px; margin-top: 14px; align-items: flex-end; }
#kb-chat-input { flex: 1; background: #1a1a2e; border: 1px solid #2d2d4e; border-radius: 8px; color: #fff; padding: 10px 14px; font-family: inherit; font-size: 14px; resize: vertical; line-height: 1.5; min-height: 42px; max-height: 120px; }
#kb-chat-input:focus { border-color: var(--accent); outline: none; }
#kb-chat-send-btn { background: var(--accent); color: #fff; border: none; padding: 10px 22px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s; }
#kb-chat-send-btn:hover:not(:disabled) { background: #5849d4; transform: translateY(-1px); }
#kb-chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.kb-chat-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 8px; }
.kb-chat-hint    { font-size: 12px; color: #666; }
#kb-chat-done-btn { background: transparent; color: #666; border: 1px solid #2d2d4e; padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; }
#kb-chat-done-btn:not(:disabled)       { background: var(--green); color: #fff; border-color: var(--green); }
#kb-chat-done-btn:not(:disabled):hover { background: #00a37a; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,184,148,.3); }
#kb-chat-done-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* KB warnings / errors */
.kba-warnings { background: rgba(253,203,110,.06); border: 1px solid rgba(253,203,110,.35); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.kba-warnings .kbaw-head { font-size: 13px; font-weight: 600; color: var(--gold); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.kba-warnings .kbaw-item { font-size: 12px; color: #d6c08e; padding: 5px 0; line-height: 1.45; border-top: 1px solid rgba(253,203,110,.15); }
.kba-warnings .kbaw-item:first-of-type { border-top: none; }
.kba-warnings .kbaw-item.critical { color: var(--red); }
.kba-error { background: rgba(225,112,85,.08); border: 1px solid rgba(225,112,85,.4); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; text-align: left; }
.kba-error .kbae-head { font-size: 14px; font-weight: 600; color: var(--red); margin-bottom: 6px; }
.kba-error .kbae-body { font-size: 13px; color: #d8a395; line-height: 1.5; }

/* KB Approval */
.kba-wrap    { max-width: 760px; margin: 32px auto; padding: 0 20px; }
.kba-header  { text-align: center; margin-bottom: 24px; }
.kba-title   { font-size: 22px; color: #fff; margin-bottom: 6px; font-weight: 600; letter-spacing: -.2px; }
.kba-sub     { color: #888; font-size: 14px; margin-bottom: 14px; line-height: 1.5; }
.kba-counts  { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.kba-pill    { background: #1a1a2e; color: var(--accent2); padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; border: 1px solid #2d2d4e; letter-spacing: .02em; }
.kba-pill.green { color: var(--green); border-color: rgba(0,184,148,.35); }
.kba-pill.gold  { color: var(--gold);  border-color: rgba(253,203,110,.35); }
.kba-pill.red   { color: var(--red);   border-color: rgba(225,112,85,.35); }
.kba-loading { text-align: center; padding: 80px 0; color: #666; font-size: 14px; }
.kba-loading .spin { display: inline-block; width: 16px; height: 16px; border: 2px solid #2d2d4e; border-top-color: var(--accent); border-radius: 50%; animation: kba-spin .8s linear infinite; margin-right: 10px; vertical-align: middle; }
@keyframes kba-spin { to { transform: rotate(360deg); } }
.kba-section { background: #0d0d18; border: 1px solid #1e1e2e; border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.kba-section-head { padding: 12px 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; background: #111118; border-bottom: 1px solid #1e1e2e; transition: background .12s; }
.kba-section-head:hover { background: #15151f; }
.kba-section.collapsed .kba-section-head { border-bottom-color: transparent; }
.kba-section-head .kba-icon  { width: 22px; height: 22px; border-radius: 50%; background: var(--ag); color: var(--accent2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.kba-section-head .kba-section-title { flex: 1; font-size: 13px; font-weight: 600; color: #fff; }
.kba-section-head .kba-section-count { font-size: 11px; color: #666; background: #1a1a2e; padding: 2px 8px; border-radius: 10px; }
.kba-section-head .kba-chev { font-size: 10px; color: #555; transition: transform .15s; width: 12px; text-align: center; }
.kba-section.collapsed .kba-chev    { transform: rotate(-90deg); }
.kba-section.collapsed .kba-section-body { display: none; }
.kba-section-body { padding: 6px 16px 12px; }
.kba-item { padding: 10px 0; border-bottom: 1px solid #1a1a2a; font-size: 13px; line-height: 1.55; }
.kba-item:last-child { border-bottom: none; }
.kba-item .ttl  { color: #e0e0f0; font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.kba-item .meta { color: #666; font-size: 11px; margin-bottom: 6px; }
.kba-item .body { color: #bbb; white-space: pre-wrap; word-break: break-word; font-size: 13px; }
.kba-item .body.rtl { direction: rtl; text-align: right; font-family: 'Noto Sans Arabic','Inter',sans-serif; }
.kba-tag { display: inline-block; background: #1a1a2e; color: var(--accent2); font-size: 10px; padding: 2px 7px; border-radius: 8px; margin-right: 4px; margin-bottom: 2px; border: 1px solid #2d2d4e; }
.kba-actions  { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; align-items: center; flex-wrap: wrap; }
.kba-btn      { padding: 12px 22px; border-radius: 8px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; border: 1px solid transparent; transition: all .15s; }
.kba-btn-secondary { background: transparent; color: #aaa; border-color: #2d2d4e; }
.kba-btn-secondary:hover { background: #1a1a2e; color: #fff; }
.kba-btn-primary { background: var(--green); color: #fff; box-shadow: 0 4px 14px rgba(0,184,148,.18); }
.kba-btn-primary:hover { background: #00a37a; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,184,148,.32); }
.kba-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* KB textarea */
#kb-textarea { width: 100%; max-width: 560px; font-family: inherit; font-size: 14px; padding: 14px 16px; border: 1px solid var(--border2); border-radius: 10px; background: var(--surface2); color: var(--text); resize: vertical; line-height: 1.55; outline: none; transition: border-color .15s; min-height: 200px; display: block; margin: 0 auto; }
#kb-textarea:focus { border-color: var(--accent); }
#kb-textarea::placeholder { color: var(--text3); }

/* Topics need work */
.topics-need-work { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; text-align: left; margin-bottom: 28px; }
.topics-need-work .tnw-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.topics-need-work .tnw-title::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.topics-need-work .tnw-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--text); gap: 12px; }
.topics-need-work .tnw-row:last-child { border-bottom: none; }
.topics-need-work .tnw-row .tnw-score { font-weight: 600; color: var(--text2); }
.done-original-line { font-size: 13px; color: var(--text2); margin-bottom: 24px; }