:root {
  --bg: #06080c;
  --surface: #0e1218;
  --surface2: #151b24;
  --border: rgba(148, 163, 184, 0.14);
  --text: #f1f5f9;
  --muted: #94a3b8;
  --accent: #7c83ff;
  --accent2: #2dd4bf;
  --user: rgba(59, 130, 246, 0.22);
  --assistant: rgba(15, 23, 42, 0.65);
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;
  --radius: 16px;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --app-max: 100%;
  --reading-max: min(52rem, 92vw);
  --composer-height: 6.5rem;
  --os-dock-blur: 20px;
  --os-glass: rgba(12, 16, 24, 0.72);
  --os-glass-border: rgba(255, 255, 255, 0.08);
  --chat-pad: clamp(0.75rem, 2.5vw, 1.25rem);
  --content-pad: clamp(0.7rem, 2vw, 1rem);
  --font-body: 0.9375rem;
  --font-sm: 0.8125rem;
  --font-xs: 0.75rem;
  --leading: 1.62;
  --leading-tight: 1.38;
  --space-1: 0.2rem;
  --space-2: 0.4rem;
  --space-3: 0.55rem;
  --space-4: 0.75rem;
  --space-5: 0.95rem;
  --space-6: 1.2rem;
  --space-8: 1.75rem;
  /* Mind Explore — توکن‌های قابل‌پچ (L1) */
  --mind-mic-idle-border: #ffffff;
  --mind-mic-idle-border-width: 1px;
  --mind-mic-listen-border: rgba(52, 211, 153, 0.65);
  --mind-mic-listen-glow: rgba(52, 211, 153, 0.12);
  --mind-orb-sat-gap: 58px;
  --mind-status-pill-fg: #e2e8f0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  height: 100%;
  font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  font-size: var(--font-body);
  line-height: var(--leading);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

.os-body { position: relative; }

.os-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 85% -5%, rgba(124, 131, 255, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 45% at 5% 100%, rgba(45, 212, 191, 0.12), transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 40%, rgba(99, 102, 241, 0.06), transparent 70%),
    linear-gradient(180deg, #06080c 0%, #0a0e14 50%, #06080c 100%);
}

.os-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent);
}

.app-layout {
  display: flex;
  width: 100%;
  height: 100dvh;
  position: relative;
  z-index: 1;
}

.chat-sidebar {
  width: min(280px, 88vw);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: rgba(10, 14, 20, 0.92);
  border-left: 1px solid var(--os-glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 40;
}

.sidebar-head {
  padding: calc(0.65rem + env(safe-area-inset-top)) 0.85rem 0.65rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sidebar-title { margin: 0; font-size: 1rem; font-weight: 700; }

.sidebar-list-tools {
  padding: 0.55rem 0.85rem 0.35rem;
  border-bottom: 1px solid var(--border);
}

.sidebar-new-btn {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px dashed var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}

.tts-header-rail--sidebar {
  justify-content: stretch;
  padding: 0;
  width: 100%;
  pointer-events: none;
}
.tts-header-rail--sidebar .tts-global-bar--header {
  max-width: none;
  width: 100%;
  pointer-events: auto;
}

.sidebar-user { padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--border); font-size: var(--font-sm); }

.sidebar-user-card { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.5rem; }

.sidebar-user-avatar {
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; font-weight: 700;
}

.sidebar-user-email { display: block; color: var(--muted); font-size: var(--font-xs); }

.profile-section { margin-bottom: var(--space-2); }
.profile-card { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: var(--space-2); }
.profile-avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  display: grid; place-items: center; font-weight: 700;
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; flex-shrink: 0;
}
.profile-fields { flex: 1; min-width: 0; }
.profile-field { display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--font-sm); }
.profile-field input {
  width: 100%; padding: 0.45rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.profile-save-btn {
  margin-top: 0.5rem; padding: 0.4rem 0.85rem; border-radius: 8px;
  border: 1px solid rgba(99, 102, 241, 0.45); background: rgba(99, 102, 241, 0.15);
  color: #c7d2fe; cursor: pointer; font-size: var(--font-sm);
}
.profile-save-btn:disabled { opacity: 0.6; cursor: wait; }
.profile-status { margin-top: 0.35rem; font-size: var(--font-xs); color: var(--muted); min-height: 1.2em; }

.sidebar-progress { margin: 0.5rem 0; color: var(--muted); font-size: var(--font-xs); }
.sidebar-progress ul { margin: 0.35rem 0 0; padding: 0 1rem 0 0; }
.sidebar-guest, .sidebar-hint { color: var(--muted); font-size: var(--font-xs); margin: 0.35rem 0; }

.sidebar-auth-btn {
  display: inline-block; margin-top: 0.35rem; padding: 0.4rem 0.75rem;
  border-radius: 8px; background: var(--accent); color: #fff; text-decoration: none;
  border: none; font-family: inherit; cursor: pointer; font-size: var(--font-sm);
}

.sidebar-logout-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); }

.sidebar-conversations {
  list-style: none; margin: 0; padding: 0.5rem; flex: 1; overflow-y: auto; min-height: 0;
}

.sidebar-empty { padding: 1rem 0.5rem; color: var(--muted); font-size: var(--font-sm); text-align: center; }

.sidebar-conv { display: flex; gap: 0.25rem; margin-bottom: 0.35rem; border-radius: 10px; }
.sidebar-conv.is-active { background: rgba(124, 131, 255, 0.12); }

.sidebar-conv-btn {
  flex: 1; text-align: right; padding: 0.55rem 0.65rem; border: none;
  background: transparent; color: var(--text); font-family: inherit; cursor: pointer; border-radius: 8px;
}

.sidebar-conv-title {
  display: block; font-size: var(--font-sm); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sidebar-conv-meta { display: block; font-size: var(--font-xs); color: var(--muted); margin-top: 0.15rem; }

.sidebar-conv-actions { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.25rem 0; opacity: 0; }
.sidebar-conv:hover .sidebar-conv-actions { opacity: 1; }

.sidebar-icon-btn {
  width: 1.6rem; height: 1.6rem; border: none; border-radius: 6px;
  background: var(--surface2); color: var(--muted); cursor: pointer; font-size: 0.75rem;
}

.sidebar-foot {
  padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); display: flex; gap: 0.75rem; font-size: var(--font-sm);
}

.sidebar-foot-link { color: var(--muted); text-decoration: none; }
.sidebar-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 35; }

.user-chip {
  text-decoration: none; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.user-chip.is-logged-in { border-color: rgba(52, 211, 153, 0.35); color: var(--ok); }

.app-layout .app-shell { flex: 1; min-width: 0; }

@media (max-width: 900px) {
  .chat-sidebar {
    position: fixed; top: 0; right: 0; bottom: 0;
    transform: translateX(100%); transition: transform 0.25s ease; box-shadow: var(--shadow);
  }
  .chat-sidebar.is-open { transform: translateX(0); }
}

@media (min-width: 901px) {
  .sidebar-backdrop { display: none !important; }
  #historyBtn { display: none; }
}

/* --- Hub panel (Cortex / plugins) --- */
.hub-drawer.is-collapsed { display: none; }
.hub-body { gap: 1rem; }
.hub-section h3 { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--muted); }
.hub-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.hub-stat {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  font-size: var(--font-xs);
}
.hub-stat strong { display: block; font-size: 1rem; margin-top: 0.2rem; }
.hub-services { display: grid; gap: 0.5rem; max-height: 40vh; overflow-y: auto; }
.hub-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
}
.hub-card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.hub-card-meta { font-size: var(--font-xs); color: var(--muted); margin-top: 0.2rem; }
.hub-card-endpoint { font-size: 0.7rem; color: var(--muted); word-break: break-all; margin-top: 0.25rem; direction: ltr; text-align: left; }
.hub-caps { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.4rem; }
.hub-caps span {
  font-size: 0.68rem;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: rgba(124, 131, 255, 0.15);
  color: var(--accent);
}
.hub-badge { font-size: 0.68rem; padding: 0.15rem 0.45rem; border-radius: 999px; }
.hub-badge--ok { background: rgba(52, 211, 153, 0.15); color: var(--ok); }
.hub-badge--err { background: rgba(248, 113, 113, 0.15); color: var(--err); }
.hub-badge--warn { background: rgba(251, 191, 36, 0.12); color: var(--warn); }
.hub-badge--muted { background: rgba(148, 163, 184, 0.12); color: var(--muted); }

.hub-memory-count { font-size: var(--font-xs); color: var(--muted); margin: 0 0 0.4rem; }
.hub-memory-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.hub-memory-item {
  display: flex; align-items: flex-start; gap: 0.5rem;
  background: var(--surface-2, rgba(148, 163, 184, 0.08));
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.45rem 0.6rem; font-size: var(--font-xs);
}
.hub-memory-text { flex: 1; white-space: pre-line; color: var(--muted); }
.hub-memory-del {
  border: none; background: none; color: var(--err, #f87171);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.2rem;
}

.feedback-bar {
  display: flex; align-items: center; gap: 0.35rem;
  margin-top: 0.5rem; opacity: 0.55; transition: opacity 0.15s ease;
}
.msg.assistant:hover .feedback-bar, .feedback-bar:focus-within { opacity: 1; }
.feedback-btn {
  border: 1px solid var(--border); background: transparent;
  border-radius: 999px; padding: 0.15rem 0.5rem;
  cursor: pointer; font-size: 0.85rem; line-height: 1.4;
  filter: grayscale(0.6);
}
.feedback-btn:hover:not(:disabled) { filter: none; border-color: rgba(99, 102, 241, 0.5); }
.feedback-btn:disabled { cursor: default; opacity: 0.5; }
.feedback-btn.is-selected {
  filter: none; opacity: 1;
  border-color: rgba(99, 102, 241, 0.7); background: rgba(99, 102, 241, 0.15);
}
.feedback-thanks { font-size: var(--font-xs); color: var(--muted); }

/* ─── Turn inspector (جزئیات فنی هر پیام) ─── */
.turn-inspector {
  margin-top: 0.55rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.35);
  font-size: var(--font-xs);
  overflow: hidden;
}
.turn-inspector[open] {
  border-color: rgba(99, 102, 241, 0.35);
  background: rgba(15, 23, 42, 0.5);
}
.ti-summary {
  cursor: pointer;
  padding: 0.35rem 0.55rem;
  color: var(--muted);
  user-select: none;
  list-style: none;
}
.ti-summary::-webkit-details-marker { display: none; }
.ti-summary::before {
  content: "▸";
  display: inline-block;
  margin-left: 0.35rem;
  transition: transform 0.15s ease;
}
.turn-inspector[open] > .ti-summary::before { transform: rotate(90deg); }
.turn-inspector[open] > .ti-summary { color: var(--text); }
.ti-body {
  padding: 0 0.55rem 0.55rem;
  border-top: 1px solid var(--border);
}
.ti-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0 0.35rem;
  flex-wrap: wrap;
}
.ti-badge {
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--border);
  color: var(--muted);
}
.ti-badge.is-ok { border-color: rgba(34, 197, 94, 0.45); color: #86efac; }
.ti-badge.is-err { border-color: rgba(248, 113, 113, 0.45); color: #fca5a5; }
.ti-copy-btn {
  margin-inline-start: auto;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
}
.ti-copy-btn:hover { color: var(--text); border-color: rgba(99, 102, 241, 0.45); }
.ti-section { margin-top: 0.5rem; }
.ti-heading {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  opacity: 0.9;
}
.ti-table {
  width: 100%;
  border-collapse: collapse;
}
.ti-table th {
  text-align: right;
  vertical-align: top;
  padding: 0.2rem 0 0.2rem 0.5rem;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  width: 38%;
}
.ti-table td {
  padding: 0.2rem 0;
  color: var(--text);
  word-break: break-word;
}
.ti-val--long { font-size: 0.68rem; opacity: 0.92; }
.ti-note {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
}
.ti-log {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
}
.ti-log-item {
  display: grid;
  grid-template-columns: 3.2rem 5.5rem 1fr;
  gap: 0.35rem;
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  font-family: ui-monospace, monospace;
  font-size: 0.68rem;
  align-items: start;
}
.ti-log-item:last-child { border-bottom: none; }
.ti-log-t { color: var(--muted); }
.ti-log-type { color: #a5b4fc; }
.ti-log-sum { color: var(--text); opacity: 0.9; word-break: break-all; }
.ti-log-empty { padding: 0.5rem; color: var(--muted); }
.turn-inspector--assistant { margin-top: 0.65rem; }
.turn-inspector--assistant > .ti-summary { color: rgba(165, 180, 252, 0.95); font-weight: 500; }
.msg.user .turn-inspector { display: none !important; }

.hub-rag-text {
  width: 100%; resize: vertical; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2, rgba(148,163,184,0.08));
  color: var(--text); padding: 0.5rem 0.6rem; font: inherit; font-size: var(--font-sm);
}
.hub-rag-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.45rem; }
.hub-rag-btn {
  padding: 0.35rem 0.8rem; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(99, 102, 241, 0.45); background: rgba(99, 102, 241, 0.15);
  color: #c7d2fe; font-size: var(--font-sm);
}
.hub-rag-btn:disabled { opacity: 0.6; cursor: wait; }
.hub-rag-status { font-size: var(--font-xs); color: var(--muted); }
.hub-hint, .hub-empty { color: var(--muted); font-size: var(--font-sm); }
.hub-progress-list { margin: 0.35rem 0 0; padding: 0 1rem 0 0; font-size: var(--font-sm); }
.hub-user-line { margin: 0 0 0.35rem; font-size: var(--font-sm); }
.hub-foot { margin-top: 0.5rem; }

.app-shell {
  width: 100%;
  height: 100dvh;
  display: flex;
  justify-content: stretch;
  padding: 0;
  position: relative;
  z-index: 1;
}

.app {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 0;
  margin: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: nowrap;
  padding: calc(0.55rem + env(safe-area-inset-top)) var(--chat-pad) 0.55rem;
  border-bottom: 1px solid var(--os-glass-border);
  background: var(--os-glass);
  backdrop-filter: blur(var(--os-dock-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--os-dock-blur)) saturate(1.2);
  position: relative;
  z-index: 30;
  flex-shrink: 0;
}

.header-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  background: linear-gradient(135deg, #ffe4cc, #ffd1a3);
}

.header h1 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
}

.subtitle {
  margin: 0.1rem 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.status-wrap,
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.header-titles { min-width: 0; }

.header-actions { margin-inline-start: auto; }

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  touch-action: manipulation;
}

.os-body {
  /* shell */
}
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 0.45rem 1rem;
  text-align: center;
  font-size: var(--font-sm);
  background: rgba(245, 158, 11, 0.95);
  color: #1c1917;
  font-weight: 600;
}

.icon-btn[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(99, 102, 241, 0.15);
}

.mode-chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.35);
  color: #a5f3fc;
  white-space: nowrap;
}

.mode-chip[data-mode="whisper"] {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.4);
  color: #c7d2fe;
}

.engine-chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.engine-chip[data-engine="dify"] {
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.3);
}
.engine-chip[data-engine="auto"] {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.25);
}

.recording-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem var(--chat-pad);
  background: rgba(248, 113, 113, 0.12);
  border-bottom: 1px solid rgba(248, 113, 113, 0.25);
  font-size: var(--font-sm);
  flex-shrink: 0;
}

.recording-bar[hidden] { display: none !important; }

.rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--err);
  animation: pulse 0.8s infinite;
}

.recording-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #fecaca;
}

.recording-hint {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: var(--font-xs);
}

.pipeline-bar {
  padding: 0.4rem var(--chat-pad) 0.55rem;
  border-bottom: 1px solid var(--border);
  background: rgba(20, 27, 36, 0.9);
  flex-shrink: 0;
}

.pipeline-bar[hidden] { display: none !important; }

.pipeline-track {
  height: 4px;
  border-radius: 999px;
  background: var(--surface2);
  overflow: hidden;
  margin-bottom: 0.35rem;
}

.pipeline-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width 0.35s ease;
}

.pipeline-label {
  font-size: var(--font-xs);
  color: var(--muted);
}

.welcome-panel {
  width: 100%;
  max-width: var(--reading-max);
  margin: 0 auto var(--space-6);
  padding: var(--space-5);
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--border);
  background: linear-gradient(165deg, rgba(30, 40, 56, 0.95), rgba(20, 27, 36, 0.88));
  box-shadow: var(--shadow);
}

.welcome-panel.is-hidden { display: none; }

.welcome-hero h2 {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
}

.welcome-lead {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-sm);
  line-height: 1.55;
}

.welcome-section {
  margin-top: var(--space-5);
}

.welcome-section h3,
.settings-label {
  margin: 0 0 0.5rem;
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.welcome-section--advanced h3 {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.preset-grid .preset-card.active {
  border-color: rgba(99, 102, 241, 0.55);
  background: rgba(99, 102, 241, 0.12);
}

.settings-voice-opts {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.settings-voice-opts .auto-send-option { margin: 0; }

#settingsVoiceOpts .voice-review-options {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.tts-header-rail {
  display: flex;
  justify-content: flex-start; /* RTL: راست، زیر برند */
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem var(--chat-pad) 0.15rem;
  flex-shrink: 0;
  min-height: 0;
  pointer-events: none;
}
.tts-header-rail:has(#ttsGlobalBar:not([hidden])) {
  min-height: 2.35rem;
}
.tts-global-bar--header {
  pointer-events: auto;
  max-width: min(18.5rem, 78vw);
  margin: 0;
  padding: 0.28rem 0.5rem;
  font-size: 0.68rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(99, 102, 241, 0.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.tts-global-bar--header[hidden] {
  display: none !important;
}
.tts-global-bar--header .tts-global-bar-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.72rem;
}
.tts-global-bar--header .tts-global-bar-icon {
  font-size: 0.85rem;
}

.tts-global-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.tts-global-bar-icon { flex-shrink: 0; opacity: 0.9; }

.tts-global-bar-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e0e7ff;
}

.tts-global-bar-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.tts-global-bar-btn {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
}

.tts-global-bar-btn:hover { background: rgba(99, 102, 241, 0.35); }

.tts-global-bar-btn--stop {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.35);
}

.coach-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  pointer-events: none;
}

.coach-overlay:not([hidden]) { pointer-events: auto; }

.coach-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.62);
}

.coach-spotlight {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(2, 6, 23, 0.62);
  border: 2px solid rgba(129, 140, 248, 0.85);
  pointer-events: none;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.coach-card {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(22rem, calc(100vw - 2rem));
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: #0f172a;
  border: 1px solid rgba(99, 102, 241, 0.45);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.coach-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  color: #a5b4fc;
  letter-spacing: 0.02em;
}

.coach-title {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  color: #f8fafc;
}

.coach-body {
  margin: 0 0 0.85rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #cbd5e1;
}

.coach-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.coach-btn {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  font: inherit;
  font-size: 0.84rem;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
}

.coach-btn--primary {
  background: rgba(99, 102, 241, 0.35);
  border-color: rgba(129, 140, 248, 0.55);
}

.coach-btn:hover { filter: brightness(1.08); }

.voice-fx-ui-mode {
  margin-bottom: 0.65rem;
  max-width: 16rem;
}

.voice-fx-section:not(.voice-fx-section--advanced) .voice-fx-toggle--live {
  display: none;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.mode-grid--compact .mode-card { padding: 0.55rem 0.65rem; }

.mode-card {
  text-align: right;
  padding: 0.7rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  touch-action: manipulation;
}

.mode-card:hover:not(:disabled) {
  border-color: rgba(99, 102, 241, 0.45);
}

.mode-card.active {
  border-color: rgba(99, 102, 241, 0.65);
  background: rgba(99, 102, 241, 0.14);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2);
}

.mode-card:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mode-card-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

.mode-card-icon { font-size: 1.05rem; }

.mode-card-title {
  font-size: var(--font-sm);
  font-weight: 700;
}

.mode-card-desc {
  display: block;
  font-size: var(--font-xs);
  color: var(--muted);
  line-height: 1.45;
}

.mode-badge {
  margin-inline-start: auto;
  font-size: 0.62rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.2);
  color: #6ee7b7;
  font-weight: 700;
}

.quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.quick-prompt {
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: var(--font-xs);
  cursor: pointer;
  touch-action: manipulation;
}

.quick-prompt:hover {
  border-color: var(--accent);
}

.feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: var(--space-4);
}

.feature-chips--settings { margin-top: var(--space-3); }

.feature-chip {
  font-size: 0.68rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: rgba(0, 0, 0, 0.15);
}

.feature-chip.on {
  border-color: rgba(52, 211, 153, 0.35);
  color: #86efac;
}

.msg.system {
  align-self: center;
  max-width: min(96%, 32rem);
  padding: 0.45rem 0.7rem;
  font-size: var(--font-sm);
  color: var(--muted);
  background: rgba(99, 102, 241, 0.08);
  border: 1px dashed rgba(99, 102, 241, 0.28);
  border-radius: 10px;
  text-align: center;
  line-height: 1.5;
}

.composer-settings {
  width: 100%;
  max-width: var(--reading-max);
  margin-inline: auto;
  margin-bottom: var(--space-2);
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.settings-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.1rem;
  padding: 0.35rem 0.65rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: right;
  touch-action: manipulation;
}

.settings-summary:hover {
  background: rgba(255, 255, 255, 0.03);
}

.settings-summary-label {
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}

.settings-summary-meta {
  flex: 1;
  min-width: 0;
  font-size: var(--font-xs);
  color: #c8d4e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.settings-summary-chevron {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.settings-summary-chevron::before {
  content: "▾";
  font-size: 0.85rem;
  line-height: 1;
}

.composer-settings:not(.is-collapsed) .settings-summary-chevron {
  transform: rotate(180deg);
}

.composer-settings:not(.is-collapsed) .settings-summary {
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.12);
}

.settings-body {
  max-height: min(48vh, 24rem);
  overflow-y: auto;
  padding: 0 var(--space-4) var(--space-4);
  transition: max-height 0.28s ease, opacity 0.2s ease, padding 0.2s ease;
  -webkit-overflow-scrolling: touch;
}

.composer-settings.is-collapsed .settings-body {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

.settings-hint {
  margin: var(--space-3) 0 0;
  font-size: var(--font-xs);
  color: var(--muted);
  line-height: 1.5;
}

.settings-section { margin-top: var(--space-4); }

.settings-section:first-of-type { margin-top: var(--space-3); }

.settings-row .stt-lang-options { justify-content: flex-start; }

.settings-foot {
  margin: var(--space-4) 0 0;
  font-size: var(--font-xs);
  color: var(--muted);
  line-height: 1.5;
}

.settings-link { color: #a5b4fc; }

.voice-fx-section { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.settings-hint--tight { margin-top: var(--space-1); margin-bottom: var(--space-2); }
.voice-fx-toggle { display: flex; align-items: center; gap: .5rem; font-size: var(--font-xs); color: var(--text); margin-bottom: var(--space-2); cursor: pointer; }
.voice-fx-presets-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: var(--space-3); }
.voice-fx-presets-bar .voice-fx-presets { margin-bottom: 0; flex: 1 1 auto; }
.voice-fx-reset-btn { border: 1px solid var(--border); background: rgba(0,0,0,.22); color: var(--muted); font: inherit; font-size: .68rem; padding: .32rem .55rem; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.voice-fx-reset-btn:hover, .voice-fx-reset-btn:focus-visible { color: #dbe4ff; border-color: rgba(99,102,241,.45); outline: none; }
.voice-fx-group { margin-bottom: .65rem; }
.voice-fx-group-title { display: block; font-size: .62rem; color: var(--muted); font-weight: 600; margin-bottom: .35rem; letter-spacing: .02em; }
.voice-fx-sliders--grid { grid-template-columns: 1fr; }
@media (min-width: 520px) {
  .voice-fx-sliders--grid { grid-template-columns: 1fr 1fr; }
}
.voice-fx-value { font-size: .62rem; font-weight: 600; color: #c7d2fe; background: rgba(99,102,241,.18); border: 1px solid rgba(99,102,241,.28); padding: .12rem .45rem; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.voice-fx-presets { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: var(--space-3); }
.voice-fx-preset { border: 1px solid var(--border); background: rgba(0,0,0,.22); color: var(--muted); font: inherit; font-size: .68rem; padding: .32rem .55rem; border-radius: 999px; cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.voice-fx-preset:hover, .voice-fx-preset:focus-visible { color: #dbe4ff; border-color: rgba(99,102,241,.45); outline: none; }
.voice-fx-preset.active, .voice-fx-preset[aria-pressed="true"] { background: rgba(99,102,241,.24); color: #e0e7ff; border-color: rgba(99,102,241,.55); font-weight: 600; }
.voice-fx-sliders { display: grid; gap: .55rem; }
.voice-fx-slider { display: grid; gap: .2rem; font-size: .68rem; color: var(--muted); }
.voice-fx-slider span { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.voice-fx-slider-hint { font-size: .6rem; color: var(--muted); opacity: .85; text-align: center; }
.voice-fx-sliders--tone { margin-bottom: .65rem; padding-bottom: .55rem; border-bottom: 1px dashed rgba(255,255,255,.08); }
.voice-fx-sliders--clean { margin-bottom: .65rem; padding-bottom: .55rem; border-bottom: 1px dashed rgba(255,255,255,.08); }
.voice-fx-slider--gender input[type="range"] { accent-color: #ec4899; }
.voice-fx-slider--timbre input[type="range"] { accent-color: #f59e0b; }
.voice-fx-slider--pitch input[type="range"] { accent-color: #38bdf8; }
.voice-fx-slider--noise input[type="range"] { accent-color: #22c55e; }
.voice-fx-slider--harsh input[type="range"] { accent-color: #a78bfa; }
.voice-fx-saved-at { margin: .35rem 0 0; font-size: .62rem; color: var(--muted); transition: color .2s ease; }
.voice-fx-slider input[type="range"] { width: 100%; accent-color: #6366f1; }
.voice-fx-preview-source { margin: 0 0 .35rem; font-size: .72rem; color: #a5b4fc; font-weight: 600; }
.voice-fx-preview { margin: var(--space-3) 0; padding: var(--space-3); border-radius: 10px; background: rgba(0,0,0,.18); border: 1px solid var(--border); }
.voice-fx-preview-label { display: block; font-size: .68rem; color: var(--muted); margin-bottom: .35rem; }
.voice-fx-preview-text { width: 100%; box-sizing: border-box; border: 1px solid var(--border); background: rgba(0,0,0,.25); color: var(--text); font: inherit; font-size: .78rem; padding: .45rem .55rem; border-radius: 8px; margin-bottom: .5rem; }
.voice-fx-preview-text:focus { outline: none; border-color: rgba(99,102,241,.55); box-shadow: 0 0 0 2px rgba(99,102,241,.18); }
.voice-fx-preview-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .45rem; }
.voice-fx-preview-btn { border: 1px solid rgba(99,102,241,.45); background: rgba(99,102,241,.22); color: #e0e7ff; font: inherit; font-size: .72rem; padding: .38rem .7rem; border-radius: 8px; cursor: pointer; }
.voice-fx-preview-btn:hover, .voice-fx-preview-btn:focus-visible { background: rgba(99,102,241,.35); outline: none; }
.voice-fx-preview-btn--stop { border-color: rgba(248,113,113,.45); background: rgba(248,113,113,.18); color: #fecaca; }
.voice-fx-toggle--live { margin-top: .15rem; margin-bottom: .25rem; }
.voice-fx-preview-status { margin: 0; font-size: .65rem; color: var(--muted); min-height: 1.1em; }
.voice-fx-preview-status[data-state="playing"] { color: #86efac; }
.voice-fx-preview-status[data-state="loading"] { color: #fde68a; }
.voice-fx-preview-status[data-state="error"] { color: #fca5a5; }
.voice-fx-preview-status[data-state="ready"] { color: #a5b4fc; }

.voice-fx-locked-card {
  margin-top: 0.5rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.22);
}
.voice-fx-locked-title {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #c7d2fe;
}
.voice-fx-locked-meta {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.mic-btn {
  position: relative;
}

.mic-ring {
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  border: 2px solid transparent;
  pointer-events: none;
}

.mic-btn.recording .mic-ring {
  border-color: rgba(248, 113, 113, 0.65);
  animation: micRing 1.2s ease-out infinite;
}

@keyframes micRing {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}

.status-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cancel-btn {
  background: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: var(--err);
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.cancel-btn[hidden] { display: none; }

.new-chat-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.new-chat-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--mind-status-pill-fg, var(--text));
  white-space: nowrap;
}

.status-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}

.status-pill.busy .dot { background: var(--warn); animation: pulse 1s infinite; }
.status-pill.error .dot { background: var(--err); }
.status-pill.listening .dot { background: var(--accent2); animation: pulse 0.6s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.chat {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-5) var(--chat-pad);
  padding-bottom: var(--space-5);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.chat-thread {
  width: 100%;
  max-width: var(--reading-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.msg {
  padding: var(--content-pad);
  border-radius: var(--radius);
  line-height: var(--leading);
  font-size: var(--font-body);
  overflow-wrap: break-word;
  animation: fadeIn 0.25s ease;
  min-width: 0;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.msg.user {
  align-self: flex-start;
  max-width: min(92%, 28rem);
  background: var(--user);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-bottom-right-radius: 4px;
  white-space: pre-wrap;
  line-height: var(--leading);
  padding: var(--space-3) var(--space-4);
}

.msg.assistant {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  background: linear-gradient(180deg, #1e2838 0%, #182030 100%);
  border: 1px solid rgba(143, 163, 188, 0.28);
  border-bottom-left-radius: 4px;
  padding: var(--space-4);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
}

.msg-text {
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%;
}

.msg.assistant .msg-text {
  max-width: 100%;
  margin-inline: 0;
  width: 100%;
}

.md-doc {
  display: block;
  max-width: 100%;
  min-width: 0;
  font-size: var(--font-body);
  line-height: var(--leading);
  color: #e8eef6;
  letter-spacing: 0.01em;
}

.md-doc.is-streaming {
  opacity: 0.94;
}

.md-doc > * + * {
  margin-top: var(--space-4);
}

.md-doc > .md-h1 + *,
.md-doc > .md-h2 + *,
.md-doc > .md-h3 + *,
.md-doc > .md-h4 + * {
  margin-top: var(--space-2);
}

.md-p {
  margin: 0;
  line-height: 1.68;
  color: #e4ebf5;
  text-align: start;
}

.md-p + .md-p {
  margin-top: var(--space-3);
}

.md-h1, .md-h2, .md-h3, .md-h4, .md-h5, .md-h6 {
  margin: 0;
  line-height: var(--leading-tight);
  font-weight: 700;
  color: #f5f8fd;
  letter-spacing: -0.01em;
}

.md-h1 {
  font-size: 1.15rem;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid rgba(143, 163, 188, 0.25);
}

.md-h2 {
  font-size: 1.08rem;
  margin-top: var(--space-2);
  color: #f0f5fc;
}

.md-h3 {
  font-size: 1rem;
  color: #eef3fb;
  padding-inline-start: var(--space-3);
  border-inline-start: 3px solid var(--accent);
  margin-top: var(--space-1);
}

.md-h4 {
  font-size: 1.02rem;
  color: #dce6f4;
}

.md-h5, .md-h6 {
  font-size: 0.98rem;
  color: #d5e0ef;
}

.md-hr {
  border: none;
  border-top: 1px solid rgba(143, 163, 188, 0.22);
  margin: var(--space-4) 0;
}

.md-list {
  margin: 0;
  padding-inline-start: 1.5rem;
  padding-inline-end: 0;
  line-height: var(--leading);
}

.md-list li {
  margin: var(--space-2) 0;
  padding-inline-start: var(--space-1);
  color: #e4ebf5;
}

.md-list li::marker {
  color: var(--accent);
  font-weight: 600;
}

.md-list-ol {
  list-style: decimal;
}

.md-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  margin: var(--space-3) 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  background: rgba(0, 0, 0, 0.12);
}

.md-table-wrap.is-wide {
  box-shadow: inset 0 -1px 0 rgba(99, 102, 241, 0.2);
}

.md-table-scroll-hint {
  display: none;
  padding: 0.35rem 0.65rem;
  font-size: 0.68rem;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid rgba(143, 163, 188, 0.15);
}

.md-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
  table-layout: auto;
}

.md-table th,
.md-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  text-align: start;
  vertical-align: top;
  line-height: 1.55;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: manual;
  min-width: 4.5rem;
  max-width: 18rem;
}

.md-table th {
  background: rgba(99, 102, 241, 0.14);
  color: #e2ebfa;
  font-weight: 700;
  font-size: var(--font-xs);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.md-table td:first-child {
  font-weight: 600;
  color: #eef3fb;
  white-space: normal;
}

.md-table td {
  color: #e4ebf5;
}

.md-table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

.md-table tr:hover td {
  background: rgba(99, 102, 241, 0.06);
}

.md-table tr:last-child td {
  border-bottom: none;
}

.md-quote {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid rgba(99, 102, 241, 0.55);
  background: rgba(99, 102, 241, 0.08);
  border-radius: 0 10px 10px 0;
  color: #d0dced;
}

.md-link {
  color: #93c5fd;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.md-link:hover {
  color: #bfdbfe;
}

.md-tag {
  display: inline-block;
  margin: 0.1rem 0.2rem;
  padding: 0.14rem 0.55rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #c4d4ff;
  background: rgba(99, 102, 241, 0.18);
  border: 1px solid rgba(99, 102, 241, 0.35);
}

.msg-answer strong,
.md-doc strong {
  color: #ffffff;
  font-weight: 700;
}

.md-label {
  display: inline-block;
  min-width: 5.5rem;
  color: #c8d8f0 !important;
  font-weight: 700;
}

.msg-answer em,
.md-doc em {
  color: #d5e0f0;
  font-style: normal;
  font-weight: 500;
}

.inline-code {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.84em;
  padding: 0.14rem 0.42rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(143, 163, 188, 0.25);
  color: #d8e6ff;
  direction: ltr;
  unicode-bidi: embed;
}

.code-wrap {
  margin: var(--space-2) 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.38);
}

.code-lang {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--border);
  direction: ltr;
  text-align: left;
}

.code-block {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
  direction: ltr;
  text-align: left;
  white-space: pre;
  color: #c9d8ee;
  background: transparent;
  border: none;
}

.msg-text {
  word-break: break-word;
  overflow-wrap: break-word;
}

.thinking-block {
  display: block;
  margin: var(--space-5) 0;
  padding: 0;
  border: 2px solid rgba(99, 102, 241, 0.5);
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(12, 16, 24, 0.95) 0%,
    rgba(8, 11, 18, 0.98) 100%
  );
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 6px 20px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  isolation: isolate;
}

.thinking-block + .md-doc,
.md-doc + .thinking-block {
  margin-top: var(--space-5);
}

.thinking-block[open] {
  border-color: rgba(99, 102, 241, 0.72);
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.thinking-summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  padding: 0.62rem 0.85rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #b8c5d9;
  background: rgba(99, 102, 241, 0.12);
  border-bottom: 1px solid rgba(99, 102, 241, 0.28);
  list-style: none;
  user-select: none;
}

.thinking-summary::-webkit-details-marker {
  display: none;
}

.thinking-summary::before {
  content: "▸";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.2);
  font-size: 0.65rem;
  transition: transform 0.15s ease;
}

.thinking-block[open] > .thinking-summary::before {
  transform: rotate(90deg);
}

.thinking-body {
  padding: 0.75rem 0.9rem 0.9rem;
  font-size: 0.76rem;
  line-height: 1.7;
  color: #9fb0c7;
  font-family: ui-monospace, "Cascadia Code", "Vazirmatn", monospace;
  background: rgba(0, 0, 0, 0.28);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

.block-icon {
  opacity: 0.85;
  font-size: 0.85em;
}

.tool-block {
  display: block;
  margin: var(--space-4) 0;
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 10px;
  background: rgba(34, 211, 238, 0.06);
  overflow: hidden;
}

.tool-block.gemma-tool-response {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.06);
}

.tool-summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  padding: 0.55rem 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #a8e6f5;
  background: rgba(34, 211, 238, 0.1);
  border-bottom: 1px solid rgba(34, 211, 238, 0.2);
  list-style: none;
  user-select: none;
}

.gemma-tool-response > .tool-summary {
  color: #9ee8c8;
  background: rgba(52, 211, 153, 0.1);
  border-bottom-color: rgba(52, 211, 153, 0.2);
}

.tool-summary::-webkit-details-marker {
  display: none;
}

.tool-body {
  padding: 0.65rem 0.85rem;
  max-height: 220px;
  overflow: auto;
}

.tool-payload {
  display: block;
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.72rem;
  line-height: 1.65;
  color: #c5e8f0;
  white-space: pre-wrap;
  word-break: break-word;
  direction: ltr;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
}

.thinking-block + .tool-block,
.tool-block + .md-doc,
.md-doc + .tool-block,
.tool-block + .thinking-block {
  margin-top: var(--space-4);
}

.msg.system {
  align-self: center;
  max-width: 100%;
  background: transparent;
  color: var(--muted);
  font-size: var(--font-xs);
  padding: var(--space-2) 0;
  text-align: center;
  line-height: 1.6;
}

.msg.typing:not(.assistant)::after {
  content: "▋";
  animation: blink 0.8s step-end infinite;
  margin-right: 2px;
}

.stream-cursor::after {
  content: "▋";
  animation: blink 0.8s step-end infinite;
  margin-inline-start: 1px;
  color: var(--accent);
}

.stream-skeleton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
}

.stream-skeleton span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.45;
  animation: stream-dot 1.2s ease-in-out infinite;
}

.stream-skeleton span:nth-child(2) { animation-delay: 0.15s; }
.stream-skeleton span:nth-child(3) { animation-delay: 0.3s; }

@keyframes stream-dot {
  0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}

.msg-stream-audio {
  margin-top: var(--space-2);
  width: 100%;
}

.stream-player {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 1.75rem;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.16);
  background: rgba(34, 211, 238, 0.05);
  direction: ltr;
  text-align: left;
}

.stream-player.is-buffering .stream-player-track {
  opacity: 0.75;
}

.sp-btn {
  order: 1;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.3);
  background: rgba(34, 211, 238, 0.1);
  color: #e8f4ff;
  cursor: pointer;
  font-size: 0.62rem;
  line-height: 1;
  flex-shrink: 0;
  padding: 0;
}

.sp-btn:hover {
  background: rgba(34, 211, 238, 0.2);
}

.sp-time {
  order: 2;
  font-size: 0.65rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 4.5rem;
  text-align: left;
  direction: ltr;
}

.stream-player-track {
  order: 3;
  position: relative;
  flex: 1;
  min-width: 0;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
  overflow: hidden;
  direction: ltr;
}

.sp-segment-lanes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  direction: ltr;
}

.sp-segment-lane {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  background: rgba(34, 211, 238, 0.12);
  border-inline-end: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}

.sp-segment-lane.is-loading {
  background: rgba(99, 102, 241, 0.18);
  animation: sp-lane-pulse 1.1s ease-in-out infinite;
}

.sp-segment-lane.is-ready {
  background: rgba(34, 211, 238, 0.22);
}

.sp-segment-lane.is-active {
  background: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.5);
}

@keyframes sp-lane-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.sp-segments {
  order: 4;
  font-size: 0.62rem;
  font-weight: 600;
  color: #9eb4cc;
  flex-shrink: 0;
  white-space: nowrap;
  direction: rtl;
  padding-inline-start: 0.15rem;
}

.sp-buffer,
.sp-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

.sp-buffer {
  background: rgba(34, 211, 238, 0.14);
  transition: width 0.2s ease;
}

.sp-progress {
  background: linear-gradient(90deg, #22d3ee, #6366f1);
  transition: width 0.08s linear;
  z-index: 2;
}

.sp-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  direction: ltr;
  z-index: 3;
}

.sp-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.35);
  transform: translateX(-50%);
}

.msg-audio-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  width: 100%;
}

.msg-audio {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
}

.msg.user .msg-audio {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.msg.assistant .msg-audio {
  background: rgba(34, 211, 238, 0.06);
  border-color: rgba(34, 211, 238, 0.18);
}

.msg-audio--in {
  border-color: rgba(99, 102, 241, 0.28);
  background: rgba(99, 102, 241, 0.1);
}

.msg-audio.is-playing {
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.25);
}

.msg-audio-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
  font-size: var(--font-xs);
  color: var(--muted);
}

.msg-audio-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.msg-audio-label {
  font-weight: 600;
  color: #c8d4e6;
}

.msg-audio-player {
  display: block;
  width: 100%;
  min-width: 0;
  height: 36px;
  border-radius: 8px;
}

.msg-audio-player::-webkit-media-controls-panel {
  background: rgba(15, 20, 28, 0.85);
}

.msg-user-text {
  margin-bottom: 0.35rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.audio-shell {
  padding: 0 var(--chat-pad);
  flex-shrink: 0;
}

.audio-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: var(--reading-max);
  margin: 0 auto;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
}

.wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}

.wave span {
  display: block;
  width: 3px;
  height: 100%;
  background: var(--accent2);
  border-radius: 2px;
  animation: wave 0.9s ease-in-out infinite;
}

.wave span:nth-child(2) { animation-delay: 0.1s; }
.wave span:nth-child(3) { animation-delay: 0.2s; }
.wave span:nth-child(4) { animation-delay: 0.3s; }
.wave span:nth-child(5) { animation-delay: 0.4s; }

@keyframes wave {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

#audioLabel { flex: 1; font-size: 0.85rem; color: var(--muted); }

.btn-icon {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.composer {
  padding: var(--space-3) var(--chat-pad) calc(var(--space-3) + env(safe-area-inset-bottom) + var(--kb-offset, 0px));
  border-top: 1px solid var(--os-glass-border);
  background: var(--os-glass);
  backdrop-filter: blur(var(--os-dock-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--os-dock-blur)) saturate(1.25);
  flex-shrink: 0;
  position: relative;
  z-index: 40;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
}

.settings-toggle {
  display: none;
  width: 100%;
  max-width: var(--reading-max);
  margin: 0 auto var(--space-2);
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
  color: var(--muted);
  font: inherit;
  font-size: var(--font-xs);
  text-align: right;
  cursor: pointer;
  touch-action: manipulation;
}

.composer-settings.is-collapsed .stt-lang-bar {
  display: none;
}

.composer-row {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  width: 100%;
  max-width: var(--reading-max);
  margin: 0 auto;
}

.stt-lang-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--reading-max);
  margin: 0 auto var(--space-2);
  padding: 0.35rem 0.45rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.18);
}

.stt-lang-label {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  font-weight: 600;
}

.stt-lang-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1;
  justify-content: flex-end;
}

.stt-lang-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.stt-lang-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: rgba(99, 102, 241, 0.45);
}

.stt-lang-btn.active {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.55);
  color: #dbe4ff;
  font-weight: 600;
}

.stt-lang-btn.is-disabled-option {
  opacity: 0.38;
  cursor: not-allowed;
  text-decoration: line-through;
}

.stt-lang-bar.is-disabled {
  opacity: 0.65;
}

textarea {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 108px;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--font-sm);
  line-height: 1.45;
  appearance: none;
}

textarea::-webkit-outer-spin-button,
textarea::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

textarea:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.mic-btn svg,
.send-btn svg,
.settings-toggle svg {
  pointer-events: none;
}

.js-error-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 0.65rem 1rem;
  background: #7f1d1d;
  color: #fecaca;
  font-size: 0.85rem;
  text-align: center;
}

.mic-btn, .send-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.15s, background 0.15s;
  position: relative;
  z-index: 2;
}

.mic-btn:active,
.send-btn:active {
  transform: scale(0.94);
}

.mic-btn {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
}

.mic-btn:active,
.mic-btn.recording {
  background: rgba(248, 113, 113, 0.2);
  border-color: var(--err);
  color: var(--err);
  transform: scale(0.96);
}

.send-btn {
  background: linear-gradient(135deg, var(--accent), #818cf8);
  color: white;
}

.mic-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.hint {
  margin: var(--space-3) auto 0;
  max-width: var(--reading-max);
  text-align: center;
  font-size: var(--font-xs);
  color: var(--muted);
  line-height: 1.6;
}

.hint a {
  color: var(--muted);
}

/* ── Responsive ── */

@media (max-width: 640px) {
  .md-table-wrap.is-card {
    overflow-x: hidden;
  }

  .md-table-wrap.is-card .md-table-scroll-hint {
    display: none;
  }

  .md-table-wrap.is-card .md-table {
    width: 100%;
    min-width: 0;
  }

  .md-table-wrap.is-card thead {
    display: none;
  }

  .md-table-wrap.is-card tbody tr {
    display: block;
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
  }

  .md-table-wrap.is-card tbody tr:last-child {
    margin-bottom: 0;
  }

  .md-table-wrap.is-card td {
    display: grid;
    grid-template-columns: minmax(5.5rem, 38%) 1fr;
    gap: var(--space-2);
    padding: 0.4rem 0;
    border: none;
    max-width: none;
    min-width: 0;
  }

  .md-table-wrap.is-card td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #b8c5d9;
    font-size: var(--font-xs);
    line-height: 1.45;
  }

  .md-table-wrap.is-card td:first-child::before {
    color: #c4d4ff;
  }

  .md-table-wrap.is-wide .md-table-scroll-hint {
    display: block;
  }
}

@media (max-width: 480px) {
  :root {
    --chat-pad: 0.85rem;
    --content-pad: 0.9rem;
    --composer-height: 5rem;
  }
  .header-actions { width: 100%; justify-content: flex-end; }
  .mode-chip { display: none; }
  .welcome-panel { padding: var(--space-4); margin-bottom: var(--space-4); }
  .mode-grid { grid-template-columns: 1fr; }
  .recording-hint { display: none; }
  .msg.user { max-width: 94%; }
  .msg.assistant { padding: var(--space-4); }
  .composer {
    padding: var(--space-3) var(--chat-pad);
    padding-left: max(var(--chat-pad), env(safe-area-inset-left));
    padding-right: max(var(--chat-pad), env(safe-area-inset-right));
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom) + var(--kb-offset, 0px));
  }
  .composer--voice .composer-dock {
    max-height: min(42vh, 22rem);
  }
  .composer-row { gap: 0.4rem; }
  .mic-btn, .send-btn { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
  .stt-lang-btn { min-height: 36px; }
  textarea {
    font-size: 16px;
    min-height: 48px;
  }
}

@media (min-width: 640px) {
  .mode-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mode-grid--compact .mode-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .settings-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  .settings-row .settings-label {
    margin: 0;
    min-width: 7rem;
  }

  .settings-row .stt-lang-options {
    flex: 1;
    justify-content: flex-start;
  }

  .feature-chips--settings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }
}

@media (min-width: 768px) {
  :root { --app-max: 760px; }
}

@media (min-width: 900px) {
  :root { --app-max: 880px; }

  .composer-settings .settings-body {
    max-height: min(38vh, 20rem);
  }

  .mode-grid--compact .mode-card {
    padding: 0.5rem 0.55rem;
  }
}

@media (min-width: 1400px) {
  .app-shell { padding: 0 1rem; }
}

/* --- Stream player + fast text UX --- */
@keyframes blink {
  50% { opacity: 0; }
}

.stream-cursor::after {
  content: "▋";
  animation: blink 0.8s step-end infinite;
  margin-inline-start: 1px;
  color: var(--accent);
}

.stream-skeleton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
}

.stream-skeleton span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.45;
  animation: stream-dot 1.2s ease-in-out infinite;
}

.stream-skeleton span:nth-child(2) { animation-delay: 0.15s; }
.stream-skeleton span:nth-child(3) { animation-delay: 0.3s; }

@keyframes stream-dot {
  0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}

.msg-stream-audio {
  margin-top: var(--space-2);
  width: 100%;
}

.stream-player {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 1.75rem;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.16);
  background: rgba(34, 211, 238, 0.05);
  direction: ltr;
  text-align: left;
}

.sp-btn {
  order: 1;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.3);
  background: rgba(34, 211, 238, 0.1);
  color: #e8f4ff;
  cursor: pointer;
  font-size: 0.62rem;
  line-height: 1;
  flex-shrink: 0;
  padding: 0;
}

.sp-btn:hover {
  background: rgba(34, 211, 238, 0.2);
}

.sp-time {
  order: 2;
  font-size: 0.65rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 4.5rem;
  text-align: left;
  direction: ltr;
}

.stream-player-track {
  order: 3;
  position: relative;
  flex: 1;
  min-width: 0;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
  overflow: hidden;
  direction: ltr;
}

.sp-segment-lanes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  direction: ltr;
}

.sp-segment-lane {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  background: rgba(34, 211, 238, 0.12);
  border-inline-end: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}

.sp-segment-lane.is-loading {
  background: rgba(99, 102, 241, 0.18);
  animation: sp-lane-pulse 1.1s ease-in-out infinite;
}

.sp-segment-lane.is-ready {
  background: rgba(34, 211, 238, 0.22);
}

.sp-segment-lane.is-active {
  background: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.5);
}

@keyframes sp-lane-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.sp-buffer,
.sp-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

.sp-buffer {
  background: rgba(34, 211, 238, 0.14);
  transition: width 0.2s ease;
}

.sp-progress {
  background: linear-gradient(90deg, #22d3ee, #6366f1);
  transition: width 0.08s linear;
  z-index: 2;
}

.sp-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  direction: ltr;
  z-index: 3;
}

.sp-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.35);
  transform: translateX(-50%);
}

.sp-segments {
  order: 4;
  font-size: 0.62rem;
  font-weight: 600;
  color: #9eb4cc;
  flex-shrink: 0;
  white-space: nowrap;
  direction: rtl;
  padding-inline-start: 0.15rem;
}

/* --- Stream player + fast text UX --- */
@keyframes blink {
  50% { opacity: 0; }
}

.stream-cursor::after {
  content: "▋";
  animation: blink 0.8s step-end infinite;
  margin-inline-start: 1px;
  color: var(--accent);
}

.stream-skeleton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
}

.stream-skeleton span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.45;
  animation: stream-dot 1.2s ease-in-out infinite;
}

.stream-skeleton span:nth-child(2) { animation-delay: 0.15s; }
.stream-skeleton span:nth-child(3) { animation-delay: 0.3s; }

@keyframes stream-dot {
  0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}

.msg-stream-audio {
  margin-top: var(--space-2);
  width: 100%;
}

.stream-player {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 1.75rem;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.16);
  background: rgba(34, 211, 238, 0.05);
  direction: ltr;
  text-align: left;
}

.sp-btn {
  order: 1;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.3);
  background: rgba(34, 211, 238, 0.1);
  color: #e8f4ff;
  cursor: pointer;
  font-size: 0.62rem;
  line-height: 1;
  flex-shrink: 0;
  padding: 0;
}

.sp-btn:hover {
  background: rgba(34, 211, 238, 0.2);
}

.sp-time {
  order: 2;
  font-size: 0.65rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 4.5rem;
  text-align: left;
  direction: ltr;
}

.stream-player-track {
  order: 3;
  position: relative;
  flex: 1;
  min-width: 0;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
  overflow: hidden;
  direction: ltr;
}

.sp-segment-lanes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  direction: ltr;
}

.sp-segment-lane {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  background: rgba(34, 211, 238, 0.12);
  border-inline-end: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}

.sp-segment-lane.is-loading {
  background: rgba(99, 102, 241, 0.18);
  animation: sp-lane-pulse 1.1s ease-in-out infinite;
}

.sp-segment-lane.is-ready {
  background: rgba(34, 211, 238, 0.22);
}

.sp-segment-lane.is-active {
  background: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.5);
}

@keyframes sp-lane-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.sp-buffer,
.sp-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

.sp-buffer {
  background: rgba(34, 211, 238, 0.14);
  transition: width 0.2s ease;
}

.sp-progress {
  background: linear-gradient(90deg, #22d3ee, #6366f1);
  transition: width 0.08s linear;
  z-index: 2;
}

.sp-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  direction: ltr;
  z-index: 3;
}

.sp-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.35);
  transform: translateX(-50%);
}

.sp-segments {
  order: 4;
  font-size: 0.62rem;
  font-weight: 600;
  color: #9eb4cc;
  flex-shrink: 0;
  white-space: nowrap;
  direction: rtl;
  padding-inline-start: 0.15rem;
}

/* --- Composer dock (text/voice tabs + PWA) v29 --- */
.composer-dock { width:100%; max-width:var(--reading-max); margin:0 auto; display:flex; flex-direction:column; gap:var(--space-2); }
.composer--voice .composer-dock {
  max-height: min(48vh, 26rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.composer-toolbar { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-shrink: 0; }
.input-mode-tabs { display:inline-flex; padding:3px; border-radius:999px; background:rgba(0,0,0,.35); border:1px solid var(--border); }
.input-mode-tab { display:inline-flex; align-items:center; gap:.35rem; border:none; background:transparent; color:var(--muted); font:inherit; font-size:var(--font-xs); font-weight:600; padding:.38rem .85rem; border-radius:999px; cursor:pointer; touch-action:manipulation; }
.input-mode-tab.active, .input-mode-tab[aria-selected="true"] { background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(99,102,241,.22)); color:#e8f4ff; box-shadow:inset 0 0 0 1px rgba(34,211,238,.25); }
.composer-toolbar-actions { display:flex; gap:.35rem; }
.toolbar-btn { display:inline-flex; align-items:center; gap:.3rem; border:1px solid var(--border); background:rgba(0,0,0,.25); color:var(--muted); font:inherit; font-size:.68rem; padding:.35rem .55rem; border-radius:10px; cursor:pointer; }
.toolbar-btn[hidden] { display:none !important; }
.composer-panel { width:100%; }
.composer-panel[hidden] { display:none !important; }
.text-input-wrap { flex:1; display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.text-input-wrap--with-send {
  position: relative;
  display: block;
}
.text-input-wrap--with-send #messageInput {
  width: 100%;
  padding-inline-end: 0.75rem;
  /* دکمه ارسال روی لبهٔ فیزیکی چپ فیلد */
  padding-left: 3.1rem;
  padding-right: 0.85rem;
  min-height: 2.75rem;
  box-sizing: border-box;
}
.text-input-wrap--with-send .send-btn--in-field {
  position: absolute;
  left: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  border-radius: 11px;
  z-index: 3;
}
.text-input-wrap--with-send .send-btn--in-field:active {
  transform: translateY(-50%) scale(0.94);
}
.text-input-wrap--with-send .char-count {
  position: absolute;
  left: 3.1rem;
  bottom: 0.2rem;
  pointer-events: none;
}
.text-input-meta { display:flex; align-items:center; justify-content:space-between; min-height:1.1rem; }
.char-count { font-size:.65rem; color:var(--muted); opacity:0; }
.char-count.is-visible { opacity:1; }
.meta-btn { border:none; background:transparent; color:var(--muted); font:inherit; font-size:.65rem; cursor:pointer; padding:.15rem .35rem; border-radius:6px; }
.composer-hint { margin:.35rem 0 0; font-size:.65rem; color:var(--muted); text-align:center; }
.voice-options-grid { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-bottom:.55rem; }
.voice-option-label { display:flex; align-items:center; justify-content:space-between; font-size:.68rem; font-weight:600; color:var(--muted); margin-bottom:.3rem; }
.device-status { width:8px; height:8px; border-radius:50%; background:rgba(248,113,113,.6); }
.device-status.is-ok { background:#34d399; }
.device-select-row { display:flex; gap:.35rem; }
.device-select { flex:1; min-width:0; border:1px solid var(--border); background:rgba(0,0,0,.3); color:var(--text); font:inherit; font-size:.72rem; border-radius:10px; padding:.4rem .5rem; }
.segmented { display:flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.segmented-btn { flex:1; border:none; background:rgba(0,0,0,.2); color:var(--muted); font:inherit; font-size:.68rem; padding:.38rem .4rem; cursor:pointer; }
.segmented-btn.active, .segmented-btn[aria-pressed="true"] { background:rgba(99,102,241,.22); color:#dbe4ff; font-weight:600; }
.segmented--3 .segmented-btn { font-size:.62rem; padding:.36rem .28rem; }
.voice-option--wide { grid-column:1 / -1; }
.auto-listen-panel[hidden] { display:none !important; }
.auto-listen-pill { font-size:.68rem; font-weight:600; padding:.22rem .55rem; border-radius:999px; background:rgba(99,102,241,.15); color:#c4d4ff; }
.auto-listen-pill[data-state="listening"] { background:rgba(34,211,238,.15); color:#a5f3fc; }
.auto-listen-pill[data-state="speaking"] { background:rgba(52,211,153,.18); color:#6ee7b7; animation:auto-pulse 1.2s ease-in-out infinite; }
.auto-listen-pill[data-state="sending"] { background:rgba(251,191,36,.15); color:#fde68a; }
.auto-listen-detail { margin:0; font-size:.62rem; color:#fbbf24; line-height:1.4; text-align:right; }
.auto-listen-detail[hidden] { display:none !important; }
.auto-listen-pill[data-state="processing"] { background:rgba(56,189,248,.15); color:#7dd3fc; animation:auto-pulse 1.4s ease-in-out infinite; }
.auto-listen-pill[data-state="info"] { background:rgba(99,102,241,.12); color:#c4d4ff; }
@keyframes auto-pulse { 0%,100% { opacity:1; } 50% { opacity:.65; } }
.auto-transcript-box { position:relative; min-height:4.5rem; max-height:none; overflow-y:auto; padding:.55rem .65rem .7rem; border-radius:10px; background:rgba(0,0,0,.35); border:1px solid var(--border); font-size:.82rem; line-height:1.55; text-align:right; direction:rtl; }
.auto-transcript-box.is-review { border-color:rgba(99,102,241,.35); padding-bottom:1rem; }
.auto-transcript-box.is-smart-edit { min-height:5.5rem; }
.auto-transcript-placeholder { color:var(--muted); font-size:.72rem; display:block; }
.auto-transcript-placeholder[hidden] { display:none !important; }
.auto-transcript-final { color:var(--text); }
.auto-transcript-interim { color:#93c5fd; opacity:.9; }
.auto-transcript-edit { width:100%; min-height:4.5rem; max-height:7rem; border:none; background:transparent; color:var(--text); font:inherit; font-size:.82rem; line-height:1.55; text-align:right; direction:rtl; resize:vertical; outline:none; padding:0; }
.auto-transcript-edit:focus { box-shadow:inset 0 -2px 0 rgba(99,102,241,.55); }
.auto-transcript-edit[hidden] { display:none !important; }
.auto-word-editor { display:flex; flex-direction:column; gap:.45rem; width:100%; }
.auto-word-editor[hidden] { display:none !important; }
.auto-word-editor-head { display:flex; align-items:center; justify-content:flex-start; }
.auto-word-editor-badge { display:inline-flex; align-items:center; gap:.35rem; font-size:.62rem; font-weight:600; color:#fde68a; }
.auto-word-editor-dot { width:7px; height:7px; border-radius:50%; background:#fbbf24; box-shadow:0 0 8px rgba(251,191,36,.55); }
.auto-word-tokens { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; direction:rtl; gap:.1rem .05rem; width:100%; padding:.15rem 0; }
.auto-word-chip { border:1px solid rgba(251,191,36,.38); background:rgba(251,191,36,.16); color:#fef3c7; font:inherit; font-size:.8rem; line-height:1.35; padding:.38rem .62rem; border-radius:9px; cursor:pointer; transition:transform .12s ease, background .12s ease, border-color .12s ease; max-width:100%; word-break:break-word; }
.auto-word-chip:hover, .auto-word-chip:focus-visible { background:rgba(251,191,36,.28); border-color:rgba(251,191,36,.55); transform:translateY(-1px); outline:none; }
.auto-word-chip.is-audio-patched { border-color:rgba(52,211,153,.55); background:rgba(16,185,129,.2); color:#d1fae5; box-shadow:0 0 0 1px rgba(52,211,153,.25); }
.auto-word-chip.is-audio-patched::after { content:"♪"; margin-right:.28rem; font-size:.62rem; opacity:.85; }
.auto-word-gap { flex:0 0 auto; width:10px; min-height:32px; padding:0; margin:0 .04rem; border:none; background:transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.auto-word-gap-bar { display:block; width:1px; height:14px; border-radius:1px; background:var(--text-muted, #64748b); opacity:.28; transition:height .12s ease, opacity .12s ease; }
.auto-word-gap:hover .auto-word-gap-bar, .auto-word-gap:focus-visible .auto-word-gap-bar { height:18px; opacity:.55; }
.auto-word-gap:focus-visible { outline:none; }
.auto-word-chip-input { border:1px solid rgba(99,102,241,.55); background:rgba(99,102,241,.12); color:var(--text); font:inherit; font-size:.8rem; padding:.35rem .55rem; border-radius:9px; min-width:4.5rem; max-width:min(100%,14rem); outline:none; }
.auto-word-chip-input--new { min-width:5rem; border-color:rgba(34,211,238,.55); background:rgba(34,211,238,.08); }
.auto-word-chip-input:focus { box-shadow:0 0 0 2px rgba(99,102,241,.25); }
.auto-word-edit-wrap { display:inline-flex; align-items:center; gap:.3rem; max-width:100%; padding:.12rem; border-radius:10px; background:rgba(99,102,241,.08); border:1px solid rgba(99,102,241,.35); }
.auto-word-edit-wrap .auto-word-chip-input { flex:1; min-width:4rem; border:none; background:transparent; box-shadow:none; }
.auto-word-edit-wrap .auto-word-chip-input:focus { box-shadow:none; }
.auto-word-mic-btn { flex-shrink:0; width:30px; height:30px; border:none; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#c4d4ff; background:rgba(99,102,241,.22); transition:background .12s ease, color .12s ease, transform .12s ease; }
.auto-word-mic-btn:hover, .auto-word-mic-btn:focus-visible { background:rgba(99,102,241,.38); color:#fff; outline:none; transform:scale(1.04); }
.auto-word-mic-btn.is-recording { background:rgba(248,113,113,.28); color:#fecaca; animation:auto-mic-pulse 1s ease-in-out infinite; }
.auto-word-mic-btn.is-recording:hover { background:rgba(248,113,113,.4); }
@keyframes auto-mic-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(248,113,113,.35); } 50% { box-shadow:0 0 0 6px rgba(248,113,113,0); } }
.auto-word-mic-btn[hidden] { display:none !important; }
.auto-word-progress { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(99,102,241,.12); border-radius:0 0 10px 10px; overflow:hidden; }
.auto-word-progress[hidden] { display:none !important; }
.auto-word-progress-fill { height:100%; width:100%; background:linear-gradient(270deg,#6366f1,#a78bfa); transform-origin:100% 50%; transform:scaleX(1); }
.auto-word-progress-fill.is-running { animation:auto-progress-countdown 3s linear forwards; }
@keyframes auto-progress-countdown { from { transform:scaleX(1); } to { transform:scaleX(0); } }
.auto-review-btn--accent { background:rgba(34,211,238,.12); border-color:rgba(34,211,238,.35); color:#a5f3fc; }
@media (max-width:520px) {
  .auto-word-chip { font-size:.74rem; padding:.32rem .5rem; }
  .auto-word-gap { width:12px; margin:0 .04rem; }
  .auto-word-gap-bar { height:16px; }
  .auto-review-actions { display:grid; grid-template-columns:1fr 1fr; }
  .auto-review-btn--primary { grid-column:1 / -1; }
}
.auto-review-bar { display:flex; flex-direction:column; gap:.5rem; padding:.5rem 0 0; border-top:1px solid rgba(99,102,241,.15); }
.auto-review-bar[hidden] { display:none !important; }
.auto-review-countdown { display:flex; align-items:center; gap:.55rem; }
.auto-review-countdown[hidden] { display:none !important; }
.auto-review-countdown-visual { position:relative; width:40px; height:40px; flex-shrink:0; }
.auto-review-ring { width:40px; height:40px; transform:rotate(-90deg); }
.auto-review-ring-bg { stroke:rgba(255,255,255,.12); }
.auto-review-ring-fg { stroke:#818cf8; stroke-linecap:round; stroke-dasharray:97.4; stroke-dashoffset:97.4; }
.auto-review-ring.is-running .auto-review-ring-fg { animation:auto-ring-countdown 3s linear forwards; }
@keyframes auto-ring-countdown { from { stroke-dashoffset:97.4; } to { stroke-dashoffset:0; } }
.auto-review-countdown-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:#c4d4ff; }
.auto-review-countdown-label { font-size:.68rem; color:var(--muted); }
.auto-review-actions { display:flex; flex-wrap:wrap; gap:.35rem; }
.auto-review-btn { flex:1; min-width:5.5rem; border:1px solid var(--border); background:rgba(0,0,0,.25); color:var(--text); font:inherit; font-size:.68rem; padding:.4rem .55rem; border-radius:10px; cursor:pointer; }
.auto-review-btn--primary { background:rgba(99,102,241,.35); border-color:rgba(99,102,241,.5); color:#e0e7ff; font-weight:600; }
.auto-review-btn--ghost { color:var(--muted); }
.auto-send-options { display:flex; flex-direction:column; gap:.35rem; padding:.45rem 0 0; border-top:1px dashed rgba(99,102,241,.12); }
.auto-send-option { display:flex; align-items:flex-start; gap:.45rem; cursor:pointer; font-size:.68rem; color:var(--muted); }
.auto-send-option input { margin-top:.15rem; accent-color:#6366f1; }
.auto-send-option-text { display:flex; flex-direction:column; gap:.1rem; }
.auto-send-option-text strong { color:#c4d4ff; font-size:.7rem; }
.auto-send-option-text small { font-size:.6rem; opacity:.85; }
.auto-listen-pill[data-state="review"] { background:rgba(251,191,36,.15); color:#fde68a; }
.auto-sensitivity { display:flex; flex-direction:column; gap:.25rem; }
.auto-sensitivity label { font-size:.65rem; color:var(--muted); font-weight:600; }
.auto-sensitivity input[type="range"] { width:100%; accent-color:#6366f1; }
.auto-sensitivity-hint { font-size:.62rem; color:var(--muted); }
.mic-level { position:relative; height:6px; border-radius:999px; background:rgba(0,0,0,.35); overflow:hidden; }
.mic-level-fill { height:100%; width:0%; border-radius:999px; background:linear-gradient(270deg,#34d399,#22d3ee 60%,#fbbf24); transition:width 90ms linear; }
.mic-level-fill.is-over { background:linear-gradient(270deg,#34d399,#22d3ee 40%,#6ee7b7); }
.mic-level-threshold { position:absolute; top:-2px; bottom:-2px; width:2px; background:rgba(255,255,255,.55); border-radius:1px; transition:right 200ms ease; }
.voice-recorder-stage { display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:.25rem 0 0; }
.voice-recorder-stage[hidden] { display:none !important; }
/* ---------- voice hub — compact dock ---------- */
.voice-hub { display:flex; flex-direction:column; gap:.45rem; }
.voice-hub-toolbar {
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.15rem 0;
}
.voice-hub-mic-slot {
  position:relative;
  flex-shrink:0;
  width:64px;
  height:64px;
}
.voice-hub-mic-slot .mic-btn--hero {
  position:absolute;
  inset:0;
  margin:0;
}
.voice-hub-mic-slot .mic-btn[hidden] { display:none !important; }
.voice-hub-meta {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.2rem;
  align-items:flex-start;
}
.voice-hub-tools {
  display:flex;
  flex-shrink:0;
  gap:.35rem;
}
.voice-tool-btn {
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(99,102,241,.35);
  background:rgba(99,102,241,.12);
  color:#c4d4ff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .12s;
}
.voice-tool-btn:hover,
.voice-tool-btn.is-active {
  background:rgba(99,102,241,.28);
  border-color:rgba(129,140,248,.55);
  color:#fff;
}
.voice-tool-btn:active { transform:scale(.96); }
.voice-popover {
  border:1px solid rgba(99,102,241,.28);
  border-radius:14px;
  background:rgba(8,12,20,.92);
  padding:.55rem .65rem;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
}
.voice-popover[hidden] { display:none !important; }
.voice-options-grid--compact { margin-bottom:.35rem; }
.auto-sensitivity--compact { margin-top:.25rem; padding-top:.35rem; border-top:1px solid rgba(99,102,241,.15); }
.mic-btn--hero,
.mic-btn--listen {
  width:64px;
  height:64px;
  min-width:64px;
  min-height:64px;
  border-radius:999px;
  flex-direction:column;
  gap:.1rem;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.mic-btn--listen.is-listening,
.mic-btn--listen.recording {
  background:linear-gradient(145deg, rgba(248,113,113,.35), rgba(239,68,68,.22));
  border-color:rgba(248,113,113,.55);
  box-shadow:0 0 0 4px rgba(248,113,113,.12);
}
.mic-btn-label--compact { font-size:.58rem; margin-top:.05rem; }
.mic-waveform--compact { max-width:100%; height:36px; }
.cancel-record-btn--compact { font-size:.68rem; padding:.28rem .7rem; }
.auto-listen-panel { display:flex; flex-direction:column; gap:.45rem; margin-bottom:0; padding:.5rem .55rem; border-radius:12px; background:rgba(0,0,0,.22); border:1px solid rgba(99,102,241,.18); }
.auto-listen-panel.is-iotype .auto-transcript-box {
  min-height: 5rem;
  border-color: rgba(34, 211, 238, 0.22);
}
.auto-listen-panel.is-iotype .auto-transcript-interim {
  color: #93c5fd;
  font-style: italic;
}
.auto-listen-panel.is-iotype .auto-transcript-final {
  color: var(--text);
}

.auto-listen-panel.is-direct:not(:has(.auto-transcript-box.is-review)) {
  padding:.25rem .35rem;
  background:transparent;
  border-color:transparent;
}
.auto-listen-panel.is-direct:not(:has(.auto-transcript-box.is-review)) .auto-transcript-box {
  display:none;
}
.auto-listen-panel.is-direct:not(:has(.auto-transcript-box.is-review)) .auto-review-bar {
  display:none !important;
}

/* ---------- صدا ساده: فقط میک + وضعیت؛ متن زنده در چت ---------- */
.voice-hub--simple {
  gap: 0;
}
.voice-hub--simple .voice-hub-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.85rem 0.5rem 0.55rem;
  min-height: 7.25rem;
}
.voice-hub--simple .voice-hub-legacy {
  display: none !important;
}
.composer--voice .composer-dock {
  max-height: none;
  overflow: visible;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem 0.6rem;
  border-radius: 18px;
  border: 1px solid var(--os-glass-border);
  background: linear-gradient(180deg, rgba(18, 24, 36, 0.72), rgba(8, 12, 20, 0.55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 28px rgba(0, 0, 0, 0.28);
}
.composer--voice .composer-toolbar {
  justify-content: center;
  padding: 0;
  margin: 0;
}
.composer--voice .composer-toolbar-actions:empty,
.composer--voice .composer-toolbar-actions:not(:has(:not([hidden]))) {
  display: none;
}
.composer--voice .input-mode-tabs {
  width: min(100%, 14.5rem);
  justify-content: stretch;
}
.composer--voice .input-mode-tab {
  flex: 1;
  justify-content: center;
  padding: 0.4rem 0.55rem;
  font-size: 0.72rem;
}
.voice-hub--simple .voice-hub-mic-slot {
  width: 76px;
  height: 76px;
  position: relative;
}
.voice-hub--simple .mic-btn--hero,
.voice-hub--simple .mic-btn--listen {
  width: 76px;
  height: 76px;
  min-width: 76px;
  min-height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(56, 189, 248, 0.22), rgba(15, 23, 42, 0.55) 62%);
  border: 1.5px solid rgba(56, 189, 248, 0.42);
  color: #e0f2fe;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.06), 0 8px 22px rgba(0, 0, 0, 0.35);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.voice-hub--simple .mic-btn--hero:hover,
.voice-hub--simple .mic-btn--listen:hover {
  border-color: rgba(56, 189, 248, 0.62);
  transform: translateY(-1px);
}
.voice-hub--simple .mic-btn--listen.is-listening,
.voice-hub--simple .mic-btn--listen.recording {
  background: radial-gradient(circle at 35% 30%, rgba(52, 211, 153, 0.28), rgba(6, 30, 24, 0.55) 62%);
  border-color: rgba(52, 211, 153, 0.6);
  box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.1), 0 8px 24px rgba(0, 0, 0, 0.35);
  color: #d1fae5;
}
.voice-hub--simple .mic-btn--listen[data-voice-state="speaking"] {
  background: radial-gradient(circle at 35% 30%, rgba(248, 113, 113, 0.28), rgba(40, 12, 12, 0.55) 62%);
  border-color: rgba(248, 113, 113, 0.55);
  color: #fecaca;
  box-shadow: 0 0 0 5px rgba(248, 113, 113, 0.1), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.voice-hub--simple .mic-btn--listen[data-voice-state="sending"] {
  background: radial-gradient(circle at 35% 30%, rgba(251, 191, 36, 0.25), rgba(40, 30, 8, 0.55) 62%);
  border-color: rgba(251, 191, 36, 0.5);
  color: #fef3c7;
}
.voice-hub--simple .voice-hub-status,
.voice-hub--simple .auto-listen-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.28rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  text-align: center;
}
.voice-hub-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.45);
  flex-shrink: 0;
}
.voice-hub--simple .auto-listen-pill[data-state="listening"] .voice-hub-status-dot,
.voice-hub--simple .auto-listen-pill[data-state="speaking"] .voice-hub-status-dot {
  background: #22d3ee;
  box-shadow: 0 0 6px rgba(34, 211, 238, 0.5);
  animation: auto-pulse 1.2s ease-in-out infinite;
}
.voice-hub--simple .auto-listen-pill[data-state="speaking"] .voice-hub-status-dot {
  background: #f87171;
  box-shadow: 0 0 6px rgba(248, 113, 113, 0.5);
}
.voice-hub--simple .auto-listen-pill[data-state="sending"] .voice-hub-status-dot,
.voice-hub--simple .auto-listen-pill[data-state="processing"] .voice-hub-status-dot {
  background: #fbbf24;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.45);
  animation: auto-pulse 1s ease-in-out infinite;
}
.voice-hub--simple .auto-listen-pill[data-state="error"] .voice-hub-status-dot,
.voice-hub--simple .auto-listen-pill[data-state="warn"] .voice-hub-status-dot {
  background: #f87171;
  box-shadow: none;
  animation: none;
}
.voice-hub--simple .auto-listen-pill[data-state="listening"],
.voice-hub--simple .auto-listen-pill[data-state="speaking"] {
  color: #e0f2fe;
  border-color: rgba(34, 211, 238, 0.22);
  background: rgba(34, 211, 238, 0.08);
}
.voice-hub--simple .auto-listen-pill[data-state="sending"],
.voice-hub--simple .auto-listen-pill[data-state="processing"] {
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.25);
  background: rgba(251, 191, 36, 0.08);
}
.composer--voice .tts-global-bar {
  margin: 0 0 0.15rem;
  padding: 0.35rem 0.55rem;
  font-size: 0.7rem;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(99, 102, 241, 0.28);
  order: -1;
}
.composer--voice .tts-global-bar-icon {
  display: none;
}
.composer--voice .tts-global-bar-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
}
.composer--voice .composer-panel--voice {
  padding: 0;
}
.msg.user.is-live-draft {
  outline: 1px solid rgba(34, 211, 238, 0.4);
  background: rgba(34, 211, 238, 0.1);
  border-radius: 14px;
  animation: live-draft-in 0.22s ease;
}
.msg.user.is-live-draft .msg-user-text {
  color: #e0f2fe;
}
.msg.user.is-live-draft.is-interim .msg-user-text {
  color: #94a3b8;
  font-style: italic;
}
@keyframes live-draft-in {
  from { opacity: 0.4; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 520px) {
  .composer--voice .composer-dock {
    padding: 0.45rem 0.5rem 0.5rem;
    border-radius: 16px;
  }
  .voice-hub--simple .voice-hub-stage {
    min-height: 6.5rem;
    padding: 0.65rem 0.35rem 0.4rem;
    gap: 0.55rem;
  }
  .voice-hub--simple .voice-hub-mic-slot,
  .voice-hub--simple .mic-btn--hero,
  .voice-hub--simple .mic-btn--listen {
    width: 68px;
    height: 68px;
    min-width: 68px;
    min-height: 68px;
  }
}
.voice-review-options {
  margin-top:.45rem;
  padding-top:.45rem;
  border-top:1px solid rgba(99,102,241,.18);
}
.voice-review-options.is-disabled {
  opacity:.45;
  pointer-events:none;
}
.voice-popover-section-label {
  margin:0 0 .35rem;
  font-size:.62rem;
  font-weight:600;
  color:var(--muted);
  text-align:right;
}
.voice-popover .auto-send-options + .voice-review-options {
  margin-top:.55rem;
}
.mic-waveform { width:100%; max-width:320px; height:48px; border-radius:12px; background:rgba(0,0,0,.25); opacity:.35; transition:opacity .2s, box-shadow .2s; }
.mic-waveform.is-live { opacity:1; box-shadow:0 0 24px rgba(34,211,238,.15), inset 0 0 0 1px rgba(34,211,238,.25); }
.manual-transcript-box { max-width:320px; margin:.35rem auto 0; padding:.45rem .65rem; border-radius:10px; background:rgba(15,23,42,.55); border:1px solid rgba(99,102,241,.25); font-size:.9rem; line-height:1.45; text-align:center; }
.manual-transcript-interim { color:#e2e8f0; }
.manual-transcript-interim.is-interim { color:#94a3b8; font-style:italic; }
.voice-recorder-controls { display:flex; flex-direction:column; align-items:center; gap:.45rem; }
.mic-btn-label { font-size:.62rem; font-weight:600; }
.cancel-record-btn { border:1px solid rgba(248,113,113,.45); background:rgba(248,113,113,.1); color:#fca5a5; font:inherit; font-size:.72rem; padding:.35rem .85rem; border-radius:999px; cursor:pointer; }
.cancel-record-btn[hidden] { display:none !important; }
.file-pick-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:.45rem; border:1px dashed rgba(99,102,241,.4); background:rgba(99,102,241,.06); color:#c4d4ff; font:inherit; font-size:.72rem; padding:.55rem .75rem; border-radius:12px; cursor:pointer; }
@media (max-width:520px) { .voice-options-grid { grid-template-columns:1fr; } .toolbar-btn-label { display:none; } }

/* ---------- دسترس‌پذیری و polish سراسری ---------- */
:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
  border-radius: 6px;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) { outline: none; }

.auto-listen-pill,
.status-pill,
.mode-chip { transition: background-color .25s ease, color .25s ease; }

.auto-review-btn,
.meta-btn,
.segmented-btn,
.quick-prompt,
.toolbar-btn { transition: background-color .18s ease, border-color .18s ease, transform .12s ease; }
.auto-review-btn:active,
.quick-prompt:active { transform: scale(.97); }
.auto-review-btn--primary:hover { background: rgba(99,102,241,.5); }
.auto-review-btn:hover:not(.auto-review-btn--primary) { border-color: rgba(99,102,241,.45); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========== Voice Orb — میکروفن شناور شعاعی ========== */
.voice-orb-host {
  --orb-size: 76px;
  --orb-radius: var(--mind-orb-sat-gap, 58px);
  --orb-sat: 36px;
  position: fixed;
  /* بالاتر از backdrop/drawer تنظیمات تا «توقف گوش دادن» همیشه قابل کلیک باشد */
  z-index: 130;
  left: 50%;
  top: 75%;
  width: var(--orb-size);
  height: var(--orb-size);
  transform: translate(-50%, -50%);
  touch-action: none;
}
.voice-orb-host.is-dragging {
  z-index: 140;
}
.voice-orb-sheet.composer.os-dock {
  position: absolute;
  /* چپ و پایین‌تر نسبت به دایره */
  left: auto;
  right: calc(100% + 3.4rem);
  bottom: 0.15rem;
  transform: none;
  width: min(26.5rem, calc(100vw - 6.5rem));
  margin: 0;
  padding: 0.45rem 0.5rem;
  border-radius: 16px;
  border: 1px solid var(--os-glass-border);
  background: rgba(10, 14, 22, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  display: none;
  flex-direction: column;
  gap: 0.3rem;
  touch-action: auto;
  pointer-events: auto;
}
.voice-orb-host.is-sheet-open .voice-orb-sheet.composer {
  display: flex;
}
.voice-orb-sheet .composer-dock {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.voice-orb-sheet .composer-hint {
  display: none;
}
.voice-orb-tabs-legacy .input-mode-tabs[hidden] {
  display: none !important;
}
.voice-orb-tabs-legacy:not(:has(.toolbar-btn:not([hidden]))) {
  display: none;
}
.voice-orb-host.is-voice-mode .voice-orb-tabs-legacy {
  display: none !important;
}
body.floating-composer .composer.voice-orb-sheet {
  padding: 0.55rem 0.6rem 0.5rem !important;
  border-top: none !important;
  background: rgba(10, 14, 22, 0.94) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
  flex-shrink: 0;
}
.voice-orb {
  position: relative;
  z-index: 2;
  width: var(--orb-size);
  height: var(--orb-size);
  margin: 0;
  touch-action: none;
  user-select: none;
}
.voice-orb-core {
  position: relative;
  width: var(--orb-size);
  height: var(--orb-size);
  z-index: 5;
}
.voice-orb-core .mic-btn--hero,
.voice-orb-core .mic-btn--listen {
  position: relative;
  z-index: 1;
  width: var(--orb-size);
  height: var(--orb-size);
  min-width: var(--orb-size);
  min-height: var(--orb-size);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(56, 189, 248, 0.28), rgba(15, 23, 42, 0.72) 62%);
  border: 1.5px solid rgba(56, 189, 248, 0.5);
  color: #e0f2fe;
  box-shadow:
    0 0 0 5px rgba(56, 189, 248, 0.07),
    0 12px 28px rgba(0, 0, 0, 0.4);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}
/* حالت آماده — حلقه از توکن‌های Mind Explore */
.voice-orb-core .mic-btn--listen[data-voice-state="idle"],
.voice-orb-core .mic-btn--listen:not(.is-listening):not(.recording) {
  border: var(--mind-mic-idle-border-width, 1px) solid var(--mind-mic-idle-border, #fff);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--mind-mic-idle-border, #fff) 35%, transparent),
    0 12px 28px rgba(0, 0, 0, 0.4);
}
.voice-orb-core .mic-btn[hidden] {
  display: none !important;
}
.voice-orb-core .mic-btn--listen.is-listening,
.voice-orb-core .mic-btn--listen.recording {
  background: radial-gradient(circle at 35% 30%, rgba(52, 211, 153, 0.32), rgba(6, 30, 24, 0.7) 62%);
  border-color: var(--mind-mic-listen-border, rgba(52, 211, 153, 0.65));
  box-shadow:
    0 0 0 6px var(--mind-mic-listen-glow, rgba(52, 211, 153, 0.12)),
    0 12px 28px rgba(0, 0, 0, 0.4);
}
.voice-orb-core .mic-btn--listen[data-voice-state="speaking"] {
  background: radial-gradient(circle at 35% 30%, rgba(248, 113, 113, 0.3), rgba(40, 12, 12, 0.7) 62%);
  border-color: rgba(248, 113, 113, 0.6);
}
.voice-orb-sats {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 4;
  pointer-events: none;
}
.voice-orb-sat {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--orb-sat);
  height: var(--orb-sat);
  margin: calc(var(--orb-sat) / -2);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 18, 28, 0.92);
  color: var(--mind-status-pill-fg, #e2e8f0);
  font: 700 0.78rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.04em;
  display: grid;
  place-items: center;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transform: translate(0, 0) scale(0.55);
  transition:
    opacity 0.2s ease,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.15s ease,
    border-color 0.15s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  touch-action: manipulation;
}
.voice-orb:hover .voice-orb-sat,
.voice-orb:focus-within .voice-orb-sat,
.voice-orb.is-expanded .voice-orb-sat,
.voice-orb.is-dragging .voice-orb-sat--drag {
  opacity: 1;
  pointer-events: auto;
}
.voice-orb:hover .voice-orb-sat--drag,
.voice-orb:focus-within .voice-orb-sat--drag,
.voice-orb.is-expanded .voice-orb-sat--drag,
.voice-orb.is-dragging .voice-orb-sat--drag {
  transform: translate(0, calc(var(--orb-radius) * -1)) scale(1);
}
.voice-orb:hover .voice-orb-sat--text,
.voice-orb:focus-within .voice-orb-sat--text,
.voice-orb.is-expanded .voice-orb-sat--text {
  transform: translate(calc(var(--orb-radius) * -0.9), calc(var(--orb-radius) * 0.45)) scale(1);
}
.voice-orb:hover .voice-orb-sat--voice,
.voice-orb:focus-within .voice-orb-sat--voice,
.voice-orb.is-expanded .voice-orb-sat--voice {
  transform: translate(calc(var(--orb-radius) * 0.9), calc(var(--orb-radius) * 0.45)) scale(1);
}
.voice-orb-sat--drag {
  cursor: grab;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: #94a3b8;
}
.voice-orb-sat--drag:hover {
  border-color: rgba(148, 163, 184, 0.55);
  color: #f1f5f9;
  cursor: grab;
}
.voice-orb.is-dragging .voice-orb-sat--drag,
.voice-orb-sat--drag:active {
  cursor: grabbing;
  border-color: rgba(56, 189, 248, 0.55);
  color: #e0f2fe;
  background: rgba(14, 40, 55, 0.95);
}
.voice-orb-sat--text {
  font-family: "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
}
.voice-orb-sat--text:hover,
.voice-orb-sat--text.is-active {
  border-color: rgba(129, 140, 248, 0.55);
  background: rgba(67, 56, 202, 0.35);
  color: #e0e7ff;
}
.voice-orb-sat--voice:hover,
.voice-orb-sat--voice.is-active {
  border-color: rgba(34, 211, 238, 0.55);
  background: rgba(8, 47, 58, 0.9);
  color: #a5f3fc;
}
.voice-orb-status {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.45rem);
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
}
.voice-orb.is-text-mode .voice-orb-core .mic-btn--listen {
  opacity: 0.72;
  filter: saturate(0.75);
}
.voice-orb.is-dragging {
  z-index: 120;
}
body.voice-orb-dragging {
  cursor: grabbing !important;
  user-select: none !important;
}
body.voice-orb-dragging * {
  cursor: grabbing !important;
}
.voice-orb-dock-hint {
  margin: 0;
  padding: 0.35rem 0.25rem 0.15rem;
  text-align: center;
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.4;
}
.voice-orb-dock-hint kbd {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  font-weight: 700;
  font-size: 0.65rem;
}
.composer--voice .composer-dock {
  padding: 0.4rem 0.55rem 0.45rem;
  min-height: 0;
}
.composer--voice .voice-hub--orb-dock {
  display: none;
}
.composer--voice .composer-panel--voice {
  padding: 0;
}
@media (max-width: 520px) {
  .voice-orb-host,
  .voice-orb {
    --orb-size: 68px;
    --orb-radius: 52px;
    --orb-sat: 34px;
  }
}
@media (max-width: 640px) {
  .voice-orb-sheet.composer.os-dock {
    right: auto;
    left: 50%;
    bottom: calc(100% + 0.4rem);
    transform: translateX(-50%);
    width: min(18rem, calc(100vw - 1.25rem));
  }
}
@media (hover: none) {
  .voice-orb .voice-orb-sat {
    opacity: 0.85;
    pointer-events: auto;
  }
  .voice-orb .voice-orb-sat--drag {
    transform: translate(0, calc(var(--orb-radius) * -1)) scale(0.92);
  }
  .voice-orb .voice-orb-sat--text {
    transform: translate(calc(var(--orb-radius) * -0.9), calc(var(--orb-radius) * 0.45)) scale(0.92);
  }
  .voice-orb .voice-orb-sat--voice {
    transform: translate(calc(var(--orb-radius) * 0.9), calc(var(--orb-radius) * 0.45)) scale(0.92);
  }
  .voice-orb.is-expanded .voice-orb-sat--drag {
    transform: translate(0, calc(var(--orb-radius) * -1)) scale(1);
  }
  .voice-orb.is-expanded .voice-orb-sat--text {
    transform: translate(calc(var(--orb-radius) * -0.9), calc(var(--orb-radius) * 0.45)) scale(1);
  }
  .voice-orb.is-expanded .voice-orb-sat--voice {
    transform: translate(calc(var(--orb-radius) * 0.9), calc(var(--orb-radius) * 0.45)) scale(1);
  }
}
.os-statusbar .header-titles h1 { font-size: 0.92rem; letter-spacing: -0.01em; }
.os-statusbar-meta { font-size: 0.65rem; opacity: 0.75; }
.os-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 4px 12px rgba(0, 0, 0, 0.25);
}
.os-statusbar-end { gap: 0.35rem; flex-wrap: nowrap; align-items: center; }

/* خوشهٔ چراغ وضعیت + پاپ‌آپ */
.os-lamp-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.os-lamp-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.32rem 0.55rem;
  margin: 0;
  border-radius: 999px;
  border: 1px solid var(--os-glass-border);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.os-lamp-cluster:hover,
.os-lamp-cluster[aria-expanded="true"] {
  border-color: rgba(99, 102, 241, 0.45);
  background: rgba(99, 102, 241, 0.12);
}
.os-lamp {
  width: 8px;
  height: 8px;
  padding: 0 !important;
  margin: 0;
  border-radius: 50%;
  border: none !important;
  font-size: 0 !important;
  line-height: 0;
  color: transparent !important;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.os-lamp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.os-lamp--auth {
  background: rgba(148, 163, 184, 0.55);
}
.os-lamp--auth.is-on {
  background: #34d399;
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35), 0 0 8px rgba(52, 211, 153, 0.35);
}
.os-lamp--auth.is-off {
  background: rgba(148, 163, 184, 0.4);
}
.os-lamp.mode-chip,
.os-lamp--mode {
  background: #818cf8;
}
.os-lamp.mode-chip[data-mode="whisper"],
.os-lamp--mode[data-mode="whisper"] { background: #818cf8; }
.os-lamp.mode-chip[data-mode="hybrid"],
.os-lamp--mode[data-mode="hybrid"] { background: #22d3ee; }
.os-lamp.mode-chip[data-mode="native"],
.os-lamp--mode[data-mode="native"] { background: #f472b6; }
.os-lamp.mode-chip[data-mode="auto"],
.os-lamp--mode[data-mode="auto"] { background: #94a3b8; }
.os-lamp.engine-chip,
.os-lamp--engine {
  background: #94a3b8;
}
.os-lamp.engine-chip[data-engine="fast"],
.os-lamp--engine[data-engine="fast"] { background: #34d399; }
.os-lamp.engine-chip[data-engine="moa"],
.os-lamp--engine[data-engine="moa"] { background: #a78bfa; }
.os-lamp.engine-chip[data-engine="dify"],
.os-lamp--engine[data-engine="dify"] { background: #fbbf24; }
.os-lamp.engine-chip[data-engine="auto"],
.os-lamp--engine[data-engine="auto"] { background: #cbd5e1; }
.os-lamp.status-pill,
.os-lamp--live {
  width: 8px;
  height: 8px;
  display: inline-block !important;
  background: transparent !important;
  box-shadow: none;
  position: relative;
}
.os-lamp.status-pill .dot,
.os-lamp--live .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  display: block;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.45);
}
.os-lamp.status-pill.busy .dot,
.os-lamp--live.busy .dot { background: var(--warn); animation: pulse 1s infinite; }
.os-lamp.status-pill.error .dot,
.os-lamp--live.error .dot { background: var(--err); box-shadow: 0 0 8px rgba(248, 113, 113, 0.45); }
.os-lamp.status-pill.listening .dot,
.os-lamp--live.listening .dot { background: var(--accent2); animation: pulse 0.6s infinite; }

.os-status-pop {
  position: absolute;
  top: calc(100% + 0.45rem);
  inset-inline-end: 0;
  z-index: 90;
  min-width: 15.5rem;
  max-width: min(18rem, calc(100vw - 1.5rem));
  padding: 0.45rem;
  border-radius: 14px;
  border: 1px solid var(--os-glass-border);
  background: rgba(10, 14, 22, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: os-fade-in 0.16s ease;
}
.os-status-pop[hidden] { display: none !important; }
.os-status-pop-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 0.55rem;
  align-items: start;
  padding: 0.45rem 0.5rem;
  border-radius: 10px;
}
.os-status-pop-row + .os-status-pop-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.os-status-pop-row .os-lamp { margin-top: 0.35rem; }
.os-status-pop-copy { min-width: 0; }
.os-status-pop-copy strong {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text);
}
.os-status-pop-copy p {
  margin: 0.12rem 0 0;
  font-size: 0.65rem;
  line-height: 1.35;
  color: var(--muted);
}
.os-status-pop-link {
  align-self: center;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.15);
  color: #c7d2fe;
  text-decoration: none;
  white-space: nowrap;
}
.os-status-pop-link.is-logged-in {
  border-color: rgba(52, 211, 153, 0.35);
  color: #6ee7b7;
  background: rgba(52, 211, 153, 0.12);
}
.os-icon-btn--install:not([hidden]) {
  display: inline-grid;
  place-items: center;
  border-color: rgba(52, 211, 153, 0.35);
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.12);
}
.os-icon-btn--install:hover {
  border-color: rgba(52, 211, 153, 0.55);
  color: #d1fae5;
}
.icon-btn.os-icon-btn--install[hidden] {
  display: none !important;
}
.os-icon-btn--new {
  font-size: 1.05rem;
  font-weight: 600;
}

.os-status-dot { padding: 0.28rem 0.6rem; font-size: 0.72rem; background: rgba(255, 255, 255, 0.04); border-color: var(--os-glass-border); }
.os-status-dot #statusText { max-width: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-mode-badge { font-size: 0.65rem; padding: 0.22rem 0.5rem; }
.os-icon-btn { width: 34px; height: 34px; border-radius: 10px; border-color: var(--os-glass-border); background: rgba(255, 255, 255, 0.04); }
.os-pill-btn { font-size: 0.72rem; padding: 0.32rem 0.65rem; border-radius: 999px; border-color: var(--os-glass-border); background: rgba(255, 255, 255, 0.04); }
.os-pill-btn--danger { border-color: rgba(248, 113, 113, 0.35); }

.os-canvas { display: flex; flex-direction: column; align-items: center; }
.os-welcome {
  width: min(100%, var(--reading-max));
  margin: auto 0;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--os-glass-border);
  background: rgba(12, 16, 24, 0.55);
  backdrop-filter: blur(16px);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
}
.os-welcome-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent2);
}
.os-welcome-hero h2 { font-size: clamp(1.15rem, 3vw, 1.45rem); }

.msg.user {
  align-self: flex-start;
  margin-inline-end: 0;
  max-width: min(85%, 28rem);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.28), rgba(99, 102, 241, 0.18));
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 18px 18px 4px 18px;
}
.msg.assistant {
  align-self: stretch;
  max-width: min(96%, var(--reading-max));
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid var(--os-glass-border);
  backdrop-filter: blur(8px);
  border-radius: 18px 18px 18px 4px;
}

.os-dock-inner { max-width: min(56rem, 100%); margin: 0 auto; }
.os-dock-toolbar { padding-bottom: 0.15rem; }
.os-segment { background: rgba(0, 0, 0, 0.35); border-color: var(--os-glass-border); }
.os-dock-btn { border-color: var(--os-glass-border); border-radius: 10px; }
.os-panel { padding-top: 0.15rem; }
.os-hint-collapsed {
  margin: 0.25rem 0 0;
  font-size: 0.6rem;
  opacity: 0.55;
  text-align: center;
}
.os-voice-stage {
  border-radius: 14px;
  border: 1px solid var(--os-glass-border);
  background: rgba(0, 0, 0, 0.22);
}

/* کشوی تنظیمات — bottom sheet */
.settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: os-fade-in 0.22s ease;
}
.settings-backdrop[hidden] { display: none !important; }

.composer-settings.os-drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  max-width: none;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  /* فقط شیت/backdrop کلیک بگیرند — میک شناور زیر drawer گیر نکند */
  pointer-events: none;
}
.composer-settings.os-drawer.is-collapsed { display: block; }
.composer-settings.os-drawer.is-collapsed .os-drawer-sheet {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}

.os-drawer-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  background: rgba(10, 14, 22, 0.94);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid var(--os-glass-border);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.5);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.os-drawer-handle {
  width: 36px;
  height: 4px;
  margin: 0.55rem auto 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
.os-drawer-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem 0.5rem;
  border-bottom: 1px solid var(--os-glass-border);
  flex-shrink: 0;
}
.os-drawer-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  flex: 1;
}
.os-drawer-meta {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
}
.os-drawer-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--os-glass-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  flex-shrink: 0;
}
.os-drawer-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.1); }
.os-drawer-body {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 0.75rem 1rem 1.25rem;
  -webkit-overflow-scrolling: touch;
}
.composer-settings.os-drawer .settings-body,
.composer-settings.os-drawer:not(.is-collapsed) .settings-body {
  max-height: none !important;
  opacity: 1;
  padding: 0.75rem 1rem 1.25rem;
  overflow-y: auto;
  pointer-events: auto;
}
.composer-settings.os-drawer.is-collapsed .settings-body {
  max-height: 0 !important;
  opacity: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}
body.os-settings-open .composer.os-dock:not(.voice-orb-sheet) {
  z-index: 39;
}
body.os-settings-open .voice-orb-host {
  z-index: 95;
}

.os-audio-float {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--composer-height, 6.5rem) + env(safe-area-inset-bottom) + 0.65rem);
  z-index: 50;
  width: min(var(--reading-max), calc(100% - 2rem));
  pointer-events: none;
}
.os-audio-float .audio-bar { pointer-events: auto; border-radius: 999px; box-shadow: var(--shadow); }

/* بخش‌های جمع‌شونده */
.os-fold {
  margin: 0.35rem 0;
  border: 1px solid var(--os-glass-border);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.os-fold--compact { margin: 0.25rem 0; }
.os-fold-summary {
  padding: 0.5rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.os-fold-summary::-webkit-details-marker { display: none; }
.os-fold-summary::before {
  content: "◂";
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.65rem;
  transition: transform 0.2s ease;
  color: var(--accent2);
}
.os-fold[open] .os-fold-summary::before { transform: rotate(-90deg); }
.os-fold[open] .os-fold-summary { color: #c4d4ff; border-bottom: 1px solid var(--os-glass-border); }
.os-fold > :not(summary) { padding: 0.55rem 0.65rem 0.65rem; }
.os-fold .voice-options-grid { margin-bottom: 0; }
.os-fold .auto-send-options { border-top: none; padding-top: 0; }

.os-dock textarea#messageInput,
.os-dock .auto-transcript-box {
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--os-glass-border);
}
.os-dock .send-btn,
.os-dock .mic-btn--hero {
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
}
.recording-bar,
.pipeline-bar {
  background: rgba(12, 16, 24, 0.85);
  backdrop-filter: blur(12px);
  border-color: var(--os-glass-border);
}

@keyframes os-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (min-width: 900px) {
  .os-drawer-sheet {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    max-height: none;
    width: min(420px, 92vw);
    border-radius: 20px 0 0 20px;
    border-right: none;
    transform: translateX(0);
  }
  .composer-settings.os-drawer.is-collapsed .os-drawer-sheet {
    transform: translateX(105%);
  }
  .os-drawer-handle { display: none; }
}

@media (max-width: 520px) {
  .os-statusbar-meta { display: none; }
  .header-actions { width: auto; }
}