/* ═══════════════════════════════════════════════════════════════════
   Al Moasis · المؤسس Dashboard — Emerald + Charcoal brand identity.
   Tokens imported from design-tokens.css. Local fallbacks below.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Brand palette — emerald (#059669) + charcoal (#0A0F14) + mint surfaces. */
  --sand: #ffffff;                /* legacy alias: app background */
  --sand-deep: #f1f5f9;
  --ink: #0A0F14;                 /* charcoal — primary text */
  --ink-soft: #334155;
  --ink-mute: #64748b;
  --accent: #059669;              /* Deep Emerald — primary brand */
  --accent-soft: #10b981;
  --green: #059669;
  --line: #e2e8f0;
  --bubble-me: #ecfdf5;           /* mint tint for owner messages */
  --bubble-them: #ffffff;
  --shadow: 0 2px 8px rgba(10, 15, 20, 0.05);
  --radius: 14px;
  --radius-sm: 10px;
  --font-ar: 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-en: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-ar);
  font-size: 16px;
  line-height: 1.55;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ─── Topbar — sticky glass header (OpenClaw-style, Muassis palette) ──── */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header, 40);
  background: var(--glass-light, rgba(255, 255, 255, 0.78));
  backdrop-filter: blur(var(--glass-blur, 12px)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 12px)) saturate(180%);
  border-bottom: 1px solid var(--line);
  padding: 12px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  box-shadow: var(--sh-sm, var(--shadow));
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Logo = the SVG mark itself. No background plate — the knot speaks for
   itself per the brand kit (interlocking forms, minimal iconography). */
.logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border-radius: var(--r-md);
  filter: drop-shadow(0 2px 4px rgba(5, 150, 105, 0.18));
}

.logo svg { display: block; }

.brand-text h1 {
  margin: 0;
  font-family: var(--font-ar);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink-950);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Latin lockup — Sora, deep emerald. Sits directly under المؤسس. */
.brand-text .brand-latin {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  color: var(--emerald-700);
  letter-spacing: 0.06em;
  text-transform: none;
  line-height: 1.2;
}

.brand-text .business {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ink-500);
  font-family: var(--font-ar);
}

/* ─── Connection pill (top-right) — animated handshake ─────────────── */
.connection-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-full, 9999px);
  background: var(--bg-card-tinted, var(--sand));
  border: 1px solid var(--line);
  font-size: var(--fs-sm, 14px);
  font-weight: 500;
  color: var(--ink-700);
  cursor: default;
  transition: all var(--t-base, 200ms) var(--ease, ease);
}
.connection-pill[data-status="connected"] { color: var(--success-dark, #1e7e34); }
.connection-pill[data-status="connecting"] {
  color: var(--warning-dark, #d97706);
  background: var(--gold-100, #ecfdf5);
  border-color: var(--gold-300, #a7f3d0);
}
.connection-pill[data-status="disconnected"] {
  color: var(--error-dark, #bd2130);
  background: var(--error-light, #fee2e2);
  border-color: #fecaca;
  cursor: pointer;
}
.connection-pill[data-status="disconnected"]:hover { background: #fee2e2cc; }
.connection-pill .dot {
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: currentColor;
  position: relative;
}
.connection-pill[data-status="connecting"] .dot::after,
.connection-pill[data-status="reconnecting"] .dot::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--r-full);
  background: currentColor;
  animation: pulse-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pulse-ping {
  0%   { transform: scale(1);   opacity: 0.7; }
  75%, 100% { transform: scale(2.2); opacity: 0; }
}

/* ─── Tab nav ───────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

.tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-700);
  padding: 8px 14px;
  border-radius: var(--r-sm, 6px);
  font-family: inherit;
  font-size: var(--fs-sm, 14px);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tab:hover {
  background: var(--sand-200);
  color: var(--ink-900);
}

.tab.active {
  background: var(--ink-900);
  color: var(--sand-100);
  border-color: var(--ink-900);
  box-shadow: var(--sh-sm);
}

/* ─── Main + panels ─────────────────────────────────────────────────── */
main {
  flex: 1;
  padding: 24px 28px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.panel { display: none; }
.panel.active { display: block; }

h2 { margin: 0 0 6px; font-size: 22px; }
.hint { color: var(--ink-mute); margin: 0 0 18px; font-size: 14px; }

/* ─── Chat ──────────────────────────────────────────────────────────── */
.chat-header { margin-bottom: 14px; }

.chat-stream {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 380px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow);
}

.bubble {
  padding: 11px 16px;
  border-radius: 18px;
  max-width: 78%;
  word-wrap: break-word;
  white-space: pre-wrap;
  font-size: 15px;
  line-height: 1.5;
}

.bubble.user {
  background: var(--bubble-me);
  align-self: flex-start;
  border: 1px solid var(--sand-deep);
  border-bottom-right-radius: 6px;
}

.bubble.assistant {
  background: var(--bubble-them);
  align-self: flex-end;
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
}

.bubble.system {
  background: rgba(139, 90, 43, 0.07);
  border: 1px dashed var(--accent-soft);
  align-self: center;
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 92%;
}

.bubble.assistant.thinking {
  color: var(--ink-mute);
  font-style: italic;
}

/* (v2.5.5) Activity pill — Claude-style smooth thinking indicator.
 * Soft pulse on the entire pill (not stiff icon-spin), shimmer travels
 * underneath, label cross-fades when state changes, dots flow gently. */
.activity-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, oklch(30% 0.014 60 / 0.65), oklch(26% 0.012 60 / 0.55));
  border: 1px solid oklch(45% 0.02 70 / 0.55);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
  letter-spacing: -0.005em;
  max-width: 92%;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 oklch(100% 0 0 / 0.05) inset,
    0 1px 3px oklch(0% 0 0 / 0.22);
  animation:
    pill-fade-in 220ms cubic-bezier(0.16, 1, 0.3, 1),
    pill-breathe 3.6s cubic-bezier(0.4, 0, 0.6, 1) 220ms infinite;
  transition:
    background 320ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 320ms cubic-bezier(0.4, 0, 0.2, 1),
    color 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shimmer overlay — slower than the tool card's, much more subtle */
.activity-pill::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    oklch(100% 0 0 / 0.045) 50%,
    transparent 100%
  );
  animation: pill-shimmer 3.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  inset-inline-start: -60%;
  pointer-events: none;
}
@keyframes pill-shimmer {
  0%   { inset-inline-start: -60%; }
  100% { inset-inline-start: 100%; }
}

@keyframes pill-fade-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Soft breathing — pill alpha shifts slowly so the entire UI feels alive */
@keyframes pill-breathe {
  0%, 100% { box-shadow: 0 1px 0 oklch(100% 0 0 / 0.05) inset, 0 1px 3px oklch(0% 0 0 / 0.22); }
  50%      { box-shadow: 0 1px 0 oklch(100% 0 0 / 0.08) inset, 0 2px 8px oklch(72% 0.18 75 / 0.18); }
}

.activity-pill .ap-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  color: oklch(72% 0.18 75);
}

.activity-pill .ap-label {
  white-space: nowrap;
}

.activity-pill .ap-dots {
  display: inline-flex;
  gap: 3px;
  margin-inline-start: 2px;
}
.activity-pill .ap-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: oklch(72% 0.18 75);
  opacity: 0.4;
  /* (v2.5.5) Six-stop cubic for a flowing wave instead of the stiff
   * 0%/40%/100% three-stop. Each dot is offset by 1/6 of the cycle so
   * the wave reads as continuous rather than three separate flashes. */
  animation: ap-dot 1.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  will-change: transform, opacity;
}
.activity-pill .ap-dots span:nth-child(2) { animation-delay: 0.18s; }
.activity-pill .ap-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes ap-dot {
  0%   { opacity: 0.25; transform: translateY(0)     scale(0.85); }
  20%  { opacity: 0.55; transform: translateY(-0.5px) scale(0.95); }
  40%  { opacity: 1;    transform: translateY(-1.5px) scale(1.05); }
  60%  { opacity: 0.85; transform: translateY(-0.5px) scale(1); }
  80%  { opacity: 0.45; transform: translateY(0)     scale(0.9); }
  100% { opacity: 0.25; transform: translateY(0)     scale(0.85); }
}

/* Per-mode tints — the icon stroke + dot color shift by activity */
.activity-pill.mode-thinking .ap-icon,
.activity-pill.mode-thinking .ap-dots span { color: oklch(72% 0.18 75); background: oklch(72% 0.18 75); }
.activity-pill.mode-thinking .ap-icon { color: oklch(72% 0.18 75); }
.activity-pill.mode-thinking .ap-icon svg { animation: ap-spin 4s linear infinite; transform-origin: center; }

.activity-pill.mode-searching .ap-icon { color: oklch(78% 0.14 220); }
.activity-pill.mode-searching .ap-dots span { background: oklch(78% 0.14 220); }
.activity-pill.mode-searching .ap-icon svg { animation: ap-shimmy 1.2s ease-in-out infinite; transform-origin: center; }

.activity-pill.mode-tool .ap-icon { color: oklch(80% 0.13 145); }
.activity-pill.mode-tool .ap-dots span { background: oklch(80% 0.13 145); }
.activity-pill.mode-tool .ap-icon svg { animation: ap-pulse 1s ease-in-out infinite; transform-origin: center; }

.activity-pill.mode-browser .ap-icon { color: oklch(78% 0.17 320); }
.activity-pill.mode-browser .ap-dots span { background: oklch(78% 0.17 320); }
.activity-pill.mode-browser .ap-icon svg { animation: ap-shimmy 1.4s ease-in-out infinite; transform-origin: center; }

.activity-pill.mode-writing .ap-icon { color: oklch(75% 0.14 50); }
.activity-pill.mode-writing .ap-dots span { background: oklch(75% 0.14 50); }
.activity-pill.mode-writing .ap-icon svg { animation: ap-nod 1s ease-in-out infinite; transform-origin: 50% 70%; }

.activity-pill.mode-reading .ap-icon { color: oklch(76% 0.10 180); }
.activity-pill.mode-reading .ap-dots span { background: oklch(76% 0.10 180); }

.activity-pill.mode-scheduling .ap-icon { color: oklch(76% 0.14 280); }
.activity-pill.mode-scheduling .ap-dots span { background: oklch(76% 0.14 280); }
.activity-pill.mode-scheduling .ap-icon svg { animation: ap-spin 3s linear infinite; transform-origin: center; }

.activity-pill.mode-sending .ap-icon { color: oklch(72% 0.18 75); }
.activity-pill.mode-sending .ap-dots span { background: oklch(72% 0.18 75); }
.activity-pill.mode-sending .ap-icon svg { animation: ap-glide 1.4s ease-in-out infinite; transform-origin: center; }

/* (v2.5.5) Smoother easing on all icon motions — was 2-stop linear-feeling
 * 0%/50%/100% keyframes. Now: 5-stop with breath + recovery so each motion
 * feels like a single soft gesture instead of a robotic loop. */
@keyframes ap-spin   {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
@keyframes ap-pulse  {
  0%, 100% { transform: scale(1);     opacity: 0.85; }
  30%      { transform: scale(1.08);  opacity: 1;    }
  60%      { transform: scale(1.02);  opacity: 0.95; }
}
@keyframes ap-shimmy {
  0%, 100% { transform: translateX(0)    rotate(0deg); }
  30%      { transform: translateX(1.5px) rotate(2deg); }
  70%      { transform: translateX(-1px)  rotate(-1.5deg); }
}
@keyframes ap-nod    {
  0%, 100% { transform: rotate(0deg); }
  40%      { transform: rotate(6deg); }
  70%      { transform: rotate(-2deg); }
}
@keyframes ap-glide  {
  0%, 100% { transform: translateX(-2px); opacity: 0.9; }
  50%      { transform: translateX(3px);  opacity: 1;   }
}

/* Make icon animation durations feel more relaxed (was 1s — now 1.6-2s) */
.activity-pill.mode-thinking .ap-icon svg { animation-duration: 6s; }
.activity-pill.mode-tool      .ap-icon svg { animation-duration: 1.8s; }
.activity-pill.mode-searching .ap-icon svg { animation-duration: 1.8s; }
.activity-pill.mode-browser   .ap-icon svg { animation-duration: 2s;   }
.activity-pill.mode-writing   .ap-icon svg { animation-duration: 1.6s; }
.activity-pill.mode-scheduling .ap-icon svg { animation-duration: 5s;  }
.activity-pill.mode-sending   .ap-icon svg { animation-duration: 1.8s; }

@media (prefers-reduced-motion: reduce) {
  .activity-pill .ap-icon svg,
  .activity-pill .ap-dots span { animation: none !important; }
}

/* (v2.5.5) Claude-style tool-call cards.
 *
 * Three visual states (pending / success / error). The pending state has a
 * soft shimmer + spinner; on resolution the card morphs to a soft tinted
 * surface with a checkmark or X. Smooth easing curves throughout — no
 * stiff 0%/50%/100% bangs. Customer-facing label is the friendly Arabic
 * verb; the raw tool name + duration + output are hidden by default and
 * only render in `?debug=1` mode (see app.js DEBUG_MODE).
 */
.tool-card {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background:
    linear-gradient(135deg, oklch(28% 0.012 60 / 0.55), oklch(28% 0.012 60 / 0.40));
  border: 1px solid oklch(45% 0.02 70 / 0.45);
  color: var(--ink-soft);
  padding: 7px 14px 7px 11px;
  border-radius: 12px;
  font-size: 12.5px;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
  letter-spacing: -0.005em;
  max-width: 92%;
  word-break: break-word;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 oklch(100% 0 0 / 0.04) inset,
    0 1px 3px oklch(0% 0 0 / 0.18);
  /* Cubic-bezier matches Apple's "ease-out-quart" — feels confident */
  animation: tool-card-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
  transition:
    border-color 240ms cubic-bezier(0.4, 0, 0.2, 1),
    background 240ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes tool-card-in {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Status icon slot — spinner while pending, check/X when resolved */
.tool-card .tc-status {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tool-card .tc-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tool-card .tc-meta {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--ink-mute);
  opacity: 0.7;
  margin-inline-start: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

/* Pending: soft shimmer sweep + spinner. Shimmer travels across the
 * surface every 2.2s — slow enough to feel calm, fast enough to feel
 * alive. Subtler than v2.5.4's stiff icon-spin loop. */
.tool-card:not(.success):not(.error):not(.debug)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    oklch(100% 0 0 / 0.05) 50%,
    transparent 100%
  );
  animation: tc-shimmer 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  inset-inline-start: -60%;
  pointer-events: none;
}
@keyframes tc-shimmer {
  0%   { inset-inline-start: -60%; }
  100% { inset-inline-start: 100%; }
}

/* Pending spinner — a small filled circle that orbits */
.tool-card .tc-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid oklch(72% 0.18 75 / 0.35);
  border-top-color: oklch(78% 0.18 75);
  animation: tc-spin 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  box-sizing: border-box;
}
@keyframes tc-spin {
  to { transform: rotate(360deg); }
}

/* Success state */
.tool-card.success {
  background:
    linear-gradient(135deg, oklch(36% 0.06 145 / 0.30), oklch(30% 0.04 145 / 0.20));
  border-color: oklch(60% 0.15 145 / 0.55);
}
.tool-card.success .tc-status { color: oklch(78% 0.15 145); }
.tool-card.success .tc-check {
  width: 14px;
  height: 14px;
  animation: tc-pop-in 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Error state */
.tool-card.error {
  background:
    linear-gradient(135deg, oklch(34% 0.10 25 / 0.30), oklch(28% 0.06 25 / 0.18));
  border-color: oklch(58% 0.18 25 / 0.55);
  color: oklch(86% 0.05 25);
}
.tool-card.error .tc-status { color: oklch(74% 0.16 25); }
.tool-card.error .tc-x {
  width: 14px;
  height: 14px;
  animation: tc-pop-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tc-pop-in {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

/* Debug-only card (legacy plain-text format) — distinctly muted so debug
 * artifacts don't look like the same thing as live tool cards. */
.tool-card.debug {
  background: oklch(24% 0.005 60 / 0.55);
  border-color: oklch(40% 0.01 70 / 0.40);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  opacity: 0.7;
}
.tool-card.debug::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tool-card,
  .tool-card::before,
  .tool-card .tc-spinner,
  .tool-card .tc-check,
  .tool-card .tc-x { animation: none !important; }
}

/* (v2.5.5) Inline artifact preview — auto-show hook surfaces files inline
 * so the customer SEES the work, not just "saved to your desktop". */
.artifact-preview {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0;
  background:
    linear-gradient(135deg, oklch(28% 0.012 60 / 0.55), oklch(26% 0.010 60 / 0.45));
  border: 1px solid oklch(45% 0.02 70 / 0.45);
  border-radius: 14px;
  overflow: hidden;
  max-width: 100%;
  width: min(560px, 100%);
  box-shadow:
    0 1px 0 oklch(100% 0 0 / 0.04) inset,
    0 4px 20px oklch(0% 0 0 / 0.25);
  animation: artifact-fade-in 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes artifact-fade-in {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.artifact-preview .ap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid oklch(45% 0.02 70 / 0.30);
  font-size: 12.5px;
}
.artifact-preview .ap-name {
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.artifact-preview .ap-open {
  color: oklch(78% 0.14 220);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 6px;
  background: oklch(40% 0.06 220 / 0.18);
  font-size: 12px;
  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.artifact-preview .ap-open:hover {
  background: oklch(45% 0.08 220 / 0.30);
}

.artifact-preview .ap-image {
  max-width: 100%;
  display: block;
  background: oklch(20% 0 0 / 0.4);
}
.artifact-preview .ap-frame {
  width: 100%;
  height: 480px;
  border: 0;
  background: oklch(98% 0 0);
}
.artifact-preview .ap-audio,
.artifact-preview .ap-video {
  width: 100%;
  display: block;
}
.artifact-preview .ap-tag {
  padding: 14px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--ink-mute);
  background: oklch(22% 0 0 / 0.4);
}

@media (max-width: 600px) {
  .artifact-preview .ap-frame { height: 360px; }
}

/* (Round-4) Plan checklist for plan_complex_task */
.plan-checklist {
  align-self: flex-start;
  background: oklch(26% 0.01 60 / 0.55);
  border: 1px solid oklch(72% 0.18 75 / 0.4);
  border-inline-start: 3px solid oklch(72% 0.18 75);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  max-width: 92%;
  margin: 4px 0;
}
.plan-title {
  font-weight: 700;
  color: oklch(85% 0.05 75);
  margin-bottom: 6px;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.plan-step {
  padding: 3px 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--ink-soft);
}
.plan-step.done { color: oklch(78% 0.16 145); }
.plan-step.failed { color: oklch(72% 0.18 25); }
.plan-step.pending { opacity: 0.6; }

.composer {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  align-items: flex-end; /* keep send button anchored to the bottom of a growing textarea */
}

/* (v2.5.10) Textarea instead of single-line input so users can SEE what
 * they're typing across multiple lines. Auto-grow logic in app.js sets
 * `height` dynamically; CSS keeps the rest of the styling consistent. */
#chat-input {
  flex: 1;
  padding: var(--sp-4, 14px) var(--sp-5, 18px);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  font-family: inherit;
  font-size: var(--fs-base, 15px);
  line-height: 1.5;
  background: var(--bg-card, #fff);
  outline: none;
  transition: border var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), height 120ms cubic-bezier(0.4, 0, 0.2, 1);
  resize: none; /* JS handles sizing — disable manual handle */
  min-height: 48px;
  max-height: 220px; /* hard ceiling matches MAX_AUTOGROW_LINES */
  overflow-y: hidden; /* JS toggles to auto when content exceeds max-height */
  white-space: pre-wrap;
  word-wrap: break-word;
}

#chat-input:focus {
  border-color: var(--gold-600);
  box-shadow: 0 0 0 3px rgba(212, 184, 82, 0.18);
}

#chat-send, .btn-primary {
  background: var(--ink-900, var(--ink));
  color: var(--sand-100, white);
  border: none;
  padding: var(--sp-3, 12px) var(--sp-6, 24px);
  border-radius: var(--r-md, 12px);
  font-family: inherit;
  font-size: var(--fs-base, 15px);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform 50ms ease, box-shadow var(--t-fast) var(--ease);
  box-shadow: var(--sh-sm);
}
#chat-send:hover, .btn-primary:hover { background: var(--ink-800); box-shadow: var(--sh-md); }
#chat-send:active, .btn-primary:active { transform: translateY(1px); }

#chat-send:hover, .btn-primary:hover { background: var(--accent); }
#chat-send:active, .btn-primary:active { transform: translateY(1px); }
#chat-send:disabled { background: var(--ink-mute); cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 12px 24px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}

.btn-ghost:hover { background: var(--sand-deep); }

/* ─── Conversations (ActivityFeed pattern) ─────────────────────────── */
.conv-list {
  background: var(--bg-card, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.conv-row {
  padding: var(--sp-4, 14px) var(--sp-5, 18px);
  border-bottom: 1px solid var(--line-subtle, var(--line));
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: var(--sp-3, 12px);
  align-items: center;
  cursor: pointer;
  transition: background var(--t-fast, 150ms) var(--ease, ease);
}

.conv-row:last-child { border-bottom: none; }
.conv-row:hover { background: var(--sand-50, var(--sand)); }

.conv-row::before {
  content: '';
  width: 36px; height: 36px;
  border-radius: var(--r-sm, 6px);
  background: linear-gradient(135deg, var(--gold-100) 0%, var(--bronze-100) 100%);
  background-image: linear-gradient(135deg, var(--gold-100) 0%, var(--bronze-100) 100%);
}

.conv-row .name { font-weight: 600; color: var(--ink-900); font-size: var(--fs-sm, 14px); }
.conv-row .preview { color: var(--ink-600); font-size: var(--fs-sm, 14px); margin-top: 2px; }
.conv-row .meta {
  color: var(--ink-500);
  font-size: var(--fs-xs, 12px);
  text-align: start;
  font-family: var(--font-mono, monospace);
}

.empty {
  padding: var(--sp-10, 40px) var(--sp-5, 20px);
  text-align: center;
  color: var(--ink-500);
  font-size: var(--fs-sm, 14px);
}

/* ─── Graph stats (StatsCard pattern, matched to KPI grid) ─────────── */
.graph-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4, 12px);
  margin-bottom: var(--sp-4, 16px);
}

.stat {
  position: relative;
  overflow: hidden;
  background: var(--bg-card, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  padding: var(--sp-5, 18px);
  text-align: center;
  box-shadow: var(--sh-sm);
  transition: all var(--t-base, 200ms) var(--ease, ease);
}
.stat:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }
.stat::before {
  content: '';
  position: absolute;
  top: -16px; right: -16px;
  width: 90px; height: 90px;
  background: radial-gradient(circle, var(--gold-600) 0%, transparent 65%);
  opacity: 0.05;
  pointer-events: none;
}

.stat .num {
  font-size: var(--fs-3xl, 28px);
  font-weight: 700;
  color: var(--ink-900);
  font-family: var(--font-sans, var(--font-en));
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stat .lbl {
  font-size: var(--fs-xs, 12px);
  color: var(--ink-600);
  margin-top: var(--sp-1, 4px);
  font-weight: 500;
}

/* Kind filter — chips above the graph for skill/cron/policy/tool/conversation isolation */
.kind-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2, 8px);
  margin: 0 0 var(--sp-3, 12px);
  padding: var(--sp-2, 8px);
  background: var(--bg-card, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  box-shadow: var(--sh-sm);
}
.kind-chip {
  background: var(--sand-50, transparent);
  border: 1px solid var(--line);
  color: var(--ink-700);
  padding: 6px 12px;
  border-radius: var(--r-full, 9999px);
  font-family: inherit;
  font-size: var(--fs-sm, 14px);
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--t-fast) var(--ease);
}
.kind-chip:hover { background: var(--sand-200); border-color: var(--line-strong); }
.kind-chip.active {
  background: var(--ink-900);
  color: var(--sand-100);
  border-color: var(--ink-900);
}
.kind-chip .chip-count {
  background: rgba(255,255,255,0.18);
  padding: 1px 7px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.kind-chip:not(.active) .chip-count {
  background: var(--gold-100);
  color: var(--gold-800);
}

.graph-canvas-wrap {
  background: #0e1218;
  border: 1px solid #1a212a;
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

/* Subtle starfield gradient — looks like a neural-net constellation */
.graph-canvas-wrap::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(ellipse at 20% 20%, rgba(139, 90, 43, 0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 80%, rgba(46, 125, 79, 0.14) 0%, transparent 45%),
    linear-gradient(135deg, #0f141b 0%, #161c25 100%);
  pointer-events: none;
}

#graph-canvas {
  display: block;
  border-radius: var(--radius-sm);
  background: transparent;
  position: relative;
  z-index: 1;
}

.graph-node-label {
  font-family: var(--font-ar);
  font-size: 11px;
  fill: #e8ddc7;
  font-weight: 500;
  paint-order: stroke;
  stroke: #0e1218;
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
  user-select: none;
}

.graph-link {
  stroke: rgba(200, 155, 106, 0.45);
  stroke-width: 1.2;
}

.graph-node {
  stroke: #ffffff;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 6px rgba(255, 215, 150, 0.25));
}

.graph-empty {
  background: rgba(139, 90, 43, 0.05);
  border: 1px dashed var(--accent-soft);
  border-radius: var(--radius);
  padding: 36px 20px;
  text-align: center;
  color: var(--ink-soft);
  margin-top: 16px;
}

/* ─── WhatsApp pairing (ChannelStatus pattern) ─────────────────────── */
.qr-box {
  background: var(--bg-card, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  padding: var(--sp-6, 24px);
  text-align: center;
  box-shadow: var(--sh-sm);
  min-height: 220px;
  position: relative;
  overflow: hidden;
}
.qr-box::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, var(--gold-600) 0%, transparent 65%);
  opacity: 0.05;
  pointer-events: none;
}

.qr-status {
  margin: 0 0 var(--sp-4, 14px);
  color: var(--ink-700);
  font-size: var(--fs-sm, 14px);
  font-weight: 500;
}

.qr-art {
  font-family: var(--font-mono, 'JetBrains Mono', 'SF Mono', monospace);
  line-height: 1.0;
  font-size: 9px;
  margin: 0;
  color: var(--ink-900);
  white-space: pre;
  overflow: auto;
  display: inline-block;
  padding: var(--sp-3, 12px);
  background: var(--sand-50, transparent);
  border-radius: var(--r-sm, 6px);
}

/* Scannable QR PNG (v3.0) — replaces the ASCII art for camera-friendliness. */
.qr-image {
  display: block;
  margin: 0 auto;
  width: 280px;
  height: 280px;
  border-radius: var(--r-md);
  background: #fff;
  padding: 8px;
  box-shadow: var(--sh-md), 0 0 0 4px var(--mint-soft);
  animation: qr-pop var(--t-slow) var(--ease-out);
}
.qr-image.hidden { display: none; }

@keyframes qr-pop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

.qr-countdown {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  color: var(--emerald-700);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.qr-countdown.hidden { display: none; }

.qr-actions {
  margin-top: var(--sp-4, 14px);
  display: flex;
  gap: var(--sp-2, 8px);
  justify-content: center;
}

.wa-tips {
  background: var(--bg-card, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  padding: var(--sp-5, 20px);
  margin-top: var(--sp-4, 16px);
  box-shadow: var(--sh-sm);
}

.wa-tips h3 {
  margin: 0 0 var(--sp-3, 12px);
  font-size: var(--fs-base, 16px);
  font-weight: 600;
  color: var(--ink-900);
}
.wa-tips ol {
  margin: 0;
  padding-inline-start: var(--sp-5, 20px);
  color: var(--ink-700);
}
.wa-tips li {
  margin: var(--sp-2, 6px) 0;
  font-size: var(--fs-sm, 14px);
  line-height: 1.6;
}

/* ─── Footer ────────────────────────────────────────────────────────── */
footer {
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 10px 28px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-mute);
}

#status-dot.ok { color: var(--green); }
#status-dot.bad { color: #c0392b; }

.hidden { display: none !important; }

/* ─── Operations tab — agenda + journal + escalations ───────────────── */
.ops-header {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.ops-header h2 { margin: 0; }
.ops-header .hint { flex: 1; }
.btn-ghost {
  background: transparent; border: 1px solid var(--line); color: var(--ink-soft);
  padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit;
}
.btn-ghost:hover { background: var(--sand-deep); }
.btn-sm { padding: 4px 10px; font-size: 13px; }

.ops-section {
  background: var(--bg-card, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  padding: var(--sp-5, 20px) var(--sp-6, 24px);
  margin-bottom: var(--sp-4, 16px);
  box-shadow: var(--sh-sm, var(--shadow));
  transition: box-shadow var(--t-base) var(--ease);
}
.ops-section:hover { box-shadow: var(--sh); }
.ops-section h3 {
  margin: 0 0 var(--sp-4, 16px);
  font-size: var(--fs-base, 16px);
  font-weight: 600;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  letter-spacing: -0.01em;
}
.ops-section .count {
  background: var(--gold-600, var(--accent));
  color: #fff;
  padding: 2px 9px;
  border-radius: var(--r-full, 12px);
  font-size: var(--fs-xs, 12px);
  font-weight: 600;
  font-family: var(--font-sans, var(--font-en));
}

.tab-badge {
  background: #c0392b; color: #fff; padding: 1px 7px; border-radius: 10px;
  font-size: 11px; margin-right: 4px;
}

/* ─── KPI grid (StatsCard pattern from OpenClaw, Muassis palette) ────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4, 16px);
}
.kpi {
  position: relative;
  overflow: hidden;
  background: var(--bg-card, #fff);
  padding: var(--sp-5, 20px) var(--sp-5, 20px) var(--sp-4, 16px);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  box-shadow: var(--sh-sm);
  transition: all var(--t-base, 200ms) var(--ease, ease);
}
.kpi:hover { box-shadow: var(--sh-md); border-color: var(--line-strong); transform: translateY(-1px); }
/* Gold radial watermark — premium signature */
.kpi::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 110px; height: 110px;
  background: radial-gradient(circle, var(--gold-600, #10b981) 0%, transparent 65%);
  opacity: 0.06;
  pointer-events: none;
}
.kpi .num {
  font-size: var(--fs-3xl, 30px);
  font-weight: 700;
  color: var(--ink-900);
  font-family: var(--font-sans, var(--font-en));
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.kpi .lbl {
  font-size: var(--fs-xs, 12px);
  color: var(--ink-600);
  margin-top: var(--sp-2, 8px);
  font-weight: 500;
}
.kpi .trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 7px;
  border-radius: var(--r-full, 9999px);
  font-size: 10px;
  font-weight: 600;
  margin-top: 4px;
}
.kpi .trend.up { background: var(--success-light); color: var(--success-dark); }
.kpi .trend.down { background: var(--error-light); color: var(--error-dark); }

.esc-list { display: flex; flex-direction: column; gap: 10px; }
.esc-card {
  border-right: 4px solid var(--accent-soft);
  background: var(--sand); padding: 14px 18px; border-radius: var(--radius-sm);
}
.esc-card.risk-high    { border-right-color: #d97706; background: #fff7ed; }
.esc-card.risk-critical { border-right-color: #c0392b; background: #fef2f2; }
.esc-title { font-weight: 700; margin-bottom: 6px; }
.esc-context, .esc-rec, .esc-counter, .esc-alts {
  font-size: 14px; color: var(--ink-soft); margin: 4px 0;
}
.esc-counter { color: #92400e; }
.esc-alts ul { margin: 4px 0 0; padding-right: 20px; }
.esc-actions { display: flex; gap: 8px; margin-top: 10px; }

.goal-list { display: flex; flex-direction: column; gap: 10px; }
.goal-card {
  background: var(--sand); padding: 12px 16px; border-radius: var(--radius-sm);
}
.goal-title { font-weight: 600; }
.goal-desc { font-size: 13px; color: var(--ink-soft); margin: 4px 0; }
.goal-meta { font-size: 12px; color: var(--ink-mute); }
.goal-bar {
  height: 6px; background: var(--sand-deep); border-radius: 3px; margin-top: 8px; overflow: hidden;
}
.goal-bar-fill { height: 100%; background: var(--green); transition: width .4s ease; }
.goal-progress, .goal-deadline {
  font-size: 12px; color: var(--ink-mute); margin-top: 4px;
}

.journal-list {
  display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto;
}
.journal-row {
  display: grid; grid-template-columns: 60px 1fr 90px;
  font-size: 13px; padding: 6px 8px; border-bottom: 1px solid var(--sand-deep);
  align-items: center;
}
.journal-time { color: var(--ink-mute); font-family: var(--font-en); }
.journal-action code {
  background: var(--sand); padding: 1px 6px; border-radius: 4px; font-size: 12px;
}
.journal-outcome {
  text-align: center; font-size: 11px; padding: 2px 6px; border-radius: 8px;
  background: var(--sand-deep);
}
.outcome-success .journal-outcome { background: #dcfce7; color: #14532d; }
.outcome-failure .journal-outcome { background: #fee2e2; color: #7f1d1d; }
.outcome-escalated .journal-outcome { background: #fef3c7; color: #78350f; }
.outcome-declined .journal-outcome { background: #f3e8ff; color: #581c87; }

@media (max-width: 700px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .journal-row { grid-template-columns: 50px 1fr 70px; font-size: 12px; }
}

/* ─── Settings tab — model picker + provider catalog ────────────────── */
.active-model-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3, 12px) 0;
  border-bottom: 1px solid var(--line-subtle, var(--line));
  gap: var(--sp-4, 16px);
}
.active-model-row:last-child { border-bottom: none; }
.active-model-label {
  font-weight: 600;
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2, 8px);
}
.active-model-desc {
  font-size: var(--fs-xs, 12px);
  color: var(--ink-600);
  margin-top: var(--sp-1, 4px);
}
.active-model-current {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
}
.active-model-current code {
  background: var(--sand-50);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-800);
  border: 1px solid var(--line);
}
.tag-tenant, .tag-env, .tag-default {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 600;
  margin-inline-start: 6px;
}
.tag-tenant { background: var(--gold-100); color: var(--gold-800); }
.tag-env    { background: #d1ecf1; color: #0c5460; }
.tag-default { background: var(--sand-200); color: var(--ink-700); }

.providers-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4, 16px);
}
.provider-card {
  background: var(--sand-50);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4, 16px);
  transition: all var(--t-base) var(--ease);
}
.provider-card.available {
  border-color: var(--gold-300);
  background: linear-gradient(135deg, var(--gold-100) 0%, var(--bg-card) 100%);
}
.provider-card:hover { box-shadow: var(--sh-md); }
.provider-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--sp-3, 12px);
}
.provider-name {
  font-weight: 600;
  color: var(--ink-900);
  font-size: var(--fs-base);
}
.provider-meta {
  font-size: var(--fs-xs);
  color: var(--ink-600);
  margin-top: 2px;
}
.provider-status {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-full);
}
.provider-status.ok { background: var(--success-light); color: var(--success-dark); }
.provider-status.off { background: var(--ink-200); color: var(--ink-700); }
.provider-setup {
  display: block;
  font-size: var(--fs-sm);
  color: var(--gold-700);
  text-decoration: underline;
  margin-bottom: var(--sp-2);
}
.provider-models {
  margin: var(--sp-2, 8px) 0 0;
  padding-inline-start: 0;
  list-style: none;
}
.provider-models li {
  padding: var(--sp-2, 8px) 0;
  border-bottom: 1px dashed var(--line-subtle);
  font-size: var(--fs-sm);
}
.provider-models li:last-child { border-bottom: none; }
.provider-models code {
  background: var(--sand-100);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.model-meta {
  display: block;
  font-size: 11px;
  color: var(--ink-500);
  margin-top: 2px;
}

/* Connect-guide cards */
.guide-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-3, 12px);
}
.guide-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  padding: var(--sp-4, 14px);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: all var(--t-base) var(--ease);
}
.guide-link:hover {
  border-color: var(--gold-400);
  background: var(--gold-100);
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
}
.guide-icon {
  font-size: 24px;
  line-height: 1;
}
.guide-link strong {
  display: block;
  color: var(--ink-900);
  font-size: var(--fs-sm);
}
.guide-link small {
  color: var(--ink-600);
  font-size: var(--fs-xs);
  display: block;
  margin-top: 2px;
}

/* ─── Saudi context strip — top of page ─────────────────────────────── */
.saudi-strip {
  display: flex; gap: 16px; padding: 8px 28px;
  background: linear-gradient(90deg, var(--ink) 0%, #2c2f34 100%);
  color: #fdf6e3; font-size: 13px; font-family: var(--font-ar);
  flex-wrap: wrap; align-items: center;
  border-bottom: 1px solid var(--accent);
}
.ss-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 12px;
  background: rgba(255, 215, 0, 0.08);
  color: #fdf6e3;
}

/* ─── Welcome card — first-time onboarding checklist ─────────────────── */
.welcome-card {
  margin: 16px 28px;
  background: linear-gradient(135deg, #ecfdf5 0%, #fff 100%);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: var(--shadow);
  position: relative;
}
.welcome-header {
  display: flex; justify-content: space-between; align-items: center;
}
.welcome-header h3 { margin: 0; font-size: 18px; color: var(--accent); }
.welcome-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 20px; color: var(--ink-mute); padding: 0 8px;
}
.welcome-close:hover { color: var(--ink); }
.welcome-sub { color: var(--ink-soft); font-size: 14px; margin: 8px 0 12px; }
.welcome-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.welcome-list li { font-size: 14px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.welcome-list li:last-child { border-bottom: none; }

/* Mobile-first improvements */
@media (max-width: 700px) {
  .saudi-strip { padding: 6px 12px; gap: 8px; font-size: 11px; }
  .ss-item { padding: 1px 6px; }
  .welcome-card { margin: 10px 12px; padding: 14px 16px; }
  .ops-section { padding: 12px 14px; }
  .esc-card { padding: 10px 12px; }
  .esc-actions { flex-wrap: wrap; }
  .esc-actions button { flex: 1 1 auto; min-height: 44px; }
  .composer { gap: 4px; }
  #chat-input { min-height: 44px; }
  #chat-send { min-height: 44px; min-width: 64px; }
  .tab { min-height: 44px; }
  .topbar { flex-wrap: wrap; gap: 8px; }
  .tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}

/* ─── Graph polish — tooltip + focus/fade + cursor ─────────────────── */
#graph-canvas { cursor: grab; }
#graph-canvas:active { cursor: grabbing; }
.graph-canvas-wrap { background: #0A0F14; border-radius: var(--radius); padding: 10px; }

.graph-node-group { transition: opacity 200ms ease; cursor: pointer; }
.graph-node-group .graph-node {
  stroke: rgba(255,255,255,0.5); stroke-width: 1.2;
  transition: stroke-width 150ms ease, r 150ms ease;
}
.graph-node-group:hover .graph-node {
  stroke-width: 3; stroke: #fff;
}
.graph-node-group.focused .graph-node {
  stroke-width: 3.5; stroke: #fff;
}
.graph-node-group.faded { opacity: 0.18; }
.graph-node-label {
  fill: #fdf6e3; font-size: 11px; font-family: var(--font-ar);
  pointer-events: none;
}
.graph-link {
  stroke: rgba(255,255,255,0.18); stroke-width: 1;
  transition: opacity 200ms ease, stroke 200ms ease;
}
.graph-link.faded { opacity: 0.06; }

#graph-tooltip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: #0A0F14; color: #ffffff;
  border: 1px solid #4a423a; border-radius: 10px;
  padding: 12px 14px; max-width: 320px;
  font-size: 13px; line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  font-family: var(--font-ar);
}
#graph-tooltip .tt-name {
  font-weight: 700; font-size: 15px; margin-bottom: 2px;
  color: #fdf6e3;
}
#graph-tooltip .tt-type {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 600; margin-bottom: 8px;
}
#graph-tooltip .tt-summary {
  color: #cbd5e1; font-size: 12px;
  margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px solid #2c2f34;
}
#graph-tooltip .tt-meta {
  display: flex; gap: 14px; color: #94a3b8; font-size: 11px; margin-bottom: 6px;
}
#graph-tooltip .tt-props { font-size: 11px; }
#graph-tooltip .tt-row {
  display: flex; gap: 8px; padding: 2px 0;
  border-bottom: 1px dotted #3a3a3a;
}
#graph-tooltip .tt-row:last-child { border-bottom: none; }
#graph-tooltip .tt-key { color: #94a3b8; min-width: 80px; }
#graph-tooltip .tt-val { color: #fdf6e3; flex: 1; word-break: break-word; }
#graph-tooltip .tt-hint {
  color: #6b7280; font-size: 10px; margin-top: 8px; text-align: center;
}

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .topbar { padding: 12px 16px; }
  main { padding: 16px; }
  .graph-stats { grid-template-columns: repeat(2, 1fr); }
  .tab { padding: 8px 12px; font-size: 13px; }
  #chat-input, #chat-send { font-size: 16px; }
}

/* ─── Channel pairing (WhatsApp + Telegram) ──────────────────────── */
.tab-status {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-inline-start: 6px; background: transparent; vertical-align: middle;
  transition: background 180ms ease, box-shadow 180ms ease;
}
.tab-status[data-status="connected"] { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.6); }
.tab-status[data-status="connecting"] { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.5); animation: pulse-amber 1.4s ease-in-out infinite; }
.tab-status[data-status="error"] { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.6); }
@keyframes pulse-amber { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.channel-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-bottom: 8px;
}
.channel-header h2 { margin: 0; }
.channel-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  font-size: 13px; font-weight: 500;
}
.channel-status .dot {
  width: 10px; height: 10px; border-radius: 50%; background: #6b7280;
}
.channel-status[data-status="connected"] { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.4); color: #22c55e; }
.channel-status[data-status="connected"] .dot { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.6); }
.channel-status[data-status="connecting"] { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.4); color: #f59e0b; }
.channel-status[data-status="connecting"] .dot { background: #f59e0b; animation: pulse-amber 1.4s ease-in-out infinite; }
.channel-status[data-status="error"] { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); color: #ef4444; }
.channel-status[data-status="error"] .dot { background: #ef4444; }

.channel-info {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 16px; margin: 16px 0;
}
.channel-info .info-row {
  display: flex; gap: 12px; padding: 6px 0;
  border-bottom: 1px dotted rgba(255,255,255,0.08); font-size: 14px;
}
.channel-info .info-row:last-child { border-bottom: none; }
.channel-info .info-label { color: #94a3b8; min-width: 100px; }
.channel-info code { background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 6px; font-size: 12px; }
.channel-info a { color: #60a5fa; text-decoration: none; }
.channel-info a:hover { text-decoration: underline; }

.channel-connect {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 18px; margin: 16px 0;
}
.channel-connect label { display: block; font-size: 13px; color: #cbd5e1; margin-bottom: 8px; font-weight: 500; }
.channel-connect input[type="password"], .channel-connect input[type="text"] {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; color: var(--text); font-family: 'JetBrains Mono', monospace;
  font-size: 13px; transition: border-color 160ms ease;
}
.channel-connect input:focus { outline: none; border-color: var(--accent, #fdf6e3); }
.channel-connect .form-actions { margin-top: 12px; display: flex; gap: 8px; }
.channel-connect .form-msg { margin-top: 10px; font-size: 13px; min-height: 18px; }
.channel-connect .form-msg.error { color: #ef4444; }
.channel-connect .form-msg.success { color: #22c55e; }

/* ─── v2.1.1 sidebar layout (OpenClaw-inspired, Muassis-branded) ──── */

body {
  display: grid;
  /* RTL: sidebar visually on the right, main on the left */
  grid-template-columns: 1fr 260px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "saudi-strip sidebar"
    "main        sidebar"
    "footer      sidebar";
  min-height: 100vh;
  margin: 0;
}

.saudi-strip { grid-area: saudi-strip; }
.welcome-card { grid-area: main; align-self: start; max-width: 720px; margin: 24px auto 0; }
main { grid-area: main; padding: 24px 32px; max-width: none; }
footer { grid-area: footer; }

.sidebar {
  grid-area: sidebar;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(31, 27, 22, 0.96) 0%, rgba(20, 17, 14, 0.96) 100%);
  border-inline-start: 1px solid rgba(212, 175, 55, 0.18);
  padding: 20px 16px;
  box-sizing: border-box;
  z-index: 100;
  backdrop-filter: blur(12px);
}

.sidebar .brand {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 8px 16px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.12);
}
.sidebar .brand .logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #1a1410;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
}
.sidebar .brand h1 { font-size: 17px; margin: 0; color: #fdf6e3; font-weight: 700; }
.sidebar .brand .business { font-size: 11px; color: #94a3b8; margin: 2px 0 0; }

.sidebar nav.tabs {
  display: flex; flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
  padding-top: 4px;
}
.nav-section-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.8px; color: #6b7280;
  padding: 12px 12px 4px;
}
.nav-section-label:first-child { padding-top: 4px; }

.sidebar .tab {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px;
  background: transparent; border: 1px solid transparent;
  border-radius: 8px; color: #cbd5e1;
  font-size: 14px; font-weight: 500; font-family: inherit;
  cursor: pointer; text-align: start;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.sidebar .tab:hover {
  background: rgba(212, 175, 55, 0.06);
  color: #fdf6e3;
}
.sidebar .tab.active {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.3);
  color: #fdf6e3;
  box-shadow: inset 3px 0 0 #059669;
}
[dir="rtl"] .sidebar .tab.active { box-shadow: inset -3px 0 0 #059669; }
.sidebar .nav-icon { font-size: 16px; line-height: 1; min-width: 20px; text-align: center; }
.sidebar .nav-label { flex: 1; }
.sidebar .tab-status { width: 8px; height: 8px; border-radius: 50%; background: transparent; }

.sidebar-footer {
  border-top: 1px solid rgba(212, 175, 55, 0.12);
  padding: 12px 4px 0;
  margin-top: 8px;
}
.sidebar-footer .connection-pill {
  width: 100%; justify-content: flex-start;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 8px 12px;
  display: inline-flex; align-items: center; gap: 8px;
  color: #cbd5e1; font-size: 12px; cursor: default;
}
.sidebar-footer .version-tag {
  font-size: 10px; color: #6b7280;
  margin: 8px 4px 0; text-align: center;
}

/* Hide the old top-bar layout completely; sidebar replaces it */
.topbar:not(.topbar-mobile) { display: none; }
.topbar-mobile { display: none; }

@media (max-width: 900px) {
  body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "saudi-strip"
      "sidebar"
      "main"
      "footer";
  }
  .sidebar {
    position: static; height: auto; flex-direction: column;
    border-inline-start: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
  }
  .sidebar nav.tabs {
    flex-direction: row; flex-wrap: wrap; gap: 6px; overflow-x: auto;
  }
  .nav-section-label { display: none; }
  .sidebar .tab { width: auto; flex: 0 0 auto; padding: 8px 12px; }
  .sidebar-footer { display: none; }
  main { padding: 16px; }
}

/* ─── v2.1.2 visual polish (Impeccable + Taste + UI-UX Pro Max bundled skills) ──
   • OKLCH color refinements (perceptual uniformity)
   • SIZE > WEIGHT > COLOR hierarchy (Taste rule)
   • No purple gradients, no decorative drop shadows (Impeccable rules 6, 18)
   • OpenClaw structural restraint with Muassis gold-on-charcoal identity
*/

:root {
  /* Al Moasis brand palette — Emerald + Charcoal (v3.0).
     The --m-* names are kept so legacy selectors below resolve, but the
     values now point at the brand kit colors. Charcoal sidebar with
     emerald accents, mint surfaces, no gold anywhere. */
  --m-gold:        #059669;              /* primary brand = Deep Emerald */
  --m-gold-strong: #047857;              /* Emerald Green */
  --m-gold-soft:   #10b981;              /* lighter emerald for hovers */
  --m-charcoal:    #0A0F14;              /* primary charcoal */
  --m-charcoal-2:  #1e293b;              /* one shade lighter */
  --m-ink:         #f8fafc;              /* near-white text on dark surfaces */
  --m-ink-soft:    #94a3b8;              /* subtitle text on dark surfaces */
  --m-line:        rgba(255,255,255,0.10);
  --m-line-soft:   rgba(255,255,255,0.06);
  --m-success:     #059669;
  --m-amber:       #f59e0b;
  --m-error:       #dc2626;
}

/* Sidebar: tighter dark surface, gold-accent active state, no shadow slop */
.sidebar {
  background: linear-gradient(180deg, var(--m-charcoal) 0%, var(--m-charcoal-2) 100%);
  border-inline-start: 1px solid var(--m-line-soft);
  padding: 18px 14px;
}
.sidebar .brand {
  border-bottom: 1px solid var(--m-line-soft);
  padding: 4px 6px 14px;
  margin-bottom: 6px;
}
.sidebar .brand .logo {
  background: var(--m-gold);
  color: var(--m-charcoal);
  border-radius: 9px;
  width: 36px; height: 36px;
  /* No shadow — Impeccable rule 18 forbids decorative drop shadows on flat icons */
  box-shadow: none;
}
.sidebar .brand h1 {
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--m-ink);
}
.sidebar .brand .business {
  font-size: 11px;
  color: var(--m-ink-soft);
  margin-top: 1px;
}
.nav-section-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--m-ink-soft);
  padding: 14px 10px 6px;
  opacity: 0.6;
}
.sidebar .tab {
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13.5px;
  /* Hierarchy: SIZE same, WEIGHT same — color shifts only for state.
     Active gets a left/right gold bar (RTL-aware) and slight tint. */
  color: var(--m-ink-soft);
  transition: background 120ms ease, color 120ms ease;
}
.sidebar .tab:hover {
  background: oklch(22% 0.01 78);
  color: var(--m-ink);
}
.sidebar .tab.active {
  background: oklch(28% 0.04 80);
  color: var(--m-ink);
  box-shadow: inset 3px 0 0 var(--m-gold);
  font-weight: 600;
}
[dir="rtl"] .sidebar .tab.active { box-shadow: inset -3px 0 0 var(--m-gold); }

/* Connection pill in footer — calmer, gold dot on connected */
.sidebar-footer .connection-pill {
  background: oklch(20% 0.005 78);
  border: 1px solid var(--m-line-soft);
  color: var(--m-ink-soft);
  font-size: 11.5px;
  padding: 7px 11px;
}
.sidebar-footer .connection-pill .dot {
  width: 7px; height: 7px;
}
.sidebar-footer .connection-pill[data-status="connected"] .dot { background: var(--m-success); }
.sidebar-footer .version-tag {
  color: var(--m-ink-soft); opacity: 0.5;
  font-size: 10px; letter-spacing: 0.5px;
}

/* Main content: warmer paper surface, calmer card edges */
main { background: oklch(96% 0.012 78); }

/* Welcome card: cleaner shadow, rounded card, gold left bar */
.welcome-card {
  background: var(--m-ink);
  border: 1px solid oklch(90% 0.02 78);
  border-radius: 14px;
  box-shadow: 0 1px 2px oklch(20% 0.01 78 / 0.04), 0 4px 16px oklch(20% 0.01 78 / 0.04);
  border-inline-start: 3px solid var(--m-gold);
  padding: 18px 22px;
}

/* Chat: lift the bubble subtly, no drop-shadow slop */
.bubble.assistant {
  background: var(--m-ink);
  border: 1px solid oklch(90% 0.02 78);
  border-radius: 14px;
  padding: 14px 18px;
}
.composer input,
.composer #chat-input {
  background: var(--m-ink);
  border: 1px solid oklch(86% 0.02 78);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14.5px;
  transition: border-color 140ms ease;
}
.composer input:focus { border-color: var(--m-gold); outline: none; box-shadow: 0 0 0 3px oklch(78% 0.13 80 / 0.18); }
.composer button#chat-send {
  background: var(--m-charcoal);
  color: var(--m-ink);
  border-radius: 12px;
  padding: 11px 22px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  transition: background 140ms ease, transform 100ms ease;
}
.composer button#chat-send:hover { background: var(--m-charcoal-2); }
.composer button#chat-send:active { transform: translateY(1px); }

/* Chat header: tighter type, real hierarchy via SIZE not color */
.chat-header h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.chat-header .hint {
  font-size: 13px;
  color: var(--m-ink-soft);
}

/* Footer: same as sidebar — quiet, monochrome */
footer {
  border-top: 1px solid oklch(90% 0.015 78);
  color: oklch(55% 0.01 78);
  font-size: 11.5px;
}

/* Saudi strip: tighten the spacing, single line look */
.saudi-strip {
  background: var(--m-charcoal);
  color: var(--m-ink-soft);
  font-size: 11.5px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--m-line-soft);
  display: flex;
  gap: 18px;
  justify-content: flex-end;
}
.saudi-strip .ss-item { color: var(--m-ink); }

/* ─── BYOK · Bring Your Own Key (v3.0 Al Moasis) ─────────────────── */
.byok-section { margin-top: var(--sp-8); }

.byok-intro {
  background: var(--mint-tint);
  border: 1px solid var(--emerald-200);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-800);
}
.byok-intro p { margin: 0 0 var(--sp-2); }
.byok-intro p:last-child { margin-bottom: 0; }
.byok-intro strong { color: var(--emerald-700); }

.byok-keys { display: flex; flex-direction: column; gap: var(--sp-3); }

.byok-row {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  transition: border-color var(--t-base) var(--ease);
}
.byok-row:hover { border-color: var(--emerald-300); }

.byok-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.byok-row-title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.byok-row-title strong {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  color: var(--ink-950);
}

.pill-set, .pill-unset {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-weight: 600;
}
.pill-set {
  background: var(--mint-soft);
  color: var(--emerald-700);
}
.pill-unset {
  background: var(--ink-100);
  color: var(--ink-500);
}

.badge-rec {
  display: inline-block;
  background: linear-gradient(135deg, var(--emerald-600), var(--emerald-700));
  color: white;
  padding: 2px 9px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  margin-right: var(--sp-1);
}

.byok-get-key {
  font-size: var(--fs-xs);
  color: var(--emerald-700);
  text-decoration: none;
  font-weight: 600;
  font-family: var(--font-heading);
}
.byok-get-key:hover { text-decoration: underline; }

.byok-explain {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-600);
  line-height: 1.6;
}

.byok-row-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.byok-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  background: var(--ink-50);
  transition: border-color var(--t-fast) var(--ease);
}
.byok-input:focus {
  outline: none;
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 3px var(--mint-soft);
  background: #fff;
}

.byok-msg {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  color: var(--emerald-700);
  font-weight: 500;
}

/* ─── License activation overlay (v3.0) ──────────────────────────── */
.license-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 20, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
}
.license-overlay[hidden] { display: none; }

.license-card {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg), 0 0 0 1px var(--emerald-200);
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  max-width: 460px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  animation: licCardIn var(--t-slow) var(--ease-out);
}
@keyframes licCardIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.license-card h2 {
  font-family: var(--font-ar);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--ink-950);
  margin: var(--sp-2) 0 0;
}
.license-tag {
  margin: 0;
  color: var(--ink-600);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.license-card input[type="text"] {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  letter-spacing: 0.05em;
  text-align: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-50);
  transition: all var(--t-fast) var(--ease);
  margin-top: var(--sp-2);
}
.license-card input[type="text"]:focus {
  outline: none;
  border-color: var(--emerald-500);
  background: #fff;
  box-shadow: 0 0 0 4px var(--mint-soft);
}

.license-card .btn-primary {
  width: 100%;
  padding: 14px 20px;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 600;
  background: linear-gradient(135deg, var(--emerald-600), var(--emerald-700));
  color: white;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.license-card .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-md), var(--sh-glow-emerald);
}
.license-card .btn-primary:disabled { opacity: 0.6; cursor: progress; }

.license-msg {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--emerald-700);
  font-weight: 500;
}
.license-msg[hidden] { display: none; }

.license-fp {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-family: var(--font-heading);
}
.license-fp code {
  font-family: var(--font-mono);
  background: var(--ink-100);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  color: var(--ink-700);
}

.license-help {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-600);
}
.license-help a {
  color: var(--emerald-700);
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-heading);
}
.license-help a:hover { text-decoration: underline; }

/* ─── Onboarding wizard (first-launch, full-screen) ───────────────── */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at top, #ecfdf5 0%, #ffffff 60%);
  z-index: 2100;
  overflow-y: auto;
  display: grid;
  place-items: start center;
  padding: 48px 24px;
}
.onboarding-overlay[hidden] { display: none; }

.onboarding-shell {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(10, 15, 20, 0.08), 0 0 0 1px var(--emerald-100, #d1fae5);
  max-width: 720px;
  width: 100%;
  padding: 40px 44px 32px;
  animation: onbIn 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes onbIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.onboarding-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ink-100, #f1f5f9);
  margin-bottom: 28px;
}
.onboarding-header img {
  border-radius: 12px;
  flex-shrink: 0;
}
.onboarding-header h1 {
  margin: 0;
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: 24px;
  color: #0A0F14;
}
.onboarding-header .latin {
  margin: 4px 0 0;
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #047857;
  font-weight: 600;
}

/* Step indicator */
.onboarding-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  gap: 8px;
  font-family: var(--font-ar);
}
.onboarding-steps li {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  background: #f1f5f9;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  transition: all 200ms ease;
}
.onboarding-steps li.active {
  background: linear-gradient(135deg, #059669, #047857);
  color: white;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}
.onboarding-steps li.done {
  background: #d1fae5;
  color: #047857;
}

/* Step content */
.onb-step { display: none; }
.onb-step.active { display: block; animation: stepIn 350ms ease; }
@keyframes stepIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }

.onb-step h2 {
  margin: 0 0 8px;
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: 20px;
  color: #0A0F14;
}
.onb-step .hint {
  margin: 0 0 24px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
}

.onb-step label {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-ar);
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}
.onb-step .req { color: #dc2626; font-weight: 700; }

.onb-step input[type="text"],
.onb-step input[type="tel"],
.onb-step select {
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  background: #ffffff;
  transition: all 150ms ease;
  font-weight: 400;
}
.onb-step input:focus,
.onb-step select:focus {
  outline: none;
  border-color: #059669;
  box-shadow: 0 0 0 4px #d1fae5;
}
.onb-step small {
  display: block;
  margin-top: 6px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

/* Industry grid */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.industry-card {
  padding: 14px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  transition: all 150ms ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.industry-card:hover {
  border-color: #10b981;
  transform: translateY(-1px);
}
.industry-card.selected {
  border-color: #059669;
  background: #ecfdf5;
  box-shadow: 0 0 0 3px #d1fae5;
}
.industry-card .icon { font-size: 22px; line-height: 1; }
.industry-card .name {
  font-weight: 600;
  font-size: 14px;
  color: #0A0F14;
}
.industry-card .name-ar { font-size: 13px; color: #475569; }

/* Bottom nav */
.onb-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #f1f5f9;
}
.onb-nav button {
  font-family: var(--font-ar);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 150ms ease;
}
.onb-nav .btn-primary {
  background: linear-gradient(135deg, #059669, #047857);
  color: white;
  margin-inline-start: auto;
}
.onb-nav .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(5, 150, 105, 0.25); }
.onb-nav .btn-primary:disabled { opacity: 0.5; cursor: progress; }
.onb-nav .btn-ghost {
  background: transparent;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.onb-nav .btn-ghost:hover { background: #f8fafc; }

.onb-msg {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
}
.onb-msg.error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.onb-msg.success { background: #d1fae5; color: #047857; border: 1px solid #a7f3d0; }
.onb-msg[hidden] { display: none; }

.onb-finish-summary {
  margin-top: 20px;
  padding: 16px;
  background: #ecfdf5;
  border-radius: 10px;
  font-size: 13px;
  color: #047857;
  line-height: 1.7;
}

.onboarding-footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
  font-family: var(--font-ar);
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
}
.onboarding-footer .dot { margin: 0 8px; }

/* ════════════════════════════════════════════════════════════════════
   v3 Dashboard layout — 3-column per Saudi-Made mockup.
   Append-only so existing tab CSS keeps working on non-chat tabs.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --v3-sidebar-bg: #0E1622;
  --v3-sidebar-bg-2: #131C2A;
  --v3-sidebar-text: #E6ECF3;
  --v3-sidebar-text-muted: #8995A8;
  --v3-sidebar-divider: rgba(255,255,255,0.06);
  /* Surfaces: white app + light-gray panel background, neutral borders.
     Previous cream caused yellow cast vs. the mockup screenshot in dark
     mode; the user explicitly asked for white. */
  --v3-chat-bg: #FFFFFF;
  --v3-panel-bg: #F8FAFC;
  --v3-card-bg: #FFFFFF;
  --v3-card-border: #E5E7EB;
  --v3-pill-bg: #FFFFFF;
  --v3-pill-border: #E5E7EB;
  --v3-pill-text: #1F2937;
}

body {
  display: grid !important;
  grid-template-columns: 320px 1fr 220px !important;
  grid-template-rows: auto 1fr auto !important;
  grid-template-areas:
    "context-panel saudi-strip sidebar"
    "context-panel main        sidebar"
    "context-panel footer      sidebar" !important;
  background: var(--v3-chat-bg);
  min-height: 100vh;
}
.context-panel { grid-area: context-panel; }
main { grid-area: main; }
footer { grid-area: footer; }
.sidebar { grid-area: sidebar; }

/* ── Sidebar (left visually in RTL) — clean dark navy per mockup ── */
.sidebar {
  background: linear-gradient(180deg, var(--v3-sidebar-bg) 0%, var(--v3-sidebar-bg-2) 100%) !important;
  border-inline-start: none !important;
  padding: 22px 14px !important;
  color: var(--v3-sidebar-text);
}
.sidebar .brand {
  border-bottom: 1px solid var(--v3-sidebar-divider) !important;
  padding-bottom: 18px !important;
}
.sidebar .brand .logo {
  background: transparent !important;
  box-shadow: none !important;
  width: 36px !important; height: 36px !important;
}
.sidebar .brand h1 {
  color: var(--v3-sidebar-text) !important;
  font-family: var(--font-heading);
  font-size: 18px !important;
  letter-spacing: 0.01em;
}
.sidebar .brand-latin {
  display: none; /* "Al Moasis" line repeats the brand mark; one is enough */
}
.sidebar .brand .business {
  color: var(--v3-sidebar-text-muted) !important;
  font-size: 12px !important;
}
.sidebar .nav-section-label {
  color: #5C6473 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.06em;
  padding: 16px 12px 6px !important;
}
.sidebar .tab {
  color: var(--v3-sidebar-text-muted) !important;
  font-size: 14.5px !important;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  border: none !important;
}
.sidebar .tab:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--v3-sidebar-text) !important;
}
.sidebar .tab.active {
  background: linear-gradient(135deg, var(--emerald-600) 0%, var(--emerald-700) 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px -6px rgba(5,150,105,0.5) !important;
  border: none !important;
}
[dir="rtl"] .sidebar .tab.active { box-shadow: 0 6px 16px -6px rgba(5,150,105,0.5) !important; }
.sidebar .nav-icon { font-size: 17px !important; min-width: 22px !important; }
.sidebar-footer {
  border-top: 1px solid var(--v3-sidebar-divider) !important;
  padding-top: 14px !important;
}
.sidebar .connection-pill {
  background: rgba(16,185,129,0.10) !important;
  color: var(--v3-sidebar-text) !important;
  border: 1px solid rgba(16,185,129,0.18) !important;
}
.sidebar .connection-pill .dot { background: var(--emerald-500) !important; box-shadow: 0 0 8px var(--emerald-500); }
.sidebar .version-tag { color: var(--v3-sidebar-text-muted) !important; font-size: 11px !important; }

/* ── Main column (chat) — clean white, content capped + centered ── */
main {
  padding: 26px 32px !important;
  background: var(--v3-chat-bg);
  display: flex !important;
  justify-content: center !important;
}
/* Cap content so fullscreen doesn't smear chat across 1500px. The cap is
   wide enough for inline cards + composer to breathe but narrow enough
   that conversation stays readable. Each panel becomes a centered column
   inside main. */
main > .panel {
  width: 100%;
  max-width: 920px;
}
/* Chat panel itself uses a flex column so chat-stream grows, composer
   sticks at the bottom. Without this the empty space appears as a
   white void above the composer when the window is tall. */
/* Only flex when this is the ACTIVE tab. The previous rule applied
   display:flex unconditionally with !important, which beat the tab
   system's `.panel:not(.active) { display: none }` rule — so the chat
   panel stayed mounted next to other tabs (WhatsApp QR, Memory, etc.)
   and made them look cramped side-by-side. */
.panel-chat-v3.active {
  display: flex !important;
  flex-direction: column;
  height: calc(100vh - 60px);
}
.panel-chat-v3:not(.active) {
  display: none !important;
}
/* Stream grows naturally; composer locks to bottom; no empty white void. */
.panel-chat-v3 .chat-stream {
  flex: 1 1 auto !important;
  overflow-y: auto;
  min-height: 0;
}

/* Chat header v3: title right, status pills left */
.chat-header-v3 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.chat-header-v3 .chat-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-950);
}
.chat-status-strip {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid var(--v3-pill-border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--ink-600);
  font-family: var(--font-ar);
  line-height: 1;
}
.status-pill .pill-icon { font-size: 12px; opacity: 0.8; }
.status-pill:hover { background: var(--v3-panel-bg); color: var(--ink-800); }
.panel-chat-v3 .chat-stream {
  background: transparent !important;
  padding: 8px 0 !important;
}
/* Legacy .bubble selectors (still used by some non-chat tabs) — neutralized
   inside the v3 chat panel since we render the new .message rows there. */
.panel-chat-v3 .bubble { all: unset; }

/* ── WhatsApp-style message rows (v3 chat) ─────────────────────────────
   Each row = avatar + content-hugging bubble + timestamp.
   - User (المالك): mint-tinted bubble, aligned to the start (left in RTL)
   - Assistant (المؤسس): white bubble, aligned to the end (right in RTL)
   - Subtle drop shadow + tail corner radius for premium feel
   - Hugs content via `width: fit-content` with max-width safety
   - Grouped messages (same speaker, <2min apart) collapse avatar so the
     chat doesn't feel choppy. */
.panel-chat-v3 .chat-stream {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 4px 8px !important;
  background: transparent !important;
}

/* Each row is just a flex container that aligns its bubble to one side.
   No avatars in a 1-on-1 conversation — WhatsApp doesn't show your own
   avatar on your own messages either. Avatars are kept in the DOM for
   future group-chat / multi-customer modes but hidden by default. */
.message {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}
.message-user      { justify-content: flex-start; }   /* "mine" = start side (RIGHT in RTL) */
.message-assistant { justify-content: flex-end;   }   /* "theirs" = end side (LEFT in RTL) */

/* Avatars hidden by default. Re-enable for group chats with a class
   `.chat-stream.show-avatars` on the parent. */
.message-avatar { display: none; }
.chat-stream.show-avatars .message-avatar {
  display: grid;
  width: 30px; height: 30px;
  border-radius: 50%;
  place-items: center;
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: 12px;
  color: white;
  flex-shrink: 0;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.chat-stream.show-avatars .message-user .message-avatar {
  background: linear-gradient(135deg, #475569 0%, #1F2937 100%);
}
.chat-stream.show-avatars .message-assistant .message-avatar {
  background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-700) 100%);
}

.message-bubble {
  width: fit-content;
  max-width: min(560px, 72%);
  padding: 9px 14px 7px;
  border-radius: 18px;
  font-family: var(--font-ar);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-900);
  word-wrap: break-word;
  overflow-wrap: break-word;
  position: relative;
  box-shadow: 0 1px 1.5px rgba(0,0,0,0.07);
  order: 0;
}
.message-user .message-bubble {
  background: #DCF8C6; /* WhatsApp-classic "mine" green */
  border-bottom-inline-start-radius: 4px; /* tail corner */
}
.message-assistant .message-bubble {
  background: #FFFFFF;
  border: 1px solid #ECECEC;
  border-bottom-inline-end-radius: 4px; /* tail on the assistant's side */
}

.message-text {
  white-space: pre-wrap;
  word-break: break-word;
}
.message-text p { margin: 0; }
.message-text p + p { margin-top: 4px; }
.message-text strong { font-weight: 700; }
.message-text code {
  background: rgba(0,0,0,0.05);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.message-text pre {
  background: var(--v3-panel-bg);
  border: 1px solid var(--v3-card-border);
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  font-size: 12px;
  margin: 6px 0;
}

.message-meta {
  font-size: 10.5px;
  color: var(--ink-400);
  margin-top: 3px;
  text-align: end;
  line-height: 1;
  user-select: none;
  font-variant-numeric: tabular-nums;
}

/* Group consecutive messages from the same speaker: hide avatar on all but
   the first in the run so the chat breathes vertically. The JS toggles the
   `message-grouped` class on consecutive same-speaker rows. */
.message.message-grouped .message-avatar { visibility: hidden; }
.message.message-grouped { margin-top: -3px; }

/* System / error bubble: small, centered, gray */
.message.system .message-bubble {
  background: var(--ink-100);
  border: 1px dashed var(--ink-300);
  color: var(--ink-600);
  font-size: 12.5px;
  font-style: italic;
}
.message.system .message-avatar { display: none; }
.message.system {
  grid-template-columns: 1fr;
  justify-self: center;
  max-width: 70%;
}
.message.system .message-bubble {
  border-radius: 12px;
}

/* ── Activity indicator (Claude-style minimal) ─────────────────────────
   Was a boxed pill with shimmer + border that looked off-brand. Replaced
   with Claude's signature: muted gray text + three pulsing dots, no
   chrome. Sits inline with messages, doesn't compete with bubbles. */
.panel-chat-v3 .activity-pill,
.panel-chat-v3 .chat-stream .activity-pill {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 4px !important;
  color: var(--ink-500) !important;
  font-family: var(--font-ar) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
  gap: 8px !important;
  align-self: flex-end !important;
  margin: 4px 4px 4px 0 !important;
  /* Kill the inherited shimmer + breathing animation */
  animation: none !important;
}
.panel-chat-v3 .activity-pill::before {
  /* Was a horizontal shimmer band — remove entirely. */
  content: none !important;
  display: none !important;
  background: none !important;
}
.panel-chat-v3 .activity-pill .ap-icon {
  display: none !important;
}
.panel-chat-v3 .activity-pill .ap-label {
  color: var(--ink-600) !important;
  font-weight: 500 !important;
}

/* Three dots, pulsing one at a time — Claude's "thinking" tell. Each dot
   fades in then back out 200ms after its neighbor, producing the gentle
   "•   •   •" cascade. Reduced motion users see static dots. */
.panel-chat-v3 .activity-pill .ap-dots {
  display: inline-flex !important;
  align-items: center;
  gap: 4px !important;
  background: transparent !important;
}
.panel-chat-v3 .activity-pill .ap-dots span {
  display: inline-block;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50%;
  background: var(--ink-400) !important;
  opacity: 0.4;
  animation: claude-dot 1.4s ease-in-out infinite;
  /* Override the legacy emerald color rule below */
  color: transparent !important;
}
.panel-chat-v3 .activity-pill .ap-dots span:nth-child(1) { animation-delay: 0s; }
.panel-chat-v3 .activity-pill .ap-dots span:nth-child(2) { animation-delay: 0.2s; }
.panel-chat-v3 .activity-pill .ap-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes claude-dot {
  0%, 60%, 100% { opacity: 0.2; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .panel-chat-v3 .activity-pill .ap-dots span { animation: none; opacity: 0.6; }
}

/* ── Tool cards (the "🔎 يبحث في الويب" inline cards) — Claude-style ──
   The legacy cards were dark gradients with gold accents — looked like a
   crypto trading terminal next to the white/emerald chat. Repaint to
   match Claude's tool-use UI: hairline bordered card, soft mint pending
   state, subtle check/X on completion, monospace tail for meta data. */
.panel-chat-v3 .chat-stream .tool-card {
  background: var(--v3-card-bg) !important;
  border: 1px solid var(--v3-card-border) !important;
  color: var(--ink-700) !important;
  font-family: var(--font-ar) !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  align-self: flex-end !important; /* assistant side (RTL = left visual) */
  max-width: min(560px, 72%) !important;
}
/* Kill the legacy shimmer band — replaced with a soft pulsing left border */
.panel-chat-v3 .chat-stream .tool-card:not(.success):not(.error):not(.debug)::before {
  content: '' !important;
  position: absolute !important;
  inset-block: 0 !important;
  inset-inline-end: 0 !important;
  width: 3px !important;
  background: var(--emerald-500) !important;
  border-radius: 0 10px 10px 0 !important;
  animation: tc-pulse-bar 1.6s ease-in-out infinite !important;
  /* override the legacy horizontal-sweep keyframes */
  inset-inline-start: auto !important;
  pointer-events: none;
}
@keyframes tc-pulse-bar {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
.panel-chat-v3 .chat-stream .tool-card .tc-spinner {
  width: 11px !important; height: 11px !important;
  border: 1.5px solid var(--emerald-100) !important;
  border-top-color: var(--emerald-600) !important;
  animation: tc-spin 0.85s linear infinite !important;
}
.panel-chat-v3 .chat-stream .tool-card .tc-label {
  color: var(--ink-800) !important;
  font-weight: 500 !important;
}
.panel-chat-v3 .chat-stream .tool-card .tc-meta {
  color: var(--ink-400) !important;
  font-family: var(--font-mono) !important;
  opacity: 1 !important;
}
/* Success — soft mint with emerald check, no green flash */
.panel-chat-v3 .chat-stream .tool-card.success {
  background: var(--mint-tint) !important;
  border-color: var(--emerald-200) !important;
  color: var(--emerald-900) !important;
}
.panel-chat-v3 .chat-stream .tool-card.success .tc-status,
.panel-chat-v3 .chat-stream .tool-card.success .tc-check { color: var(--emerald-700) !important; }
/* Error tool cards are hidden from the chat — they're noise that makes
   Moasis look broken even when it recovered (e.g., one search retry
   failed but the second succeeded → user only needs to see the success).
   Still rendered in the DOM so debug mode can surface them, and so the
   FIFO queue logic in the streaming code stays correct. */
.panel-chat-v3 .chat-stream .tool-card.error {
  display: none !important;
}
/* Debug mode (?debug=1) keeps errors visible for diagnosing */
body.debug-mode .panel-chat-v3 .chat-stream .tool-card.error {
  display: inline-flex !important;
  background: var(--error-light) !important;
  border-color: rgba(220, 38, 38, 0.30) !important;
  color: var(--error-dark) !important;
}
body.debug-mode .panel-chat-v3 .chat-stream .tool-card.error .tc-status,
body.debug-mode .panel-chat-v3 .chat-stream .tool-card.error .tc-x { color: var(--error) !important; }

/* ── WhatsApp pairing method tabs (QR ↔ phone code) ──────────────── */
.pair-method-tabs {
  display: flex; gap: 8px;
  margin: 0 0 16px;
}
.pair-tab {
  flex: 1;
  background: transparent;
  border: 1px solid var(--v3-card-border);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--font-ar);
  font-size: 14px;
  color: var(--ink-600);
  cursor: pointer;
  transition: all 140ms;
}
.pair-tab:hover { border-color: var(--emerald-300); color: var(--emerald-700); }
.pair-tab.active {
  background: var(--emerald-600);
  border-color: var(--emerald-600);
  color: white;
  box-shadow: 0 4px 12px -4px rgba(5,150,105,0.35);
}
.pair-code-box {
  background: var(--v3-card-bg);
  border: 1px solid var(--v3-card-border);
  border-radius: 12px;
  padding: 18px;
  font-family: var(--font-ar);
}
.pair-code-help {
  font-size: 14px;
  color: var(--ink-700);
  line-height: 1.7;
  margin: 0 0 14px;
}
.pair-code-input-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.pair-code-input-row input {
  flex: 1; min-width: 180px;
  padding: 10px 14px;
  border: 1px solid var(--v3-card-border);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink-900);
  background: var(--v3-panel-bg);
}
.pair-code-input-row input:focus {
  outline: none; border-color: var(--emerald-500);
  background: var(--v3-card-bg);
}
.pair-code-output {
  margin-top: 18px;
  padding: 18px;
  background: var(--mint-tint);
  border: 1px solid var(--emerald-200);
  border-radius: 12px;
  text-align: center;
}
.pair-code-label {
  font-size: 13px;
  color: var(--ink-700);
  margin: 0 0 8px;
}
.pair-code-value {
  font-family: var(--font-mono);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--emerald-700);
  margin: 0 0 8px;
  user-select: all;
}
.pair-code-hint {
  font-size: 12px;
  color: var(--ink-500);
  margin: 0;
}
.pair-code-error {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--error-light);
  border: 1px solid rgba(220,38,38,0.3);
  border-radius: 8px;
  color: var(--error-dark);
  font-size: 13px;
}

/* Armed-confirm state for destructive buttons (qr-reset / qr-disconnect).
   First click flips into this state; second click within 3s proceeds.
   Tauri WebView doesn't render confirm() dialogs reliably, so we use a
   visual two-step click instead. */
.btn-ghost.btn-arm,
.btn-primary.btn-arm {
  background: var(--error-light) !important;
  border-color: var(--error) !important;
  color: var(--error-dark) !important;
  animation: btn-arm-pulse 0.8s ease-in-out infinite;
}
@keyframes btn-arm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* Debug rows (only visible with ?debug=1) — quiet gray */
.panel-chat-v3 .chat-stream .tool-card.debug {
  background: var(--v3-panel-bg) !important;
  border-color: var(--ink-200) !important;
  color: var(--ink-500) !important;
  font-size: 11.5px !important;
}

/* Quiet the system / error message — emerald palette on cream */
.panel-chat-v3 .message.system .message-bubble {
  background: var(--mint-tint);
  border: 1px solid var(--emerald-200);
  color: var(--ink-700);
}

/* Quick-suggestion chips */
.quick-suggestions {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin: 18px 0 12px;
}
.quick-suggestions .qs-label {
  font-size: 13px; color: var(--ink-500);
  margin-inline-end: 6px;
  font-family: var(--font-ar);
}
.qs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid var(--v3-card-border);
  border-radius: 10px;
  padding: 7px 13px;
  font-size: 12.5px;
  color: var(--ink-700);
  font-family: var(--font-ar);
  cursor: pointer;
  transition: border-color 140ms, color 140ms, background 140ms;
}
.qs-chip:hover {
  border-color: var(--emerald-400);
  color: var(--emerald-700);
  background: var(--mint-tint);
}
.qs-chip .qs-icon { opacity: 0.55; font-size: 12px; }
.qs-chip:hover .qs-icon { opacity: 1; }

/* Composer v3 */
.composer-v3 {
  display: grid !important;
  grid-template-columns: 40px 1fr 44px !important;
  gap: 10px !important;
  background: var(--v3-card-bg);
  border: 1px solid var(--v3-card-border);
  border-radius: 16px;
  padding: 8px 10px !important;
  align-items: center;
  margin-top: 8px;
}
.composer-v3 textarea {
  background: transparent !important;
  border: none !important;
  resize: none;
  font-family: var(--font-ar);
  font-size: 14.5px;
  padding: 8px !important;
  color: var(--ink-900) !important;
}
.composer-v3 textarea:focus { outline: none; }
.composer-attach, .composer-send {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  border-radius: 10px;
  height: 36px; width: 36px;
  display: grid; place-items: center;
  color: var(--ink-500);
}
.composer-attach:hover { background: var(--mint-tint); color: var(--emerald-700); }
.composer-send {
  background: var(--emerald-600);
  color: white;
  width: 44px; height: 44px;
}
.composer-send:hover { background: var(--emerald-700); }
.composer-foot {
  text-align: center;
  color: var(--ink-400);
  font-size: 12px;
  margin: 8px 0 0;
  font-family: var(--font-ar);
}

/* ── Right context panel (visually right in RTL = grid column 1) ── */
.context-panel {
  background: var(--v3-panel-bg);
  padding: 18px 16px 18px 14px;
  display: flex; flex-direction: column; gap: 12px;
  border-inline-end: 1px solid var(--v3-card-border);
  overflow-y: auto;
  max-height: 100vh;
  position: sticky;
  top: 0;
}

/* Hide context panel on tabs other than chat */
body:has(.panel:not([data-panel="chat"]).active) .context-panel { display: none; }
body:has(.panel:not([data-panel="chat"]).active) {
  grid-template-columns: 0 1fr 220px !important;
}

.owner-card {
  display: grid;
  grid-template-columns: 36px 1fr 44px;
  gap: 10px;
  align-items: center;
  background: var(--v3-card-bg);
  border: 1px solid var(--v3-card-border);
  border-radius: 14px;
  padding: 12px 14px;
}
.owner-bell {
  background: transparent; border: none; cursor: pointer;
  font-size: 16px; color: var(--ink-700);
  height: 32px; width: 32px;
  display: grid; place-items: center; position: relative;
  border-radius: 8px;
}
.owner-bell:hover { background: var(--mint-tint); }
.owner-bell .bell-dot {
  position: absolute; top: 6px; inset-inline-end: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--error);
  border: 2px solid var(--v3-card-bg);
}
.owner-meta { display: flex; flex-direction: column; gap: 2px; text-align: end; }
.owner-name {
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-900);
}
.owner-role {
  font-size: 12px;
  color: var(--ink-500);
}
.owner-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-700) 100%);
  color: white;
  display: grid; place-items: center;
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 6px 16px -6px rgba(5,150,105,0.45);
}

.ctx-card {
  background: var(--v3-card-bg);
  border: 1px solid var(--v3-card-border);
  border-radius: 14px;
  padding: 16px 18px;
}
.ctx-card-head {
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.ctx-card-head h3 {
  margin: 0;
  font-family: var(--font-ar);
  font-size: 14px;
  color: var(--ink-700);
  font-weight: 600;
}
.ctx-card-icon {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--mint-tint);
  color: var(--emerald-700);
  font-size: 14px;
}

.ctx-metric {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-100);
}
.ctx-metric:last-child { border-bottom: none; padding-bottom: 0; }
.ctx-metric-text { display: flex; flex-direction: column; gap: 4px; text-align: end; }
.ctx-metric-label { font-size: 13px; color: var(--ink-700); }
.ctx-metric-delta { font-size: 11px; font-weight: 600; }
.ctx-metric-delta.delta-up { color: var(--emerald-600); }
.ctx-metric-delta.delta-down { color: var(--error); }
.ctx-metric-num {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1;
}

.upcoming-tasks {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.upc-task {
  display: grid;
  grid-template-columns: 18px 28px 1fr;
  gap: 10px;
  align-items: center;
}
.upc-check {
  width: 16px; height: 16px;
  border: 1.5px solid var(--ink-300);
  border-radius: 5px;
  cursor: pointer;
}
.upc-check.done {
  background: var(--emerald-600);
  border-color: var(--emerald-600);
}
.upc-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--mint-tint);
  color: var(--emerald-700);
  font-size: 13px;
}
.upc-icon.upc-icon-meeting { background: #FDF2E6; color: #B45309; }
.upc-icon.upc-icon-doc     { background: #FEF3C7; color: #92400E; }
.upc-icon.upc-icon-renew   { background: #DBEAFE; color: #1D4ED8; }
.upc-body { text-align: end; }
.upc-title {
  font-family: var(--font-ar);
  font-size: 13px;
  color: var(--ink-900);
  font-weight: 500;
  line-height: 1.4;
}
.upc-time {
  font-size: 11px;
  color: var(--ink-500);
  margin-top: 2px;
}
.upc-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-500);
  text-decoration: none;
  font-family: var(--font-ar);
}
.upc-link:hover { color: var(--emerald-700); }

.ctx-empty {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-500);
  line-height: 1.6;
  text-align: end;
  font-family: var(--font-ar);
}

/* ─── ROI Card — the headline "Muassis paid for itself" surface ─── */
.ctx-roi-card {
  background: linear-gradient(135deg, var(--emerald-600) 0%, var(--emerald-700) 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 10px 24px -12px rgba(5,150,105,0.5);
}
.ctx-roi-card .ctx-card-head { color: white; margin-bottom: 8px; }
.ctx-roi-card .ctx-card-head h3 { color: white; font-size: 13px; font-weight: 500; opacity: 0.9; }
.roi-hero {
  text-align: end;
  padding: 4px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  margin-bottom: 12px;
}
.roi-big {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: white;
  letter-spacing: -0.02em;
  /* Tabular numerals so digits don't dance as they update */
  font-variant-numeric: tabular-nums;
}
.roi-big-label {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin-top: 4px;
  font-family: var(--font-ar);
}
.roi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  text-align: end;
}
.roi-cell {
  padding: 6px 4px;
}
.roi-num {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: white;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.roi-lbl {
  font-size: 10.5px;
  color: rgba(255,255,255,0.75);
  margin-top: 2px;
  font-family: var(--font-ar);
  line-height: 1.3;
}
.roi-streak { transition: opacity 200ms ease; }

/* ─── Smart Suggestions Card ─── */
.suggestions-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.sug-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--mint-tint);
  border: 1px solid var(--emerald-100);
  cursor: pointer;
  transition: background 140ms, transform 140ms, border-color 140ms;
}
.sug-item:hover {
  background: var(--mint-soft);
  border-color: var(--emerald-300);
  transform: translateY(-1px);
}
.sug-icon { font-size: 18px; line-height: 1; padding-top: 1px; }
.sug-body { text-align: end; min-width: 0; }
.sug-title {
  font-family: var(--font-ar);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.3;
}
.sug-detail {
  font-size: 11.5px;
  color: var(--ink-600);
  margin-top: 2px;
  line-height: 1.4;
}
.sug-loading, .sug-empty {
  text-align: center; font-size: 12.5px; color: var(--ink-500);
  padding: 16px 8px; font-family: var(--font-ar);
}

/* ─── Achievements Card ─── */
.ach-head { justify-content: space-between !important; }
.ach-progress-pill {
  font-size: 10.5px;
  font-family: var(--font-mono);
  background: var(--mint-tint);
  color: var(--emerald-700);
  padding: 3px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.ach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ach-cell {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 10px 4px;
  border-radius: 10px;
  border: 1px solid var(--ink-100);
  background: var(--v3-panel-bg);
  transition: transform 140ms;
  cursor: default;
}
.ach-cell:hover { transform: translateY(-2px); }
.ach-cell.ach-on {
  background: linear-gradient(135deg, var(--mint-tint) 0%, var(--mint-soft) 100%);
  border-color: var(--emerald-300);
}
.ach-cell.ach-off { opacity: 0.55; filter: grayscale(0.5); }
.ach-cell.ach-tier-gold.ach-on { background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); border-color: #F59E0B; }
.ach-cell.ach-tier-platinum.ach-on { background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%); border-color: #3B82F6; }
.ach-icon { font-size: 22px; line-height: 1; }
.ach-title {
  font-family: var(--font-ar);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-800);
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}
.ach-progress {
  width: 100%; height: 3px;
  background: var(--ink-200);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.ach-progress-bar {
  height: 100%;
  background: var(--emerald-500);
  border-radius: 999px;
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Subagents panel — the swarm visibility surface ─── */
.subagent-spawn { background: var(--v3-card-bg); border: 1px solid var(--v3-card-border); border-radius: 12px; padding: 16px; }
.subagent-spawn h3 { margin: 0 0 10px; font-size: 14px; color: var(--ink-800); font-family: var(--font-ar); }
.subagent-spawn textarea {
  width: 100%; padding: 10px; border: 1px solid var(--v3-card-border); border-radius: 8px;
  font-family: var(--font-ar); font-size: 13.5px; line-height: 1.6; resize: vertical;
  background: var(--v3-panel-bg);
}
.subagent-spawn textarea:focus { outline: none; border-color: var(--emerald-500); background: white; }
.subagent-spawn-row { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.subagent-spawn-row select {
  padding: 8px 12px; border: 1px solid var(--v3-card-border); border-radius: 8px;
  background: var(--v3-card-bg); font-family: var(--font-ar); font-size: 13px;
}
.subagent-spawn-row .btn-primary { padding: 8px 18px; }
.subagent-spawn-hint { font-size: 11.5px; color: var(--ink-500); margin: 8px 0 0; font-family: var(--font-ar); }

.subagent-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 16px 0;
}
.sub-stat {
  background: var(--v3-card-bg); border: 1px solid var(--v3-card-border);
  border-radius: 10px; padding: 12px 8px; text-align: center;
}
.sub-stat-num { font-family: var(--font-heading); font-size: 24px; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.sub-stat-lbl { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; font-family: var(--font-ar); }

.subagent-list { display: flex; flex-direction: column; gap: 12px; }
.subagent-card {
  background: var(--v3-card-bg); border: 1px solid var(--v3-card-border);
  border-radius: 14px; padding: 14px 16px;
  transition: border-color 200ms, box-shadow 200ms;
}
.subagent-card.subagent-running, .subagent-card.subagent-queued {
  border-color: var(--emerald-300);
  box-shadow: 0 4px 14px -8px rgba(5,150,105,0.3);
}
.subagent-card.subagent-completed { border-color: var(--emerald-200); }
.subagent-card.subagent-failed, .subagent-card.subagent-timeout, .subagent-card.subagent-cancelled {
  border-color: var(--error-light); background: rgba(220, 38, 38, 0.02);
}

.subagent-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.subagent-status { display: inline-flex; align-items: center; gap: 6px; }
.subagent-status-icon { font-size: 16px; }
.subagent-status-label {
  font-size: 12px; font-family: var(--font-ar); font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  background: var(--mint-tint); color: var(--emerald-700);
}
.subagent-failed .subagent-status-label, .subagent-timeout .subagent-status-label, .subagent-cancelled .subagent-status-label {
  background: var(--error-light); color: var(--error-dark);
}
.subagent-completed .subagent-status-label { background: var(--mint-soft); }
.subagent-id { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-400); }
.subagent-task {
  font-family: var(--font-ar); font-size: 14px; color: var(--ink-900);
  line-height: 1.5; margin-bottom: 8px; font-weight: 500;
}
.subagent-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink-500); font-family: var(--font-ar);
  margin-bottom: 10px;
}
.subagent-progress {
  height: 4px; border-radius: 999px; background: var(--mint-tint);
  overflow: hidden; margin: 6px 0 10px; position: relative;
}
.subagent-progress-pulse {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--emerald-500) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: subagent-progress-shimmer 1.6s linear infinite;
}
@keyframes subagent-progress-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.subagent-timeline {
  max-height: 240px; overflow-y: auto;
  background: var(--v3-panel-bg);
  border-radius: 8px; padding: 8px 12px;
  font-family: var(--font-ar); font-size: 12.5px;
  margin-bottom: 10px;
}
.subagent-timeline-loading { color: var(--ink-400); font-size: 12px; text-align: center; padding: 8px; }
.sub-ev {
  display: grid; grid-template-columns: 20px 1fr auto;
  gap: 8px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--ink-100);
  animation: sub-ev-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sub-ev:last-child { border-bottom: none; }
@keyframes sub-ev-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.sub-ev-icon { font-size: 13px; }
.sub-ev-msg { color: var(--ink-800); font-size: 12.5px; line-height: 1.4; }
.sub-ev-time { font-size: 10px; color: var(--ink-400); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sub-ev.sub-ev-error .sub-ev-msg { color: var(--error-dark); }
.sub-ev.sub-ev-done .sub-ev-msg { color: var(--emerald-700); font-weight: 600; }

.subagent-cancel-btn {
  width: 100%; padding: 8px; border: 1px solid var(--v3-card-border);
  border-radius: 8px; background: var(--v3-panel-bg); color: var(--ink-700);
  font-family: var(--font-ar); font-size: 12.5px; cursor: pointer;
}
.subagent-cancel-btn:hover { border-color: var(--error); color: var(--error-dark); background: var(--error-light); }
.subagent-cancel-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.subagent-result { margin-top: 10px; }
.subagent-result summary {
  cursor: pointer; padding: 8px 12px; border-radius: 8px;
  background: var(--mint-tint); border: 1px solid var(--emerald-200);
  font-family: var(--font-ar); font-size: 12.5px; color: var(--emerald-700);
}
.subagent-result pre {
  background: var(--v3-panel-bg); border: 1px solid var(--v3-card-border);
  border-radius: 8px; padding: 12px; margin-top: 6px;
  font-family: var(--font-ar); font-size: 12.5px; line-height: 1.7;
  white-space: pre-wrap; max-height: 360px; overflow-y: auto;
}
.subagent-error {
  margin-top: 8px; padding: 10px 12px;
  background: var(--error-light); border: 1px solid rgba(220,38,38,0.3);
  border-radius: 8px; color: var(--error-dark); font-size: 12.5px; font-family: var(--font-ar);
}

/* ─── Live Activity Feed Card ─── */
.feed-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
  /* Subtle inner scroll fade so it feels like a real feed */
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}
.feed-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--ink-100);
}
.feed-item:last-child { border-bottom: none; }
.feed-icon { font-size: 13px; opacity: 0.85; padding-top: 2px; }
.feed-body { text-align: end; min-width: 0; }
.feed-title {
  font-family: var(--font-ar);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-800);
  line-height: 1.3;
}
.feed-summary {
  font-size: 11px;
  color: var(--ink-500);
  margin-top: 2px;
  line-height: 1.4;
  word-break: break-word;
}
.feed-time {
  font-size: 10.5px;
  color: var(--ink-400);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.feed-item.feed-error .feed-title { color: var(--error-dark); }
.feed-item.feed-error .feed-icon::before { content: '❌'; margin-inline-end: 2px; }
.feed-loading, .feed-empty {
  text-align: center; font-size: 12.5px; color: var(--ink-500);
  padding: 16px 8px; font-family: var(--font-ar);
}

/* Attached-file chip — shows after a successful /upload. Card-style with
   file-type icon, name, size + status badge, and a small clear button.
   Sits flush above the composer so it visually belongs to the message
   being composed. */
.composer-attached {
  display: grid;
  grid-template-columns: 36px 1fr 32px;
  gap: 10px;
  align-items: center;
  background: var(--v3-card-bg);
  border: 1px solid var(--emerald-200);
  border-radius: 12px;
  padding: 8px 12px;
  margin: 8px 0 0;
  font-family: var(--font-ar);
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.06);
}
.composer-attached[hidden] { display: none; }
.composer-attached .att-icon {
  font-size: 20px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--mint-tint);
  border-radius: 8px;
}
.composer-attached .att-meta {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.composer-attached .att-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-attached .att-size {
  font-size: 11px;
  color: var(--ink-500);
  display: inline-flex; align-items: center; gap: 6px;
}
.composer-attached .att-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
}
.composer-attached .att-status.uploading {
  background: #FEF3C7; color: #B45309;
}
.composer-attached .att-status.done {
  background: var(--mint-soft); color: var(--emerald-700);
}
.composer-attached .att-status.error {
  background: var(--error-light); color: var(--error-dark);
}
.composer-attached .att-clear {
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-400); font-size: 16px;
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
  transition: background 140ms, color 140ms;
}
.composer-attached .att-clear:hover {
  background: var(--error-light); color: var(--error);
}

/* Sales chart card */
.ctx-card-sales { padding-bottom: 14px; }
.ctx-card-head-sales {
  justify-content: space-between !important;
}
.sales-range {
  background: var(--v3-chat-bg);
  border: 1px solid var(--v3-card-border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11.5px;
  color: var(--ink-700);
  font-family: var(--font-ar);
  cursor: pointer;
}
.sales-headline { text-align: end; margin: 8px 0 14px; }
.sales-total {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1;
}
.sales-delta {
  font-size: 11px;
  font-weight: 600;
  margin: 4px 0 2px;
}
.sales-sub {
  font-size: 12px;
  color: var(--ink-500);
}
.sales-chart {
  display: flex; gap: 14px;
  align-items: flex-end;
  height: 130px;
  margin-top: 6px;
}
.sales-chart .bar-row {
  flex: 1; height: 100%;
  position: relative;
  display: flex; gap: 4px; align-items: flex-end;
  justify-content: center;
}
.sales-chart .bar {
  width: 10px;
  border-radius: 4px 4px 0 0;
}
.sales-chart .bar-bg { background: var(--emerald-200); }
.sales-chart .bar-fg { background: var(--emerald-600); }
.sales-axis {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--ink-500);
  font-family: var(--font-ar);
}

/* Footer collapses cleanly on v3 — kept minimal */
footer {
  background: var(--v3-chat-bg);
  border-top: 1px solid var(--v3-card-border);
  padding: 8px 24px;
  font-size: 11px;
  color: var(--ink-500);
}

/* Responsive: only collapse the right panel when the window is genuinely
   too narrow to host all 3 columns. Was at 1280px which hid the panel for
   anyone running Al Moasis in a windowed (not maximized) state. */
@media (max-width: 880px) {
  body {
    grid-template-columns: 0 1fr 200px !important;
    grid-template-areas:
      "saudi-strip saudi-strip sidebar"
      "main        main        sidebar"
      "footer      footer      sidebar" !important;
  }
  .context-panel { display: none; }
}
@media (max-width: 640px) {
  body {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "saudi-strip"
      "main"
      "footer" !important;
  }
  .sidebar { display: none; }
}
