/* Hooshyar · Material 3 Expressive
 * Semantic color roles, shape families, emphasized typography and spring-like
 * interaction. Vanilla web adaptation; no framework/runtime dependency.
 * This is the final theme layer. Existing feature selectors stay compatible.
 */
:root {
  --md-sys-color-primary: #d0bcff;
  --md-sys-color-on-primary: #381e72;
  --md-sys-color-primary-container: #4f378b;
  --md-sys-color-on-primary-container: #eaddff;
  --md-sys-color-secondary: #ccc2dc;
  --md-sys-color-on-secondary: #332d41;
  --md-sys-color-secondary-container: #4a4458;
  --md-sys-color-on-secondary-container: #e8def8;
  --md-sys-color-tertiary: #a8d5c5;
  --md-sys-color-on-tertiary: #11382e;
  --md-sys-color-tertiary-container: #2c5045;
  --md-sys-color-on-tertiary-container: #c4ecdd;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
  --md-sys-color-surface: #141218;
  --md-sys-color-surface-dim: #141218;
  --md-sys-color-surface-bright: #3b383e;
  --md-sys-color-surface-container-lowest: #0f0d13;
  --md-sys-color-surface-container-low: #1d1b20;
  --md-sys-color-surface-container: #211f26;
  --md-sys-color-surface-container-high: #2b2930;
  --md-sys-color-surface-container-highest: #36343b;
  --md-sys-color-on-surface: #e6e0e9;
  --md-sys-color-on-surface-variant: #cac4d0;
  --md-sys-color-outline: #938f99;
  --md-sys-color-outline-variant: #49454f;
  --md-sys-color-inverse-surface: #e6e0e9;
  --md-sys-color-inverse-on-surface: #322f35;
  --md-sys-color-scrim: #000;
  --md-ref-typeface-plain: 'Inter', 'Vazirmatn', system-ui, sans-serif;
  --md-ref-typeface-brand: 'Manrope', 'Vazirmatn', 'Inter', system-ui, sans-serif;
  --md-sys-shape-corner-xs: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 16px;
  --md-sys-shape-corner-large: 24px;
  --md-sys-shape-corner-xl: 32px;
  --md-sys-shape-corner-xxl: 48px;
  --md-sys-shape-corner-full: 999px;
  --md-sys-motion-standard: cubic-bezier(.2, 0, 0, 1);
  --md-sys-motion-expressive: cubic-bezier(.2, .85, .25, 1.16);
  --md-sys-motion-duration-short: 180ms;
  --md-sys-motion-duration-medium: 380ms;
  --md-sys-elevation-1: 0 2px 6px #0000001f, 0 1px 2px #0000001f;
  --md-sys-elevation-2: 0 6px 20px #00000024, 0 2px 6px #0000001a;
  --md-sys-elevation-3: 0 12px 40px #00000030, 0 4px 12px #0000001a;
  --bg: var(--md-sys-color-surface);
  --surface: var(--md-sys-color-surface-container);
  --panel: var(--md-sys-color-surface-container-high);
  --hover: var(--md-sys-color-surface-container-highest);
  --line: var(--md-sys-color-outline-variant);
  --text: var(--md-sys-color-on-surface);
  --muted: var(--md-sys-color-on-surface-variant);
  --blue: var(--md-sys-color-primary);
  --accent: var(--md-sys-color-primary-container);
  --bubble: var(--md-sys-color-secondary-container);
  --shadow: var(--md-sys-elevation-3);
  --rail: 96px;
  --radius: 28px;
  font-family: var(--md-ref-typeface-plain);
  color-scheme: dark;
}
html[data-theme=light] {
  --md-sys-color-primary: #6750a4;
  --md-sys-color-on-primary: #fff;
  --md-sys-color-primary-container: #eaddff;
  --md-sys-color-on-primary-container: #4f378b;
  --md-sys-color-secondary: #625b71;
  --md-sys-color-on-secondary: #fff;
  --md-sys-color-secondary-container: #e8def8;
  --md-sys-color-on-secondary-container: #4a4458;
  --md-sys-color-tertiary: #446559;
  --md-sys-color-on-tertiary: #fff;
  --md-sys-color-tertiary-container: #c6ecdc;
  --md-sys-color-on-tertiary-container: #2d4d41;
  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #fff;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-on-error-container: #8c1d18;
  --md-sys-color-surface: #fef7ff;
  --md-sys-color-surface-dim: #ded8e1;
  --md-sys-color-surface-bright: #fef7ff;
  --md-sys-color-surface-container-lowest: #fff;
  --md-sys-color-surface-container-low: #f7f2fa;
  --md-sys-color-surface-container: #f3edf7;
  --md-sys-color-surface-container-high: #ece6f0;
  --md-sys-color-surface-container-highest: #e6e0e9;
  --md-sys-color-on-surface: #1d1b20;
  --md-sys-color-on-surface-variant: #49454f;
  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #cac4d0;
  --md-sys-color-inverse-surface: #322f35;
  --md-sys-color-inverse-on-surface: #f5eff7;
  --bg: var(--md-sys-color-surface);
  --surface: var(--md-sys-color-surface-container);
  --panel: var(--md-sys-color-surface-container-high);
  --hover: var(--md-sys-color-surface-container-highest);
  --line: var(--md-sys-color-outline-variant);
  --text: var(--md-sys-color-on-surface);
  --muted: var(--md-sys-color-on-surface-variant);
  --blue: var(--md-sys-color-primary);
  --accent: var(--md-sys-color-primary-container);
  --bubble: var(--md-sys-color-secondary-container);
  --shadow: var(--md-sys-elevation-3);
  color-scheme: light;
}
html[dir=rtl] { --md-ref-typeface-plain: 'Vazirmatn', 'Inter', system-ui, sans-serif; --md-ref-typeface-brand: 'Vazirmatn', 'Manrope', system-ui, sans-serif; font-family: var(--md-ref-typeface-plain); }
body { background: var(--md-sys-color-surface-container-low); font-family: var(--md-ref-typeface-plain); font-size: 14px; }
::selection { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
* { scrollbar-width: thin; scrollbar-color: var(--md-sys-color-outline-variant) transparent; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; transition: background-color 180ms, color 180ms, border-radius 380ms var(--md-sys-motion-expressive), transform 250ms var(--md-sys-motion-expressive), box-shadow 180ms; }
button:hover { background-color: color-mix(in srgb, var(--text) 8%, transparent); }
button:active:not(:disabled) { transform: scale(.96); }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
svg.icon { stroke-width: 1.8; }
.ico { width: 48px; height: 48px; border-radius: 50%; }
.ico[title]:hover:after { background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); border: 0; border-radius: 8px; padding: 8px 12px; font-size: 11px; box-shadow: var(--md-sys-elevation-1); }
.pill, .sheet-btn, .hooshyar-native .primary-btn, .hooshyar-native .secondary-btn { min-height: 48px; padding: 12px 24px; border-radius: 999px; gap: 10px; font-weight: 600; letter-spacing: .1px; }
.primary, html[data-theme=light] .primary, .hooshyar-native .primary-btn, .sheet-btn.primary, html[data-theme=light] .sheet-btn.primary { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border: 0; }
.primary:hover, .hooshyar-native .primary-btn:hover, .sheet-btn.primary:hover { background: var(--md-sys-color-primary); filter: brightness(1.08); box-shadow: var(--md-sys-elevation-1); }
.pill:active, .sheet-btn:active, .primary-btn:active { border-radius: 16px; }
.tag, .hooshyar-native .you-badge, .hooshyar-native .adm-badge { border-radius: 8px; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); padding: 4px 9px; }
/* Navigation rail expands into a tonal modal drawer on compact screens. */
body.expanded { --rail: 288px; }
#sidebar, body.expanded #sidebar { background: var(--md-sys-color-surface-container-low); padding: 16px 12px; gap: 4px; transition: width 380ms var(--md-sys-motion-standard), transform 380ms var(--md-sys-motion-standard); }
.rail-head { height: 56px; min-height: 56px; padding: 0; gap: 10px; margin: 0 0 20px; justify-content: center; }
.rail-head .ico { height: 48px; width: 48px; }
.rail-head > .ico:first-child { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); border-radius: 18px; }
.rail-head .spark { width: 28px; height: 28px; }
body.expanded .rail-head { justify-content: flex-start; }
.rail-head .brand-label { font-family: var(--md-ref-typeface-brand); font-size: 23px; font-weight: 800; letter-spacing: -.7px; }
.rail-top, #nav-bottom { gap: 8px; }
.nav-item { min-height: 60px; padding: 10px 12px; border-radius: 20px; gap: 12px; position: relative; }
.nav-item .icon { width: 24px; height: 24px; opacity: 1; }
body:not(.expanded) .nav-item { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 2px; width: 100%; }
body:not(.expanded) .nav-label { display: block; font-size: 10px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.nav-item.active, .nav-item[aria-current=page] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-weight: 700; }
#nav-top .nav-item[data-action=new], body:not(.expanded) #nav-top .nav-item[data-action=new] { width: 100%; height: auto; min-height: 64px; margin: 0 0 12px; padding: 12px; border-radius: 22px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); box-shadow: var(--md-sys-elevation-1); }
#nav-top .nav-item[data-action=new]:hover { border-radius: 32px; }
.expanded .nav-item { min-height: 52px; padding: 12px 18px; border-radius: 28px; }
.expanded #nav-top .nav-item[data-action=new] { min-height: 60px; }
.rail-bottom { border: 0; padding-top: 12px; }
.nav-item.profile-row { border-radius: 24px; padding: 8px 12px; min-height: 60px; background: var(--md-sys-color-surface-container-high); }
.profile, .vertical-profile .profile { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); border-radius: 14px; font-weight: 700; }
.profile { width: 32px; height: 32px; }
.recent { border: 0; margin-top: 16px; padding-top: 0; }
.recent-heading, .rail-group-label { color: var(--md-sys-color-secondary); font-size: 12px; font-weight: 700; padding-inline: 16px; }
.recent-item { border-radius: 18px; min-height: 48px; margin-block: 4px; }
.recent-item.current { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.recent-title { padding: 14px 10px; font-size: 13px; }
.recent-item .ico { min-width: 36px; min-height: 36px; }
.empty-recent { margin: 10px 8px; padding: 16px; background: var(--surface); border-radius: 20px; font-size: 12px; }
/* A real grid, rather than viewport-positioned fragments, keeps the welcome
   text, composer and starter cards from overlapping on short viewports. */
#main { margin: 12px 12px 12px calc(var(--rail) + 0px); margin-inline-start: var(--rail); margin-inline-end: 12px; height: calc(100dvh - 24px); background: var(--bg); border: 1px solid color-mix(in srgb, var(--line) 40%, transparent); border-radius: 32px; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 80px minmax(200px,1fr) auto minmax(175px,1fr) 36px; overflow: hidden; transition: margin 380ms var(--md-sys-motion-standard); }
#main > header { grid-row: 1; grid-column: 1; height: 80px; min-height: 80px; padding: 16px 24px; gap: 10px; z-index: 2; }
.header-app { background: transparent; border: 1px solid var(--line); height: 44px; min-height: 44px; padding-inline: 18px; }
header > .primary { min-height: 44px; padding: 10px 20px; }
.mobile-brand { font-family: var(--md-ref-typeface-brand); font-weight: 800; }
#home { display: contents; position: static; pointer-events: auto; }
.expressive-intro { grid-row: 2; grid-column: 1; align-self: end; text-align: center; padding: 12px 24px 28px; }
.expressive-emblem { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 18px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); border-radius: 28px 20px 28px 20px; transform: rotate(-8deg); }
.expressive-emblem .icon { width: 34px; height: 34px; transform: rotate(8deg); stroke-width: 1.7; }
.expressive-eyebrow { font-size: 11px; font-weight: 800; color: var(--md-sys-color-primary); letter-spacing: 2px; margin: 0 0 12px; text-transform: uppercase; }
html[dir=rtl] .expressive-eyebrow { letter-spacing: 0; }
#home h1 { position: static; width: auto; font-family: var(--md-ref-typeface-brand); font-size: clamp(32px,3.6vw,52px); font-weight: 800; letter-spacing: -1.8px; line-height: 1.3; margin: 0; color: var(--text); }
html[dir=rtl] #home h1 { letter-spacing: -1px; line-height: 1.55; }
.expressive-subtitle { font-size: 15px; line-height: 1.8; color: var(--muted); margin: 12px 0 0; }
#composer-wrap { grid-row: 3; grid-column: 1; position: relative; inset: auto; top: auto; left: auto; transform: none; align-self: start; justify-self: center; width: min(760px,calc(100% - 80px)); z-index: 12; }
.composer { padding: 16px; border-radius: 32px; background: var(--md-sys-color-surface-container); border: 1px solid var(--line); box-shadow: none; transition: border-color 200ms, box-shadow 200ms, border-radius 380ms var(--md-sys-motion-expressive); }
.composer:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb,var(--blue) 12%,transparent); }
.compose-main { display: grid; grid-template-columns: 48px minmax(0,1fr) 48px 48px; gap: 8px; align-items: center; }
#prompt { grid-row: 1; grid-column: 1 / -1; width: 100%; min-height: 58px; padding: 8px 8px 14px; font-size: 17px; line-height: 1.8; margin: 0 0 4px; font-weight: 400; }
#prompt::placeholder { color: var(--muted); opacity: .85; }
.compose-plus { grid-row: 2; grid-column: 1; background: var(--md-sys-color-surface-container-highest); border-radius: 16px; }
.model-button { grid-row: 2; grid-column: 2; justify-self: start; justify-content: flex-start; min-width: 0; width: auto; gap: 8px; min-height: 44px; padding: 10px 16px; background: var(--md-sys-color-surface-container-high); border-radius: 16px; font-size: 12px; font-weight: 600; }
.model-brand { display: inline; }
.model-secondary { color: var(--md-sys-color-primary); }
#mic, #send { grid-row: 2; grid-column: 4; width: 48px; height: 48px; }
#mic { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-radius: 18px; }
#send { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-radius: 18px; }
#send:hover { background: var(--md-sys-color-primary); border-radius: 50%; }
#voice-shortcut { grid-row: 2; grid-column: 3; display: inline-flex; width: 48px; height: 48px; border-radius: 50%; color: var(--md-sys-color-tertiary); }
.tool-chip { padding: 4px 8px 10px; color: var(--blue); }
.tool-chip:not(:empty) { width: fit-content; margin: 0 8px 8px; background: var(--md-sys-color-primary-container); border-radius: 12px; padding: 5px 10px; }
.home-suggestions { grid-row: 4; grid-column: 1; position: static; top: auto; left: auto; transform: none; width: min(760px,calc(100% - 80px)); justify-self: center; align-self: start; margin: 22px 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.suggestion { min-height: 130px; border-radius: 24px 24px 8px 24px; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); overflow: hidden; transition: border-radius 380ms var(--md-sys-motion-expressive), transform 380ms var(--md-sys-motion-expressive), box-shadow 200ms; }
.suggestion:nth-child(2) { border-radius: 24px 8px 24px 24px; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.suggestion:nth-child(3) { border-radius: 8px 24px 24px 24px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.suggestion:hover { background: var(--md-sys-color-secondary-container); border-radius: 32px; box-shadow: var(--md-sys-elevation-1); transform: translateY(-3px); }
.suggestion:nth-child(2):hover { background: var(--md-sys-color-tertiary-container); }
.suggestion:nth-child(3):hover { background: var(--md-sys-color-primary-container); }
.suggestion > button:first-child { align-self: stretch; align-items: flex-start; justify-content: space-between; flex-direction: column; gap: 18px; padding: 20px; min-height: 130px; font-size: 13px; font-weight: 600; line-height: 1.7; border-radius: inherit; }
.suggestion > button:first-child:hover { background: transparent; }
.suggestion .icon { width: 24px; height: 24px; }
.suggestion .dismiss { top: 8px; inset-inline-end: 8px; width: 36px; height: 36px; background: transparent; color: inherit; }
.suggestion .dismiss .icon { width: 16px; height: 16px; }
.footer-note { grid-row: 5; grid-column: 1; position: static; align-self: center; padding: 0 16px; opacity: .85; font-size: 10px; line-height: 1.8; }
#hooshyar-notice { position: absolute; top: 80px; inset-inline: 20px; z-index: 15; border-radius: 16px; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); margin: 0; }
/* Conversation, file cards, code and multi-stage AI processing. */
body.chatting #main { display: flex; }
.chatting #home { display: none; }
#messages { padding: 26px max(28px,calc((100% - 800px)/2)) 245px; scroll-padding-block: 24px 220px; }
.chatting #composer-wrap { position: absolute; top: auto; bottom: 42px; left: 50%; transform: translateX(-50%); width: min(800px,calc(100% - 64px)); }
.chatting .composer { border-radius: 28px; box-shadow: var(--md-sys-elevation-2); }
.chatting .footer-note { position: absolute; bottom: 12px; left: 12px; right: 12px; padding: 0; }
.message { margin-bottom: 34px; font-size: 15px; line-height: 1.9; }
.bubble { padding: 16px 22px; border-radius: 28px 28px 8px 28px; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
html[dir=rtl] .bubble { border-radius: 28px 28px 28px 8px; }
/* Keep the avatar above the answer; no reserved side column in LTR or RTL. */
.message.assistant { grid-template-columns: minmax(0,1fr); gap: 12px; width: 100%; min-width: 0; }
.message.assistant > div { min-width: 0; width: 100%; }
.message.assistant > .spark { justify-self: start; }
.message.assistant > .spark { width: 40px; height: 40px; margin-top: 2px; padding: 8px; background: var(--md-sys-color-primary-container); border-radius: 15px; }
.answer h2, .answer h3 { font-family: var(--md-ref-typeface-brand); font-weight: 750; }
.answer-actions { gap: 4px; margin-top: 16px; }
.answer-actions .ico { width: 40px; height: 40px; border-radius: 14px; }
.answer-actions .selected { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.answer .codebox, .answer .md-table { border-radius: 20px; border-color: var(--line); }
.codehead { background: var(--md-sys-color-surface-container-high); padding: 12px 16px; }
.codebox pre { background: var(--md-sys-color-surface-container-low); padding: 20px; }
.codehead button { min-height: 36px; border-radius: 12px; }
.answer .md-table th { background: var(--md-sys-color-surface-container-high); }
.answer .md-table td, .answer .md-table th { padding: 14px; }
.file-chip, .inline-files button { border-radius: 16px; background: var(--md-sys-color-surface-container-high); border: 1px solid var(--line); padding: 8px; }
.file-chip .ico { min-width: 32px; min-height: 32px; }
.scroll-bottom { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); border: 0; border-radius: 16px; bottom: 238px; box-shadow: var(--md-sys-elevation-2); }
.agent-panel, .pp-card { border-radius: 24px; background: var(--md-sys-color-surface-container); border: 1px solid var(--line); }
.pp-card { padding: 18px; }
.pp-head b, .agent-head b { font-weight: 700; }
.agent-head { padding: 16px 18px; min-height: 56px; }
.agent-count { margin-left: 0; margin-inline-start: auto; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border: 0; padding: 5px 10px; }
.at-hide { margin-left: 0; margin-inline-start: auto; }
.agent-tool { border-radius: 16px; background: var(--md-sys-color-surface-container-low); }
.pp-mode, .pipeline-mode, .pp-elapsed { border: 0; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); padding: 5px 12px; }
.pp-bar { height: 6px; background: var(--md-sys-color-primary-container); border-radius: 99px; }
.pp-bar span { background: var(--md-sys-color-primary); }
.pp-think { color: var(--md-sys-color-primary); background: none; -webkit-text-fill-color: currentColor; }
.pp-line { border-inline-start-color: var(--md-sys-color-tertiary); }
.thinking i { width: 7px; height: 7px; background: var(--blue); }
/* Menus, dialogs, sheets and grouped settings share the same role system. */
#popup { padding: 8px; border: 0; border-radius: 24px; background: var(--md-sys-color-surface-container-high); box-shadow: var(--md-sys-elevation-3); }
.menu-item { min-height: 52px; padding: 12px 16px; border-radius: 16px; gap: 14px; line-height: 1.5; }
.menu-item.selected { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.menu-item .desc { font-size: 11px; line-height: 1.7; }
.menu-heading { padding: 14px 16px 8px; font-size: 11px; font-weight: 700; color: var(--md-sys-color-secondary); }
.menu-divider { background: var(--line); opacity: .65; margin: 8px 12px; }
.menu-item.danger, .danger-text, .error-box { color: var(--md-sys-color-error); }
.modal-backdrop { padding: 24px; background: #0008; backdrop-filter: blur(5px); }
.modal, .modal.vertical-menu-modal, .modal.vertical-detail-modal { background: var(--md-sys-color-surface-container-high); color: var(--text); border: 0; border-radius: 32px; padding: 28px; box-shadow: var(--md-sys-elevation-3); }
.modal.vertical-menu-modal { width: min(460px,100%); }
.modal h2, .vertical-menu-modal .modal-header h2 { font-family: var(--md-ref-typeface-brand); font-size: 26px; font-weight: 750; line-height: 1.5; letter-spacing: -.5px; }
.modal h3 { font-size: 16px; font-weight: 700; }
.modal-header { gap: 16px; margin-bottom: 24px; }
.modal-header > .ico { background: var(--md-sys-color-surface-container-highest); width: 44px; height: 44px; border-radius: 16px; }
.modal .tabs, .hooshyar-native .tabs { gap: 4px; border: 0; background: var(--md-sys-color-surface-container); border-radius: 24px; padding: 6px; margin-bottom: 20px; }
.modal .tabs button, .hooshyar-native .tabs button { min-height: 52px; border-radius: 18px; padding: 14px 16px; font-weight: 600; }
.tabs button.active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.vertical-group-label { font-weight: 700; color: var(--md-sys-color-secondary); padding: 16px 8px 10px; }
.vertical-panel-menu { gap: 3px; padding: 6px; background: var(--md-sys-color-surface-container); border-radius: 24px; }
.vertical-menu-row, .vertical-menu-modal .menu-item { min-height: 56px; border-radius: 18px; padding: 14px 16px; font-size: 14px; }
.vertical-menu-row > .icon { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); width: 36px; height: 36px; padding: 8px; border-radius: 12px; opacity: 1; }
.vertical-back { min-height: 44px; border-radius: 16px; padding: 10px 14px; color: var(--blue); background: var(--md-sys-color-primary-container); width: fit-content; }
.vertical-profile { border: 0; padding: 16px; margin: 0 0 20px; border-radius: 24px; background: var(--md-sys-color-secondary-container); }
.vertical-profile .profile { border-radius: 18px; }
.vertical-profile strong { font-weight: 750; }
.field > span, .field > label, .hooshyar-native .field label { font-size: 12px; color: var(--md-sys-color-secondary); font-weight: 600; }
.field input, .field textarea, .field select, .search-input, .hooshyar-native .field input, .hooshyar-native .field textarea, .hooshyar-native select, .hooshyar-native .apikey-row input, .setting-row select { min-height: 52px; border: 1px solid var(--md-sys-color-outline); border-radius: 16px; padding: 14px 16px; background: var(--md-sys-color-surface-container-low); color: var(--text); line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); }
.search-wrap .search-input { min-height: 56px; border: 0; border-radius: 999px; padding-inline-start: 48px; background: var(--md-sys-color-surface-container-highest); }
.search-wrap .icon { inset-inline-start: 18px; }
.setting-row, .hooshyar-native .setting-row { min-height: 72px; padding: 16px; background: var(--md-sys-color-surface-container); border: 0; margin-block: 4px; border-radius: 18px; }
.setting-row:first-of-type { border-start-start-radius: 24px; border-start-end-radius: 24px; }
.setting-row:last-of-type { border-end-start-radius: 24px; border-end-end-radius: 24px; }
.modal-actions { gap: 10px; margin-top: 24px; }
.switch, .hooshyar-native .switch { width: 52px; height: 32px; min-width: 52px; border: 2px solid var(--md-sys-color-outline); background: var(--md-sys-color-surface-container-highest); border-radius: 999px; padding: 0; position: relative; }
.switch::after, .hooshyar-native .switch::after { content: ''; position: absolute; inset-block-start: 6px; inset-inline-start: 6px; left: auto; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--md-sys-color-outline); transition: inset-inline-start 300ms var(--md-sys-motion-expressive), width 200ms, height 200ms, top 200ms; }
.switch.on, .hooshyar-native .switch.on { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
.switch.on::after, .hooshyar-native .switch.on::after { inset-inline-start: 24px; left: auto; top: 2px; width: 24px; height: 24px; background: var(--md-sys-color-on-primary); }
html[dir=ltr] .switch::after { left: 6px; }
html[dir=ltr] .switch.on::after { left: 24px; }
.switch > i, .hooshyar-native .switch > i { display: none; }
input[type=checkbox], input[type=radio], .pipeline-stage-card input[type=checkbox], .pipeline-settings input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--blue); cursor: pointer; }
.empty-state { padding: 40px 20px; border-radius: 28px; background: var(--md-sys-color-surface-container); }
.empty-state > .icon { color: var(--md-sys-color-primary); width: 56px; height: 56px; padding: 12px; background: var(--md-sys-color-primary-container); border-radius: 20px; }
.list-card, .hooshyar-native .card, .hooshyar-native .summary-card, .hooshyar-native .plan { padding: 20px; background: var(--md-sys-color-surface-container); border: 0; border-radius: 24px; }
.modal-list { gap: 8px; }
.list-card .ico { width: 44px; height: 44px; }
.callout { border: 0; border-radius: 20px; padding: 16px 20px; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-size: 12px; line-height: 1.9; }
.hooshyar-native .summary-card strong { font-family: var(--md-ref-typeface-brand); font-size: 36px; font-weight: 800; color: var(--blue); }
.hooshyar-native .plan .price { font-family: var(--md-ref-typeface-brand); font-size: 32px; font-weight: 800; }
.hooshyar-native .secondary-btn { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border: 0; }
.hooshyar-native .atable tr { border-radius: 24px; padding: 16px 20px; background: var(--md-sys-color-surface-container); border-color: transparent; }
.hooshyar-native .atable td { border-color: var(--line); }
.hooshyar-native .cact { min-width: 44px; min-height: 44px; border-radius: 14px; background: var(--md-sys-color-surface-container-highest); }
.image-card { border-radius: 24px; background: var(--md-sys-color-surface-container); }
.image-card span { padding: 14px; }
.studio-editor, .studio-preview { border-radius: 20px; border-color: var(--line); }
.voice-orb { background: radial-gradient(circle at 30% 30%,var(--md-sys-color-tertiary-container),var(--md-sys-color-primary) 70%); box-shadow: 0 0 0 16px var(--md-sys-color-primary-container); border-radius: 42% 58% 58% 42%; }
#settings-sheet, html[data-theme=light] #settings-sheet { width: 336px; border: 0; border-radius: 28px; background: var(--md-sys-color-surface-container-high); color: var(--text); box-shadow: var(--md-sys-elevation-3); transition: opacity 200ms, transform 380ms var(--md-sys-motion-expressive); }
.sheet-body { padding: 12px; }
.sheet-head, html[data-theme=light] .sheet-head { font-size: 11px; font-weight: 700; color: var(--md-sys-color-secondary); padding: 16px 12px 8px; }
.sheet-row, html[data-theme=light] .sheet-row { min-height: 50px; padding: 12px; border-radius: 16px; font-size: 13px; gap: 12px; background: transparent; }
.sheet-row .icon { width: 22px; height: 22px; }
.sheet-row:hover, html[data-theme=light] .sheet-row:hover { background: var(--md-sys-color-surface-container-highest); }
.sheet-row.sel, html[data-theme=light] .sheet-row.sel { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.sheet-row.danger, html[data-theme=light] .sheet-row.danger { color: var(--md-sys-color-error); }
.sheet-row .chk, html[data-theme=light] .sheet-row .chk { color: var(--blue); }
.sheet-title, html[data-theme=light] .sheet-title { color: var(--text); font-size: 17px; font-weight: 700; }
.sheet-close, .sheet-mini, .sheet-dots { width: 44px; height: 44px; border-radius: 16px; }
.sheet-close, .sheet-close:hover { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.sheet-field input, html[data-theme=light] .sheet-field input { min-height: 52px; border: 1px solid var(--md-sys-color-outline); border-radius: 16px; padding: 12px 16px; background: var(--md-sys-color-surface-container-low); color: var(--text); font-size: 13px; }
.sheet-field > span, html[data-theme=light] .sheet-field > span, .sheet-note, html[data-theme=light] .sheet-note, .sheet-body .subtle, html[data-theme=light] .sheet-body .subtle { color: var(--muted); }
.sheet-btn, html[data-theme=light] .sheet-btn { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.sheet-btn.primary, html[data-theme=light] .sheet-btn.primary { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.sheet-back { min-height: 44px; border-radius: 16px; }
.sheet-stat, html[data-theme=light] .sheet-stat { border-radius: 20px; padding: 16px; background: var(--md-sys-color-surface-container); }
.sheet-stat b { font-size: 28px; font-weight: 800; color: var(--blue); }
.sheet-stat span, html[data-theme=light] .sheet-stat span { color: var(--muted); }
.sheet-kbd, .sheet-help, html[data-theme=light] .sheet-kbd, html[data-theme=light] .sheet-help { color: var(--muted); }
#modal-root #dbPanel .db-kv > div { border-radius: 20px; background: var(--md-sys-color-surface-container); border: 0; padding: 16px; }
#modal-root #dbPanel .db-presets button { min-height: 44px; border-radius: 14px; background: var(--md-sys-color-surface-container); }
#modal-root #dbPanel .db-presets button.on { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; }
#modal-root #dbPanel .db-snippet { border: 0; border-radius: 20px; padding: 16px; }
#modal-root #dbPanel .db-chk { min-height: 44px; }
#modal-root #dbPanel .db-chk input { width: 20px; height: 20px; accent-color: var(--blue); }
#modal-root #dbPanel .db-warn, .pipeline-status.err { border: 0; border-radius: 20px; background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); padding: 16px; }
.pipeline-status.ok { border-radius: 20px; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.toast { background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); border-radius: 20px; padding: 16px 24px; box-shadow: var(--md-sys-elevation-2); bottom: max(24px,env(safe-area-inset-bottom)); }
.drop-overlay { inset: 16px; border-radius: 48px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); border-color: var(--blue); }
/* Motion is deliberately finite; no perpetual animation on the welcome page. */
.expressive-intro { animation: m3-arrive 600ms var(--md-sys-motion-standard) both; }
.suggestion { animation: none; } /* Stable cards: never replay entrance on data restoration. */
.modal { animation: m3-dialog-in 380ms var(--md-sys-motion-expressive) both; }
#popup:not(.hidden) { animation: m3-dialog-in 220ms var(--md-sys-motion-standard); }
.m3-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .12; transform: scale(0); animation: m3-ripple 480ms var(--md-sys-motion-standard) forwards; }
.m3-ripple-host { position: relative; overflow: hidden; isolation: isolate; }
@keyframes m3-ripple { to { transform: scale(1); opacity: 0; } }
@keyframes m3-arrive { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes m3-dialog-in { from { opacity: 0; scale: .96; translate: 0 12px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@media (hover:none) { .recent-item .ico { opacity: 1; } .ico[title]:hover:after { display: none; } .suggestion:hover { transform: none; box-shadow: none; } }
@media (min-width:761px) and (max-height:760px) {
  #main { grid-template-rows: 72px minmax(140px,1fr) auto minmax(150px,1fr) 30px; }
  #main > header { min-height: 72px; height: 72px; }
  .expressive-emblem { width: 50px; height: 50px; margin-bottom: 12px; border-radius: 18px 14px; }
  .expressive-emblem .icon { width: 28px; height: 28px; }
  .expressive-eyebrow { margin-bottom: 6px; }
  .expressive-intro { padding-bottom: 20px; }
  #home h1 { font-size: 36px; }
  .expressive-subtitle { margin-top: 6px; font-size: 13px; }
  .suggestion, .suggestion > button:first-child { min-height: 112px; }
  .suggestion > button:first-child { gap: 12px; padding: 16px; }
  .home-suggestions { margin-top: 18px; }
  .rail-head { margin-bottom: 10px; }
  .rail-top, #nav-bottom { gap: 4px; }
  .nav-item { min-height: 52px; }
}
@media (max-width:1000px) and (min-width:761px) {
  #composer-wrap, .home-suggestions { width: calc(100% - 48px); }
  body.expanded { --rail: 260px; }
  .suggestion > button:first-child { padding: 16px; font-size: 12px; }
}
@media (max-width:760px) {
  :root, body.expanded { --rail: 0px; }
  body { background: var(--bg); }
  #main { margin: 0; height: 100dvh; border-radius: 0; border: 0; grid-template-rows: 72px minmax(175px,1fr) auto minmax(175px,1fr) 40px; overflow-y: auto; }
  #main > header { height: 72px; min-height: 72px; padding: 12px 16px; gap: 6px; }
  header > .primary { min-height: 40px; padding: 10px 16px; font-size: 12px; }
  .mobile-brand { font-size: 20px; }
  .mobile-menu { width: 44px; height: 44px; border-radius: 16px; background: var(--md-sys-color-surface-container); }
  #sidebar, body.expanded #sidebar { width: min(320px,calc(100vw - 40px)); border-start-end-radius: 32px; border-end-end-radius: 32px; padding: max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); box-shadow: var(--md-sys-elevation-3); }
  #scrim { background: #0008; backdrop-filter: blur(2px); }
  #sidebar .rail-head { justify-content: flex-start; margin-bottom: 18px; }
  #sidebar .rail-search { display: inline-flex; }
  body:not(.expanded) #sidebar .nav-item, #sidebar .nav-item { flex-direction: row; justify-content: flex-start; min-height: 52px; padding: 12px 18px; gap: 14px; border-radius: 28px; }
  body:not(.expanded) #sidebar .nav-label, #sidebar .nav-label { display: block; font-size: 14px; }
  #sidebar .rail-group-label { display: block; }
  #sidebar .profile-row { flex-direction: row; }
  .expressive-intro { padding: 20px 20px 24px; }
  .expressive-emblem { width: 56px; height: 56px; margin-bottom: 16px; border-radius: 22px 16px; }
  .expressive-emblem .icon { width: 28px; height: 28px; }
  .expressive-eyebrow { font-size: 10px; margin-bottom: 8px; }
  #home h1 { font-size: 32px; padding: 0; letter-spacing: -1px; }
  html[dir=rtl] #home h1 { letter-spacing: -.7px; }
  .expressive-subtitle { font-size: 13px; margin-top: 8px; }
  #composer-wrap, .home-suggestions { width: calc(100% - 32px); }
  .composer { border-radius: 28px; padding: 12px; }
  .compose-main { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px 44px; gap: 4px; }
  #prompt { order: unset; grid-column: 1 / -1; margin: 0 0 8px; min-height: 56px; padding: 6px; font-size: 16px; }
  .compose-plus { order: unset; width: 44px; height: 44px; border-radius: 14px; }
  .model-button { order: unset; margin: 0; padding: 10px 12px; font-size: 12px; gap: 6px; border-radius: 14px; min-height: 44px; }
  .model-button .model-brand { display: none; }
  #voice-shortcut { order: unset; width: 44px; height: 44px; }
  #mic, #send { order: unset; width: 44px; height: 44px; border-radius: 16px; }
  .home-suggestions { margin-block: 16px; gap: 8px; }
  .suggestion, .suggestion > button:first-child { min-height: 136px; }
  .suggestion { border-radius: 20px 20px 6px 20px; }
  .suggestion:nth-child(2) { border-radius: 20px 6px 20px 20px; }
  .suggestion:nth-child(3) { border-radius: 6px 20px 20px 20px; }
  .suggestion > button:first-child { font-size: 11px; line-height: 1.8; padding: 14px 12px; gap: 14px; }
  .suggestion .icon { width: 22px; height: 22px; }
  .suggestion .dismiss { display: none; }
  .footer-note { font-size: 9px; padding-bottom: env(safe-area-inset-bottom); }
  #messages { padding: 20px 16px 245px; }
  .message { font-size: 14px; margin-bottom: 28px; }
  .message.assistant { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .message.assistant > .spark { width: 30px; height: 30px; padding: 6px; border-radius: 11px; }
  .bubble { max-width: 94%; padding: 14px 18px; }
  .chatting #main { overflow: hidden; }
  .chatting #composer-wrap { bottom: calc(42px + env(safe-area-inset-bottom)); width: calc(100% - 24px); }
  .chatting .composer { border-radius: 24px; }
  .chatting .footer-note { bottom: max(10px,env(safe-area-inset-bottom)); font-size: 9px; }
  .scroll-bottom { bottom: calc(230px + env(safe-area-inset-bottom)); }
  .modal-backdrop { padding: 12px; }
  .modal, .modal.vertical-menu-modal, .modal.vertical-detail-modal { padding: 22px 18px; border-radius: 28px; max-height: calc(100dvh - 32px); }
  .modal h2, .vertical-menu-modal .modal-header h2 { font-size: 23px; }
  #settings-sheet, html[data-theme=light] #settings-sheet { width: auto; border-radius: 32px 32px 0 0; background: var(--md-sys-color-surface-container-low); max-height: 90dvh; }
  .sheet-grip { width: 32px; height: 4px; margin: 12px auto 4px; background: var(--md-sys-color-outline); }
  .sheet-body { padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); }
  .sheet-row, html[data-theme=light] .sheet-row { background: var(--md-sys-color-surface-container-high); border-radius: 16px; margin-bottom: 4px; min-height: 52px; }
  .sheet-top { padding: 10px 16px; }
  .split-studio { grid-template-columns: 1fr; }
  .image-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:380px) {
  #home h1 { font-size: 28px; }
  .expressive-subtitle { font-size: 12px; }
  .home-suggestions { gap: 6px; }
  .suggestion > button:first-child { font-size: 10px; padding: 12px 10px; }
  .model-button { max-width: 100%; overflow: hidden; padding-inline: 10px; }
}
@media (max-height:680px) {
  body:not(.chatting) #main { overflow-y: auto; grid-template-rows: 64px auto auto minmax(140px,1fr) 36px; }
  body:not(.chatting) #main > header { min-height: 64px; height: 64px; }
  .expressive-intro { padding-top: 12px; padding-bottom: 20px; }
  .expressive-emblem { width: 44px; height: 44px; margin-bottom: 10px; border-radius: 16px 12px; }
  .expressive-emblem .icon { width: 24px; height: 24px; }
  #home h1 { font-size: 28px; }
  .expressive-subtitle { font-size: 12px; margin-top: 4px; }
  .expressive-eyebrow { margin-bottom: 6px; }
  .suggestion, .suggestion > button:first-child { min-height: 112px; }
  .home-suggestions { margin-block: 12px; }
  #sidebar { overflow-y: auto; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .m3-ripple { display: none; }
}
@media (forced-colors:active) {
  .composer, .pill, .suggestion, .nav-item, .modal, .switch, .sheet-row { border: 1px solid ButtonText; }
  .switch.on::after { background: Highlight; }
  button:focus-visible { outline: 3px solid Highlight; }
}
@media print {
  body, #main { display: block !important; margin: 0 !important; height: auto !important; overflow: visible !important; background: #fff !important; color: #000 !important; border: 0 !important; }
  .expressive-intro, #home, #sidebar, #settings-sheet, #sheet-scrim, #composer-wrap, .footer-note, #main > header { display: none !important; }
  #messages { display: block !important; overflow: visible !important; padding: 0 !important; }
  .bubble { color: #000; background: #eee; }
}

/* Feature modules inject these styles dynamically; keep our theme scoped. */
#sidebar .notif-badge { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
#modal-root .acc { background: var(--md-sys-color-surface-container); border: 0; border-radius: 24px; margin-block: 8px; }
#modal-root .acc-h { min-height: 56px; padding: 16px 18px; font-weight: 700; }
#modal-root .acc.open .acc-b > div { padding: 4px 18px 18px; }
.expressive-theme { width: 44px; height: 44px; border-radius: 16px; background: var(--md-sys-color-surface-container); color: var(--md-sys-color-primary); }
/* Contrast and bidirectional details, including empty prompt placeholders. */
html[dir=rtl] #prompt:placeholder-shown { direction: rtl; text-align: start; }
body:not(.expanded) #sidebar .nav-label { white-space: normal; text-overflow: clip; line-height: 1.4; text-align: center; }
html[data-theme=light] .answer .codebox .tk-str { color: #28603e; }
html[data-theme=light] .answer .codebox .tk-kw, html[data-theme=light] .answer .codebox .tok-kw { color: #7140a0; }
html[data-theme=light] .answer .codebox .tk-num { color: #815500; }
html[data-theme=light] .answer .codebox .tk-com { color: #62646f; }
html[data-theme=light] .answer .codebox .tk-fn { color: #205eb3; }
html[data-theme=light] .answer .codebox .tk-op, html[data-theme=light] .answer .codebox .tk-tag, html[data-theme=light] .answer .codebox .tk-attr { color: #6750a4; }
@media(max-width:760px) {
  #sidebar { box-shadow: none; }
  body.expanded #sidebar { box-shadow: var(--md-sys-elevation-3); }
  body:not(.expanded) #sidebar .nav-label { text-align: start; }
}