*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== Light theme (base) ===== */
:root {
  --bg: #d9d9d9;
  --surface: #d9d9d9;
  --sidebar-bg: #d9d9d9;
  --overlay: rgba(28,28,28,.18);
  --cyan: #1c1c1c;
  --fg: #1e1e1e;
  --fg-secondary: #4f4f4f;
  --fg-muted: #5f5f5f;
  --border: rgba(28,28,28,.72);
  --border-light: rgba(28,28,28,.9);
  --hover: color-mix(in srgb, var(--accent) 4.5%, transparent);
  --hover-cyan: color-mix(in srgb, var(--accent) 7%, transparent);
  --surface-raised: #d9d9d9;
  --danger: #ef4444;
  --success: #10b981;
  --accent: #1c1c1c;
  --primary: #1c1c1c;
  --primary-dark: #000;
  --input-bg: #d9d9d9;
  --code-bg: color-mix(in srgb, var(--accent) 8%, transparent);
  --note-border: #1C1C1C;
  --note-icon: var(--cyan);
  --note-sep: #1C1C1C;
  --note-time: #1C1C1C;
  --info: #3b82f6;
  --warning: #f59e0b;
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-full: 0;
  /* ===== Spacing scale (4px base) ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
}

/* ===== Dark theme (inverted) ===== */
html:not(.light) {
  --bg: #262626;
  --surface: #262626;
  --sidebar-bg: #262626;
  --overlay: rgba(227,227,227,.18);
  --cyan: #e3e3e3;
  --fg: #e1e1e1;
  --fg-secondary: #b0b0b0;
  --fg-muted: #9b9b9b;
  --border: rgba(227,227,227,.72);
  --border-light: rgba(227,227,227,.9);
  --hover: color-mix(in srgb, var(--accent) 4.5%, transparent);
  --hover-cyan: color-mix(in srgb, var(--accent) 7%, transparent);
  --surface-raised: #262626;
  --danger: #ef4444;
  --success: #10b981;
  --accent: #e3e3e3;
  --primary: #e3e3e3;
  --primary-dark: #fff;
  --input-bg: #262626;
  --code-bg: color-mix(in srgb, var(--accent) 8%, transparent);
  --note-border: #e3e3e3;
  --note-icon: var(--cyan);
  --note-sep: #e3e3e3;
  --note-time: #e3e3e3;
  --info: #3b82f6;
  --warning: #f59e0b;
}

/* ===== Pro theme — full rounded, richer color, distinct icon set ===== */
html[data-theme="pro"] {
  --bg: #f4f1ee;
  --surface: #ffffff;
  --sidebar-bg: #ffffff;
  --overlay: rgba(30,27,46,.35);
  --fg: #1c1b29;
  --fg-secondary: #6b6879;
  --fg-muted: #6f6b7d;
  --border: rgba(28,25,50,.10);
  --border-light: rgba(28,25,50,.14);
  --hover: color-mix(in srgb, var(--accent) 8%, transparent);
  --hover-cyan: color-mix(in srgb, var(--accent) 14%, transparent);
  --surface-raised: #fbfaf9;
  --danger: #f0426b;
  --success: #16b981;
  --accent: #6c5ce7;
  --primary: #6c5ce7;
  --primary-dark: #5a4bd1;
  --cyan: #6c5ce7;
  --input-bg: #ffffff;
  --code-bg: color-mix(in srgb, var(--accent) 8%, transparent);
  --note-border: rgba(28,25,50,.10);
  --note-icon: var(--cyan);
  --note-sep: rgba(28,25,50,.10);
  --note-time: #9794a3;
  --info: #3fa9f5;
  --warning: #f5a623;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-full: 999px;
  --gradient-accent: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #fff));
  --shadow-sm: 0 2px 8px rgba(28,25,50,.08);
  --shadow-md: 0 8px 24px rgba(28,25,50,.12);
  --shadow-lg: 0 20px 48px rgba(28,25,50,.18);
  --shadow-glow: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent);
  --glass-bg: rgba(255,255,255,.65);
  --glass-border: rgba(255,255,255,.5);
}
html[data-theme="pro"]:not(.light) {
  --bg: #17151f;
  --surface: #201d2c;
  --sidebar-bg: #1b1926;
  --overlay: rgba(0,0,0,.55);
  --fg: #f1eefc;
  --fg-secondary: #a7a3bd;
  --fg-muted: #a39fb7;
  --border: rgba(255,255,255,.08);
  --border-light: rgba(255,255,255,.13);
  --hover: color-mix(in srgb, var(--accent) 12%, transparent);
  --hover-cyan: color-mix(in srgb, var(--accent) 20%, transparent);
  --surface-raised: #262233;
  --danger: #ff5c8a;
  --success: #2ee6a6;
  --accent: #8c7aff;
  --primary: #8c7aff;
  --primary-dark: #a595ff;
  --cyan: #8c7aff;
  --input-bg: #201d2c;
  --code-bg: color-mix(in srgb, var(--accent) 12%, transparent);
  --note-border: rgba(255,255,255,.08);
  --note-icon: var(--cyan);
  --note-sep: rgba(255,255,255,.08);
  --note-time: #7d7a95;
  --info: #5cc4ff;
  --warning: #ffc24b;
  --gradient-accent: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000));
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,.4);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.55);
  --shadow-glow: 0 0 28px color-mix(in srgb, var(--accent) 55%, transparent);
  --glass-bg: rgba(32,29,44,.55);
  --glass-border: rgba(255,255,255,.08);
}

/* ============ AUTH SCREEN ============ */
.auth-screen {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  padding: max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overflow: auto;
}
body.auth-open #app > :not(#authScreen) {
  display: none !important;
}
.auth-card {
  width: 100%; max-width: 380px; padding: 32px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.auth-logo {
  display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 4px;
}
.auth-logo h1 { font-family: 'Peyda', 'Vazirmatn', 'Tahoma', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: 4px; color: var(--fg); }
.auth-step { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.auth-step h2 { font-size: 18px; font-weight: 600; color: var(--fg); text-align: center; margin-bottom: 10px; }
.auth-step p { font-size: 13px; color: var(--fg-secondary); text-align: center; line-height: 1.6; }
.auth-input-group { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.auth-input-group:has(.auth-input[type="password"]) { padding-top: 8px; }
.auth-label { align-self: stretch; font-size: 12px; font-weight: 500; color: var(--fg-secondary); font-family: 'Peyda', 'Vazirmatn', 'Tahoma', sans-serif; }
.auth-email-subtitle { opacity: 0.72; font-size: 13px; overflow-wrap: anywhere; direction: ltr; }
.auth-email-display { overflow-wrap: anywhere; }
.auth-input {
  width: 100%; min-height: 44px; padding: 11px 14px; font-size: 16px;
  direction: rtl;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  outline: none; transition: border-color .15s;
  font-family: 'Peyda', 'Vazirmatn', 'Tahoma', sans-serif;
}
.auth-input:focus { border-color: var(--cyan); }
.auth-input:focus-visible,
.auth-btn:focus-visible,
.auth-alt-link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.auth-input::placeholder { color: var(--fg-muted); }
.auth-otp-input { font-size: 24px; letter-spacing: 8px; text-align: center; }
.auth-btn {
  width: 100%; min-height: 44px; padding: 11px 12px; font-size: 14px; font-weight: 600;
  background: var(--cyan); color: var(--bg); border: none;
  border-radius: var(--radius-md); cursor: pointer; transition: opacity .15s;
  font-family: 'Peyda', 'Vazirmatn', 'Tahoma', sans-serif; margin-top: 4px;
}
.auth-btn:hover { opacity: .85; }
.auth-btn:disabled { opacity: .5; cursor: not-allowed; }
.auth-switch-text { font-size: 13px; color: var(--fg-secondary); text-align: center; padding-top: 8px; }
.auth-switch-link { background: none; border: none; color: var(--cyan); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0 4px; font-family: 'Peyda', 'Vazirmatn', 'Tahoma', sans-serif; }
.auth-switch-link:hover { text-decoration: underline; }
.auth-alt-link {
  display: block;
  text-align: center;
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  min-height: 44px;
  padding: 10px 12px;
  margin-top: 4px;
  opacity: 0.8;
}
.auth-alt-link:hover { opacity: 1; }
.auth-alt-link:disabled { opacity: .45; cursor: not-allowed; }
.auth-error { width: 100%; padding: 8px 12px; font-size: 12px; color: var(--danger); background: rgba(239,68,68,.08); text-align: center; border-radius: var(--radius-md); }
.auth-error[data-tone="success"] { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 9%, transparent); }

@media (max-width: 420px), (max-height: 680px) {
  .auth-card { padding: 20px 12px; gap: 16px; }
  .auth-logo { gap: 8px; margin-bottom: 0; }
  .auth-logo img { width: 40px; height: 40px; }
  .auth-step h2 { margin-bottom: 4px; }
}

html { font-size: 15px; background: var(--bg); height: 100%; overflow: hidden; }
body {
  height: 100%; overflow: hidden;
  background: var(--bg); color: var(--fg);
  font-family: 'Barlow', sans-serif; line-height: 1.5;
}
/* Peyda for all text in Persian mode */
.rtl, .rtl *:not(svg):not([class*="icon"]):not(.timer):not(.note-badge):not(.reminder-priority):not(.plan-step-num):not(.audio-time):not(.spinner) {
  font-family: 'Peyda', 'Vazirmatn', 'Tahoma', sans-serif !important;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fg-muted); }

/* ===== Layout ===== */
.hidden { display: none !important; }
#app { display: flex; height: 100vh; height: 100dvh; position: relative; }
.menu-btn {
  display: none; position: fixed; top: 12px; z-index: 50;
  background: var(--surface); border: 1px solid var(--border-light);
  width: 36px; height: 36px; align-items: center; justify-content: center;
  cursor: pointer; color: var(--fg);
}
:root .menu-btn { left: 12px; }
html[dir="rtl"] .menu-btn { left: auto; right: 12px; }
.sidebar-overlay { display: none; }

#sidebar {
  width: 220px; min-width: 220px; background: var(--sidebar-bg);
  display: flex; flex-direction: column; justify-content: space-between;
  border-right: 1px solid var(--border); z-index: 40;
}
.sidebar-header { padding: 32px 20px 20px; }
.logo {
  font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: 2px;
  color: var(--fg); font-weight: 500; margin-bottom: 32px;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; direction: ltr; }
.nav-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; color: var(--fg-secondary); cursor: pointer;
  padding: 12px 14px; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.8px;
  transition: all 0.15s; border-radius: 4px;
}
.nav-btn:hover { color: var(--fg); background: var(--hover); }
.nav-btn.active { color: var(--cyan); background: var(--hover-cyan); }
.nav-btn svg { flex-shrink: 0; width: 16px; height: 16px; }
.pro-icon { display: none; }
html[data-theme="pro"] .nav-btn svg:not(.pro-icon),
html[data-theme="pro"] .tab-btn svg:not(.pro-icon) { display: none; }
html[data-theme="pro"] .nav-btn .pro-icon,
html[data-theme="pro"] .tab-btn .pro-icon { display: inline-block; }
html[data-theme="pro"] .icon-swap svg:not(.pro-icon) { display: none; }
html[data-theme="pro"] .icon-swap .pro-icon { display: inline-block; }

/* ===== Theme-icon swap =====
 * Two <span> elements per icon button: .theme-default and .theme-pro.
 * Default theme shows .theme-default; Pro theme shows .theme-pro.
 * Icons are CSS masks (--icon holds the url), painted with currentColor,
 * so they always match the surrounding text color in every theme/mode.
 * Default size = parent font-size; specific elements override with inline style.
 */
.theme-icon {
  display: none; width: 1em; height: 1em; max-width: 100%; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
html:not([data-theme="pro"]) .theme-default { display: inline-flex; }
html[data-theme="pro"] .theme-pro { display: inline-flex; }
.nav-badge {
  margin-left: auto; background: var(--danger); color: #fff;
  font-family: 'DM Mono', monospace; font-size: 10px; line-height: 1;
  padding: 2px 6px; border-radius: var(--radius-full); min-width: 16px; text-align: center;
}
.rtl .nav-badge { margin-left: 0; margin-right: auto; }
.rtl .settings-tab .tab-count { margin-left: 0; margin-right: 6px; }
.nav-badge.hidden { display: none; }
.mobile-top-btn { position: relative; }
.mobile-top-btn .nav-badge {
  position: absolute; top: 2px; right: 2px; margin: 0;
  font-size: 9px; padding: 1px 5px; min-width: 14px;
}
.rtl .mobile-top-btn .nav-badge { right: auto; left: 2px; }
.tab-badge {
  position: absolute; top: 2px; left: 50%; transform: translateX(4px); margin: 0;
  background: var(--danger); color: #fff;
  font-family: 'DM Mono', monospace; font-size: 9px; line-height: 1;
  padding: 1px 5px; border-radius: var(--radius-full); min-width: 14px; text-align: center;
}
.tab-badge.hidden { display: none; }

.sidebar-footer {
  padding: 14px 16px; display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--border);
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-muted); flex-shrink: 0; }
.status-dot.recording { background: var(--danger); animation: pulse 1s infinite; }
.status-dot.ready { background: var(--success); }
.status-text { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--fg-secondary); letter-spacing: 0.5px; }

.theme-btn {
  background: none; border: none; color: var(--fg-muted); cursor: pointer;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border-radius: 4px;
}
.theme-btn:hover { color: var(--fg); background: var(--hover); }
html.light .theme-btn .sun-icon { display: none; }
html:not(.light) .theme-btn .moon-icon { display: none; }
html[data-theme="pro"] #themeToggle svg,
html[data-theme="pro"] #mobileThemeToggle svg { display: none; }
html[data-theme="pro"] #themeToggle::before,
html[data-theme="pro"] #mobileThemeToggle::before {
  content: ''; width: 18px; height: 18px; display: block; background: currentColor;
  -webkit-mask: url(/icons/moon.svg) center / contain no-repeat; mask: url(/icons/moon.svg) center / contain no-repeat;
}
html.light[data-theme="pro"] #themeToggle::before,
html.light[data-theme="pro"] #mobileThemeToggle::before {
  -webkit-mask-image: url(/icons/sun.svg); mask-image: url(/icons/sun.svg);
}

@font-face {
  font-family: 'Ndot57';
  src: url('/fonts/Ndot57-Regular.otf') format('opentype');
  font-weight: normal; font-style: normal;
  font-display: swap;
}

/* Ndot57 for counters, badges, numbers */
.timer,
.reminder-priority,
.plan-step-num,
.audio-time {
  font-family: 'Ndot57', 'DM Mono', monospace !important;
  letter-spacing: 0.5px;
}
.rtl .reminder-priority,
.rtl .plan-step-num,
.rtl .audio-time {
  font-family: 'Peyda', 'Vazirmatn', 'Tahoma', sans-serif !important;
}

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.view { display: none; flex-direction: column; flex: 1; min-height: 0; }
.view.active { display: flex; }

.view-header {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 32px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.view-header h2 {
  font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 1.2px;
  color: var(--fg); font-weight: 500;
}
.view-subtitle { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--fg-secondary); letter-spacing: 0.5px; margin-top: 1px; }
.view-body { flex: 1; overflow-y: auto; padding: 20px 32px; }

.section-label {
  font-family: 'DM Mono', monospace; font-size: 10px; color: var(--fg-secondary);
  letter-spacing: 1px; margin-bottom: 14px; font-weight: 400;
}

/* ===== Record Hero ===== */
.record-body { display: flex; flex-direction: column; align-items: center; padding: 20px 32px; overflow-y: auto; }
.record-hero { display: flex; flex-direction: column; align-items: center; padding: 48px 0 32px; flex-shrink: 0; }
.record-hero.mic-hidden { display: none; }
.record-hero.mic-readonly .record-btn { pointer-events: none; opacity: 0; }
.record-hero.mic-readonly .recorder-controls { display: none !important; }
.record-hero.mic-readonly .recorder-status { opacity: 0; }
.timer {
  font-family: 'Ndot57', 'DM Mono', monospace; font-size: 34px; color: var(--fg);
  font-weight: 300; letter-spacing: 3px;
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  text-align: center;
  direction: ltr;
  display: inline-flex;
  unicode-bidi: plaintext;
  margin-bottom: 4px;
  flex-direction: column;
}
.timer.hidden { display: none; }
.record-ring {
  position: relative; width: 170px; height: 170px;
  display: flex; align-items: center; justify-content: center;
}
.waveform-ring {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  gap: 6px; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  padding: 40px 0 47px;
}
.waveform-ring.active { opacity: 1; }
.recorder-controls {
  position: absolute; bottom: 6px; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: center; gap: 6px;
}
.recorder-controls.hidden { display: none; }
.recorder-status {
  text-align: center;
  font-family: 'DM Mono', monospace; font-size: 12px; color: var(--fg-secondary);
  letter-spacing: 0.5px;
  margin-top: 12px;
}
.wf-col {
  width: 25.8px; flex: none;
  display: flex; flex-direction: column-reverse;
  gap: 2px;
}
.wf-sq {
  width: 25.8px; height: 25.8px; background: var(--fg); border-radius: 1px;
}
.record-btn {
  width: 170px; height: 170px; border-radius: 2px; border: none;
  background: var(--accent); color: var(--bg); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease; position: relative; z-index: 2;
}
html[data-theme="pro"] .record-btn { color: #fff; }
.record-btn:hover { opacity: 0.9; transform: scale(1.01); }
.record-btn:active { transform: scale(0.98); }
.record-btn svg { color: var(--bg); transition: all 0.3s ease; }
.record-btn.recording { display: none; }
.record-btn.paused {
  background: var(--accent); border: 1.5px solid var(--border-light);
  width: 47px; height: 36px; border-radius: 1.5px;
}
.record-btn.paused svg,
.record-btn.paused .theme-icon { color: var(--bg); width: 0; height: 0; opacity: 0; }
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255,68,68,0.3); }
  50% { box-shadow: 0 0 40px rgba(255,68,68,0.5); }
}
.stop-btn {
  width: 47px; height: 36px; border-radius: 1.5px; border: 1.5px solid var(--border-light);
  background: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.stop-btn:hover { border-color: var(--danger); }
.stop-btn svg { color: var(--fg-secondary); }
.stop-btn.hidden { display: none; }
.discard-btn { border-color: var(--danger); }
.discard-btn:hover { background: var(--danger); color: var(--bg); }
.discard-btn svg { color: var(--danger); }
.discard-btn:hover svg { color: var(--bg); }
.recordings-section { width: 100%; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 8px; }

/* ===== Multi-Device Mic ===== */
.mic-buttons-row {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; justify-content: center;
}
.mic-btn {
  display: flex; align-items: center; gap: 6px; background: none;
  border: 1px solid var(--border); color: var(--fg); padding: 8px 14px;
  border-radius: 8px; cursor: pointer; font-family: 'Peyda', sans-serif;
  font-size: 13px; transition: all 0.2s;
}
.mic-btn:hover { border-color: var(--cyan); color: var(--cyan); background: var(--hover-cyan); }
.mic-btn-divider { color: var(--fg-muted); font-size: 18px; }

/* ============ TIMELINE INBOX DRAWER ============ */


.mic-session-lobby {
  width: 100%; overflow-y: auto;
  transform: translateY(-30px); opacity: 0; max-height: 0; overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease, max-height 0.4s ease;
  display: flex; flex-direction: column; align-items: center;
}
.mic-session-lobby.active {
  transform: translateY(0); opacity: 1; max-height: 80vh; padding: 20px 0;
}
.recordings-section {
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.4s ease;
}
.recordings-section.blurred {
  opacity: 0.15; transform: translateY(30px); filter: blur(4px); max-height: 0;
  overflow: hidden; pointer-events: none;
}
.mic-lobby-header { text-align: center; margin-bottom: 24px; }
.mic-lobby-header h2 { font-family: 'Peyda', sans-serif; font-size: 18px; color: var(--fg); margin-bottom: 7px; }
.mic-code-display {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.mic-code-row {
  display: flex; align-items: center; gap: 8px;
}
.mic-code {
  font-family: 'DM Mono', monospace; font-size: 19px; letter-spacing: 2px;
  color: var(--cyan); background: var(--surface); padding: 0 10px;
  border-radius: var(--radius-sm); border: 1px solid var(--border); user-select: all;
  min-height: 39px; width: 100px; display: flex; align-items: center; justify-content: center;
}
.mic-code-timer { display: none; }
.mic-refresh-code {
  background: none; border: 1px solid var(--border); color: var(--fg); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0 10px;
  border-radius: var(--radius-sm); min-height: 39px;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.mic-refresh-code:hover { color: var(--cyan); border-color: var(--cyan); background: var(--hover-cyan); }
.mic-code-progress {
  width: 100%; max-width: 280px; height: 6px;
  background: var(--border); border-radius: var(--radius-full); overflow: hidden; direction: ltr;
}
.mic-code-progress-fill {
  height: 100%; width: 0%; background: var(--cyan); border-radius: var(--radius-full);
  transition: width 0.5s linear;
}
.mic-participants-list { flex: 1; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.mic-participant-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.mic-participant-card-left { display: flex; align-items: center; gap: 8px; }
.mic-participant-card-right { display: flex; align-items: center; gap: 10px; }
.mic-participant-name { font-family: 'Peyda', sans-serif; font-size: 14px; }
.mic-audio-signal { display: flex; align-items: center; gap: 3px; height: 20px; }
.mic-audio-signal span {
  width: 3px; background: var(--cyan); border-radius: 1px;
  animation: mic-signal-bar 0.8s ease-in-out infinite;
}
.mic-audio-signal span:nth-child(1) { animation-delay: 0s; height: 6px; }
.mic-audio-signal span:nth-child(2) { animation-delay: 0.1s; height: 12px; }
.mic-audio-signal span:nth-child(3) { animation-delay: 0.2s; height: 18px; }
.mic-audio-signal span:nth-child(4) { animation-delay: 0.3s; height: 12px; }
.mic-audio-signal span:nth-child(5) { animation-delay: 0.4s; height: 6px; }
@keyframes mic-signal-bar {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
.mic-status-uploaded { color: #22c55e; font-size: 16px; }
.mic-status-waiting { color: #eab308; font-size: 16px; }
.mic-status-recording { color: #ef4444; font-size: 16px; }
.mic-status-failed { color: #ef4444; font-size: 16px; }
.mic-status-disconnected { color: #ef4444; font-size: 16px; }
.mic-kick-btn {
  background: none; border: 1px solid var(--danger); color: var(--danger);
  padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 11px;
  font-family: 'Peyda', sans-serif; transition: all 0.2s;
}
.mic-kick-btn:hover { background: var(--danger); color: var(--bg); }
.mic-lobby-controls {
  display: flex; gap: 12px; margin-top: 16px; justify-content: center; width: 100%;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mic-verify-header { text-align: center; margin-bottom: 24px; }
.mic-verify-list { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.mic-verify-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.mic-verify-name { font-family: 'Peyda', sans-serif; font-size: 14px; }
.mic-verify-status { font-size: 13px; }
.mic-verify-size { font-size: 12px; color: var(--fg-muted); }
.mic-verify-controls { display: flex; gap: 12px; margin-top: 16px; }
.mic-choice-body { display: flex; flex-direction: column; gap: 12px; }
.mic-choice-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 20px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); cursor: pointer; transition: all 0.2s;
}
.mic-choice-btn:hover { border-color: var(--cyan); background: var(--surface-hover); }
.mic-choice-icon { font-size: 24px; }
.mic-choice-label { font-family: 'Peyda', sans-serif; font-weight: 600; color: var(--fg); }
.mic-choice-desc { font-size: 12px; color: var(--fg-muted); }
.mic-join-label {
  display: block; margin-bottom: 8px; font-size: 13px; color: var(--fg-secondary);
  font-family: 'Peyda', sans-serif;
}
.mic-join-input {
  width: 100%; height: 48px; text-align: center;
  font-family: 'DM Mono', monospace; font-size: 24px; letter-spacing: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); color: var(--fg); outline: none;
}
.mic-join-input:focus { border-color: var(--cyan); }
.mic-join-info { margin-top: 12px; font-size: 13px; color: var(--fg-secondary); text-align: center; }
.mic-join-alias-row { margin-top: 12px; }
.mic-join-alias {
  width: 100%; height: 40px; padding: 0 12px; font-family: 'Peyda', sans-serif;
  font-size: 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); color: var(--fg); outline: none; direction: rtl;
}
.mic-join-alias:focus { border-color: var(--cyan); }
.mic-join-actions { display: flex; gap: 12px; margin-top: 16px; justify-content: flex-end; }

/* ===== Common Buttons ===== */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 24px; background: var(--cyan); border: none;
  color: var(--bg); font-family: 'Peyda', sans-serif; font-size: 13px;
  border-radius: var(--radius-md); cursor: pointer; transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 24px; background: none; border: 1px solid var(--border);
  color: var(--fg); font-family: 'Peyda', sans-serif; font-size: 13px;
  border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s;
}
.btn-secondary:hover { border-color: var(--cyan); color: var(--cyan); background: var(--hover-cyan); }

/* ===== Notes List ===== */
.filter-bar { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.filter-btn {
  background: none; border: none; color: var(--fg-secondary); cursor: pointer;
  padding: 8px 16px; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.8px;
  border-bottom: 1px solid transparent; margin-bottom: -1px; transition: all 0.15s;
}
.filter-btn:hover { color: var(--fg); }
.filter-btn.active { color: var(--cyan); border-bottom-color: var(--cyan); }

.note-row {
  display: flex; align-items: stretch; gap: 0;
  border: 0.5px solid var(--note-border); border-radius: 1.75px;
  cursor: pointer; transition: background 0.1s;
  height: 52px; margin-bottom: 8px; background: transparent;
  overflow: hidden; padding-left: 6px;
}
.note-row:hover { background: var(--hover); }
.note-icon { width: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.note-icon svg { width: 15px; height: 18px; color: var(--note-icon); }
.note-sep { width: 0.5px; background: var(--note-sep); flex-shrink: 0; }
.note-folder-col { width: 15px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.note-folder-col span { writing-mode: sideways-lr; font-size: 8px; color: var(--fg-muted); letter-spacing: 1px; text-transform: uppercase; text-align: center; }
.note-info { flex: 1; min-width: 0; padding: 0 10px; display: flex; flex-direction: row; align-items: center; gap: 8px; }
.note-meta-col { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex-shrink: 0; }
.note-date { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--fg-muted); letter-spacing: 0.4px; white-space: nowrap; }
.note-time { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--fg-muted); letter-spacing: 0.4px; white-space: nowrap; }
.note-title { font-size: 12px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.note-actions { display: flex; align-items: center; gap: 2px; padding-right: 6px; flex-shrink: 0; }
.note-badge {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.5px;
  padding: 2px 8px; font-weight: 500; flex-shrink: 0;
}
.note-badge.pending { color: var(--fg-secondary); border: 1px solid var(--border-light); }
.note-badge.transcribed { color: var(--cyan); border: 1px solid var(--border-light); }
.note-badge.completed { color: var(--success); border: 1px solid rgba(68,204,68,0.2); }
.note-badge.failed { color: var(--danger); border: 1px solid rgba(255,68,68,0.2); }
.note-delete, .note-move {
  background: none; border: none; cursor: pointer; padding: 4px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--fg-secondary); transition: color 0.15s;
}
.note-delete:hover { color: var(--danger); }
.note-move:hover { color: var(--cyan); }

/* ===== Planning ===== */
.planning-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.reminder-list { margin-bottom: 12px; }
.reminder-add-section { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 20px; }
.reminder-add-form { display: flex; flex-direction: column; gap: 10px; }
.reminder-add-form input[type="text"] {
  flex: 1; background: none; border: 1px solid var(--border-light); color: var(--fg);
  font-family: 'Barlow', sans-serif; font-size: 14px; padding: 8px 12px; outline: none;
}
.reminder-add-form input[type="text"]:focus { border-color: var(--cyan); }
.reminder-add-row { display: flex; gap: 8px; align-items: center; }
.reminder-date-input, .reminder-priority-select {
  background: var(--input-bg); border: 1px solid var(--border-light); color: var(--fg);
  padding: 6px 10px; font-family: 'DM Mono', monospace; font-size: 11px; outline: none;
}
.reminder-date-input:focus, .reminder-priority-select:focus { border-color: var(--cyan); }
.reminder-add-form textarea {
  background: none; border: 1px solid var(--border-light); color: var(--fg);
  font-family: 'Barlow', sans-serif; font-size: 13px; padding: 8px 12px; outline: none; resize: vertical;
}
.reminder-add-form textarea:focus { border-color: var(--cyan); }
.reminder-add-form textarea::placeholder { color: var(--fg-muted); }
.reminder-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
}
.reminder-check {
  width: 16px; height: 16px; flex-shrink: 0; cursor: pointer;
  border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.reminder-check:hover { border-color: var(--cyan); }
.reminder-check.checked { background: var(--cyan); border-color: var(--cyan); }
.reminder-check.checked svg { color: var(--bg); }
.reminder-info { flex: 1; min-width: 0; }
.reminder-title { font-size: 14px; color: var(--fg); }
.reminder-title.done { text-decoration: line-through; color: var(--fg-secondary); }
.reminder-meta { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--fg-secondary); letter-spacing: 0.4px; margin-top: 2px; display: flex; gap: 8px; }
.reminder-priority { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.5px; padding: 2px 6px; flex-shrink: 0; }
.reminder-priority.high { color: var(--danger); border: 1px solid rgba(255,68,68,0.2); }
.reminder-priority.medium { color: var(--cyan); border: 1px solid var(--border-light); }
.reminder-priority.low { color: var(--fg-secondary); border: 1px solid var(--border-light); }
.reminder-delete { background: none; border: none; color: var(--fg-muted); cursor: pointer; font-size: 16px; padding: 4px; }
.reminder-delete:hover { color: var(--danger); }

.inline-add { display: flex; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.inline-add input {
  flex: 1; background: none; border: none; color: var(--fg);
  font-family: 'Barlow', sans-serif; font-size: 14px; padding: 4px 0;
  outline: none;
}
.inline-add input::placeholder { color: var(--fg-muted); }
.inline-add button {
  background: none; border: 1px solid var(--border-light); color: var(--fg-secondary);
  width: 30px; height: 30px; cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.inline-add button:hover { border-color: var(--cyan); color: var(--cyan); }

/* ===== Chat ===== */
.chat-layout { display: flex; flex-direction: column; padding: 0 !important; overflow: hidden; }
.chat-messages { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 32px; position: relative; }

body:not(.rtl) .chat-messages { direction: rtl; justify-items: normal; }
.chat-message { display: flex; gap: 12px; margin-bottom: 20px; }
.chat-message.user { flex-direction: row-reverse; }
.rtl .chat-message.user { flex-direction: row; }
.chat-dot { width: 6px; height: 6px; margin-top: 8px; flex-shrink: 0; border-radius: 50%; }
.chat-dot.user { background: var(--fg); }
.chat-dot.assistant { background: var(--cyan); }
.chat-bubble { flex: 1; max-width: 80%; }
body:not(.rtl) .chat-bubble { direction: ltr; }
.chat-bubble.user .bubble-content {
  display: inline-block; padding: 10px 14px;
  background: var(--surface-raised); border: 1px solid var(--border-light);
}
.chat-bubble.assistant .bubble-content {
  padding: 10px 14px; border-left: 2px solid var(--cyan);
}
.rtl .chat-bubble.assistant .bubble-content { border-left: none; border-right: 2px solid var(--cyan); direction: rtl; }
.bubble-content { font-size: 14px; line-height: 1.7; color: var(--fg); white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }

.chat-input-area {
  flex-shrink: 0; border-top: 1px solid var(--border);
  padding: 12px 32px 20px;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
/* ===== New-chat empty state: composer centered, prompt joins the context controls ===== */
.chat-empty-hero { display: none; }
.chat-layout.chat-empty { justify-content: center; }
.chat-layout.chat-empty #chatMessages { display: none; }
.chat-layout.chat-empty .chat-input-area { border-top: none; max-width: 640px; margin: 0 auto; width: 100%; }
.chat-layout.chat-empty .chat-empty-hero {
  display: flex; align-items: center; flex-shrink: 0;
  animation: chatHeroIn 0.5s ease-out;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.chat-empty-rotator {
  font: inherit; font-size: 11px; color: var(--fg-secondary); min-height: 44px;
  background: var(--surface-raised); border: 1px solid var(--border-light); padding: 8px 12px;
  cursor: pointer; display: inline-flex; align-items: center; white-space: nowrap;
}
.chat-empty-rotator:hover { color: var(--cyan); border-color: var(--cyan); }
.chat-empty-rotator.chat-rotator-in { animation: chatRotateFade 0.45s ease; }
@keyframes chatRotateFade { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes chatHeroIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
.chat-layout.chat-empty-leaving .chat-empty-hero,
.chat-layout.chat-empty-leaving .chat-input-area { opacity: 0; transform: translateY(-8px); }
.chat-context-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; min-height: 28px; }
.chat-context-row::-webkit-scrollbar { display: none; }
.chat-sep { color: var(--fg-muted); flex-shrink: 0; font-size: 12px; display: flex; align-items: center; }
.context-btn {
  background: none; border: 1px solid var(--border-light); color: var(--fg-secondary);
  padding: 4px 12px; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.5px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.context-btn:hover { color: var(--fg); }
.chat-input-row { display: flex; align-items: flex-end; gap: 12px; }
.chat-input-row textarea {
  flex: 1; background: none; border: 1px solid var(--border); color: var(--fg); resize: none;
  font-family: 'Barlow', sans-serif; font-size: 14px; padding: 8.5px 12px; outline: none;
  line-height: 1.5; min-height: 40px; max-height: 120px; overflow-y: auto;
}
.chat-input-row textarea::placeholder { color: var(--fg-muted); caret-color: var(--cyan); }
.send-btn {
  width: 40px; height: 40px; background: var(--cyan); border: 1px solid var(--cyan); color: var(--bg);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.send-btn svg,
.send-btn .theme-icon { color: currentColor; width: 16px; height: 16px; }
.send-btn:hover:not(:disabled) { background: var(--fg); border-color: var(--fg); color: var(--surface); }
.send-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.chat-mic-btn .theme-icon { width: 18px; height: 18px; }
.send-btn:disabled { opacity: 0.3; cursor: default; }
.chat-mic-btn {
  width: 40px; height: 40px; background: none; border: 1px solid var(--border); color: var(--fg);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.chat-mic-btn:hover { border-color: var(--cyan); color: var(--cyan); }
html[data-theme="pro"] .chat-input-row textarea { min-height: 44px; padding: 10px 12px; }
html[data-theme="pro"] .send-btn, html[data-theme="pro"] .chat-mic-btn { width: 44px; height: 44px; }
.chat-mic-btn.recording { background: var(--danger); border-color: var(--danger); color: var(--bg); animation: chatMicPulse 1.2s infinite; }
@keyframes chatMicPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
.chat-mic-btn:disabled { opacity: 0.4; cursor: default; }

.chat-attach-preview-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chat-attach-thumb { position: relative; width: 60px; height: 60px; flex-shrink: 0; }
.chat-attach-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-light); display: block; }
.chat-attach-remove {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: var(--radius-full);
  background: var(--danger); color: var(--bg); border: none; font-size: 12px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.chat-uploaded-image { width: 200px; height: 200px; display: block; margin-bottom: 8px; cursor: pointer; border-radius: 4px; object-fit: cover; }
.chat-uploaded-image:hover { opacity: 0.85; }


.image-prompt-card { padding: 0; }
.image-prompt-header {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.5px;
  color: var(--fg-secondary); margin-bottom: 8px; text-transform: uppercase;
}
.image-prompt-input {
  width: 100%; background: var(--input-bg); border: 1px solid var(--border-light);
  color: var(--fg); font-family: 'Barlow', sans-serif; font-size: 14px;
  padding: 8px 12px; outline: none; resize: vertical; min-height: 60px;
  margin-bottom: 10px;
}
.image-prompt-input:focus { border-color: var(--cyan); }
.image-prompt-actions { display: flex; gap: 8px; align-items: center; }
.image-prompt-actions .btn-primary { padding: 8px 16px; font-size: 12px; }
.image-prompt-actions .btn-secondary { padding: 8px 16px; font-size: 12px; }
.ai-action-note { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 11px; margin-bottom: 8px; }
.image-model-toggle { display: flex; gap: 6px; margin-bottom: 10px; }
.image-model-btn {
  flex: 1; padding: 6px 10px; font-size: 11px; font-family: inherit; cursor: pointer;
  background: var(--input-bg); border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  color: var(--fg-secondary); transition: all 0.15s;
}
.image-model-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg); }

.chat-generated-image { width: 300px; height: 300px; display: block; margin-top: 8px; cursor: pointer; border-radius: 4px; transition: opacity 0.3s; animation: imageFadeIn 0.4s ease-out; object-fit: cover; }
.chat-generated-image:hover { opacity: 0.85; }
.image-prompt-box { width: 300px; margin-top: 6px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-sm); font-size: 11px; color: var(--fg-secondary); line-height: 1.5; max-height: 60px; overflow-y: auto; }

/* ============ IMAGE LIGHTBOX ============ */
.lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lightbox.hidden { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.92); }
.lightbox-close { position: absolute; top: 12px; right: 12px; z-index: 3; background: none; border: none; color: #fff; font-size: 28px; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.15s; }
.lightbox-close:hover { background: rgba(255,255,255,0.15); }
.lightbox-content { position: relative; z-index: 2; max-width: 90vw; max-height: 80vh; display: flex; align-items: center; justify-content: center; }
.lightbox-img { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 4px; animation: lightboxFadeIn 0.25s ease-out; }
@keyframes lightboxFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.lightbox-toolbar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); }
.lightbox-btn { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 8px 14px; border-radius: 0; cursor: pointer; font-size: 12px; font-family: inherit; transition: background 0.15s; }
.lightbox-btn:hover { background: rgba(255,255,255,0.25); }
.lightbox-btn svg { flex-shrink: 0; }

/* ============ IMAGE SKELETON LOADING ============ */
.image-skeleton {
  width: 300px; height: 300px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  margin-top: 8px;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}
@keyframes skeletonPulse { 0%,100% { border-color: var(--border); } 50% { border-color: var(--cyan); } }
.image-skeleton-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.08) 60%, transparent 100%);
  animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.image-skeleton-text {
  position: relative; z-index: 1;
  font-size: 13px; color: var(--fg-secondary);
  display: flex; align-items: center; gap: 8px;
}
.image-skeleton-hint {
  position: relative; z-index: 1;
  max-width: 240px; margin-top: 12px; padding-inline: 12px;
  color: var(--fg-muted); font-size: 11px; line-height: 1.6; text-align: center;
}
.image-skeleton-text::before {
  content: '';
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: skeletonSpin 0.8s linear infinite;
}
@keyframes skeletonSpin { to { transform: rotate(360deg); } }

/* Skeleton reveal — image fades in inside same container */
.image-skeleton.revealing { animation: none; }
.image-skeleton.revealing .image-skeleton-shimmer { animation: none; opacity: 0; transition: opacity 0.3s; }
.image-skeleton.revealing .image-skeleton-text { display: none; }
.image-skeleton.revealing img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 4px;
  opacity: 0; filter: blur(12px);
  transition: opacity 0.6s ease, filter 0.6s ease;
}
.image-skeleton.revealing img.loaded {
  opacity: 1; filter: blur(0);
}

@keyframes imageFadeIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

.typing-indicator { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.bubble-content .typing-indicator { margin: 0; }
.typing-squares { display: flex; gap: 4px; align-items: center; }
.typing-squares span {
  width: 8px; height: 8px; border-radius: 0; background: var(--fg-muted);
  animation: squarePulse 0.8s ease-in-out infinite;
}
.typing-squares span:nth-child(1) { animation-delay: 0s; }
.typing-squares span:nth-child(2) { animation-delay: 0.15s; }
.typing-squares span:nth-child(3) { animation-delay: 0.3s; }
.typing-squares span:nth-child(4) { animation-delay: 0.45s; }
.typing-squares span:nth-child(5) { animation-delay: 0.6s; }
@keyframes squarePulse {
  0%, 100% { transform: scaleY(0.4); opacity: 0.3; background: var(--fg-muted); }
  50% { transform: scaleY(1); opacity: 1; background: var(--cyan); }
}
.typing-cursor {
  display: inline-block; width: 2px; height: 1em; background: var(--cyan);
  margin-inline-start: 2px; vertical-align: text-bottom; animation: cursorBlink 0.6s step-end infinite;
}
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.context-footer { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--fg-muted); letter-spacing: 0.5px; text-align: end; padding: 8px 0 4px; }


/* ===== Modal ===== */
.modal-overlay {
  position: fixed; inset: 0; background: var(--overlay);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--surface); width: 92%; max-width: 600px; max-height: 85vh;
  display: flex; flex-direction: column; border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: modal-in 0.2s ease-out;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 12px; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.8px; color: var(--fg); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-close { background: none; border: none; color: var(--fg-secondary); font-size: 22px; cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.modal-close:hover { color: var(--fg); }
.modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.modal-body p { font-size: 14px; line-height: 1.7; color: var(--fg); margin-bottom: 12px; }
.modal-body .label { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--fg-secondary); letter-spacing: 0.5px; margin-bottom: 4px; }
.modal-footer { padding: 12px 24px 20px; border-top: 1px solid var(--border); }
.note-audio-section { padding: 12px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.note-audio-section:empty { display: none; }
.note-photo-section:empty { display: none; }
.note-photo-grid { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 24px; border-bottom: 1px solid var(--border); }
.note-photo-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-light); cursor: pointer; }
.note-minimal { display: flex; flex-direction: column; align-items: center; padding: 32px 24px; gap: 16px; }
.note-minimal-status { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--fg-secondary); }
.note-minimal-actions { display: flex; gap: 8px; }
.retry-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px;
  background: none; border: 1px solid var(--cyan); color: var(--cyan);
  font-family: 'DM Mono', monospace; font-size: 11px; cursor: pointer;
  transition: all 0.15s;
}
.retry-btn:hover { background: var(--cyan); color: var(--bg); }
.retry-btn svg { width: 14px; height: 14px; }
.retry-inline {
  background: none; border: none; color: var(--fg-muted);
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: all 0.15s;
}
.retry-inline:hover { background: var(--hover); color: var(--fg); }
.retry-inline.failed { border-color: var(--danger); color: var(--danger); }
.retry-inline.failed:hover { background: var(--danger); color: var(--bg); }
.chat-message.error .chat-dot { background: var(--danger); }
.chat-message.error .chat-bubble { border-inline-start: 2px solid var(--danger); }
.chat-message.error .bubble-content { color: var(--danger); font-size: 13px; }
.retry-btn { padding: 4px 12px; border-radius: var(--radius-md); font-size: 12px; cursor: pointer; background: var(--surface); border: 1px solid var(--danger); color: var(--danger); transition: all 0.15s; }
.retry-btn:hover { background: var(--danger); color: var(--bg); }
.audio-download {
  flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  color: var(--fg-secondary); text-decoration: none; transition: color 0.15s;
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
}
.audio-download:hover { color: var(--fg); }
.drag-handle { display: none; }

/* Toast */
.toast {
  position: fixed; bottom: calc(80px + env(safe-area-inset-bottom)); left: 50%;
  display: inline-flex; align-items: center; gap: 9px;
  width: max-content; max-width: min(420px, calc(100vw - 32px));
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  background: var(--surface-raised); border: 1px solid var(--border-light);
  padding: 11px 16px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.18));
  font-family: 'Peyda', 'Vazirmatn', 'DM Mono', sans-serif; font-size: 12px;
  line-height: 1.5; color: var(--fg); letter-spacing: .1px; text-align: start;
  z-index: 200; transition: opacity .22s ease, transform .22s ease;
}
.toast::before { content: ''; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.toast.hidden { opacity: 0; transform: translate(-50%, 8px); }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast[data-tone="success"] { border-color: color-mix(in srgb, var(--success) 48%, var(--border)); }
.toast[data-tone="success"]::before { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 16%, transparent); }
.toast[data-tone="error"] { border-color: color-mix(in srgb, var(--danger) 48%, var(--border)); }
.toast[data-tone="error"]::before { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); }
.toast[data-tone="warning"] { border-color: color-mix(in srgb, var(--warning) 54%, var(--border)); }
.toast[data-tone="warning"]::before { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 16%, transparent); }
.toast[data-tone="info"] { border-color: color-mix(in srgb, var(--info) 48%, var(--border)); }
.toast[data-tone="info"]::before { background: var(--info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 16%, transparent); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* Empty state */
.empty-state { text-align: center; padding: 48px 32px; }
.empty-icon {
  width: 64px; height: 64px; margin: 0 auto 20px;
  border: 1px solid var(--border-light); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: empty-bounce 2s ease-in-out infinite;
}
@keyframes empty-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.empty-icon svg { width: 28px; height: 28px; color: var(--cyan); }
.empty-title { font-family: 'DM Mono', monospace; font-size: 13px; color: var(--fg); letter-spacing: 0.8px; margin-bottom: 8px; }
.empty-text { font-size: 13px; color: var(--fg-secondary); line-height: 1.6; margin-bottom: 16px; }
.empty-btn {
  display: inline-block; padding: 10px 24px; background: var(--cyan); border: none;
  color: var(--bg); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.8px;
  cursor: pointer; transition: opacity 0.15s;
}
.empty-btn:hover { opacity: 0.9; }

/* Note detail modal tabs */
.note-detail-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.note-tab-btn { background: none; border: none; color: var(--fg-secondary); padding: 8px 16px; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.5px; cursor: pointer; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.note-tab-btn.active { color: var(--cyan); border-bottom-color: var(--cyan); }
.note-detail-content { font-size: 14px; line-height: 1.7; color: var(--fg); white-space: pre-wrap; }
.note-detail-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.note-action-btn { padding: 6px 14px; background: none; border: 1px solid var(--border-light); color: var(--fg); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.5px; cursor: pointer; }
.note-action-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.note-action-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.transcript-content { font-size: 14px; line-height: 1.7; color: var(--fg); white-space: pre-wrap; min-height: 60px; }
.transcript-content.editing { outline: 1px solid var(--cyan); padding: 8px; cursor: text; }
.transcript-label { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--cyan); letter-spacing: 0.5px; margin-bottom: 8px; }

/* Segmented transcript for multi-mic recordings */
.segmented-transcript { padding: 4px 0; }
.transcript-segment { transition: box-shadow 0.2s ease, transform 0.1s ease; }
.transcript-segment:hover { transform: translateX(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.transcript-segment.active { box-shadow: 0 0 0 2px var(--cyan); }
.speaker-badge { text-transform: uppercase; letter-spacing: 0.5px; }
.segment-time { opacity: 0.7; }

/* ===== Search bar ===== */
.search-bar {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-light); padding: 4px 10px;
  background: var(--input-bg); flex: 1; max-width: 240px; height: 34px;
}
.search-bar svg { color: var(--fg-muted); flex-shrink: 0; }
.search-bar input {
  flex: 1; background: none; border: none; color: var(--fg);
  font-family: 'Barlow', sans-serif; font-size: 13px; padding: 2px 0; outline: none; min-width: 0;
}
.search-bar input::placeholder { color: var(--fg-muted); }
.search-bar:focus-within { border-color: var(--cyan); }

/* ===== Spacer, header icons ===== */
.spacer { flex: 1; }
.header-icon-btn {
  background: none; border: 1px solid var(--border-light); width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--fg-secondary); flex-shrink: 0; border-radius: 4px;
}
.header-icon-btn:hover { color: var(--fg); border-color: var(--fg-secondary); }

/* Folder indicator */
/* Folder indicator removed */

/* ===== Settings ===== */
.settings-body { max-width: 520px; }
.settings-section { margin-bottom: 24px; }
.settings-section-divider { padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: 16px; }
.settings-section-divider label { font-weight: 600; font-size: 11px; letter-spacing: 0.5px; opacity: 0.7; }
.subsection-heading { margin: 24px 0 12px; font-size: 13px; font-weight: 600; color: var(--fg); }
.settings-tabs {
  display: flex; gap: 4px;
  margin-bottom: 20px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
  background: none; border: none; color: var(--fg-secondary);
  padding: 10px 14px; font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 0.5px; cursor: pointer; min-height: 44px; position: relative;
  white-space: nowrap; text-transform: uppercase;
}
.settings-tab.active { color: var(--cyan); }
.settings-tabs:not(.today-triage) .settings-tab.active::after {
  content: ''; position: absolute; inset-inline: 10px; bottom: 2px; height: 2px;
  background: var(--cyan); pointer-events: none;
}
.settings-tab .tab-count {
  margin-left: 6px; color: var(--fg-secondary); font-size: 9px;
}
.settings-tab.active .tab-count { color: var(--cyan); }
html[data-theme="pro"] .settings-tabs:not(.today-triage) .settings-tab.active {
  background: var(--accent); color: #fff; border-radius: var(--radius-full);
}
html[data-theme="pro"] .settings-tabs:not(.today-triage) .settings-tab.active::after { background: #fff; }
html[data-theme="pro"] .settings-tabs:not(.today-triage) .settings-tab.active .tab-count { color: #fff; }
.settings-panel { display: none; }
.settings-panel.active { display: block; }
.settings-panel[data-settings-panel="about"] .setting-row { padding-top: 0; }
.settings-account-actions { display: flex; flex-direction: column; gap: 10px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); gap: 16px; }
.setting-row label { font-size: 14px; color: var(--fg); flex-shrink: 0; }
.setting-input, .setting-select {
  background: var(--input-bg); border: 1px solid var(--border-light); color: var(--fg);
  padding: 7px 10px; font-family: 'DM Mono', monospace; font-size: 11px; width: 220px; outline: none;
}
.setting-input:focus, .setting-select:focus { border-color: var(--cyan); }
.setting-select { cursor: pointer; }
.accent-swatch-grid { display: flex; flex-wrap: wrap; gap: 8px; max-width: 220px; }
.accent-swatch {
  width: 22px; height: 22px; border: 1px solid var(--border-light); cursor: pointer; padding: 0;
  position: relative; flex-shrink: 0;
}
.accent-swatch.active { outline: 2px solid var(--fg); outline-offset: 2px; }
.accent-swatch-reset {
  background: repeating-linear-gradient(45deg, var(--border-light), var(--border-light) 3px, transparent 3px, transparent 6px);
}
html[data-theme="pro"] .accent-swatch { border-radius: var(--radius-full); }
.setting-select option {
  background: var(--surface);
  color: var(--fg);
  direction: rtl;
}

/* Switch */
.switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: var(--fg-muted); cursor: pointer; transition: 0.2s; border-radius: 0; }
.slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px; background: var(--bg); transition: 0.2s; }
.switch input:checked + .slider { background: var(--fg-muted); }
.switch input:checked + .slider::before { transform: translateX(16px); background: var(--cyan); }

.primary-btn {
  width: 100%; padding: 8px 15px; background: var(--accent); border: none;
  color: var(--bg); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 1px; cursor: pointer;
}
.primary-btn:hover { background: color-mix(in srgb, var(--primary) 85%, black); transform: translateY(-1px); }
.logout-btn {
  width: 100%; padding: 12px; background: transparent; border: 1px solid var(--danger);
  color: var(--danger); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 1px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px; transition: all .15s;
}
.logout-btn:hover { background: var(--danger); color: #fff; }

/* ===== Modal tabs ===== */
.modal-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 24px; }
.modal-tab { background: none; border: none; color: var(--fg-secondary); padding: 10px 16px; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.5px; cursor: pointer; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.modal-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }

/* ===== Note selector ===== */
.note-select-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.note-select-check { width: 16px; height: 16px; flex-shrink: 0; border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; }
.note-select-check.checked { background: var(--cyan); border-color: var(--cyan); }
.note-select-check.checked svg { color: var(--bg); }
.note-select-title { font-size: 14px; color: var(--fg); }
.note-select-folder { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--fg-secondary); letter-spacing: 0.4px; }

/* Selected note pills in chat */
.selected-pills { display: flex; align-items: center; gap: 6px; overflow-x: auto; flex-wrap: nowrap; margin-inline-start: 4px; }
.selected-pills::-webkit-scrollbar { height: 0; }
.selected-pill { display: flex; align-items: center; gap: 4px; border: 1px solid var(--border-light); padding: 2px 8px; flex-shrink: 0; }
.selected-pill span { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--cyan); letter-spacing: 0.4px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-pill button { background: none; border: none; color: var(--cyan); cursor: pointer; font-size: 11px; padding: 0; line-height: 1; }

/* ===== Plans ===== */
.plans-section { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 20px; }
.plan-card { padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; align-items: center; gap: 12px; }
.plan-card:hover { background: var(--hover); }
.plan-icon { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.plan-icon svg { width: 14px; height: 14px; color: var(--cyan); }
.plan-info { flex: 1; }
.plan-title { font-size: 14px; color: var(--fg); }
.plan-meta { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--fg-secondary); letter-spacing: 0.4px; margin-top: 2px; }

/* ===== Chat history ===== */
.history-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.history-item:hover { background: var(--hover); }
.history-icon { width: 24px; height: 24px; border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.history-icon svg { width: 12px; height: 12px; color: var(--fg-secondary); }
.history-info { flex: 1; min-width: 0; }
.history-title { font-size: 14px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-date { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--fg-secondary); letter-spacing: 0.4px; margin-top: 2px; }
.history-delete { background: none; border: none; color: var(--fg-muted); cursor: pointer; font-size: 18px; }
.history-delete:hover { color: var(--danger); }

/* ===== Action items ===== */
.action-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.action-check { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; border: 1px solid var(--border-light); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.action-check.done { background: var(--cyan); border-color: var(--cyan); }
.action-check.done svg { color: var(--bg); }
.action-text { font-size: 13px; color: var(--fg); flex: 1; }
.action-text.done { text-decoration: line-through; color: var(--fg-secondary); }

/* ===== Markdown ===== */
.bubble-content strong { font-weight: 600; }
.bubble-content em { font-style: italic; }
.bubble-content code {
  background: var(--code-bg); padding: 1px 5px;
  font-family: 'DM Mono', monospace; font-size: 12px;
}
.bubble-content pre {
  background: var(--code-bg); border-radius: var(--radius-sm); padding: 10px 14px;
  margin: 8px 0; overflow-x: auto;
}
.bubble-content pre code {
  background: none; padding: 0; font-size: 12px; line-height: 1.5;
}
.bubble-content ol, .bubble-content ul { padding-left: 20px; margin: 4px 0; }
.bubble-content li { margin: 2px 0; }
.bubble-content img { max-width: 100%; border-radius: 6px; margin: 4px 0; }
.bubble-content blockquote { border-left: 3px solid var(--cyan); padding-left: 10px; margin: 4px 0; color: var(--fg-muted); }

/* ===== Plan detail ===== */
.plan-detail-section { margin-bottom: 20px; }
.plan-detail-label { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--fg-secondary); letter-spacing: 0.5px; margin-bottom: 6px; }
.plan-detail-value { font-size: 14px; color: var(--fg); line-height: 1.6; }
.plan-step { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
.plan-step-num { width: 20px; height: 20px; border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'DM Mono', monospace; font-size: 9px; color: var(--cyan); }
.plan-step-text { font-size: 14px; color: var(--fg); }

/* ===== Action chips ===== */
.action-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-light); padding: 4px 10px; margin: 2px 4px 2px 0; font-family: 'DM Mono', monospace; font-size: 9px; color: var(--fg-secondary); letter-spacing: 0.5px; cursor: pointer; }
.action-chip:hover { border-color: var(--fg-secondary); color: var(--fg); }
.action-chip.done { border-color: var(--border-light); color: var(--cyan); }

/* ===== Loading spinner ===== */
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--border-light); border-top-color: var(--cyan);
  border-radius: 50%; animation: spin 0.6s linear infinite;
}
.spinner-lg { width: 24px; height: 24px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; color: var(--fg-secondary); font-size: 13px;
}

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

html[data-theme="pro"] :focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
html[data-theme="pro"] button:focus-visible, html[data-theme="pro"] a:focus-visible, html[data-theme="pro"] input:focus-visible, html[data-theme="pro"] select:focus-visible, html[data-theme="pro"] textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
/* Default theme: no boxy focus ring — inputs already show focus via border-color, that's enough. */
html:not([data-theme="pro"]) :focus-visible { outline: none; }
/* Default theme: no focus border color change either — sacred minimal theme stays quiet on focus/select. */
html:not([data-theme="pro"]) .auth-input:focus,
html:not([data-theme="pro"]) .mic-join-input:focus,
html:not([data-theme="pro"]) .mic-join-alias:focus,
html:not([data-theme="pro"]) .reminder-add-form input[type="text"]:focus,
html:not([data-theme="pro"]) .reminder-date-input:focus,
html:not([data-theme="pro"]) .reminder-priority-select:focus,
html:not([data-theme="pro"]) .reminder-add-form textarea:focus,
html:not([data-theme="pro"]) .image-prompt-input:focus,
html:not([data-theme="pro"]) .search-bar:focus-within,
html:not([data-theme="pro"]) .setting-input:focus,
html:not([data-theme="pro"]) .setting-select:focus,
html:not([data-theme="pro"]) .chat-action-list .image-prompt-input:focus,
html:not([data-theme="pro"]) .plan-step-reminder-row input:focus,
html:not([data-theme="pro"]) .form-input:focus,
html:not([data-theme="pro"]) .form-textarea:focus,
html:not([data-theme="pro"]) .plan-edit-input:focus,
html:not([data-theme="pro"]) .plan-edit-date:focus,
html:not([data-theme="pro"]) .memory-card-input:focus {
  border-color: var(--border-light);
}

/* ===== RTL ===== */
.rtl { direction: rtl; text-align: right; }
.rtl .nav-btn { flex-direction: row-reverse; }
.rtl .note-row { flex-direction: row-reverse; }
.rtl .reminder-row { flex-direction: row-reverse; }
.rtl .chat-message { flex-direction: row-reverse; }
/* RTL: context row keeps button on right */
.rtl .chat-context-row { flex-direction: row; }
.rtl .chat-input-row { flex-direction: row-reverse; }
.rtl .filter-bar { flex-direction: row-reverse; }
.rtl .setting-row { flex-direction: row-reverse; }
.rtl .plan-card { flex-direction: row-reverse; }
.rtl .history-item { flex-direction: row-reverse; }
.rtl .inline-add { flex-direction: row-reverse; }
.rtl .modal-header { flex-direction: row-reverse; }
.rtl .view-header { flex-direction: row-reverse; }
.rtl .header-icon-btn:last-child { margin-right: auto; }

/* ===== Custom audio player ===== */
.audio-player {
  display: flex; align-items: center; width: 100%; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; margin-top: 10px;
}
.audio-player.audio-missing { padding: 12px 14px; opacity: 0.65; }
.audio-missing-badge {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg-secondary); font-size: 12px;
}
.audio-btn {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--accent); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity 0.15s;
}
.audio-btn:hover { opacity: 0.8; }
.audio-btn svg { width: 14px; height: 14px; fill: var(--bg); }
.audio-progress-wrap {
  flex: 1; display: flex; align-items: center; gap: 8px;
}
.audio-progress {
  flex: 1; height: 4px; border-radius: var(--radius-full);
  background: var(--border); cursor: pointer; position: relative; overflow: visible;
  touch-action: none;
}
.audio-progress-fill {
  height: 100%; border-radius: var(--radius-full); background: var(--accent); width: 0%;
  pointer-events: none; transition: none;
}
.audio-progress-thumb {
  position: absolute; top: 50%; width: 16px; height: 16px;
  background: var(--accent); border-radius: 0;
  transform: translate(-50%,-50%);
  pointer-events: auto; cursor: grab; touch-action: none;
  transition: none; z-index: 1;
}
.audio-progress-thumb:active { cursor: grabbing; transform: translate(-50%,-50%) scale(1.15); }
.audio-time {
  font-size: 11px; color: var(--fg-secondary);
  white-space: nowrap; min-width: 32px; text-align: center;
  display: inline-flex; align-items: center; line-height: 1;
}
.audio-speed {
  flex: none; width: 32px; height: 32px; background: none;
  border: 1px solid var(--border-light);
  color: var(--fg-secondary); padding: 0; cursor: pointer;
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.5px;
  display: flex; align-items: center; justify-content: center;
}
.audio-speed:hover { color: var(--fg); border-color: var(--fg-secondary); }
.rtl .audio-player { flex-direction: row-reverse; }

/* ===== Mobile Top Bar ===== */
.mobile-top-bar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  height: calc(48px + env(safe-area-inset-top, 0px));
  padding: calc(4px + env(safe-area-inset-top, 0px)) 10px 4px;
  background: var(--bg);
  z-index: 45;
  align-items: center; gap: 4px;
}
.mobile-top-btn {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--fg); cursor: pointer;
  padding: 6px; border-radius: var(--radius-md);
  transition: background 0.2s, opacity 0.2s;
}
.mobile-top-btn::after {
  content: ''; position: absolute; inset: -7px;
}
.mobile-top-btn:hover { background: var(--hover); }
.mobile-top-btn:active { opacity: 0.7; }

/* ===== Bottom Tab Bar (Carousel) ===== */
.bottom-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(64px + env(safe-area-inset-bottom, 0px)); background: var(--sidebar-bg);
  border-top: 1px solid var(--border); z-index: 50;
  align-items: center; justify-content: space-around;
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  gap: 0;
}
.tab-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; color: var(--fg-muted); cursor: pointer;
  padding: 6px 4px; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  position: relative; min-width: 0; flex: 1 0 0;
}
.tab-btn svg { width: 20px; height: 20px; }
.tab-btn.active { color: var(--cyan); }
.tab-btn.active::after {
  content: ''; position: absolute; bottom: 2px;
  width: 20px; height: 2px; background: var(--cyan); border-radius: 1px;
}
.tab-btn:not(.active) { opacity: 0.55; }
.tab-btn span { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 0.5px; }


/* ===== Mobile responsive ===== */
@media (max-width: 768px) {
  button, input, select, textarea, [role="button"] { min-width: 44px; min-height: 44px; }
  .mobile-top-bar { display: flex; }
  .bottom-bar { display: flex; }
  .sidebar-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 30;
  }
  .sidebar-overlay.open { display: block; }

  #sidebar {
    position: fixed; top: calc(48px + env(safe-area-inset-top, 0px)); left: 0; bottom: 0; width: 240px; min-width: 240px;
    transform: translateX(-100%); transition: transform 0.25s ease; z-index: 40;
  }
  #sidebar.open { transform: translateX(0); }
  .rtl #sidebar { left: auto; right: 0; transform: translateX(100%); }
  .rtl #sidebar.open { transform: translateX(0); }

  #main { margin-left: 0; padding-top: calc(48px + env(safe-area-inset-top, 0px)); padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 8px); }
  .view { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .view-header { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 12px 16px 10px; overflow: hidden; }
  .view-header h2 { font-size: 11px; }
  .view-subtitle { display: none; }
  .search-bar { max-width: 160px; }
  .view-body { padding: 16px; padding-bottom: 80px; overflow: visible; }

  .record-hero { padding: 32px 0 24px; }

  .planning-layout { grid-template-columns: 1fr; gap: 20px; }

  .chat-messages { padding: 16px; }
  .chat-layout { overflow: hidden !important; }
  .chat-input-area { padding: 12px 16px 16px; flex-shrink: 0; }

  .settings-body { max-width: 100%; }
  .setting-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .rtl .setting-row { align-items: flex-end; }
  .setting-input, .setting-select { width: 100%; }

  .modal-overlay { align-items: stretch; justify-content: stretch; }
  .modal { position: fixed; inset: 0; max-height: none; max-width: 100%; width: 100%; border: none; border-radius: 0; animation: modal-slide-up 0.25s ease-out; }
  @keyframes modal-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .modal-header { padding: calc(16px + env(safe-area-inset-top, 0)) 16px 16px; }
  .modal-body { padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)); }
  .drag-handle { display: block; width: 40px; height: 4px; background: var(--fg-muted); border-radius: 2px; margin: 8px auto 4px; }

  .sidebar-footer .status-text { display: none; }
  .sidebar-footer { padding: 10px 12px; }

  .note-badge { font-size: 8px; padding: 1px 5px; }
  .note-meta span { font-size: 9px; }
}

@media (min-width: 769px) {
  #mobileThemeRow { display: none; }
}

@media (max-width: 480px) {
  .view-header { padding: 12px 12px 8px; }
  .view-body { padding: 12px; padding-bottom: 80px; }
  .chat-messages { padding: 12px; }
  .chat-input-area { padding: 10px 12px 14px; }

  .reminder-priority { display: none; }
  .filter-btn { padding: 6px 10px; font-size: 9px; }
}

/* ===== Modern polish + RTL fixes ===== */
.menu-btn, .nav-btn, .theme-btn, .header-icon-btn, .filter-btn, .primary-btn, .secondary-btn, .context-btn, .chip, .reminder-delete, .retry-inline, .note-delete, .note-move { border-radius: var(--radius-md) !important; }
.search-bar, .setting-input, .setting-select, .chat-input-wrap, .inline-add input, #reminderInput, #reminderDueDate, #reminderPriority, #reminderDescription { border-radius: var(--radius-md) !important; }
.note-row, .reminder-row, .plan-card, .audio-player, .settings-section { border-radius: var(--radius-md) !important; }
.reminder-row, .plan-card { padding: 12px; }
.reminder-row, .plan-card { margin-bottom: 8px; }
.modal { border-radius: var(--radius-xl) !important; overflow: hidden; }
.reminder-priority, .status-dot, .audio-btn, .action-check, .reminder-check { border-radius: var(--radius-full) !important; }
.note-badge { border-radius: 0 !important; }
.reminder-row, .plan-card { position: relative; border: 1px solid var(--border); }
.reminder-row:hover, .plan-card:hover { transform: translateY(-1px); border-color: var(--border-light); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.reminder-row::before, .plan-card::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--accent); opacity: 0; transition: opacity .18s ease; }
.reminder-row:hover::before, .plan-card:hover::before { opacity: 1; }
.note-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 9px; font-weight: 700; letter-spacing: .5px; }
.note-badge.pending { background: rgba(115,115,115,.13); color: var(--fg-secondary); }
.note-badge.processing { background: rgba(59,130,246,.13); color: var(--info); }
.note-badge.transcribed, .note-badge.completed { background: rgba(16,185,129,.13); color: var(--success); }
.note-badge.failed { background: rgba(239,68,68,.13); color: var(--danger); }
.reminder-priority.high { background: rgba(239,68,68,.12); color: var(--danger); }
.reminder-priority.medium { background: rgba(245,158,11,.12); color: var(--warning); }
.reminder-priority.low { background: rgba(59,130,246,.12); color: var(--info); }
.secondary-btn { background: var(--surface-raised); color: var(--fg); border: 1px solid var(--border-light); padding: 8px 15px; }
.danger-action { background: var(--danger) !important; color: #fff !important; }
.confirm-modal { max-width: 420px; }
.confirm-message { color: var(--fg-secondary); line-height: 1.7; }
.confirm-actions { display: flex; gap: 10px; margin-top: 22px; }
.confirm-actions button { flex: 1; }
.empty-state { padding: 48px 20px; text-align: center; }
.empty-icon { width: 72px; height: 72px; margin: 0 auto 16px; color: var(--fg-muted); opacity: .55; }
.empty-icon svg { width: 100%; height: 100%; }
.empty-title { color: var(--fg); font-size: 16px; font-weight: 650; margin-bottom: 6px; }
.empty-text { color: var(--fg-secondary); font-size: 13px; }
.loading-overlay { min-height: 80px; display: flex; align-items: center; justify-content: center; }
.rtl .search-bar { flex-direction: row-reverse; }
.rtl .view-header, .rtl .modal-header, .rtl .note-row, .rtl .reminder-row, .rtl .setting-row { direction: ltr; }
.rtl .note-meta, .rtl .reminder-meta, .rtl .audio-player, .rtl .timer { direction: ltr; display: inline-flex; unicode-bidi: plaintext; margin-bottom: 4px; }
.rtl .audio-time { direction: ltr; unicode-bidi: plaintext; }
.rtl .chat-message.user { flex-direction: row; }
.rtl .chat-message.assistant { flex-direction: row-reverse; }
.rtl .chat-bubble { unicode-bidi: plaintext; }
.rtl .modal-close { margin-right: auto; margin-left: 0; }
.rtl .note-title, .rtl .reminder-title, .rtl .bubble-content, .rtl input, .rtl textarea, .rtl select { unicode-bidi: plaintext; }
@media (max-width: 768px) { .note-row:hover, .reminder-row:hover, .plan-card:hover { transform: none; } }

/* ===== Follow-up fixes: folders, audio, plans ===== */
.folder-rail { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.folder-rail::-webkit-scrollbar { display: none; }
.folder-sep { color: var(--fg-muted); flex-shrink: 0; font-size: 12px; display: flex; align-items: center; }
.folder-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--fg-secondary); padding: 8px 10px; cursor: pointer; border-radius: var(--radius-full); font-size: 12px; flex-shrink: 0; white-space: nowrap; }
.folder-chip em { font-style: normal; color: var(--fg-muted); font-family: 'Ndot57','DM Mono',monospace; }
.folder-chip.active, .folder-chip:hover { color: var(--accent); border-color: var(--accent); background: var(--hover-cyan); }
.folder-move-btn { width: 100%; text-align: start; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); cursor: pointer; border-radius: var(--radius-md); }
.folder-move-btn:hover { border-color: var(--accent); color: var(--accent); }
.audio-player { justify-content: space-between; direction: ltr !important; }
.audio-left, .audio-right { display: flex; align-items: center; gap: 10px; }
.audio-left { flex: none; }
.audio-right { flex: 1; justify-content: flex-end; min-width: 0; }
.audio-right .audio-progress { max-width: 360px; min-width: 120px; }
.audio-download:hover { color: var(--accent); border-color: var(--accent); }
.plan-progress { width: 100%; height: 5px; background: var(--border); border-radius: var(--radius-full); overflow: hidden; margin-top: 8px; }
.plan-progress span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.plan-progress-toast { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.4); animation: fadeIn 0.25s ease-out; }
.plan-progress-toast.fade-out { animation: fadeOut 0.4s ease-in forwards; }
.plan-progress-card { background: var(--surface); border: 1px solid var(--border); padding: 24px 32px; min-width: 220px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.18); }
.plan-progress-title { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.plan-progress-bar { width: 100%; height: 6px; background: var(--border); overflow: hidden; margin-bottom: 12px; }
.plan-progress-fill { display: block; height: 100%; background: var(--accent); transition: width 0.6s ease; }
.plan-progress-text { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--fg-secondary); letter-spacing: 0.5px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
/* ===== View entrance animation (staggered section reveal on tab switch) ===== */
@keyframes viewSectionIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.view-section-in { animation: viewSectionIn 0.45s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
  .view-section-in { animation: none; }
}
.plan-step-text.done { text-decoration: line-through; color: var(--fg-muted); }

/* ===== Completion celebration =====
 * Default theme: monochrome ring pulse + checkmark pop. No color, no confetti.
 * Pro theme: same pulse plus a small confetti burst in the accent palette.
 */
@keyframes celebrate-pop { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes celebrate-ring { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes confetti-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}
.celebrate-pop { animation: celebrate-pop 0.4s cubic-bezier(.34,1.56,.64,1); }
.celebrate-ring {
  position: fixed; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; border: 2px solid currentColor; pointer-events: none; z-index: 9998;
  animation: celebrate-ring 0.5s ease-out forwards;
}
.confetti-piece { position: fixed; pointer-events: none; z-index: 9998; animation: confetti-fall 0.9s cubic-bezier(.15,.6,.4,1) forwards; }
.plan-complete-toast { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); animation: fadeIn 0.25s ease-out; }
.plan-complete-toast.fade-out { animation: fadeOut 0.4s ease-in forwards; }
.plan-complete-card {
  background: var(--surface); border: 1px solid var(--border); padding: 32px 40px;
  text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 320px;
}
.plan-complete-icon {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--fg);
  display: flex; align-items: center; justify-content: center; color: var(--fg);
  animation: celebrate-pop 0.5s cubic-bezier(.34,1.56,.64,1) 0.1s both;
}
html[data-theme="pro"] .plan-complete-icon { border-color: var(--accent); color: var(--accent); background: var(--hover-cyan); }
.plan-complete-title { font-weight: 700; font-size: 15px; color: var(--fg); }
.plan-complete-sub { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--fg-secondary); }
#reminderDueTime { max-width: 120px; }
.rtl .folder-rail { direction: rtl; }
.rtl .folder-move-btn { text-align: right; }
.rtl .audio-player { flex-direction: row !important; }
@media (max-width: 560px) {
  .audio-player { flex-direction: row !important; align-items: center; gap: 6px; padding: 8px 10px; }
  .rtl .audio-player { flex-direction: row !important; }
  .audio-left { flex: none; gap: 6px; }
  .audio-left span { font-size: 11px; }
  .audio-right { flex: 1; justify-content: flex-end; min-width: 0; gap: 6px; }
  .audio-right .audio-progress { max-width: none; min-width: 0; flex: 1; }
  .audio-speed { flex: none; width: 32px; height: 32px; padding: 0; font-size: 9px; }
  .audio-download { flex: none; }
  .note-audio-section { padding: 10px 16px; }
  .reminder-add-row { flex-wrap: wrap; }
  .reminder-date-input { min-width: 0; flex: 1 1 auto; }
}
.rtl .note-badge { font-family: 'Peyda','Vazirmatn','Tahoma',sans-serif !important; }
.rtl .note-badge.pending, .rtl .note-badge.processing, .rtl .note-badge.transcribed, .rtl .note-badge.completed, .rtl .note-badge.failed { letter-spacing: 0; }

/* ===== Jalali overlay ===== */
.jalali-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 199;
}

/* ===== Jalali date picker + clear new chat button ===== */
#reminderJalaliDateBtn { text-align: center; cursor: pointer; color: var(--fg); background: var(--surface); border: 1px solid var(--border-light); }
.jalali-picker { position: fixed; z-index: 200; width: min(320px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.28); direction: rtl; }
.jalali-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.jalali-head button, .jalali-grid button { border: 1px solid var(--border); background: var(--surface-raised); color: var(--fg); cursor: pointer; border-radius: var(--radius-md); }
.jalali-head button { width: 34px; height: 30px; }
.jalali-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.jalali-grid button { height: 34px; font-family: 'Ndot57','Peyda',sans-serif; }
.jalali-grid button:hover { border-color: var(--accent); color: var(--accent); }
.new-chat-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-light); background: var(--surface); color: var(--fg-secondary); height: 34px; padding: 0 10px; cursor: pointer; border-radius: var(--radius-md); font: inherit; font-size: 12px; }
.new-chat-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--hover-cyan); }
.rtl .new-chat-btn { flex-direction: row-reverse; }
@media (max-width: 520px) { .new-chat-btn span { display: none; } }

/* ===== Planner book + plan-reminder grouping ===== */
.planner-book { background: linear-gradient(135deg, var(--hover), transparent); border: 1px solid var(--border); border-radius: 0; padding: 20px; }
.planner-hero { padding: 20px; border: 1px solid var(--border); border-radius: 0; background: var(--surface-raised); margin-bottom: 16px; }
.planner-kicker { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1px; color: var(--accent); margin-bottom: 6px; text-transform: uppercase; }
.planner-hero h2 { font-size: 22px; color: var(--fg); margin-bottom: 12px; }
.planner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.planner-grid section, .planner-section { border: 1px solid var(--border); border-radius: 0; padding: 14px; background: var(--surface); }
.planner-grid h3, .planner-section h3 { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
.planner-grid p { color: var(--fg-secondary); line-height: 1.8; font-size: 14px; }
.planner-section { margin-top: 12px; }
.reminder-plan-group { border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 10px; margin: 12px 0; background: var(--surface); }
.reminder-plan-title { color: var(--accent); font-size: 12px; font-weight: 700; margin: 0 0 8px; }
.rtl .planner-book, .rtl .reminder-plan-group { direction: rtl; }
.rtl .planner-hero h2 { text-align: right; }
.rtl .planner-hero { text-align: right; }
.rtl .planner-section-head h3 { text-align: right; }
@media (max-width: 700px) { .planner-grid { grid-template-columns: 1fr; } .planner-book { padding: 12px; } }
.jalali-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; color: var(--fg-muted); font-size: 11px; text-align: center; }
.jalali-weekdays span:last-child { color: var(--danger); }
.jalali-grid button.weekend { background: var(--fg); color: var(--bg); border-color: var(--border-light); }
.jalali-grid button.weekend:hover { background: var(--fg-secondary); color: var(--bg); border-color: var(--danger); }
.jalali-grid button.muted { opacity: .38; }
.jalali-grid button.weekend.muted { opacity: .58; }
.jalali-grid button.past,
.jalali-grid button.past.weekend {
  background: var(--hover);
  color: var(--fg-muted);
  border-color: var(--border);
  opacity: .32;
  cursor: not-allowed;
  text-decoration: line-through;
}
.jalali-grid button.past:hover,
.jalali-grid button.past.weekend:hover {
  background: var(--hover);
  color: var(--fg-muted);
  border-color: var(--border);
  transform: none;
}
.jalali-grid button.today {
  position: relative;
  color: var(--accent);
  border-color: var(--accent);
  background: var(--hover-cyan);
  box-shadow: 0 0 0 2px var(--hover), inset 0 0 0 1px var(--border-light);
  font-weight: 800;
}
.jalali-grid button.today::after {
  content: '';
  position: absolute;
  inset-inline: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--accent);
}

/* ===== Custom time picker ===== */
.time-picker {
  position: fixed; z-index: 200;
  width: min(320px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  direction: ltr;
}
.time-picker-head {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  font-family: 'Ndot57','Peyda',sans-serif;
  font-size: 22px;
  color: var(--fg);
  gap: 4px;
}
.time-picker-cols {
  display: flex; gap: 10px; justify-content: center; align-items: stretch;
}
.time-picker-col {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.time-picker-col-label {
  font-size: 11px; color: var(--fg-muted); margin-bottom: 4px;
  font-family: 'Peyda',sans-serif;
}
.time-picker-scroll {
  width: 68px; height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  scrollbar-width: none;
}
.time-picker-scroll::-webkit-scrollbar { display: none; }
.time-picker-item {
  width: 100%; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Ndot57','Peyda',sans-serif;
  font-size: 16px; color: var(--fg);
  border: none; background: none; cursor: pointer;
  transition: background .12s, color .12s;
}
.time-picker-item:hover { background: var(--hover); color: var(--accent); }
.time-picker-item.selected {
  background: var(--hover-cyan);
  color: var(--accent);
  font-weight: 700;
}
.time-picker-sep {
  font-size: 22px; font-weight: 700; color: var(--fg-muted);
  display: flex; align-items: center; padding-bottom: 24px;
}
.time-picker-actions {
  display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end;
}
.time-picker-ok, .time-picker-cancel {
  padding: 8px 20px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-raised);
  color: var(--fg); border-radius: var(--radius-md);
  font-family: 'Peyda',sans-serif;
}
.time-picker-ok:hover { border-color: var(--accent); color: var(--accent); background: var(--hover-cyan); }
.time-picker-cancel:hover { border-color: var(--danger); color: var(--danger); }
.time-picker .time-picker-ok,
.time-picker .time-picker-cancel,
.time-picker .time-picker-item {
  border-radius: var(--radius-md) !important;
}

/* ===== Planner book refinement ===== */
.planner-book { background: linear-gradient(90deg, var(--hover), transparent 48%, var(--hover) 52%, transparent), var(--surface); box-shadow: none; }
/* removed decorative line */
.planner-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.planner-overview div { border: 1px solid var(--border); background: var(--surface-raised); border-radius: 0; padding: 12px; }
.planner-overview span { display: block; color: var(--fg-muted); font-size: 11px; margin-bottom: 4px; }
.planner-overview strong { color: var(--fg); font-size: 15px; }
.planner-note p { color: var(--fg-secondary); line-height: 1.8; }
/* removed decorative line */
.planner-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-bottom: 14px; }
.planner-action-btn, .mini-action-btn, .plan-step-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--border-light); background: var(--surface-raised); color: var(--fg-secondary); cursor: pointer; border-radius: 0; transition: all .16s ease; }
.planner-action-btn { min-height: 34px; padding: 0 12px; font: inherit; font-size: 12px; }
.planner-action-btn svg, .plan-step-actions svg { width: 15px; height: 15px; }
.planner-action-btn:hover, .mini-action-btn:hover, .plan-step-actions button:hover { color: var(--accent); border-color: var(--accent); background: var(--hover-cyan); transform: translateY(-1px); }
.planner-action-btn.danger:hover, .plan-step-actions button.danger:hover { color: var(--danger); border-color: var(--danger); background: rgba(239,68,68,.08); }
.planner-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.planner-section-head h3 { margin-bottom: 0; }
.mini-action-btn { padding: 6px 10px; font: inherit; font-size: 11px; }
.plan-step { align-items: center; border-bottom: 1px dashed var(--border); padding: 9px 0; }
.plan-step:last-child { border-bottom: 0; }
.plan-step-text { flex: 1; line-height: 1.7; }
.plan-step-actions { display: flex; gap: 6px; opacity: .72; transition: opacity .16s ease; }
.plan-step:hover .plan-step-actions { opacity: 1; }
.plan-step-actions button { width: 30px; height: 30px; padding: 0; border-radius: 0; }
.rtl .planner-actions { justify-content: flex-start; direction: ltr; }
@media (max-width: 640px) { .today-overview { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .planner-actions, .planner-section-head { align-items: stretch; flex-direction: column; } .planner-action-btn, .mini-action-btn { width: 100%; } }

/* ===== Retro sharp-corner pass ===== */
html:not([data-theme="pro"]) button,
html:not([data-theme="pro"]) input,
html:not([data-theme="pro"]) textarea,
html:not([data-theme="pro"]) select,
html:not([data-theme="pro"]) .modal,
html:not([data-theme="pro"]) .menu-btn,
html:not([data-theme="pro"]) .nav-btn,
html:not([data-theme="pro"]) .theme-btn,
html:not([data-theme="pro"]) .header-icon-btn,
html:not([data-theme="pro"]) .filter-btn,
html:not([data-theme="pro"]) .primary-btn,
html:not([data-theme="pro"]) .secondary-btn,
html:not([data-theme="pro"]) .context-btn,
html:not([data-theme="pro"]) .note-row,
html:not([data-theme="pro"]) .reminder-row,
html:not([data-theme="pro"]) .plan-card,
html:not([data-theme="pro"]) .audio-player,
html:not([data-theme="pro"]) .audio-download,
html:not([data-theme="pro"]) .settings-section,
html:not([data-theme="pro"]) .search-bar,
html:not([data-theme="pro"]) .setting-input,
html:not([data-theme="pro"]) .setting-select,
html:not([data-theme="pro"]) .chat-input-wrap,
html:not([data-theme="pro"]) .inline-add input,
html:not([data-theme="pro"]) .reminder-priority,
html:not([data-theme="pro"]) .status-dot,
html:not([data-theme="pro"]) .chat-dot,
html:not([data-theme="pro"]) .typing-squares span,
html:not([data-theme="pro"]) .record-btn,
html:not([data-theme="pro"]) .record-visual,
html:not([data-theme="pro"]) .action-check,
html:not([data-theme="pro"]) .reminder-check,
html:not([data-theme="pro"]) .slider,
html:not([data-theme="pro"]) .folder-chip,
html:not([data-theme="pro"]) .folder-move-btn,
html:not([data-theme="pro"]) .plan-progress,
html:not([data-theme="pro"]) .plan-progress span,
html:not([data-theme="pro"]) .jalali-picker,
html:not([data-theme="pro"]) .jalali-head button,
html:not([data-theme="pro"]) .jalali-grid button,
html:not([data-theme="pro"]) .new-chat-btn,
html:not([data-theme="pro"]) .reminder-plan-group,
html:not([data-theme="pro"]) .planner-book,
html:not([data-theme="pro"]) .planner-hero,
html:not([data-theme="pro"]) .planner-section,
html:not([data-theme="pro"]) .planner-overview div,
html:not([data-theme="pro"]) .planner-action-btn,
html:not([data-theme="pro"]) .mini-action-btn,
html:not([data-theme="pro"]) .plan-step-actions button,
html:not([data-theme="pro"]) .spinner,
html:not([data-theme="pro"]) .drag-handle,
html:not([data-theme="pro"]) .plan-choice-btn,
html:not([data-theme="pro"]) .suggest-btn,
html:not([data-theme="pro"]) .field-edit-btn,
html:not([data-theme="pro"]) .field-edit-actions button,
html:not([data-theme="pro"]) .plan-edit-input,
html:not([data-theme="pro"]) .plan-edit-date,
html:not([data-theme="pro"]) .form-input,
html:not([data-theme="pro"]) .form-textarea,
html:not([data-theme="pro"]) .form-group select,
html:not([data-theme="pro"]) #planModal .planner-action-btn,
html:not([data-theme="pro"]) #reminderEditModal .planner-action-btn,
html:not([data-theme="pro"]) .plan-step-reminder-row input[type="text"],
html:not([data-theme="pro"]) .plan-step-reminder-row input[type="time"],
html:not([data-theme="pro"]) .reminder-plan-badge,
html:not([data-theme="pro"]) .chat-bubble.user .bubble-content,
html:not([data-theme="pro"]) .chat-bubble.assistant .bubble-content {
  border-radius: 0 !important;
}

/* Pro theme rounded-corner counterpart */
html[data-theme="pro"] button,
html[data-theme="pro"] input,
html[data-theme="pro"] textarea,
html[data-theme="pro"] select,
html[data-theme="pro"] .menu-btn,
html[data-theme="pro"] .nav-btn,
html[data-theme="pro"] .theme-btn,
html[data-theme="pro"] .header-icon-btn,
html[data-theme="pro"] .primary-btn,
html[data-theme="pro"] .secondary-btn,
html[data-theme="pro"] .context-btn,
html[data-theme="pro"] .audio-player,
html[data-theme="pro"] .audio-download,
html[data-theme="pro"] .setting-input,
html[data-theme="pro"] .setting-select,
html[data-theme="pro"] .inline-add input,
html[data-theme="pro"] .folder-move-btn,
html[data-theme="pro"] .jalali-head button,
html[data-theme="pro"] .jalali-grid button,
html[data-theme="pro"] .new-chat-btn,
html[data-theme="pro"] .planner-section,
html[data-theme="pro"] .planner-overview div,
html[data-theme="pro"] .planner-action-btn,
html[data-theme="pro"] .mini-action-btn,
html[data-theme="pro"] .plan-choice-btn,
html[data-theme="pro"] .suggest-btn,
html[data-theme="pro"] .field-edit-btn,
html[data-theme="pro"] .field-edit-actions button,
html[data-theme="pro"] .plan-edit-input,
html[data-theme="pro"] .plan-edit-date,
html[data-theme="pro"] .form-input,
html[data-theme="pro"] .form-textarea,
html[data-theme="pro"] .form-group select,
html[data-theme="pro"] #planModal .planner-action-btn,
html[data-theme="pro"] #reminderEditModal .planner-action-btn,
html[data-theme="pro"] .plan-step-reminder-row input[type="text"],
html[data-theme="pro"] .plan-step-reminder-row input[type="time"] {
  border-radius: var(--radius-md) !important;
}

html[data-theme="pro"] .modal {
  border-radius: var(--radius-xl) !important;
}

html[data-theme="pro"] .filter-btn,
html[data-theme="pro"] .search-bar,
html[data-theme="pro"] .reminder-priority,
html[data-theme="pro"] .status-dot,
html[data-theme="pro"] .chat-dot,
html[data-theme="pro"] .typing-squares span,
html[data-theme="pro"] .record-btn,
html[data-theme="pro"] .record-visual,
html[data-theme="pro"] .slider,
html[data-theme="pro"] .folder-chip,
html[data-theme="pro"] .plan-progress,
html[data-theme="pro"] .plan-progress span,
html[data-theme="pro"] .spinner,
html[data-theme="pro"] .reminder-plan-badge {
  border-radius: var(--radius-full) !important;
}

html[data-theme="pro"] .note-row,
html[data-theme="pro"] .reminder-row,
html[data-theme="pro"] .plan-card,
html[data-theme="pro"] .settings-section,
html[data-theme="pro"] .chat-input-wrap,
html[data-theme="pro"] .jalali-picker,
html[data-theme="pro"] .reminder-plan-group,
html[data-theme="pro"] .planner-book,
html[data-theme="pro"] .planner-hero {
  border-radius: var(--radius-lg) !important;
}

html[data-theme="pro"] .reminder-fab {
  border-radius: var(--radius-lg) !important;
}
html[data-theme="pro"] .today-card,
html[data-theme="pro"] .inbox-card,
html[data-theme="pro"] .ai-action-card,
html[data-theme="pro"] .mic-code,
html[data-theme="pro"] .mic-refresh-code,
html[data-theme="pro"] .mic-participant-card,
html[data-theme="pro"] .lightbox-btn,
html[data-theme="pro"] .timeline-icon-btn,
html[data-theme="pro"] .tl-zoom-btn,
html[data-theme="pro"] .week-day-btn,
html[data-theme="pro"] .week-day-num,
html[data-theme="pro"] .timeline-unscheduled-item,
html[data-theme="pro"] .field-edit-actions button,
html[data-theme="pro"] .month-day-cell.today .month-day-num,
html[data-theme="pro"] .chat-action-list .ai-action-card,
html[data-theme="pro"] .chat-bubble.user .bubble-content,
html[data-theme="pro"] .chat-bubble.assistant .bubble-content {
  border-radius: var(--radius-md) !important;
}
html[data-theme="pro"] .mic-code-progress,
html[data-theme="pro"] .mic-code-progress-fill,
html[data-theme="pro"] .typing-squares span,
html[data-theme="pro"] .audio-progress-thumb,
html[data-theme="pro"] .week-day-badge,
html[data-theme="pro"] .timeline-now-indicator .timeline-now-dot {
  border-radius: var(--radius-full) !important;
}
@media (max-width: 768px) {
  html[data-theme="pro"] .modal {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
  }
  html[data-theme="pro"] .reminder-fab {
    border-radius: var(--radius-md) !important;
  }
}

html[data-theme="pro"] .action-check,
html[data-theme="pro"] .reminder-check,
html[data-theme="pro"] .plan-step-actions button,
html[data-theme="pro"] .drag-handle {
  border-radius: var(--radius-sm) !important;
}

/* =====================================================================
 * Pro theme — "go wild" visual upgrade: gradients, glow, glass, motion.
 * Everything below is scoped to html[data-theme="pro"] only; the sacred
 * minimal theme is untouched. All colors derive from var(--accent) so
 * the user's accent-swatch choice drives every effect below.
 * ===================================================================== */

/* --- Primary CTAs: gradient fill + elevation + glow-on-hover --- */
html[data-theme="pro"] .primary-btn {
  background: var(--gradient-accent); border: none; box-shadow: var(--shadow-md);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
html[data-theme="pro"] .primary-btn:hover {
  background: var(--gradient-accent); box-shadow: var(--shadow-glow); transform: translateY(-2px);
}
html[data-theme="pro"] .primary-btn:active { transform: scale(0.97); }

html[data-theme="pro"] .record-btn {
  background: var(--gradient-accent); box-shadow: var(--shadow-md);
  transition: box-shadow 0.25s ease, transform 0.15s ease;
}
html[data-theme="pro"] .record-btn:hover { opacity: 1; box-shadow: var(--shadow-glow); transform: scale(1.02); }
html[data-theme="pro"] .record-btn:active { transform: scale(0.96); }

html[data-theme="pro"] .send-btn { background: var(--gradient-accent); box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease; }
html[data-theme="pro"] .send-btn:hover:not(:disabled) { box-shadow: var(--shadow-glow); }

html[data-theme="pro"] .reminder-fab {
  background: var(--gradient-accent); box-shadow: var(--shadow-md);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
html[data-theme="pro"] .reminder-fab:hover { box-shadow: var(--shadow-glow); transform: translateY(-2px); }
html[data-theme="pro"] .reminder-fab:active { transform: scale(0.95); }

html[data-theme="pro"] .today-capture { background: var(--gradient-accent); color: #fff; box-shadow: var(--shadow-md); }
html[data-theme="pro"] .today-capture:hover { opacity: 1; box-shadow: var(--shadow-glow); }

/* Secondary buttons stay subordinate: subtle glow on hover, no gradient fill */
html[data-theme="pro"] .settings-btn { transition: border-color 0.15s, color 0.15s, box-shadow 0.15s; }
html[data-theme="pro"] .settings-btn:hover { box-shadow: var(--shadow-sm); }

/* --- Active nav pill: tinted gradient instead of flat fill --- */
html[data-theme="pro"] .nav-btn.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* --- Card family: soft elevation at rest, deeper lift + glow on hover --- */
html[data-theme="pro"] .note-row,
html[data-theme="pro"] .reminder-row,
html[data-theme="pro"] .plan-card,
html[data-theme="pro"] .today-card,
html[data-theme="pro"] .inbox-card,
html[data-theme="pro"] .ai-action-card {
  background: var(--surface-raised); box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.15s ease;
}
html[data-theme="pro"] .note-row:hover,
html[data-theme="pro"] .reminder-row:hover,
html[data-theme="pro"] .plan-card:hover,
html[data-theme="pro"] .today-card:hover,
html[data-theme="pro"] .inbox-card:hover,
html[data-theme="pro"] .ai-action-card:hover {
  box-shadow: var(--shadow-md); transform: translateY(-2px);
}

/* --- Glassmorphism on structural chrome --- */
html[data-theme="pro"] #sidebar {
  background: var(--glass-bg); border-right: 1px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
html[data-theme="pro"] .mobile-top-bar {
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
html[data-theme="pro"] .chat-input-area {
  border-top: none;
}
html[data-theme="pro"] .context-btn {
  background: var(--surface-raised); box-shadow: var(--shadow-sm);
}
html[data-theme="pro"] .modal-overlay { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
html[data-theme="pro"] .modal { box-shadow: var(--shadow-lg); }

/* --- Chat bubbles: gradient user pill vs. elevated assistant card --- */
html[data-theme="pro"] .chat-bubble.user .bubble-content {
  background: var(--gradient-accent); color: #fff; border: none; box-shadow: var(--shadow-sm);
}
html[data-theme="pro"] .chat-bubble.assistant .bubble-content {
  background: var(--surface-raised); box-shadow: var(--shadow-sm);
}

/* --- Record button idle glow ring (breathing invitation to record) --- */
@keyframes pulse-glow-accent {
  0%, 100% { box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 30%, transparent); }
  50% { box-shadow: 0 0 44px color-mix(in srgb, var(--accent) 55%, transparent); }
}
html[data-theme="pro"] .record-ring:has(.record-btn:not(.recording):not(.paused)) {
  border-radius: var(--radius-full);
  animation: pulse-glow-accent 2.4s ease-in-out infinite;
}
/* The waveform is the only recording animation; it should not sit on a second glow circle. */
html[data-theme="pro"] .record-ring:has(.record-btn.recording) { animation: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="pro"] .record-ring:has(.record-btn:not(.recording):not(.paused)),
  html[data-theme="pro"] .record-ring:has(.record-btn.recording) { animation: none; }
}

/* --- Celebration: radial glow burst behind the plan-complete icon --- */
@keyframes celebrate-glow-burst {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  60% { box-shadow: 0 0 32px 14px color-mix(in srgb, var(--accent) 25%, transparent); }
  100% { box-shadow: 0 0 40px 20px transparent; }
}
html[data-theme="pro"] .plan-complete-icon {
  animation: celebrate-pop 0.5s cubic-bezier(.34,1.56,.64,1) 0.1s both,
             celebrate-glow-burst 0.9s ease-out 0.1s both;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="pro"] .plan-complete-icon { animation: none; }
}

/* --- Richer entrance motion for view sections --- */
@keyframes viewSectionInPro {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
html[data-theme="pro"] .view-section-in {
  animation-name: viewSectionInPro;
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="pro"] .view-section-in { animation: none; }
}

/* ===== Inbox / Today / AI action cards ===== */
.today-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.today-card, .inbox-card, .ai-action-card {
  border: 1px solid var(--border-light);
  background: var(--surface);
  color: var(--fg);
  padding: 12px;
  margin-bottom: 8px;
}
.today-card strong { display: block; font-family: 'Ndot57','DM Mono',monospace; font-size: 24px; color: var(--fg); }
.today-card span, .inbox-card-meta, .ai-action-meta, .ai-action-kicker { color: var(--fg-secondary); font-size: 11px; }
.inbox-card-title, .ai-action-title { font-size: 14px; font-weight: 700; color: var(--fg); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-card-text, .ai-action-quote, .ai-action-reason, .ai-action-next { font-size: 12px; line-height: 1.7; color: var(--fg-secondary); margin-top: 8px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-card-text, .ai-action-quote { -webkit-line-clamp: 2; }
.ai-action-reason, .ai-action-next { -webkit-line-clamp: 1; }
.ai-action-next { color: var(--fg); }
.inbox-panel-hint { font-size: 12px; color: var(--fg-secondary); margin-bottom: 16px; }
/* ===== Today page (bold editorial dashboard direction) ===== */
.today-view-header { display: none; }
.today-body { padding-top: 26px; }
.today-hero-overview {
  padding-bottom:22px;
}
.today-overview-date {
  min-width:0; display:flex; flex-direction:column; justify-content:space-between;
  padding:4px 0 0;
}
.today-date-hero { display: flex; align-items: flex-end; gap: 18px; }
.today-date-num {
  font-size: clamp(56px, 8vw, 88px); font-weight: 800; line-height: 0.82; letter-spacing: -2px;
  color: var(--fg); font-family: 'DM Mono', monospace; direction: ltr;
}
.today-date-meta { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
.today-date-weekday { font-size: 17px; font-weight: 700; color: var(--fg); }
.today-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11.5px; color: var(--fg-secondary); }
.today-meta-sep { color: var(--fg-muted); }
.today-mem-link {
  background: none; border: none; padding: 0; font: inherit; color: var(--fg-secondary); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: 0.4px; font-size: 10px;
}
.today-mem-link i { width: 6px; height: 6px; background: var(--cyan); display: inline-block; flex-shrink: 0; }
.today-mem-link:hover { color: var(--fg); }

.today-progress { margin-top: 24px; }
.today-progress-bar { height: 2px; background: var(--border); position: relative; }
.today-progress-fill { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; background: var(--cyan); width: 0%; transition: width 0.4s ease; }
.today-progress-label { margin-top: 5px; font-size: 9.5px; color: var(--fg-muted); font-family: 'DM Mono', monospace; letter-spacing: 0.3px; }

.today-cap-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--fg-muted); font-weight: 700; margin: 0 0 8px; }
.today-capture {
  width: 100%; display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  background: var(--cyan); color: var(--bg); border: none; cursor: pointer; text-align: start;
  font-family: inherit; transition: opacity 0.15s ease;
}
.today-capture:hover { opacity: 0.92; }
.today-capture-icon { flex-shrink: 0; width: 26px; height: 32px; }
.today-capture-divider { width: 1px; align-self: stretch; background: color-mix(in srgb, var(--bg) 25%, transparent); flex-shrink: 0; }
.today-capture-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.today-capture-title { font-size: 16px; font-weight: 700; }
.today-capture-sub { font-size: 11.5px; opacity: 0.72; }
.today-capture-wave { display: flex; align-items: center; gap: 2.5px; flex-shrink: 0; height: 26px; }
.today-capture-wave i { width: 2px; background: currentColor; opacity: 0.85; display: block; }

.today-briefing {
  position: relative; margin-top: 20px; border: 1px solid var(--border); background: var(--surface);
  overflow: hidden; isolation: isolate;
}
.today-briefing-head {
  min-height: 64px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.today-briefing-heading { display: flex; align-items: center; gap: 11px; min-width: 0; }
.today-briefing-mark { width: 23px; height: 23px; color: var(--cyan); flex-shrink: 0; }
.today-briefing-heading h2 { margin: 0; color: var(--fg); font-size: 14px; font-weight: 750; line-height: 1.3; }
.today-briefing-heading p { margin: 3px 0 0; color: var(--fg-muted); font-size: 10.5px; line-height: 1.35; }
.today-briefing-refresh {
  width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; appearance: none;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg-secondary); cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.today-briefing-refresh:hover { color: var(--cyan); border-color: var(--cyan); }
.today-briefing-refresh:disabled { cursor: wait; opacity: .65; }
.today-briefing-refresh.is-loading svg,
.today-briefing-refresh.is-loading .theme-icon { animation: today-briefing-spin .9s linear infinite; }
.today-briefing-body { min-height: 142px; padding: 14px; }
.today-briefing-focus {
  display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--cyan); color: var(--bg);
}
.today-briefing-focus span {
  padding-inline-end: 14px; border-inline-end: 1px solid color-mix(in srgb, var(--bg) 32%, transparent);
  font-size: 9.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .6px; white-space: nowrap;
}
.today-briefing-focus strong { font-size: 15px; line-height: 1.65; font-weight: 700; }
.today-briefing-cards {
  display: flex; flex-direction: column; gap: 8px;
}
.today-briefing-card {
  min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-inline-start: 3px solid var(--cyan);
  background: var(--bg); display: flex; align-items: center; gap: 10px; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.today-briefing-card:hover { border-color: var(--cyan); background: color-mix(in srgb,var(--bg) 94%,var(--cyan) 6%); }
.today-briefing-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.today-briefing-card[data-priority="high"] { border-inline-start-color: var(--danger); }
.today-briefing-card-main { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(125px,auto) minmax(0,1fr); align-items: center; gap: 8px 12px; }
.today-briefing-card-top { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 3px 6px; }
.today-briefing-kind { color: var(--cyan); font-size: 11px; line-height: 1.6; font-weight: 750; }
.today-briefing-horizon { color: var(--fg-secondary); font-size: 11px; line-height: 1.6; }
.today-briefing-copy { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.today-briefing-card h3 { flex: 0 0 auto; margin: 0; color: var(--fg); font-size: 13px; line-height: 1.65; }
.today-briefing-copy > p { min-width: 0; margin: 0; color: var(--fg-secondary); font-size: 11.5px; line-height: 1.65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-briefing-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.today-briefing-actions button,
.today-briefing-empty button {
  min-height: 36px; padding: 5px 9px; border: 1px solid var(--border); background: var(--surface);
  color: var(--fg); font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.today-briefing-actions .today-briefing-discuss { background: var(--cyan); border-color: var(--cyan); color: var(--bg); }
.today-briefing-actions button:hover,
.today-briefing-empty button:hover { border-color: var(--cyan); }
.today-briefing-actions .today-briefing-discuss:hover { background: color-mix(in srgb,var(--cyan) 84%,var(--fg) 16%); }
.today-briefing-empty { min-height: 114px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; text-align: center; }
.today-briefing-empty .theme-icon { width: 25px; height: 25px; color: var(--fg-muted); }
.today-briefing-empty p { max-width: 440px; margin: 0; color: var(--fg-muted); font-size: 12px; line-height: 1.65; }
.today-briefing-skeleton { min-height: 114px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.today-briefing-skeleton span {
  display: block; min-height: 112px; border: 1px solid var(--border);
  background: linear-gradient(100deg,var(--bg) 20%,color-mix(in srgb,var(--cyan) 9%,var(--surface)) 45%,var(--bg) 70%);
  background-size: 240% 100%; animation: today-briefing-shimmer 1.35s ease-in-out infinite;
}
@keyframes today-briefing-spin { to { transform: rotate(360deg); } }
@keyframes today-briefing-shimmer { to { background-position: -180% 0; } }

html[data-theme="pro"] .today-briefing {
  border-color: color-mix(in srgb,var(--cyan) 25%,var(--border)); border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 8% 0%,color-mix(in srgb,var(--cyan) 18%,transparent),transparent 38%),
    linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,var(--cyan) 6%),var(--surface));
  box-shadow: 0 18px 46px color-mix(in srgb,var(--cyan) 10%,transparent);
}
html[data-theme="pro"] .today-briefing-head { background: color-mix(in srgb,var(--surface) 76%,transparent); backdrop-filter: blur(14px); }
html[data-theme="pro"] .today-briefing-refresh,
html[data-theme="pro"] .today-briefing-card,
html[data-theme="pro"] .today-briefing-actions button,
html[data-theme="pro"] .today-briefing-empty button { border-radius: var(--radius-md); }
html[data-theme="pro"] .today-briefing-focus { border-radius: var(--radius-md); box-shadow: 0 10px 24px color-mix(in srgb,var(--cyan) 20%,transparent); }
html[data-theme="pro"] .today-briefing-card {
  border-radius: var(--radius-md);
  background: color-mix(in srgb,var(--bg) 90%,var(--surface) 10%);
  box-shadow: 0 4px 14px color-mix(in srgb,var(--fg) 6%,transparent);
}

@media (max-width: 640px) {
  .today-briefing-head { padding-inline: 12px 8px; }
  .today-briefing-body { padding: 10px; }
  .today-briefing-focus { grid-template-columns: 1fr; gap: 7px; }
  .today-briefing-focus span { padding-inline-end: 0; border-inline-end: none; }
  .today-briefing-skeleton { grid-template-columns: 1fr; }
  .today-briefing-card { align-items: stretch; flex-direction: column; gap: 9px; }
  .today-briefing-card-main { grid-template-columns: 1fr; gap: 2px; }
  .today-briefing-copy { display: block; }
  .today-briefing-copy > p { margin-top: 2px; white-space: normal; }
  .today-briefing-actions { justify-content: stretch; }
  .today-briefing-skeleton span:not(:first-child) { display: none; }
  .today-briefing-actions button { flex: 1 1 130px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .today-briefing-refresh.is-loading svg,
  .today-briefing-refresh.is-loading .theme-icon,
  .today-briefing-skeleton span { animation: none; }
}
.today-briefing button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.today-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-top: 26px; }
.today-black-label { display: flex; align-items: center; justify-content:space-between; gap: 8px; min-height: 32px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; background: var(--cyan); color: var(--bg); padding: 0 10px; margin: 0; }
.today-section-link { appearance:none; border:0; background:transparent; color:inherit; padding:7px 2px; font:inherit; font-size:9.5px; cursor:pointer; opacity:.74; }
.today-section-link:hover { opacity:1; text-decoration:underline; text-underline-offset:3px; }
.today-section-link:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.today-panel { border: 1px solid var(--border); border-top: none; }
.today-scope-toggle { display: flex; border-inline-start: 1px solid var(--border); }
.today-scope-btn {
  appearance: none; border: none; background: var(--surface); color: var(--fg-secondary); cursor: pointer;
  padding: 4px 12px; font: inherit; font-size: 10.5px; border-inline-start: 1px solid var(--border);
}
.today-scope-btn:first-child { border-inline-start: none; }
.today-scope-btn.active { background: color-mix(in srgb, var(--cyan) 70%, var(--bg) 30%); color: var(--bg); }

.today-row { display: flex; align-items: center; gap: 10px; max-height: 72px; padding: 11px 12px; border-bottom: 1px solid var(--border); cursor: pointer; overflow: hidden; transition: opacity .24s ease, transform .24s ease, max-height .38s ease, padding .38s ease; }
.today-row:last-child { border-bottom: none; }
.today-row .today-chk { width: 16px; height: 16px; border: 1.5px solid var(--fg-muted); flex-shrink: 0; position: relative; }
.today-row .today-chk.checked { background: var(--success); border-color: var(--success); }
.today-row .today-txt { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--fg); }
.today-row .today-txt.overdue { color: var(--danger); }
.today-row .today-time { font-size: 11px; color: var(--fg-secondary); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* compact agenda-style timeline embed */
.today-tl-row { display: flex; align-items: stretch; min-height: 40px; max-height: 72px; border-bottom: 1px solid var(--border); transform-origin: center; transition: opacity .24s ease, transform .24s ease, max-height .38s ease, min-height .38s ease; overflow: hidden; }
.today-tl-row:last-child { border-bottom: none; }
.today-tl-time { width: 46px; flex-shrink: 0; font-size: 10px; color: var(--fg-muted); font-family: 'DM Mono', monospace; padding: 9px 0 0; text-align: center; direction: ltr; }
.today-tl-track { flex: 1; min-width: 0; border-inline-start: 1px solid var(--border); padding: 6px 10px; display: flex; align-items: center; }
.today-tl-card {
  border: 1px solid var(--border-light); padding: 6px 10px; font-size: 12.5px; font-weight: 600; color: var(--fg);
  display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer;
}
.today-tl-card.overdue { border-color: var(--danger); color: var(--danger); }
.today-tl-card .today-chk { width: 16px; height: 16px; border: 1.5px solid var(--fg-muted); flex-shrink: 0; position: relative; transition: background .18s ease, border-color .18s ease, transform .25s cubic-bezier(.34,1.56,.64,1); }
.today-tl-card .today-chk.checked { background: var(--success); border-color: var(--success); transform: scale(1.08); }
.today-chk.checked::after { content: ""; position: absolute; inset-inline-start: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.today-tl-row.is-completing .today-tl-card, .today-row.is-completing { color: var(--fg-secondary); }
.today-tl-row.is-completing .today-tl-card span, .today-row.is-completing .today-txt { text-decoration: line-through; }
.today-tl-row.is-complete, .today-row.is-complete { opacity: 0; transform: translateY(-5px) scale(.985); max-height: 0; min-height: 0; padding-block: 0; border-bottom-width: 0; }
.today-tl-card.overdue .today-chk { border-color: var(--danger); }
.today-up-day-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--fg-muted); font-weight: 700; padding: 10px 12px 6px; }

/* restrained empty state */
.today-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px 16px; text-align: center; }
.today-empty-icon { width: 26px; height: 26px; border: 1.5px solid var(--fg-muted); position: relative; animation: today-breathe 3.2s ease-in-out infinite; }
.today-empty-icon::after {
  content: ""; position: absolute; inset-inline-start: 7px; top: 5px; width: 9px; height: 5px;
  border-inline-start: 1.5px solid var(--fg-muted); border-bottom: 1.5px solid var(--fg-muted); transform: rotate(-45deg);
}
.today-empty-text { font-size: 11.5px; color: var(--fg-muted); }
@keyframes today-breathe { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .today-empty-icon { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  .today-tl-row { transition: none; }
  .today-tl-card .today-chk { transition: none; }
}

.today-plan-pad { padding: 14px 12px; }
.today-plan-item + .today-plan-item { border-top: 1px solid var(--border); }
.today-plan-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; gap: 8px; }
.today-plan-top .today-plan-title { font-size: 14px; font-weight: 700; color: var(--fg); cursor: pointer; }
.today-plan-top .today-plan-pct { font-size: 11px; color: var(--fg-secondary); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.today-segbar { display: flex; gap: 3px; margin-bottom: 12px; }
.today-segbar i { flex: 1; height: 5px; background: var(--border); display: block; }
.today-segbar i.on { background: var(--fg); }
.today-steps { display: flex; flex-direction: column; gap: 7px; }
.today-step { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-secondary); }
.today-step .today-sc { width: 12px; height: 12px; border: 1.3px solid var(--fg-muted); flex-shrink: 0; }
.today-step .today-sc.done { background: var(--fg-secondary); border-color: var(--fg-secondary); }
.today-step.done { text-decoration: line-through; opacity: 0.65; }

.today-triage.inbox-tabs { display: flex; gap: 12px; margin-top: 26px; }
.today-triage .settings-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center; padding: 10px 4px; font-size: 10.5px; border: 1px solid var(--border);
  margin: 0;
}
.today-triage .settings-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.today-triage .tab-count { margin: 0; font-size: 15px; color: var(--fg); font-weight: 700; font-family: 'DM Mono', monospace; }
.today-triage .settings-tab.active .tab-count { color: #fff; }
.rtl .today-triage .tab-count { margin: 0; }

/* Minimal theme uses a light accent in dark mode; white-on-light fails contrast. */
html:not([data-theme="pro"]) .today-triage .settings-tab.active { color: var(--bg); }
html:not([data-theme="pro"]) .today-triage .settings-tab.active .tab-count { color: var(--bg); }

html[data-theme="pro"] .today-capture,
html[data-theme="pro"] .today-black-label { border-radius: var(--radius-md); }
html[data-theme="pro"] .today-panel { border-radius: 0 0 var(--radius-md) var(--radius-md); overflow: hidden; }
html[data-theme="pro"] .today-triage .settings-tab { border-radius: var(--radius-md); }

@media (max-width: 760px) {
  .today-hero-overview { padding-bottom:16px; }
  .today-overview-date { padding:0; }
  .today-date-num { font-size:clamp(52px,18vw,72px); }
  .today-grid { grid-template-columns: 1fr; }
}
.inbox-card { cursor: pointer; transition: border-color 0.15s; }
.inbox-card:hover { border-color: var(--fg-secondary); }
.chip-overdue-card { border-color: var(--danger); }
.chip-overdue-card .inbox-card-title { color: var(--danger); }
.ai-action-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; max-width: 100%; overflow: hidden; box-sizing: border-box; }
.ai-action-main { display: grid; min-width: 0; }
.ai-action-actions { display: flex; gap: 6px; margin-top: 0; max-width: 100%; box-sizing: border-box; }
.ai-action-actions button { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 8px 10px; font-size: 12px; box-sizing: border-box; }
.ai-action-card.low-confidence-action { border-left: 3px solid #f59e0b; }
.ai-action-confidence-badge { color: #b45309; font-weight: 600; font-size: 11px; margin-inline-start: 4px; }
.ai-action-warning { color: #b45309; background: #fef3c7; border-radius: 6px; padding: 6px 8px; font-size: 11px; margin-top: 4px; }
.ai-action-card.compact { margin: 6px 0; padding: 8px; }
.ai-action-card.compact .ai-action-title { font-size: 13px; margin-bottom: 2px; }
.ai-action-card.compact .ai-action-meta { font-size: 10px; }
.ai-action-card.compact, .ai-action-card.chat-card { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.ai-action-card.compact .ai-action-actions, .ai-action-card.chat-card .ai-action-actions {
    margin-top: 0;
    width: 50%;
    height: 40px;
    display: flex;
}
.ai-action-card.applied { border-color: var(--fg); background: var(--hover); }
.ai-action-processing-card {
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; color: var(--fg-secondary);
}
.ai-action-processing-card strong { display: block; color: var(--fg); font-size: 13px; }
.ai-action-processing-card p { margin: 3px 0 0; color: var(--fg-muted); font-size: 11px; line-height: 1.55; }
.ai-action-processing-spinner {
  flex: 0 0 auto; width: 18px; height: 18px;
  border: 2px solid var(--border); border-top-color: var(--cyan); border-radius: 50%;
  animation: skeletonSpin .8s linear infinite;
}
.image-prompt-action-card.processing { display: block; }
.image-prompt-action-card.processing .image-skeleton { margin: 0; max-width: 100%; }
.chat-action-list .ai-action-card {
    margin: 4px 0;
    padding: 6px 8px;
    border-radius: 0px;
}
.chat-action-list .ai-action-card .ai-action-actions { margin-top: 0; }
.chat-action-list .image-prompt-card { padding: 0; width: 100%; display: inline-grid; gap: 10px; }
.chat-action-list .image-prompt-header { margin-top: 8px; margin-bottom: 0px; font-size: 11px; }
.chat-action-list .image-prompt-input { min-height: 90px; padding: 4px 8px; margin-bottom: 4px; font-size: 14px; resize: vertical; }
.chat-action-list .image-prompt-input:focus { border-color: var(--cyan); }
.chat-action-list .image-prompt-actions { gap: 6px; margin-top: 0; padding-bottom: 4px; }
.chat-action-list .image-prompt-actions .btn-primary { padding: 4px 12px; font-size: 11px; min-height: 35px; width: 80%; }
.chat-action-list .image-prompt-actions .btn-secondary { padding: 4px 12px; font-size: 11px; min-height: 35px; width: 20%; }
.chat-action-list .ai-action-kicker { font-size: 10px; margin-bottom: 0; }
.chat-action-list .ai-action-title { font-size: 13px; margin-bottom: 0; }
.chat-action-list .ai-action-meta { font-size: 10px; margin-top: 0; }
.chat-message.assistant:has(.chat-action-list) { margin-bottom: 6px; }
.chat-message.assistant:has(.chat-action-list) .chat-bubble { max-width: 90%; }
.chat-message.assistant:has(.chat-action-list) .bubble-content { padding: 4px 8px; }
.ai-action-success strong { display: block; font-size: 13px; color: var(--fg); }
.ai-action-success span { display: block; font-size: 11px; color: var(--fg-secondary); margin-top: 2px; }
.bubble-content p { margin: 0 0 10px; line-height: 1.75; }
.bubble-content p:last-child { margin-bottom: 0; }
.bubble-content ul { margin: 8px 0; padding-inline-start: 22px; line-height: 1.75; }
.bubble-content li { margin: 3px 0; }
.pulse-once { outline: 2px solid var(--fg); animation: pulseOnce .9s ease-out 1; }
@keyframes pulseOnce { 0% { background: var(--hover-cyan); } 100% { background: transparent; } }

/* Applied toast with undo button */
.applied-toast {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px; margin: 4px 0;
  background: var(--bg-secondary, #1a1a2e); border: 1px solid var(--border, #2a2a3e);
  border-radius: 10px; font-size: 13px; animation: toastIn .3s ease;
}
.applied-toast-text { flex: 1; color: var(--fg); }
.applied-toast-undo {
  background: none; border: 1px solid var(--fg-secondary, #888);
  color: var(--fg-secondary, #888); padding: 4px 12px; border-radius: 6px;
  font-size: 11px; cursor: pointer; white-space: nowrap;
}
.applied-toast-undo:hover { border-color: var(--fg); color: var(--fg); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.reminder-source-link { border: 1px solid var(--border); background: transparent; color: var(--fg-secondary); font: inherit; font-size: 10px; padding: 1px 6px; cursor: pointer; }
.reminder-source-link:hover { color: var(--fg); border-color: var(--fg); }

/* Native-feeling touch behavior for phones, tablets and touch laptops. */
button, [role="button"], a { touch-action: manipulation; }
@media (pointer: coarse) {
  button, input, select, textarea, [role="button"] { min-height: 44px; }
  .audio-speed, .lightbox-close { width: 44px; height: 44px; }
}

/* ===== Fekrhat page — compact AI-native dashboard refinement ===== */
.today-body { padding-top: 24px; padding-bottom: 96px; }
.today-hero-overview { padding: 4px 2px 20px; }
.today-date-num { font-size: clamp(52px,7vw,78px); line-height: .88; }
.today-progress { max-width: 620px; margin-top: 18px; }
.today-progress-bar {
  height: 3px; overflow: hidden;
  background: color-mix(in srgb,var(--border) 55%,transparent);
}
.today-progress-label {
  margin-top: 7px; color: var(--fg-secondary); font-size: 11px; line-height: 1.5; letter-spacing: .2px;
}

.today-briefing {
  margin-top: 6px; border-color: var(--border); background: var(--surface);
}
.today-briefing-head { min-height: 60px; padding: 8px 10px 8px 14px; }
.today-briefing-mark { width: 21px; height: 21px; }
.today-briefing-heading h2 { font-size: 14px; line-height: 1.45; }
.today-briefing-heading p { margin-top: 1px; color: var(--fg-secondary); font-size: 11px; line-height: 1.5; }
.today-briefing-body { min-height: 112px; padding: 8px; }
.today-briefing-cards { gap: 0; }
.today-briefing-skeleton {
  min-height: 0; display: flex; flex-direction: column; gap: 0;
}
.today-briefing-skeleton span {
  min-height: 58px; border: 0; border-bottom: 1px solid var(--border);
}
.today-briefing-skeleton span:last-child { border-bottom: 0; }
.today-briefing-card {
  position: relative; min-height: 62px; padding: 9px 10px;
  border: 0; border-bottom: 1px solid var(--border); background: transparent;
  gap: 9px; touch-action: manipulation;
  transition: background .18s ease, transform .18s ease;
}
.today-briefing-card:last-child { border-bottom: 0; }
.today-briefing-card:hover { border-color: transparent; background: color-mix(in srgb,var(--cyan) 7%,transparent); }
.today-briefing-card:active { transform: scale(.997); }
.today-briefing-card:focus-visible { outline-offset: -2px; }
.today-briefing-card::before {
  content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%;
  background: var(--cyan); opacity: .75;
}
.today-briefing-card[data-priority="high"] { border-inline-start: 0; }
.today-briefing-card[data-priority="high"]::before { background: var(--danger); opacity: 1; }
.today-briefing-card-main {
  grid-template-columns: 108px minmax(0,1fr); align-items: center; gap: 10px;
  padding: 4px 6px; margin: -4px -6px; border-radius: var(--radius-sm);
  transition: background .18s ease, transform .18s ease;
}
.today-briefing-card:hover .today-briefing-card-main,
.today-briefing-card:focus-visible .today-briefing-card-main {
  background: color-mix(in srgb, var(--cyan) 9%, transparent);
  transform: translateX(2px);
}
.rtl .today-briefing-card:hover .today-briefing-card-main,
.rtl .today-briefing-card:focus-visible .today-briefing-card-main { transform: translateX(-2px); }

/* Minimal theme: keep the interaction quiet and local to the text block.
   A full-width accent wash makes the flat layout look like a selected row. */
html:not([data-theme="pro"]) .today-briefing-card:hover,
html:not([data-theme="pro"]) .today-briefing-card:focus-visible { background: transparent; }
html:not([data-theme="pro"]) .today-briefing-card:hover .today-briefing-card-main,
html:not([data-theme="pro"]) .today-briefing-card:focus-visible .today-briefing-card-main {
  background: color-mix(in srgb, var(--cyan) 3%, transparent);
  transform: translateX(1px);
}
html.rtl:not([data-theme="pro"]) .today-briefing-card:hover .today-briefing-card-main,
html.rtl:not([data-theme="pro"]) .today-briefing-card:focus-visible .today-briefing-card-main { transform: translateX(-1px); }
.today-briefing-card-top { gap: 4px; }
.today-briefing-kind {
  padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb,var(--cyan) 10%,transparent);
  font-size: 10.5px;
}
.today-briefing-horizon { font-size: 10.5px; }
.today-briefing-copy {
  display: grid; grid-template-columns: minmax(120px,auto) minmax(0,1fr); align-items: baseline; gap: 8px;
}
.today-briefing-card h3 { font-size: 13px; }
.today-briefing-copy > p { font-size: 12px; }
.today-briefing-actions { gap: 6px; }
.today-briefing-actions button,
.today-briefing-empty button { min-height: 34px; padding: 5px 9px; }
.today-briefing-actions .today-briefing-discuss {
  background: transparent; border-color: var(--border); color: var(--fg);
}
.today-briefing-actions button:hover,
.today-briefing-empty button:hover {
  border-color: var(--cyan); background: color-mix(in srgb,var(--cyan) 8%,transparent);
}
.today-briefing-open-icon {
  width: 14px; height: 14px; flex: 0 0 14px; color: var(--fg-secondary);
  background: currentColor;
  -webkit-mask: url("/icons/arrow-right.svg") center / contain no-repeat;
  mask: url("/icons/arrow-right.svg") center / contain no-repeat;
  opacity: .65; transition: transform .18s ease, opacity .18s ease;
}
.rtl .today-briefing-open-icon {
  -webkit-mask-image: url("/icons/arrow-left.svg");
  mask-image: url("/icons/arrow-left.svg");
}
.today-briefing-card:hover .today-briefing-open-icon { opacity: 1; transform: translateX(2px); }
.rtl .today-briefing-card:hover .today-briefing-open-icon { transform: translateX(-2px); }

html[data-theme="pro"] .today-briefing {
  border-color: var(--border); background: var(--surface); box-shadow: var(--shadow-sm);
}
html[data-theme="pro"] .today-briefing-head {
  background: color-mix(in srgb,var(--surface) 94%,var(--cyan) 6%); backdrop-filter: none;
}
html[data-theme="pro"] .today-briefing-card {
  border-radius: 0; background: transparent; box-shadow: none;
}

.today-grid { grid-template-columns: 1.35fr 1fr; gap: 16px; margin-top: 18px; }
.today-col { min-width: 0; border: 1px solid var(--border); background: var(--surface); }
.today-black-label {
  min-height: 46px; padding: 7px 10px 7px 14px;
  border-bottom: 1px solid var(--border); background: transparent; color: var(--fg);
  font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: none;
}
.today-panel { border: 0; }
.today-scope-btn {
  min-height: 44px; padding: 4px 10px; background: transparent;
}
.today-scope-btn.active {
  background: color-mix(in srgb,var(--cyan) 10%,transparent); color: var(--cyan);
}
.today-section-link { color: var(--fg-secondary); font-size: 10.5px; opacity: 1; }
html[data-theme="pro"] .today-col {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
html[data-theme="pro"] .today-black-label,
html[data-theme="pro"] .today-panel { border-radius: 0; }

@media (max-width: 760px) {
  .today-body { padding-top: 16px; }
  .today-hero-overview { padding-bottom: 16px; }
  .today-grid { gap: 12px; margin-top: 12px; }
}
@media (max-width: 640px) {
  .today-briefing-body { padding: 6px; }
  .today-briefing-skeleton span,
  .today-briefing-skeleton span:not(:first-child) { display: block; min-height: 64px; }
  .today-briefing-card {
    min-height: 0; align-items: flex-start; flex-flow: row wrap; gap: 7px; padding: 11px 9px;
  }
  .today-briefing-card::before { margin-top: 8px; }
  .today-briefing-card-main { grid-template-columns: 1fr; gap: 4px; }
  .today-briefing-copy { display: block; }
  .today-briefing-copy > p {
    margin-top: 1px; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .today-briefing-actions {
    width: calc(100% - 21px); margin-inline-start: 15px; justify-content: flex-start; gap: 8px;
  }
  .today-briefing-actions button { flex: 0 1 auto; min-height: 44px; }
  .today-briefing-open-icon { position: absolute; inset-inline-end: 12px; top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .today-briefing-card,
  .today-briefing-open-icon,
  .today-briefing-card-main { transition: none; }
  .today-briefing-card:hover .today-briefing-card-main,
  .today-briefing-card:focus-visible .today-briefing-card-main,
  html:not([data-theme="pro"]) .today-briefing-card:hover .today-briefing-card-main,
  html:not([data-theme="pro"]) .today-briefing-card:focus-visible .today-briefing-card-main { transform: none; }
}

@media (max-width: 720px) {
  .ai-action-card { display: flex; flex-direction: column; align-items: stretch; }
  .ai-action-actions { margin-top: 8px; width: 100%; }
  .chat-action-list .image-prompt-actions { flex-wrap: wrap; }
  .chat-action-list .image-prompt-actions .btn-primary,
  .chat-action-list .image-prompt-actions .btn-secondary { width: 100%; }
}

/* Light theme overrides — now handled by :root vars; removed redundant html.light rules */

/* ============ PLAN CREATION ============ */
#planCreateChoiceModal .modal-body { display: flex; flex-direction: column; gap: 10px; }
.plan-choice-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  transition: all .15s ease;
  text-align: start;
}
.plan-choice-btn:hover {
  border-color: var(--cyan);
  background: var(--hover);
}
.plan-choice-btn svg { color: var(--cyan); flex-shrink: 0; }
.plan-choice-btn span { font-weight: 600; font-size: 13px; }
.plan-choice-btn small { font-size: 11px; color: var(--fg-secondary); display: block; }

.plan-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-form .form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-secondary);
}
.plan-form .form-row {
  display: flex;
  gap: 12px;
}
.plan-form .form-row .form-group {
  flex: 1;
}
.plan-steps-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-step-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.plan-step-num {
  font-size: 12px;
  color: var(--fg-secondary);
  min-width: 18px;
  text-align: center;
}
.plan-step-input {
  flex: 1;
}
.plan-step-remove {
  font-size: 16px;
  padding: 2px 6px;
  color: var(--fg-secondary);
  cursor: pointer;
  border: none;
  background: none;
}
.plan-step-remove:hover {
  color: #f44;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.modal-sm { max-width: 380px; }
.modal-lg { max-width: 560px; }

/* ============ INBOX SUGGESTION ============ */
.inbox-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.suggest-btn {
  background: transparent;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 0;
  cursor: pointer;
}
.suggest-btn:hover {
  background: var(--hover);
}
.rtl .plan-hero-title {
  text-align: right;
  direction: rtl;
}
.rtl .plan-step-edit {
  flex-direction: row-reverse;
}
.rtl .plan-form .form-row {
  flex-direction: row-reverse;
}
.rtl .plan-form .form-actions {
  flex-direction: row-reverse;
}
.rtl .plan-form .form-group label {
  text-align: right;
}
.rtl .plan-field {
  text-align: right;
  direction: rtl;
}
.rtl select.plan-field {
  text-align: right;
  direction: rtl;
}
.rtl .form-row { flex-direction: row-reverse; }
.rtl .form-actions { flex-direction: row-reverse; }
.rtl .form-group label { text-align: right; }
.rtl .form-input, .rtl .form-textarea { text-align: right; direction: rtl; }
.rtl select.form-input { text-align: right; direction: rtl; }
.rtl .field-edit-actions { flex-direction: row-reverse; }
.rtl .planner-field-sec .planner-section-head { }
.rtl .plan-edit-input, .rtl .plan-edit-date { text-align: right; direction: rtl; }

/* ============ PLAN MODAL EDIT ============ */
.plan-hero-title {
  font-size: 24px;
  font-weight: 700;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
}
.plan-field {
  width: 100%;
}
.hidden + .plan-jalali-btn, .hidden ~ .plan-jalali-btn {
  pointer-events: auto;
}
.plan-jalali-btn {
  cursor: pointer;
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  display: block;
  min-height: 32px;
  line-height: 32px;
}
.plan-jalali-btn:hover {
  border-color: var(--cyan);
}
.plan-step-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.plan-step-edit .plan-step-num {
  font-size: 12px;
  color: var(--fg-secondary);
  min-width: 18px;
}
.plan-step-edit .plan-step-field {
  flex: 1;
}

/* ===== Plan step reminder ===== */
.plan-step {
  flex-wrap: wrap;
}
.plan-step-row {
  display: flex; align-items: center; gap: 6px; width: 100%;
}
.plan-step-reminder-toggle {
  background: none; border: none; color: var(--fg-muted); cursor: pointer;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: color 0.15s;
}
.plan-step-reminder-toggle:hover { color: var(--accent); }
.plan-step-reminder-toggle.active { color: var(--accent); }
.plan-step-reminder-form {
  display: none; width: 100%; padding: 8px 0 2px;
  padding-inline-start: 28px;
}
.plan-step-reminder-form.open { display: block; }
.plan-step-reminder-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.plan-step-reminder-row input[type="text"],
.plan-step-reminder-row input[type="time"] {
  background: var(--input-bg); border: 1px solid var(--border-light); color: var(--fg);
  padding: 5px 8px; font-family: 'Peyda','DM Mono', monospace; font-size: 11px; outline: none;
}
.plan-step-reminder-row input:focus { border-color: var(--cyan); }
.plan-step-reminder-row label {
  display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--fg-secondary); cursor: pointer;
}
.plan-step-reminder-row label input { accent-color: var(--cyan); }
.plan-step-reminder-status {
  display: flex; gap: 8px; align-items: center;
  padding: 4px 0 0;
  padding-inline-start: 28px;
  font-size: 11px; color: var(--fg-secondary);
}
.plan-step-reminder-status .reminder-active { color: var(--accent); font-weight: 500; }
.plan-step-reminder-status .reminder-due { font-family: 'Peyda','Ndot57','DM Mono', monospace; direction: ltr; unicode-bidi: plaintext; }
.plan-step-linked {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0 0;
  padding-inline-start: 28px;
  font-size: 12px; color: var(--fg-secondary); width: 100%;
}
.plan-step-linked .linked-reminder-check {
  width: 14px; height: 14px; border: 1px solid var(--border-light); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.plan-step-linked .linked-reminder-check.done { background: var(--cyan); border-color: var(--cyan); }
.plan-step-linked .linked-reminder-check.done svg { color: var(--bg); }
.plan-step-linked .linked-reminder-title { flex: 1; }
.plan-step-linked .linked-reminder-title.done { text-decoration: line-through; color: var(--fg-muted); }
.plan-step-linked .linked-reminder-due { font-family: 'Peyda','Ndot57','DM Mono', monospace; font-size: 10px; color: var(--fg-muted); direction: ltr; unicode-bidi: plaintext; }
.plan-step-linked .linked-reminder-edit {
  background: none; border: none; color: var(--fg-muted); cursor: pointer; padding: 2px;
}
.plan-step-linked .linked-reminder-edit:hover { color: var(--fg); }
.reminder-plan-badge {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border-light); color: var(--cyan);
  padding: 1px 6px; font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: 0.4px; cursor: pointer; flex-shrink: 0;
}
.reminder-plan-badge:hover { border-color: var(--cyan); background: var(--hover-cyan); }
.rtl .plan-step-reminder-toggle { direction: ltr; }

/* ===== Form inputs for plan/reminder modals ===== */
.form-input, .form-textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border-light);
  color: var(--fg);
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  padding: 8px 12px;
  outline: none;
}
.form-input:focus, .form-textarea:focus { border-color: var(--cyan); }
.form-textarea { resize: vertical; min-height: 60px; }
select.form-input { cursor: pointer; }
select.form-input option { background: var(--surface); color: var(--fg); }

.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--fg-secondary);
  letter-spacing: 0.5px;
}
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* ===== Field edit (per-field inline edit in plan view) ===== */
.field-edit-btn {
  background: none; border: none; color: var(--fg-muted); cursor: pointer;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: color 0.15s;
}
.field-edit-btn:hover { color: var(--fg); }
.field-edit-actions { display: flex; gap: 8px; margin-top: 10px; }
.field-edit-actions button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--border-light); background: var(--surface-raised);
  color: var(--fg-secondary); cursor: pointer; border-radius: 0;
  min-height: 34px; padding: 0 12px; font: inherit; font-size: 12px;
  transition: all 0.16s ease;
}
.field-edit-actions button:hover { color: var(--accent); border-color: var(--accent); background: var(--hover-cyan); }
.field-placeholder { color: var(--fg-muted); font-style: italic; }
.planner-field-sec { position: relative; }
.planner-field-sec .planner-section-head { cursor: default; }
.plan-edit-input, .plan-edit-date {
  width: 100%; background: var(--input-bg); border: 1px solid var(--border-light);
  color: var(--fg); font-family: 'Barlow', sans-serif; font-size: 14px;
  padding: 8px 12px; outline: none;
}
.plan-edit-input:focus, .plan-edit-date:focus { border-color: var(--cyan); }

/* ===== Plan title in view mode ===== */
.planner-hero .plan-title-row { display: flex; align-items: center; gap: 8px; }
.planner-hero h2 { margin-bottom: 12px; }

/* Billing */
.billing-view-header { display: flex; align-items: center; gap: 10px; }
.billing-back-btn {
  width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--fg);
  border-radius: var(--radius-sm); cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.billing-back-btn:hover { border-color: var(--accent); background: var(--hover); }
.billing-body {
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: clamp(20px,3vw,36px) clamp(16px,3vw,40px) 56px;
}
.billing-section {
  padding: clamp(16px,2vw,24px); margin-bottom: 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.billing-section-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--fg); }
.billing-current-plan {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(18px,2vw,26px);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}
.billing-plan-badge {
  min-width: 74px; padding: 8px 14px; text-align: center;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
}
.billing-plan-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#billing-plan-name { font-size: 15px; font-weight: 650; line-height: 1.55; }
.billing-plan-expires { opacity: 0.6; font-size: 12px; }
.billing-usage { margin-bottom: 20px; }
.billing-usage-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 24px; margin-top: 18px; }
.billing-meter { min-width: 0; }
.billing-usage-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px; padding: 5px 0;
  font-size: 13px;
}
.billing-usage-item span:first-child { color: var(--fg-secondary); }
.billing-usage-item strong { color: var(--fg); font-weight: 650; white-space: nowrap; }
.billing-usage-bar {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: var(--radius-full);
  margin-top: 7px;
  overflow: hidden;
}
.billing-usage-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}
.billing-usage-fill.warning { background: #f59e0b; }
.billing-usage-fill.danger { background: #ef4444; }
.billing-plans { margin-bottom: 20px; }
.billing-pricing-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.billing-allowance-note { max-width: 620px; margin: 7px 0 0; color: var(--fg-secondary); font-size: 12px; line-height: 1.6; }
.billing-allowance-note.is-yearly { color: var(--accent); }
.billing-plan-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; align-items: stretch; }
.billing-plan-card {
  display: flex; flex-direction: column; min-width: 0; min-height: 390px;
  padding: 22px 18px 18px; background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.billing-plan-card.current {
  border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent);
}
.billing-plan-card:hover {
  border-color: var(--accent); transform: translateY(-2px);
}
.billing-plan-card.unavailable { opacity: .46; filter: grayscale(.8); }
.billing-plan-card.unavailable:hover { border-color: var(--border); transform: none; box-shadow: none; }
.billing-plan-name {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 16px;
}
.billing-plan-price {
  min-height: 36px; font-size: clamp(21px,2vw,28px);
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 2px; font-variant-numeric: tabular-nums;
}
.billing-plan-period {
  min-height: 18px; font-size: 11px; color: var(--fg-secondary); margin-bottom: 18px;
}
.billing-plan-features {
  display: flex; flex: 1; flex-direction: column; gap: 9px;
  text-align: start; font-size: 12px; line-height: 1.5; margin-bottom: 20px; color: var(--fg-secondary);
}
.billing-plan-features span { position: relative; padding-inline-start: 15px; }
.billing-plan-features span::before { content: ''; position: absolute; inset-inline-start: 1px; top: .55em; width: 6px; height: 6px; border: 1px solid var(--accent); border-radius: 50%; }
.billing-plan-btn {
  width: 100%; min-height: 44px; margin-top: auto; padding: 10px 14px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
}
.billing-plan-btn:hover {
  background: var(--accent);
  color: var(--bg);
}
.billing-plan-btn.primary {
  background: var(--accent);
  color: var(--bg);
}
.billing-plan-btn.primary:hover {
  opacity: 0.9;
}
.billing-plan-btn.current-btn {
  opacity: 0.4;
  pointer-events: none;
}
.billing-plan-btn.unavailable-btn { opacity: .55; pointer-events: none; }
.billing-plan-btn:disabled { cursor: default; }
.billing-credit-packs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.billing-credit-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; margin-top: 12px; }
.billing-credit-pack-card {
  display: flex; flex-direction: column; min-height: 154px; padding: 18px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}
.billing-credit-pack-amount {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}
.billing-credit-pack-price {
  font-size: 13px;
  color: var(--fg-secondary); margin-bottom: 16px;
}
.billing-duration-toggle {
  display: flex;
  flex: 0 0 auto; gap: 4px; padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg);
}
.billing-duration-btn {
  min-height: 40px; padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: all 0.2s;
}
.billing-duration-btn.active {
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--radius-sm);
}
.billing-save-badge {
  display: inline-block;
  background: #22c55e;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
}
.billing-payment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 10px;
  font-size: 13px;
}
.billing-payment-status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.billing-payment-status.paid { background: #22c55e22; color: #22c55e; }
.billing-payment-status.pending { background: #f59e0b22; color: #f59e0b; }
.billing-payment-status.failed { background: #ef444422; color: #ef4444; }

html:not([data-theme="pro"]) .billing-section,
html:not([data-theme="pro"]) .billing-current-plan,
html:not([data-theme="pro"]) .billing-plan-card,
html:not([data-theme="pro"]) .billing-credit-pack-card,
html:not([data-theme="pro"]) .billing-duration-toggle,
html:not([data-theme="pro"]) .billing-back-btn { border-radius: 2px; }
html:not([data-theme="pro"]) .billing-plan-btn:not(:disabled),
html:not([data-theme="pro"]) .billing-duration-btn.active {
  background: #171717; border-color: #171717; color: #fff;
}
html:not([data-theme="pro"]) .billing-plan-btn:not(:disabled):hover { background: #2b2b2b; border-color: #2b2b2b; color: #fff; }
html:not([data-theme="pro"]) .billing-plan-btn:disabled { background: var(--border); border-color: var(--border); color: var(--fg-secondary); }
html[data-theme="pro"] .billing-current-plan {
  background: linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--surface)),var(--surface));
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}
html[data-theme="pro"] .billing-section { box-shadow: 0 10px 28px rgba(0,0,0,.08); }
html[data-theme="pro"] .billing-plan-card.current {
  background: linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,var(--bg)),var(--bg));
  box-shadow: 0 12px 30px color-mix(in srgb,var(--accent) 15%,transparent);
}

@media (max-width: 1020px) {
  .billing-plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .billing-body { padding: 16px 14px 40px; }
  .billing-pricing-head { flex-direction: column; gap: 14px; }
  .billing-duration-toggle { width: 100%; }
  .billing-duration-btn { flex: 1; padding-inline: 8px; }
  .billing-plan-grid, .billing-credit-packs, .billing-usage-grid, .billing-credit-summary { grid-template-columns: 1fr; }
  .billing-plan-card { min-height: 0; }
  .billing-current-plan { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .billing-plan-card, .billing-usage-fill { transition: none; }
  .billing-plan-card:hover { transform: none; }
}

/* Admin Panel */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.admin-stat-card {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}
.admin-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
}
.admin-stat-label {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 4px;
}
.admin-user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.admin-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-user-name {
  font-weight: 600;
  font-size: 14px;
}
.admin-user-email {
  font-size: 12px;
  opacity: 0.6;
}
.admin-user-plan {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-user-plan-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--accent);
  color: var(--bg);
}
.admin-change-plan-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
}
.admin-change-plan-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.settings-btn {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--fg);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: all 0.15s;
}
.settings-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.settings-btn.danger-btn {
  width: auto; padding: 6px 12px; font-size: 12px; margin-bottom: 0;
  border-color: var(--danger); color: var(--danger);
}
.settings-btn.danger-btn:hover { background: var(--danger); color: #fff; }

.trash-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.trash-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.trash-item-title {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trash-item-date {
  font-size: 11px;
  opacity: 0.5;
}
.trash-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.trash-restore-btn, .trash-delete-btn {
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
}
.trash-restore-btn:hover { border-color: var(--accent); color: var(--accent); }
.trash-delete-btn:hover { border-color: #ef4444; color: #ef4444; }
.admin-user-item.suspended { opacity: 0.5; }
.admin-suspend-btn { border-color: #f59e0b; color: #f59e0b; }
.admin-suspend-btn:hover { background: #f59e0b; color: var(--bg); }
.admin-delete-btn { border-color: #ef4444; color: #ef4444; }
.admin-delete-btn:hover { background: #ef4444; color: #fff; }
.plan-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.plan-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  width: 100%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
}
.plan-modal h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
}
.plan-modal-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.plan-modal-option:hover {
  border-color: var(--accent);
}
.plan-modal-option.current {
  border-color: var(--accent);
  background: var(--hover-cyan);
}
.plan-modal-option-name {
  font-weight: 600;
}
.plan-modal-option-info {
  font-size: 12px;
  opacity: 0.6;
}

/* ============ TIMELINE VIEW ============ */
.timeline-header {
  padding: 16px 32px 0; background: var(--bg); border-bottom: 1px solid var(--border);
}
.timeline-nav-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.timeline-icon-btn {
  background: none; border: 1px solid var(--border); color: var(--fg); cursor: pointer;
  padding: 6px 12px; border-radius: 0; font-size: 12px; font-family: 'Peyda', sans-serif;
  display: flex; align-items: center; gap: 6px; transition: all 0.2s;
}
.timeline-icon-btn:hover { border-color: var(--cyan); color: var(--cyan); background: var(--hover-cyan); }
.tl-zoom-controls { display: flex; align-items: center; gap: 4px; }
.tl-zoom-btn { width: 24px; height: 24px; border: 1px solid var(--border);
  background: none; color: var(--fg); cursor: pointer; font-size: 14px;
  border-radius: 0; display: flex; align-items: center; justify-content: center; }
.tl-zoom-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.tl-zoom-label { font-size: 10px; font-family: 'DM Mono', monospace; color: var(--fg-muted); min-width: 32px; text-align: center; }
@media (max-width: 768px) { .tl-zoom-controls { display: none; } }
.timeline-date-nav {
  display: flex; align-items: center; direction: ltr; width: 190px;
}
html[dir="rtl"] .timeline-date-picker { direction: rtl; }
.timeline-nav-arrow {
  background: none; border: none; color: var(--fg-muted); cursor: pointer;
  display: flex; flex-shrink: 0; padding: 4px; transition: color 0.2s;
}
.timeline-nav-arrow:hover { color: var(--cyan); }
.timeline-date-picker {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1; min-width: 0; white-space: nowrap; cursor: pointer; user-select: none;
}
.timeline-month {
  font-size: 20px; font-weight: 700; color: var(--fg); font-family: 'Peyda', sans-serif;
}
.timeline-year {
  font-size: 20px; font-weight: 700; color: var(--cyan);
}
.week-selector {
  display: flex; justify-content: space-between; padding: 12px 0; gap: 4px;
}
.week-day-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 6px 0;
  border-radius: 0; transition: all 0.2s;
}
.week-day-btn:hover { background: var(--hover); }
.week-day-name {
  font-size: 12px; color: var(--fg-muted); font-weight: 500;
}
.week-day-num {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 0; font-size: 13px; font-weight: 600; color: var(--fg);
  transition: all 0.2s;
}
.week-day-btn.today .week-day-num { background: var(--cyan); color: var(--bg); }
.week-day-btn.active .week-day-num { background: var(--hover-cyan); color: var(--cyan); }
.week-day-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 14px; border-radius: 0;
  font-size: 9px; font-weight: 700; padding: 0 4px;
  background: var(--hover); color: var(--fg-muted);
}
.week-day-btn.today .week-day-badge,
.week-day-btn.active .week-day-badge {
  background: var(--fg-muted); color: var(--bg);
}
.timeline-content {
  flex: 1; position: relative; overflow-y: auto; overflow-x: hidden;
  padding: 0;
}
.timeline-grid {
  position: relative; width: 100%; user-select: none;
  --tl-label-w: 54px; --tl-row-h: 60px;
}
.timeline-hour-row {
  position: absolute; left: 0; right: 0;
  pointer-events: none;
}
.timeline-hour-row:nth-child(odd) {
  background: rgba(128,128,128,0.04);
}
.timeline-hour-label {
  position: absolute; left: 0; top: -3px; z-index: 1;
  font-size: 10px; font-weight: 700; color: var(--fg-muted);
  font-family: 'DM Mono', monospace; white-space: nowrap;
  width: var(--tl-label-w); text-align: right; padding-right: 4px;
}
.rtl .timeline-hour-label {
  left: auto; right: 0;
  text-align: left; padding-left: 4px; padding-right: 0;
}
.timeline-hour-line {
  border-top: 1px solid var(--border); margin-left: var(--tl-label-w);
}
.timeline-half-line {
  position: absolute; left: var(--tl-label-w); right: 0;
  border-top: 1px dashed var(--border); pointer-events: none;
}
/* highlight current hour row */
.timeline-hour-now {
  background: rgba(0,188,212,.06) !important;
}
.timeline-hour-now .timeline-hour-line {
  border-top-color: var(--cyan);
}
/* smooth zoom animation */
#timelineContent.tl-zoom-animate .timeline-hour-row,
#timelineContent.tl-zoom-animate .timeline-half-line,
#timelineContent.tl-zoom-animate .timeline-now-indicator {
  transition: top .15s ease, height .15s ease;
}
.timeline-card-abs {
  position: absolute; z-index: 3; cursor: grab;
  left: var(--tl-label-w); right: 4px;
  overflow: hidden;
  font-size: 12px; font-weight: 600; border-radius: 0;
  background: color-mix(in srgb, var(--fg) 15%, var(--bg));
  color: var(--fg);
  display: flex; align-items: center;
  padding-left: 0; padding-right: 6px;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transition: top .25s ease, box-shadow .15s, height .15s ease;
  flex-direction: row; justify-content: space-between;
}
.timeline-card-abs:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.timeline-card-abs.done {
  opacity: .5; filter: grayscale(.3);
}
.timeline-card-abs.done .timeline-card-title {
  text-decoration: line-through;
}
.timeline-card-abs.dragging {
  cursor: grabbing; z-index: 10; opacity: .85;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: none;
}
.timeline-card-abs.selected {
  border-color: var(--fg);
}
/* flash-highlight when navigated to from elsewhere (e.g. briefing source chip) */
@keyframes tl-flash {
  0%, 55% { border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 35%, transparent); }
  100% { border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
}
.timeline-card-abs.tl-flash {
  animation: tl-flash 1.8s ease-out 2;
}
/* overdue: extra emphasis */
.timeline-card-overdue {
  background: color-mix(in srgb, var(--danger) 18%, var(--bg));
}
/* checkbox on timeline card */
.tl-card-checkbox {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; margin: 3px 4px 0 4px;
  border: 1.5px solid var(--fg-muted); border-radius: 3px;
  background: transparent; cursor: pointer; flex-shrink: 0;
  position: relative; transition: all .2s ease;
}
.tl-card-checkbox:checked {
  background: var(--fg); border-color: var(--fg);
}
.tl-card-checkbox:checked::after {
  content: ''; position: absolute;
  left: 4px; top: 1px; width: 5px; height: 9px;
  border: solid var(--bg); border-width: 0 2px 2px 0;
  transform: rotate(45deg); animation: tl-check-pop .25s ease;
}
@keyframes tl-check-pop {
  0% { transform: rotate(45deg) scale(0); }
  50% { transform: rotate(45deg) scale(1.3); }
  100% { transform: rotate(45deg) scale(1); }
}
.rtl .tl-card-checkbox {
  margin: 0px;
  order: 1;
}
.rtl .tl-card-checkbox:checked::after {
  left: 4px;
}
/* resize handle */
.tl-resize-handle {
  position: absolute; bottom: 0; right: 0;
  width: 14px; height: 14px; z-index: 5;
  display: none; cursor: ns-resize;
  background: var(--fg-muted);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transition: opacity .15s;
}
.timeline-card-abs.selected .tl-resize-handle {
  display: block;
}
.rtl .tl-resize-handle {
  left: auto; right: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.timeline-card-abs .timeline-card-time {
  font-size: 10px; font-weight: 700; font-family: 'DM Mono', monospace;
  color: var(--fg-muted); margin-right: 6px; flex-shrink: 0;
  margin-top: 2px;
}
.rtl .timeline-card-abs .timeline-card-time {
  margin-right: 8px; margin-left: 6px;
}
.timeline-card-abs .timeline-card-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
}
.timeline-card-abs .timeline-card-caption {
  font-size: 10px; opacity: .7; margin-left: 6px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; margin-top: 2px;
}
.rtl .timeline-hour-label {
  text-align: left; padding-left: 4px; padding-right: 0;
}
.rtl .timeline-hour-line {
  margin-left: 0; margin-right: var(--tl-label-w);
}
.rtl .timeline-half-line {
  left: 0; right: var(--tl-label-w);
}
.rtl .timeline-card-abs {
  left: 4px; right: var(--tl-label-w);
  padding-left: 6px; padding-right: 0;
  border: 1px solid transparent;
}
.rtl .timeline-card-abs.selected {
  border-color: var(--fg);
}
.timeline-now-indicator {
  position: absolute; left: var(--tl-label-w); right: 0;
  height: 2px; z-index: 4;
  pointer-events: none;
  background: linear-gradient(to right,
    var(--danger) var(--now-fill, 0%),
    color-mix(in srgb, var(--danger) 35%, transparent) var(--now-fill, 0%)
  );
}
.timeline-now-indicator .timeline-now-time {
  position: absolute; left: calc(-1 * var(--tl-label-w));
  top: -3px; font-size: 10px; font-weight: 700; color: var(--danger);
  font-family: 'DM Mono', monospace; white-space: nowrap;
  width: var(--tl-label-w); text-align: right; padding: 0 4px;
  background: var(--bg); backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.timeline-now-indicator .timeline-now-dot {
  position: absolute; left: 0; top: -3px;
  width: 8px; height: 8px; border-radius: 0;
  background: var(--danger);
  animation: now-blink 1s ease-in-out infinite;
}
.rtl .timeline-now-indicator {
  left: 0; right: var(--tl-label-w);
  background: linear-gradient(to left,
    var(--danger) var(--now-fill, 0%),
    color-mix(in srgb, var(--danger) 35%, transparent) var(--now-fill, 0%)
  );
}
.rtl .timeline-now-indicator .timeline-now-time {
  left: auto; right: calc(-1 * var(--tl-label-w));
  text-align: left; padding-left: 4px; padding-right: 0;
}
.rtl .timeline-now-indicator .timeline-now-dot {
  right: 0; left: auto;
}
@keyframes now-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
/* drag tooltip */
.tl-drag-tooltip {
  position: fixed; z-index: 999;
  font-size: 11px; font-weight: 700;
  background: var(--bg-card, #fff); color: var(--fg);
  padding: 2px 8px; border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  pointer-events: none;
  font-family: 'DM Mono', monospace;
}
.timeline-unscheduled {
  padding: 12px 32px 20px;
}
.timeline-unscheduled-items {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.timeline-unscheduled-item {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; cursor: pointer; border-radius: 0;
  font-size: 12px; background: color-mix(in srgb, var(--fg) 12%, var(--bg));
  transition: background .15s;
}
.timeline-unscheduled-item:hover { background: color-mix(in srgb, var(--fg) 18%, var(--bg)); }
@keyframes tl-flash-unscheduled {
  0%, 55% { background: color-mix(in srgb, var(--cyan) 30%, var(--bg)); }
  100% { background: color-mix(in srgb, var(--fg) 12%, var(--bg)); }
}
.timeline-unscheduled-item.tl-flash { animation: tl-flash-unscheduled 1.8s ease-out 2; }
.timeline-unscheduled-item svg { width: 12px; height: 12px; flex-shrink: 0; opacity: .6; }
.timeline-unscheduled-item-multiday { border-inline-start: 3px solid var(--accent); }
.timeline-multiday-range { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--fg-secondary); }
.timeline-empty {
  text-align: center; padding: 64px 20px; color: var(--fg-muted);
}
.timeline-empty-icon {
  margin: 0 auto 16px; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--hover); border-radius: 50%;
}
.timeline-empty-icon svg { opacity: 0.35; }
.timeline-empty-title { font-size: 15px; font-weight: 600; color: var(--fg); margin-bottom: 6px; }
.timeline-empty-text { font-size: 12px; }

/* Timeline view toggle */
.tl-view-controls { display: flex; align-items: center; gap: 8px; }
.tl-view-toggle { display: flex; background: var(--hover); border-radius: 8px; padding: 2px; }
.tl-view-btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 4px 8px; border: none; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--fg-muted); font-size: 11px; font-weight: 600;
  transition: all 0.15s;
}
.tl-view-btn:hover { color: var(--fg); }
.tl-view-btn.active { background: var(--cyan); color: var(--bg); }

/* Month view grid */
.month-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  overflow: hidden; margin: 0;
}
.month-header-cell {
  background: var(--surface-raised); padding: 6px 4px; text-align: center;
  font-size: 11px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase;
}
.month-day-cell {
  background: var(--bg); height: 110px; cursor: pointer;
  display: flex; flex-direction: column;
  transition: background 0.15s; position: relative; overflow: hidden;
}
.month-day-cell:hover { background: var(--hover); }
.month-day-cell.other-month { opacity: 0.35; }
.month-day-head {
  display: flex; align-items: center; justify-content: center;
  padding: 3px 0 1px; flex-shrink: 0;
}
.month-day-cell.today .month-day-num {
  background: var(--cyan); color: var(--bg); border-radius: 0px;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
}
.month-day-num {
  font-size: 12px; font-weight: 600; color: var(--fg);
}
.month-day-cards {
  flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: 1px;
  padding: 0 2px 2px;
}
.month-card {
  font-size: 11px; line-height: 1.3; padding: 1px 4px; border-inline-start: 3px solid var(--cyan);
  background: var(--hover); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; flex-shrink: 0; color: var(--fg);
}
.month-card:hover { background: var(--hover-cyan); }
.month-card.done { text-decoration: line-through; opacity: 0.5; }
.month-card.month-card-allday { margin-top: auto; }
.month-card.month-card-multiday { font-weight: 700; }
.month-more {
  font-size: 10px; color: var(--fg-muted); padding: 1px 4px; cursor: pointer;
  flex-shrink: 0; font-weight: 600;
}
.month-more:hover { color: var(--cyan); }

/* Month cell spine line (connects timed cards to all-day card) */
.month-day-cell.has-line .month-day-cards {
  position: relative;
  padding-left: 10px;
}
.month-day-cell.has-line .month-day-cards::before {
  content: '';
  position: absolute;
  left: 4px; top: 0; bottom: 0;
  width: 1px;
  background: var(--border);
}
.month-day-cell.has-line .month-card.month-card-allday {
  margin-left: -7px;
}
.rtl .month-day-cell.has-line .month-day-cards {
  padding-left: 0; padding-right: 10px;
}
.rtl .month-day-cell.has-line .month-day-cards::before {
  left: auto; right: 4px;
}
.rtl .month-day-cell.has-line .month-card.month-card-allday {
  margin-left: 0; margin-right: -7px;
}

/* View transition animation */
@keyframes tlFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes tlFadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.97); }
}
.tl-enter { animation: tlFadeIn 0.25s ease forwards; }
.tl-exit { animation: tlFadeOut 0.15s ease forwards; }

/* Ghost cards for month→day zoom animation */
.tl-ghost-card {
  position: fixed; z-index: 1000; pointer-events: none;
  font-size: 11px; line-height: 1.3; padding: 3px 6px;
  border-inline-start: 3px solid var(--cyan);
  background: var(--surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--fg); box-shadow: 0 2px 8px rgba(0,0,0,.15);
  border-radius: 3px; will-change: transform, filter, left, top, width, height;
  -webkit-backdrop-filter: blur(0px);
}
.tl-ghost-card.done { opacity: 0.5; text-decoration: line-through; }

/* Timeline create-bar (long-press + drag to create reminder) */
.tl-create-bar {
  position: absolute; z-index: 5; pointer-events: none;
  left: var(--tl-label-w); right: 4px;
  background: color-mix(in srgb, var(--fg) 15%, var(--bg));
  color: var(--fg);
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 12px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  padding-left: 0; padding-right: 6px;
  display: flex; align-items: center;
  transition: height 0.05s linear;
}
.tl-create-bar .tl-create-label {
  font-size: 10px; font-weight: 700; font-family: 'DM Mono', monospace;
  color: var(--fg-muted); margin-right: 6px;
  background: none; box-shadow: none; border-radius: 0; padding: 0;
  white-space: nowrap;
}
.rtl .tl-create-bar {
  left: 4px; right: var(--tl-label-w);
  padding-left: 6px; padding-right: 0;
}
.rtl .tl-create-bar .tl-create-label {
  margin-right: 0; margin-left: 6px;
}

.reminder-fab {
  position: fixed; bottom: 28px; z-index: 51;
  width: 48px; height: 48px; border: none; border-radius: 12px;
  background: var(--cyan); color: var(--bg); font-size: 26px; line-height: 1;
  cursor: pointer; display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); transition: all .2s;
  right: 28px;
}
.rtl .reminder-fab { right: auto; left: 28px; }
.reminder-fab.visible { display: flex; }
.reminder-fab:hover { transform: scale(1.08); opacity: .9; }
.today-create-fab { z-index:103; }
.today-create-fab .theme-icon { transition:transform .22s ease; }
.today-create-fab.is-open .theme-icon { transform:rotate(45deg); }
.today-create-fab.is-open { opacity:0; pointer-events:none; transform:scale(.82); }
.today-create-sheet {
  position:fixed; inset:0; z-index:102; display:grid; align-items:end; justify-items:center;
  visibility:hidden; pointer-events:none;
}
.today-create-sheet.open { visibility:visible; pointer-events:auto; }
.today-create-backdrop {
  position:absolute; inset:0; width:100%; height:100%; border:0; padding:0;
  background:rgba(0,0,0,.58); opacity:0; cursor:default; transition:opacity .18s ease;
}
.today-create-sheet.open .today-create-backdrop { opacity:1; }
.today-create-panel {
  position:relative; width:min(460px,calc(100vw - 24px)); margin:0 12px 20px;
  padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px));
  border:1px solid var(--border); background:var(--surface); color:var(--fg);
  box-shadow:0 -18px 54px rgba(0,0,0,.28); transform:translateY(calc(100% + 32px)); opacity:0;
  transition:transform .24s cubic-bezier(.22,1,.36,1),opacity .18s ease;
}
.today-create-sheet.open .today-create-panel { transform:translateY(0); opacity:1; }
.today-create-handle { width:40px; height:4px; border-radius:999px; background:var(--border-light); margin:0 auto 10px; }
.today-create-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:2px 0 14px; }
.today-create-heading h2 { margin:3px 0 0; font-size:18px; line-height:1.4; }
.today-create-kicker { color:var(--accent); font:700 9px/1 'DM Mono',monospace; letter-spacing:1.2px; }
.today-create-close {
  flex:0 0 44px; width:44px; height:44px; border:1px solid var(--border); background:var(--bg);
  color:var(--fg-secondary); display:grid; place-items:center; cursor:pointer;
}
.today-create-close .theme-icon { width:18px; height:18px; }
.today-create-options { display:grid; gap:8px; }
.today-create-options>button {
  min-height:64px; width:100%; display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center;
  gap:12px; padding:8px 12px; border:1px solid var(--border); background:var(--bg); color:var(--fg);
  font:inherit; text-align:start; cursor:pointer; transition:background .16s ease,border-color .16s ease,transform .12s ease;
}
.today-create-options>button:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--bg)); }
.today-create-options>button:active { transform:scale(.985); }
.today-create-options>button:focus-visible,.today-create-close:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent); outline-offset:2px; }
.today-create-option-icon {
  width:44px; height:44px; display:grid; place-items:center; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));
}
.today-create-option-icon .theme-icon { width:21px; height:21px; }
.today-create-options strong { display:block; color:var(--fg); font-size:14px; line-height:1.35; }
.today-create-options small { display:block; margin-top:3px; color:var(--fg-secondary); font-size:11px; line-height:1.45; }
html[data-theme="pro"] .today-create-panel { border-radius:var(--radius-xl); background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(18px); }
html[data-theme="pro"] .today-create-close,
html[data-theme="pro"] .today-create-options>button,
html[data-theme="pro"] .today-create-option-icon { border-radius:var(--radius-md); }
@media (max-width: 768px) {
  .reminder-fab { bottom: calc(64px + 16px + env(safe-area-inset-bottom, 0px)); right: 20px; width: 44px; height: 44px; font-size: 22px; border-radius: 10px; }
  .rtl .reminder-fab { right: auto; left: 20px; }
  .today-create-panel {
    width:100%; margin:0; border-inline:0; border-bottom:0;
    padding:10px 16px calc(20px + env(safe-area-inset-bottom,0px));
  }
  .today-create-options>button { min-height:68px; }
}
@media (prefers-reduced-motion:reduce) {
  .today-create-backdrop,.today-create-panel,.today-create-fab .theme-icon { transition:none; }
}

@media (max-width: 768px) {
  .timeline-header { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 8px 12px 0; }
  .timeline-date-nav { width: 150px; }
  .timeline-grid { --tl-row-h: 48px; --tl-label-w: 42px; }
  .timeline-card-abs { height: 20px; font-size: 11px; padding: 0 4px 0 4px; }
  .timeline-card-abs .timeline-card-caption { display: none; }
  .timeline-card-abs .timeline-card-time { font-size: 9px; margin-right: 4px; }
  .rtl .timeline-card-abs .timeline-card-time { margin-right: 0; margin-left: 4px; }
  .timeline-month { font-size: 16px; }
  .timeline-year { font-size: 16px; }
  .timeline-unscheduled { padding: 12px 16px 80px; }
  .month-day-cell { height: 80px; }
  .month-day-num { font-size: 11px; }
  .month-card { font-size: 10px; padding: 0 3px; }
  .month-more { font-size: 9px; }
  .month-header-cell { font-size: 10px; padding: 6px 2px; }
  .tl-view-btn { padding: 3px 6px; font-size: 10px; }
  .tl-view-controls { gap: 6px; }
}
/* remind-before chips */
.remind-before-row { margin-top: 0; }
.remind-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.remind-chip {
  font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: transparent; color: var(--fg); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.remind-chip.active {
  background: var(--accent); color: var(--bg); border-color: var(--accent);
}

/* ===== Message footer (timestamps + action buttons) ===== */
.msg-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  min-height: 16px;
}
.msg-footer > :first-child {
  margin-left: auto;
}
.msg-time {
  font-size: 10px; color: var(--fg-muted); line-height: 1;
  unicode-bidi: plaintext; white-space: nowrap;
}
.msg-actions {
  display: flex; gap: 2px; opacity: 1;
}
.msg-edit-btn, .msg-regen-btn, .msg-copy-btn {
  background: none; border: none; cursor: pointer;
  font-size: 17px; color: var(--fg-secondary); padding: 6px 8px;
  line-height: 1; border-radius: var(--radius-sm); min-width: 32px; min-height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.msg-edit-btn:hover, .msg-regen-btn:hover, .msg-copy-btn:hover {
  color: var(--fg); background: var(--hover);
}

/* ===== Message enter animation ===== */
@keyframes msgSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-message.msg-enter { animation: msgSlideIn 0.25s ease; }

/* ===== Edit message textarea ===== */
.bubble-content:has(.edit-msg-textarea) { display: block !important; min-width: 280px; max-width: 100%; }
.edit-msg-textarea {
  width: 100%; min-height: 60px;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px; font-size: 14px; line-height: 1.6;
  font-family: inherit; resize: vertical;
  unicode-bidi: plaintext;
  box-sizing: border-box;
}
.edit-msg-textarea:focus { outline: none; border-color: var(--accent); }

/* ===== Memory modal ===== */
.memory-modal { max-width: 520px; max-height: 80vh; }
.memory-modal .modal-body { display: flex; flex-direction: column; gap: 12px; max-height: 65vh; overflow: hidden; }
.memory-cards { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1; padding-right: 4px; }
.memory-card {
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  background: var(--surface-raised); overflow: hidden;
}
.memory-card-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--hover);
  border-bottom: 1px solid var(--border-light);
}
.memory-card-title {
  font-size: 12px; font-weight: 600; color: var(--cyan);
  text-transform: uppercase; letter-spacing: 0.5px; flex: 1;
  background: none; border: none; color: var(--cyan);
  font-family: inherit; outline: none; cursor: text;
  padding: 2px 0;
}
.memory-card-title:focus { color: var(--fg); }
.memory-card-delete {
  background: none; border: none; cursor: pointer;
  color: var(--fg-muted); font-size: 16px; padding: 2px 6px;
  border-radius: 4px; line-height: 1;
}
.memory-card-delete:hover { color: var(--danger); background: rgba(239,68,68,.08); }
.memory-card-content {
  width: 100%; min-height: 60px; border: none;
  background: transparent; color: var(--fg);
  padding: 10px 12px; font-size: 13px; line-height: 1.6;
  font-family: inherit; resize: vertical;
  unicode-bidi: plaintext; outline: none;
}
.memory-card-content:focus { background: var(--surface); }
.memory-add-row { display: flex; gap: 8px; align-items: center; }
.memory-card-input {
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font-size: 12px; font-family: inherit;
  height: 34px; outline: none;
}
.memory-card-input:focus { border-color: var(--accent); }
.memory-status { font-size: 12px; color: var(--fg-muted); text-align: center; }
.memory-actions { display: flex; gap: 8px; flex-direction: row-reverse; }

/* ===== Memory button in chat header ===== */
.memory-btn { font-size: 14px; }

/* ===== Thinking toggle button ===== */
.thinking-btn { font-size: 14px; opacity: 0.5; transition: opacity 0.2s, box-shadow 0.2s; }
.thinking-btn.active { opacity: 1; box-shadow: 0 0 8px var(--accent, #00d4ff); }
.thinking-btn:hover { opacity: 0.8; }
html[data-theme="pro"] .thinking-btn.active { box-shadow: 0 0 12px var(--accent, #00d4ff); }

/* ===== Thinking indicator in chat ===== */
.thinking-bubble { opacity: 0.6; }
.thinking-dots {
  display: inline-block;
  animation: thinkingPulse 1.2s ease-in-out infinite;
  font-weight: bold;
  letter-spacing: 2px;
}
@keyframes thinkingPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ===== Version paginator ===== */
.version-paginator {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 6px; padding: 2px 0;
}
.version-btn {
  background: none; border: 1px solid var(--border); cursor: pointer;
  font-size: 11px; color: var(--fg-secondary); padding: 2px 6px;
  line-height: 1; border-radius: var(--radius-xs); min-width: 24px; min-height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.version-btn:hover:not(:disabled) { color: var(--fg); background: var(--hover); }
.version-btn:disabled { opacity: 0.3; cursor: default; }
.version-indicator {
  font-size: 11px; color: var(--fg-muted); font-variant-numeric: tabular-nums;
}

/* ===== Edit message fade animation ===== */
.msg-old-fadeout {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0; transform: translateY(-4px);
}

/* RTL overrides */
.rtl .memory-actions { justify-content: flex-start; }
.rtl .version-paginator { direction: ltr; }

/* ===== Inline linked items in transcript tab ===== */
.inline-linked-items {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.linked-section-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: 8px; margin-top: 12px;
  letter-spacing: 0.5px;
}
.linked-section-title:first-child { margin-top: 0; }
.inline-linked-items .action-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; font-size: 13px;
}
.inline-linked-items .action-check {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid var(--border); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.15s;
}
.inline-linked-items .action-check.done {
  background: var(--accent); border-color: var(--accent);
  color: #fff;
}
.inline-linked-items .action-text { color: var(--fg); }
.inline-linked-items .action-text.done {
  text-decoration: line-through; color: var(--fg-muted);
}

/* ===== Recording card processing state ===== */
.note-row.processing { opacity: 0.7; }
.note-row.processing .note-badge { animation: badge-pulse 1.5s ease-in-out infinite; }
@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ===== Upload status ===== */
.upload-status {
  font-size: 12px;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  text-align: center;
  transition: all 0.3s ease;
}
.upload-status.uploading {
  color: var(--info);
  background: rgba(59, 130, 246, 0.1);
}
.upload-status.complete {
  color: var(--success);
  background: rgba(16, 185, 129, 0.1);
}
.upload-status.failed {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}
/* ===== FEKRHOT REVISED: product-level navigation and accessibility ===== */
.logo small { display:block; margin-top:4px; font:600 8px/1 'DM Mono',monospace; letter-spacing:1.8px; color:var(--accent); }
.revised-secondary-nav,
.revised-secondary-tab { display:none !important; }
html:not([data-theme="pro"]) button:focus-visible,
html:not([data-theme="pro"]) a:focus-visible,
html:not([data-theme="pro"]) input:focus-visible,
html:not([data-theme="pro"]) textarea:focus-visible,
html:not([data-theme="pro"]) select:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent); outline-offset:2px; }
.note-row .note-badge[data-status="completed"], .note-row .note-badge.completed { display:none; }
.capture-review-modal { width:min(720px,calc(100vw - 28px)); max-height:min(880px,calc(100dvh - 28px)); overflow:auto; border-radius:24px; padding:0; }
.capture-review-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:26px 28px 18px; border-bottom:1px solid var(--border); }
.capture-review-head h2 { margin:5px 0 4px; font-size:24px; }
.capture-review-head p { margin:0; color:var(--fg-secondary); }
.capture-review-kicker { color:var(--accent); font:700 10px/1 'DM Mono',monospace; letter-spacing:1.4px; }
.capture-review-progress { display:grid; grid-template-columns:repeat(3,1fr); padding:18px 28px 4px; }
.capture-review-progress span { position:relative; display:grid; grid-template-columns:26px 1fr; align-items:center; gap:8px; color:var(--fg-secondary); font-size:12px; }
.capture-review-progress span::after { content:""; position:absolute; height:2px; background:var(--success); inset-inline-start:26px; inset-inline-end:0; top:13px; opacity:.35; }
.capture-review-progress span:last-child::after { display:none; }
.capture-review-progress span { width:26px; height:26px; border-radius:999px; background:var(--success); color:#fff; place-items:center; z-index:1; }
.capture-review-progress b { position:absolute; top:32px; color:var(--fg-secondary); font-size:10px; font-weight:600; white-space:nowrap; }
.capture-review-body { padding:34px 28px 18px; display:grid; gap:16px; }
.capture-review-field { display:grid; gap:7px; }
.capture-review-field>span { color:var(--fg-secondary); font-size:12px; font-weight:650; }
.capture-review-field input { min-height:48px; font-size:17px; font-weight:650; }
.capture-review-section { border:1px solid var(--border); border-radius:16px; padding:16px; background:color-mix(in srgb,var(--surface) 85%,transparent); }
.capture-review-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.capture-review-section-head h3 { margin:0; font-size:14px; }
.capture-review-section-head p { margin:4px 0 0; color:var(--fg-muted); font-size:11px; }
.capture-review-section-head button { border:0; background:transparent; color:var(--accent); font:inherit; font-size:12px; cursor:pointer; }
.capture-review-section-head strong { min-width:24px; min-height:24px; display:grid; place-items:center; border-radius:999px; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); font-size:11px; }
.capture-review-section>p { margin:0; line-height:1.8; color:var(--fg-secondary); white-space:pre-wrap; }
.capture-review-actions { display:grid; gap:0; border-top:1px solid var(--border); }
.capture-action-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); }
.capture-action-copy { min-width:0; }
.capture-action-label { display:flex; align-items:center; gap:7px; color:var(--accent); font-size:10px; font-weight:700; }
.capture-action-label span { color:var(--fg-muted); font-weight:600; }
.capture-action-title { margin-top:4px; color:var(--fg); font-size:14px; font-weight:650; line-height:1.5; }
.capture-action-details { margin-top:4px; color:var(--fg-muted); font-size:11px; }
.capture-action-details summary { width:max-content; cursor:pointer; color:var(--fg-secondary); }
.capture-action-details p { margin:5px 0 0; line-height:1.6; }
.capture-action-controls { display:flex; gap:6px; }
.capture-action-controls button { min-height:34px; padding:6px 11px; font-size:11px; }
.capture-review-empty { color:var(--fg-muted); font-size:13px; padding:12px 0; }
.capture-review-footer { position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:10px; padding:16px 28px 22px; border-top:1px solid var(--border); background:var(--surface); }
.capture-review-footer button { min-height:44px; }
@media (max-width:640px) {
  .capture-review-modal { width:100%; max-height:94dvh; align-self:end; border-radius:24px 24px 0 0; }
  .capture-review-head,.capture-review-body,.capture-review-footer { padding-inline:18px; }
  .capture-action-row { grid-template-columns:1fr; gap:9px; }
  .capture-action-controls { justify-content:flex-end; }
  .capture-action-controls button { min-width:84px; min-height:40px; }
  .capture-review-footer { display:grid; grid-template-columns:1fr 1fr; }
  .capture-review-footer .primary-btn { grid-column:1/-1; grid-row:1; }
}