/* ==========================================================
   Mokhtar — UI styles v3
   Familiar & simple app feel: soft light ground, white cards,
   confident purple, chat-style transcript, bottom navigation.
   No emojis.
   ========================================================== */
:root{
  --bg:        #f3f2f9;
  --card:      #ffffff;
  --ink:       #1c1633;
  --text:      #4a4460;
  --muted:     #8a85a3;
  --line:      #e9e7f2;
  --primary:   #6045f3;
  --primary-d: #4c33d6;
  --primary-soft:#efecfe;
  --primary-border:#d6cdfc;
  --green:     #16a34a;
  --green-soft:#e6f6ec;
  --amber:     #b45309;
  --amber-soft:#fdf1e0;
  --red:       #dc2626;
  --red-soft:  #fdeaea;
  --shadow:    0 2px 12px rgba(28,22,51,.07);
  --shadow-lg: 0 8px 30px rgba(28,22,51,.10);
  --r:         16px;
  --font: "Rubik", "IBM Plex Sans Arabic", system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
[hidden]{ display:none !important; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.75;
  display:flex; flex-direction:column;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
main{ flex:1; width:100%; max-width:840px; margin:0 auto; padding:0 20px 110px; }
h1,h2,h3,h4{ color:var(--ink); }

/* ---------- header ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px;
}
@media (min-width:880px){
  .topbar{ padding:12px calc((100% - 840px)/2 + 20px); }
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; cursor:pointer; }
.brand-mark{ width:38px; height:38px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-name{ font-size:19px; font-weight:700; color:var(--ink); }
.brand-sub{ font-size:11px; color:var(--muted); }
.topbar-actions{ display:flex; align-items:center; gap:10px; }
.demo-badge{
  font-size:11.5px; font-weight:600;
  color:var(--amber); background:var(--amber-soft);
  border-radius:99px; padding:5px 13px;
}

/* ---------- hero ---------- */
.hero{ text-align:center; padding:36px 0 24px; }
.hero h1{
  font-size:clamp(25px, 4.4vw, 37px); font-weight:700; line-height:1.5; margin:0 0 12px;
}
.hero h1 em{ font-style:normal; color:var(--primary); }
.gold-rule{ display:none; }
.hero-sub{ color:var(--muted); max-width:56ch; margin:0 auto; font-size:15px; }

/* ---------- upload card ---------- */
.upload-card{
  background:var(--card);
  border-radius:20px;
  padding:26px 26px 22px;
  box-shadow:var(--shadow-lg);
}
@media (max-width:640px){ .upload-card{ padding:20px 16px 18px; } }

.dropzone{
  border:2px dashed var(--primary-border); border-radius:var(--r);
  padding:34px 20px; text-align:center; color:var(--muted);
  background:#fbfaff;
  transition:border-color .15s, background .15s;
  cursor:pointer;
}
.dropzone:hover, .dropzone.drag{ border-color:var(--primary); background:var(--primary-soft); }
.dropzone.hasfile{ border-style:solid; border-color:var(--primary); background:var(--primary-soft); }
.dz-icon{ color:var(--primary); margin-bottom:10px; }
.dz-title{ font-size:15.5px; color:var(--ink); font-weight:500; }
.dz-browse{
  color:var(--primary-d); cursor:pointer; font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
}
.dz-hint{ font-size:12.5px; color:var(--muted); margin-top:7px; }
.dz-file{ font-weight:600; color:var(--primary-d); font-size:15px; }

.upload-meta{ margin-top:22px; }
.field{ margin-bottom:18px; }
.field label{
  display:block; font-size:13.5px; font-weight:600;
  margin-bottom:8px; color:var(--ink);
}
.hint{ color:var(--muted); font-weight:400; font-size:12px; }

input[type=text]{
  width:100%; font-family:var(--font); font-size:15px; color:var(--ink);
  background:#f7f6fb; border:1.5px solid transparent; border-radius:12px;
  padding:13px 15px; outline:none; transition:border-color .15s, background .15s;
  appearance:none;
}
input::placeholder{ color:var(--muted); }
input:focus{ border-color:var(--primary); background:#fff; }

/* chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-family:var(--font); font-size:14px; font-weight:500; color:var(--text);
  background:#f7f6fb; border:1.5px solid transparent; border-radius:99px;
  padding:8px 18px; cursor:pointer; transition:all .15s;
}
.chip:hover{ background:var(--primary-soft); }
.chip.selected{
  background:var(--primary-soft); border-color:var(--primary); color:var(--primary-d);
  font-weight:600;
}
.chip .n{ color:var(--muted); font-size:12px; margin-right:4px; }
.chip.selected .n{ color:var(--primary); }
.filter-chips{ margin-bottom:16px; }

/* buttons */
.btn{
  font-family:var(--font); font-weight:600; border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:14px; transition:all .15s;
}
.btn.primary{
  background:var(--primary); color:#fff; font-size:16.5px;
  box-shadow:0 6px 18px rgba(96,69,243,.35);
}
.btn.primary:hover{ background:var(--primary-d); }
.btn.primary:active{ transform:scale(.99); }
.btn.primary:disabled{ background:#c9c4e2; box-shadow:none; cursor:not-allowed; }
.btn.big{ width:100%; padding:16px 22px; margin-top:8px; }
.btn.ghost{
  background:var(--card); color:var(--text); border:1.5px solid var(--line);
  font-weight:500;
}
.btn.ghost:hover{ border-color:var(--primary); color:var(--primary-d); }
.btn.small{ font-size:13.5px; padding:9px 17px; border-radius:11px; }
.btn.text{
  background:none; border:none; color:var(--primary-d);
  font-weight:600; font-size:14px; padding:6px 4px;
}
.btn.text:hover{ text-decoration:underline; text-underline-offset:3px; }
.fineprint{ text-align:center; color:var(--muted); font-size:12px; margin:14px 0 0; }
.try-demo{ text-align:center; padding:18px 0 0; }
.just-start{ text-align:center; padding:30px 0 0; }
.just-start h3{ margin:0 0 4px; font-size:17px; font-weight:700; }
.just-start p{ margin:0; color:var(--muted); font-size:13.5px; }

/* demo note */
.demo-note{ margin-top:34px; }
.dn-label{ font-size:15px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.dn-intro{ margin:0 0 16px; color:var(--muted); font-size:14px; max-width:62ch; }
.dn-items{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
@media (max-width:700px){ .dn-items{ grid-template-columns:1fr; } }
.dn-item{
  background:var(--card); padding:18px 18px 16px; text-align:right; cursor:pointer;
  border:none; font-family:var(--font); display:block; width:100%;
  border-radius:var(--r); box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s;
}
.dn-item:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.dn-ic{
  width:44px; height:44px; border-radius:13px;
  display:flex; align-items:center; justify-content:center; margin-bottom:12px;
}
.dn-ic svg{ width:22px; height:22px; }
.dn-ic.c1{ background:var(--green-soft); color:var(--green); }
.dn-ic.c2{ background:var(--primary-soft); color:var(--primary-d); }
.dn-ic.c3{ background:var(--amber-soft); color:var(--amber); }
.dn-ic.c4{ background:#e8f1fd; color:#1d4ed8; }
.dn-item h4{ margin:0 0 6px; font-size:15px; font-weight:700; color:var(--ink); }
.dn-item p{ margin:0 0 12px; font-size:13px; color:var(--muted); line-height:1.8; }
.dn-go{
  display:inline-block; font-size:12.5px; color:var(--primary-d); font-weight:600;
  background:var(--primary-soft); border-radius:99px; padding:5px 14px;
}

/* ---------- processing ---------- */
.loading-wrap{
  text-align:center; padding:36px 30px 34px; max-width:420px; margin:60px auto 0;
  background:var(--card); border-radius:20px; box-shadow:var(--shadow-lg);
}
.loading-mark{ width:54px; margin:0 auto 18px; display:block; animation:breathe 2s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.55; transform:scale(.95);} }
.loading-wrap h2{ font-size:19px; font-weight:700; margin:0 0 24px; }
.load-steps{ text-align:right; display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
.lstep{ color:var(--muted); font-size:14px; display:flex; align-items:center; gap:11px; transition:color .3s; }
.lstep .dot{ width:8px; height:8px; border-radius:99px; background:var(--line); flex:none; transition:background .3s; }
.lstep.active{ color:var(--ink); font-weight:600; }
.lstep.active .dot{ background:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
.lstep.done{ color:var(--text); }
.lstep.done .dot{ background:var(--green); }
.progress{ height:6px; border-radius:99px; background:var(--bg); overflow:hidden; }
.progress .bar{ height:100%; width:0%; border-radius:99px; background:var(--primary); transition:width .5s ease; }

/* ---------- results ---------- */
.results-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  padding:26px 0 16px; flex-wrap:wrap;
}
.crumb{ color:var(--muted); font-size:12.5px; margin-bottom:4px; }
.results-head h2{ margin:0; font-size:23px; font-weight:700; }
.results-actions{ display:flex; gap:8px; }

.overview-card{
  background:var(--card); border-radius:var(--r); box-shadow:var(--shadow);
  padding:18px 22px; margin-bottom:18px;
}
.overview-card .ov-label{ font-size:13px; font-weight:700; color:var(--primary-d); margin-bottom:6px; }
.overview-card .ov-label::after{ content:none; }
.overview-card p{ margin:0; font-size:14.5px; color:var(--text); }
.ov-facts{ display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:13px; padding-top:12px; border-top:1px solid var(--line); }
.ov-facts .f{ font-size:12.5px; color:var(--muted); }
.ov-facts .f b{ color:var(--ink); font-weight:600; }

/* tabs — segmented control */
.tabs{
  display:flex; gap:4px; overflow-x:auto;
  background:#e9e6f4; border-radius:14px; padding:4px;
  margin-bottom:18px; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:1; font-family:var(--font); font-size:14px; font-weight:600; white-space:nowrap;
  background:transparent; border:none; color:var(--muted); cursor:pointer;
  padding:10px 16px; border-radius:11px; transition:all .15s;
}
.tab.selected{ background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.tab .count{ color:var(--muted); font-weight:400; font-size:12px; }
.tab.selected .count{ color:var(--primary-d); }

/* ---------- insight cards ---------- */
.insight{
  background:var(--card); border-radius:var(--r); box-shadow:var(--shadow);
  padding:18px 22px; margin-bottom:12px;
}
@media (max-width:640px){ .insight{ padding:16px 16px; } }
.insight .ihead{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.insight .icat{
  font-size:12px; font-weight:600; border-radius:99px; padding:4px 13px; flex:none;
  background:var(--primary-soft); color:var(--primary-d);
}
.insight[data-cat="فرص وصفقات"] .icat{ background:var(--green-soft); color:var(--green); }
.insight[data-cat="أفكار محتوى"] .icat{ background:var(--primary-soft); color:var(--primary-d); }
.insight[data-cat="اقتباسات تسويقية"] .icat{ background:var(--amber-soft); color:var(--amber); }
.insight[data-cat="نقاط وجع"] .icat{ background:var(--red-soft); color:var(--red); }
.insight[data-cat="متابعات"] .icat{ background:#e8f1fd; color:#1d4ed8; }
.insight h3{ margin:0 0 6px; font-size:16.5px; font-weight:700; line-height:1.55; }
.insight .idetail{ margin:0 0 12px; font-size:14px; color:var(--text); }
.insight .iquote{
  background:var(--primary-soft); border-right:4px solid var(--primary);
  border-radius:12px; padding:11px 16px; font-size:13.5px; color:var(--ink);
  line-height:1.85; margin-bottom:12px;
}
.insight .iquote .qwho{ display:block; font-size:11.5px; color:var(--primary-d); margin-top:5px; font-weight:600; }
.insight .iaction{
  display:flex; align-items:baseline; gap:10px;
  background:#f7f6fb; border-radius:12px; padding:11px 15px; font-size:13.5px;
}
.insight .iaction .albl{ flex:none; font-size:12px; font-weight:700; color:var(--primary-d); }
.insight .iaction span:last-child{ color:var(--text); }
.copy-btn{
  font-family:var(--font); font-size:12.5px; font-weight:600; cursor:pointer;
  background:#f7f6fb; color:var(--text); border:none;
  border-radius:99px; padding:6px 15px; transition:all .15s; flex:none;
}
.copy-btn:hover{ background:var(--primary-soft); color:var(--primary-d); }
.copy-btn.copied{ background:var(--green-soft); color:var(--green); }

/* ---------- transcript = chat thread ---------- */
.transcript{ padding:4px 0; }
.turn{ display:flex; flex-direction:column; margin-bottom:14px; max-width:82%; }
.turn{ align-items:flex-start; }           /* speaker 1 → right side (RTL start) */
.turn.s2{ align-self:flex-end; align-items:flex-end; margin-right:auto; }
.transcript{ display:flex; flex-direction:column; }
.turn .who{ display:flex; gap:8px; align-items:baseline; margin:0 6px 3px; }
.turn .who .nm{ font-size:12px; font-weight:700; color:var(--ink); }
.turn.s2 .who .nm{ color:var(--primary-d); }
.turn .who .ts{ font-size:10.5px; color:var(--muted); direction:ltr; }
.turn p{
  margin:0; font-size:14px; line-height:1.9; color:var(--ink);
  background:var(--card); box-shadow:var(--shadow);
  border-radius:14px 14px 14px 4px; padding:10px 15px;
}
.turn.s2 p{ background:var(--primary-soft); border-radius:14px 14px 4px 14px; }
.turn p mark{
  background:#fff3d6; color:inherit; padding:1px 3px; border-radius:3px;
}
.turn.s2 p mark{ background:#fff; }

/* ---------- bottom navigation ---------- */
.bottombar{
  position:fixed; bottom:0; right:0; left:0; z-index:30;
  background:var(--card); border-top:1px solid var(--line);
  display:flex; justify-content:center; gap:4px;
  padding:8px 10px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 20px rgba(28,22,51,.06);
}
.nav-item{
  font-family:var(--font); background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--muted); font-size:11.5px; font-weight:600;
  padding:6px 18px; border-radius:12px; transition:color .15s, background .15s;
  min-width:76px;
}
.nav-item svg{ width:22px; height:22px; }
.nav-item:hover{ color:var(--ink); }
.nav-item.active{ color:var(--primary-d); background:var(--primary-soft); }

/* ---------- dummy views ---------- */
.dummy-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 0 2px; }
.back-link{ padding-right:0; }
.dummy-tag{
  font-size:11.5px; font-weight:600; color:var(--amber);
  background:var(--amber-soft); border-radius:99px; padding:5px 13px;
}
.dummy-title{ margin:8px 0 4px; font-size:23px; font-weight:700; }
.dummy-sub{ margin:0 0 20px; color:var(--muted); font-size:14px; }
.dummy-h3{ font-size:15px; font-weight:700; color:var(--ink); margin:26px 0 12px; }
.dummy-h3::after{ content:none; }

/* capture: sources */
.src-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
@media (max-width:760px){ .src-grid{ grid-template-columns:1fr 1fr; } }
.src{ background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:15px 16px; }
.src-name{ font-size:14px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.src-state{ display:inline-block; font-size:11.5px; font-weight:600; padding:3px 12px; border-radius:99px; margin-bottom:8px; }
.src-state.on{ color:var(--green); background:var(--green-soft); }
.src-state.off{ color:var(--muted); background:#f1f0f6; }
.src-state.soon{ color:var(--amber); background:var(--amber-soft); }
.src p{ margin:0; font-size:12px; color:var(--muted); }
.dummy-connect{ font-size:12.5px; padding:0; }

/* capture: recordings */
.rec-list{ background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.rec{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; }
.rec + .rec{ border-top:1px solid var(--line); }
.rec-title{ display:block; font-weight:600; font-size:14.5px; color:var(--ink); }
.rec-meta{ display:block; font-size:12px; color:var(--muted); }
.rec-state{ flex:none; font-size:12px; font-weight:600; border-radius:99px; padding:4px 13px; }
.rec-state.done{ color:var(--green); background:var(--green-soft); }
.rec-state.working{ color:var(--amber); background:var(--amber-soft); }

/* dashboard */
.stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
@media (max-width:640px){ .stats{ grid-template-columns:1fr 1fr; } }
.stat{ background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:16px 18px; }
.stat .num{ display:block; font-size:28px; font-weight:700; color:var(--primary-d); line-height:1.3; }
.stat .lbl{ font-size:12.5px; color:var(--muted); }
.dash-list{ background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.dash-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; }
.dash-row + .dash-row{ border-top:1px solid var(--line); }
.dr-title{ display:block; font-weight:600; font-size:14.5px; color:var(--ink); }
.dr-meta{ display:block; font-size:12px; color:var(--muted); }
.pill{ flex:none; font-size:12px; font-weight:600; padding:4px 14px; border-radius:99px; background:#f1f0f6; color:var(--muted); }
.pill.new{ color:var(--primary-d); background:var(--primary-soft); }
.pill.prog{ color:var(--amber); background:var(--amber-soft); }
.pill.done{ color:var(--green); background:var(--green-soft); }
.pill.due{ color:var(--red); background:var(--red-soft); }
.pill.soon2{ color:var(--text); }

/* chat */
.chat-box{
  background:var(--card); border-radius:20px; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; min-height:440px; overflow:hidden;
}
.chat-log{ flex:1; padding:20px 18px 8px; display:flex; flex-direction:column; gap:12px; overflow-y:auto; background:#fbfaff; }
.msg{ max-width:80%; padding:11px 16px; font-size:14px; line-height:1.85; }
.msg.user{
  align-self:flex-end; background:var(--primary); color:#fff;
  border-radius:16px 16px 4px 16px; box-shadow:0 3px 10px rgba(96,69,243,.25);
}
.msg.bot{
  align-self:flex-start; background:var(--card); color:var(--ink);
  border-radius:16px 16px 16px 4px; box-shadow:var(--shadow);
}
.msg .cite{ display:block; margin-top:7px; padding-top:7px; border-top:1px solid var(--line); font-size:11.5px; color:var(--primary-d); font-weight:600; }
.chat-suggest{ display:flex; flex-wrap:wrap; gap:8px; padding:12px 18px; background:#fbfaff; }
.sug{
  font-family:var(--font); font-size:13px; font-weight:500; color:var(--primary-d); background:var(--card);
  border:1.5px solid var(--primary-border); border-radius:99px; padding:7px 16px; cursor:pointer; transition:all .15s;
  box-shadow:var(--shadow);
}
.sug:hover{ background:var(--primary); border-color:var(--primary); color:#fff; }
.chat-input{ display:flex; gap:10px; padding:12px 14px; border-top:1px solid var(--line); background:var(--card); }
.chat-input input{ flex:1; border-radius:99px; }
.chat-send{ font-size:14.5px; padding:10px 26px; border-radius:99px; }

/* footer + toast */
.foot{
  max-width:840px; margin:0 auto; width:100%;
  display:flex; justify-content:space-between; padding:14px 20px 90px;
  color:var(--muted); font-size:12px;
}
.toast{
  position:fixed; bottom:92px; right:50%; transform:translateX(50%);
  background:var(--ink); color:#fff;
  border-radius:14px; padding:11px 26px; font-size:14px; font-weight:500;
  box-shadow:var(--shadow-lg); z-index:99;
  animation:toastIn .2s ease;
}
@keyframes toastIn{ from{ opacity:0; transform:translateX(50%) translateY(8px);} to{ opacity:1; transform:translateX(50%) translateY(0);} }

.view{ animation:fadeIn .25s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

/* ---------- back button (icon) ---------- */
.back-btn{
  width:40px; height:40px; border-radius:99px; border:none; cursor:pointer;
  background:var(--card); box-shadow:var(--shadow); color:var(--ink);
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.back-btn svg{ width:20px; height:20px; }
.back-btn:hover{ background:var(--primary-soft); color:var(--primary-d); }

/* ---------- language switcher ---------- */
.lang-switch{
  display:flex; gap:2px; background:#e9e6f4; border-radius:99px; padding:3px;
}
.lang-opt{
  font-family:var(--font); font-size:12.5px; font-weight:600; color:var(--muted);
  background:transparent; border:none; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  border-radius:99px; padding:5px 12px; transition:all .15s;
}
.lang-opt.active{ background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.lang-ic{
  width:18px; height:18px; border-radius:99px; overflow:hidden; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.lang-ic svg{ width:18px; height:18px; }
.ar-ic{ background:var(--green); color:#fff; font-size:11px; font-weight:700; line-height:1; }

/* ---------- auto-detect note ---------- */
.auto-note{
  margin:0 0 6px; font-size:13px; color:var(--muted);
  background:#f7f6fb; border-radius:12px; padding:11px 15px;
}

/* ---------- MCP explainer page ---------- */
.explain-card{
  background:var(--card); border-radius:var(--r); box-shadow:var(--shadow);
  padding:20px 22px; margin-bottom:12px;
}
.explain-card h3{ margin:0 0 8px; font-size:16.5px; font-weight:700; }
.explain-card h4{ margin:0 0 6px; font-size:15px; font-weight:700; }
.explain-card p{ margin:0; font-size:14px; color:var(--text); }
.mcp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px){ .mcp-grid{ grid-template-columns:1fr; } }
.mcp-diagram{ display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; }
.mcp-box{
  flex:1; min-width:150px; background:#f7f6fb; border-radius:14px; padding:12px 14px;
  text-align:center; font-size:14px;
}
.mcp-box .bx-t{ display:block; font-weight:700; color:var(--ink); }
.mcp-box span:not(.bx-t){ display:block; font-size:11.5px; color:var(--muted); margin-top:3px; }
.mcp-box.highlight{ background:var(--primary-soft); }
.mcp-box.highlight .bx-t{ color:var(--primary-d); }
.mcp-plug{
  flex:none; font-size:12px; font-weight:600; color:var(--primary-d);
  background:var(--card); border:1.5px dashed var(--primary-border);
  border-radius:99px; padding:6px 14px;
}
.mcp-step{ display:flex; gap:14px; padding:12px 0; align-items:flex-start; }
.mcp-step + .mcp-step{ border-top:1px solid var(--line); }
.step-num{
  flex:none; width:32px; height:32px; border-radius:99px;
  background:var(--primary-soft); color:var(--primary-d); font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.mcp-step b{ display:block; color:var(--ink); font-size:14.5px; }
.mcp-step p{ margin:2px 0 0; font-size:13.5px; color:var(--muted); }
.mcp-list{ margin:8px 0 0; padding:0; list-style:none; }
.mcp-list li{ position:relative; padding-right:20px; margin-bottom:9px; font-size:14px; color:var(--text); }
.mcp-list li::before{
  content:""; position:absolute; right:0; top:.6em; width:8px; height:8px;
  border-radius:99px; background:var(--green);
}
.ai-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.ai-badge{
  display:flex; align-items:center; gap:8px;
  background:#f7f6fb; border-radius:99px; padding:8px 16px;
  font-weight:600; font-size:13.5px; color:var(--ink);
}
.ai-badge svg{ width:19px; height:19px; flex:none; }
.ai-badge img{ width:20px; height:20px; flex:none; border-radius:6px; }
.ai-badge.more{ color:var(--muted); font-weight:500; }
.mcp-cta{ text-align:center; padding:22px 0 6px; }
.mcp-cta p{ margin:0 0 12px; color:var(--muted); font-size:14px; }
.mcp-cta .btn{ padding:13px 28px; }
.mcp-link-row{ margin:14px 0 0; }

/* ---------- LTR (English) adjustments ---------- */
[dir="ltr"] .dn-item{ text-align:left; }
[dir="ltr"] .load-steps{ text-align:left; }
[dir="ltr"] .insight .iquote{ border-right:none; border-left:4px solid var(--primary); }
[dir="ltr"] .back-btn svg{ transform:scaleX(-1); }
[dir="ltr"] .mcp-list li{ padding-right:0; padding-left:20px; }
[dir="ltr"] .mcp-list li::before{ right:auto; left:0; }
[dir="ltr"] .turn p{ border-radius:14px 14px 4px 14px; }
[dir="ltr"] .turn.s2 p{ border-radius:14px 14px 14px 4px; }
[dir="ltr"] .msg.user{ border-radius:16px 16px 16px 4px; }
[dir="ltr"] .msg.bot{ border-radius:16px 16px 4px 16px; }

/* ---------- mobile ---------- */
@media (max-width:560px){
  main{ padding:0 14px 104px; }
  .topbar{ padding:10px 14px; }
  .brand-sub{ display:none; }
  .demo-badge{ display:none; }
  .hero{ padding:26px 0 18px; }
  .hero-sub{ font-size:14px; }
  .results-head h2{ font-size:20px; }
  .results-actions{ width:100%; }
  .results-actions .btn{ flex:1; }
  .dummy-title{ font-size:20px; }
  .turn{ max-width:92%; }
  .msg{ max-width:88%; }
  .chat-suggest{ padding:10px 12px; }
  .chat-input{ padding:10px 10px; }
  .nav-item{ padding:6px 10px; min-width:0; flex:1; }
  .mcp-diagram{ flex-direction:column; align-items:stretch; }
  .mcp-plug{ align-self:center; }
  .stat .num{ font-size:24px; }
  .foot{ flex-direction:column; gap:2px; text-align:center; padding-bottom:96px; }
}