/* هوش نو برای آیفون: همان رنگ‌ها، اندازه‌ها و فونت اپ اندروید (Theme.kt). یک واحد px اینجا = یک dp آنجا. */

/* Dana, the site's own font. It draws ASCII digits as Persian ones, so a
   Latin name or code with a digit (GPT 5, 09121234567) takes its digits from
   a system face first (hn-latin-digits). */
@font-face { font-family: "Dana"; src: url("/webapp/fonts/dana-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Dana"; src: url("/webapp/fonts/dana-medium.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Dana"; src: url("/webapp/fonts/dana-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Dana"; src: url("/webapp/fonts/dana-extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Dana"; src: url("/webapp/fonts/dana-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "hn-latin-digits"; src: local("Helvetica Neue"), local("HelveticaNeue"), local("Arial"), local("Roboto"), local("Segoe UI"); unicode-range: U+30-39; }

/* تم «شب بنفش»، پیش‌فرض اپ */
:root {
  --bg: #0B0912; --panel: #171328; --panel2: #1F1A35; --panel3: #292245;
  --stroke: #372E5A; --edge-top: #5B4B94;
  --text: #F6F3FF; --muted: #9AA1B1; --subtle: #858EA0;
  --accent: #7C3AED; --strong: #6D28D9; --soft: #A78BFA; --highlight: #BDA2FF;
  --cyan: #83E7EE; --success: #9EDCBA; --error: #FFB9A2; --action-end: #9361F5;
  --feature-top: #3C2B5F; --feature-deep: #120E1B; --feature-spot: #AD80F7; --container: #2A1A4F;
  --hero: url("/webapp/img/hero_film.webp"); --login-hero: url("/webapp/img/login_hero.webp");
  --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 28px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-h: 80px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F5F3FA; --panel: #FFFFFF; --panel2: #F0ECF8; --panel3: #E4DDF3; --stroke: #DDD5EE; --edge-top: #C9B4ED; --text: #1A1530; --muted: #535A6D; --subtle: #5F6679; --accent: #7C3AED; --strong: #6D28D9; --soft: #8B5CF6; --highlight: #6D28D9; --cyan: #0E6F87; --success: #15803D; --error: #B93A0B; --action-end: #9361F5; --feature-top: #4C2C8F; --feature-deep: #1E1238; --feature-spot: #AD80F7; --container: #EDE5FF;
  --hero: url("/webapp/img/hero_film_light.webp"); --login-hero: url("/webapp/img/login_hero_light.webp");
  color-scheme: light;
}
:root[data-theme="ice"] {
  --bg: #E3FDFD; --panel: #FAFFFF; --panel2: #CBF1F5; --panel3: #B6E8ED; --stroke: #A6E3E9; --edge-top: #71C9CE; --text: #0E3337; --muted: #365B5F; --subtle: #3F6367; --accent: #1C7880; --strong: #166970; --soft: #71C9CE; --highlight: #13636A; --cyan: #1C7880; --success: #17733C; --error: #A93A16; --action-end: #2E959C; --feature-top: #1F6E74; --feature-deep: #0B2B2E; --feature-spot: #71C9CE; --container: #CBF1F5;
  --hero: url("/webapp/img/hero_film_ice.webp"); --login-hero: url("/webapp/img/login_hero_ice.webp");
  color-scheme: light;
}
:root[data-theme="blossom"] {
  --bg: #FFF5E4; --panel: #FFFBF5; --panel2: #FFE3E1; --panel3: #FFD1D1; --stroke: #F6C9C4; --edge-top: #FF9494; --text: #3A1F21; --muted: #6E4B49; --subtle: #765250; --accent: #B8424A; --strong: #A0383F; --soft: #FF9494; --highlight: #9E363C; --cyan: #0E6F87; --success: #2A7149; --error: #A8241A; --action-end: #D9625F; --feature-top: #9C3B40; --feature-deep: #3A1416; --feature-spot: #FF9494; --container: #FFE3E1;
  --hero: url("/webapp/img/hero_film_blossom.webp"); --login-hero: url("/webapp/img/login_hero_blossom.webp");
  color-scheme: light;
}
:root[data-theme="ocean"] {
  --bg: #121B21; --panel: #1B262C; --panel2: #22323B; --panel3: #2A3E4A; --stroke: #30495A; --edge-top: #3282B8; --text: #EAF5FD; --muted: #A2B6C3; --subtle: #92A7B5; --accent: #2F7AB3; --strong: #0F4C75; --soft: #6FB3E0; --highlight: #BBE1FA; --cyan: #83E7EE; --success: #9EDCBA; --error: #FFB9A2; --action-end: #3F92CC; --feature-top: #0F4C75; --feature-deep: #0B1A22; --feature-spot: #3282B8; --container: #0F3A57;
  --hero: url("/webapp/img/hero_film_ocean.webp"); --login-hero: url("/webapp/img/login_hero_ocean.webp");
  color-scheme: dark;
}
:root[data-theme="slate"] {
  --bg: #1D2939; --panel: #27374D; --panel2: #2E4058; --panel3: #384C66; --stroke: #425872; --edge-top: #6D879C; --text: #F2F6F9; --muted: #B0BEC8; --subtle: #A3B2BE; --accent: #5B7890; --strong: #3D566B; --soft: #9DB2BF; --highlight: #DDE6ED; --cyan: #9EE6F2; --success: #9EDCBA; --error: #FFB9A2; --action-end: #557390; --feature-top: #3E566C; --feature-deep: #141E2A; --feature-spot: #6F889B; --container: #334A61;
  --hero: url("/webapp/img/hero_film_slate.webp"); --login-hero: url("/webapp/img/login_hero_slate.webp");
  color-scheme: dark;
}
:root[data-theme="sage"] {
  --bg: #F8EDE3; --panel: #FFFAF4; --panel2: #F0E3D6; --panel3: #E2E6D6; --stroke: #D6D3C2; --edge-top: #A2B29F; --text: #2C3328; --muted: #545B4E; --subtle: #5F6659; --accent: #5E6C5C; --strong: #515D4F; --soft: #A2B29F; --highlight: #4A5748; --cyan: #2D6F73; --success: #2A7149; --error: #A8361A; --action-end: #798777; --feature-top: #5A6758; --feature-deep: #22281F; --feature-spot: #BDD2B6; --container: #E2EBDC;
  --hero: url("/webapp/img/hero_film_sage.webp"); --login-hero: url("/webapp/img/login_hero_sage.webp");
  color-scheme: light;
}
:root[data-theme="olive"] {
  --bg: #EDF1D6; --panel: #F8FAEC; --panel2: #E3E9CA; --panel3: #D5E1BE; --stroke: #C7D4AC; --edge-top: #9DC08B; --text: #222C1D; --muted: #4B5642; --subtle: #545E4B; --accent: #467649; --strong: #40513B; --soft: #9DC08B; --highlight: #385A3C; --cyan: #2D6F73; --success: #2A7149; --error: #A8361A; --action-end: #609966; --feature-top: #40513B; --feature-deep: #1A2117; --feature-spot: #9DC08B; --container: #DCE8CC;
  --hero: url("/webapp/img/hero_film_olive.webp"); --login-hero: url("/webapp/img/login_hero_olive.webp");
  color-scheme: light;
}
:root[data-theme="rose"] {
  --bg: #F5EBEB; --panel: #FFF9F9; --panel2: #EEDFDF; --panel3: #E4D0D0; --stroke: #D9BFBF; --edge-top: #C9A3A3; --text: #362828; --muted: #624E4E; --subtle: #6B5656; --accent: #7A6363; --strong: #6B5555; --soft: #D5B4B4; --highlight: #664F4F; --cyan: #2D6F73; --success: #2A7149; --error: #A8361A; --action-end: #8A7272; --feature-top: #5E4848; --feature-deep: #2A1F1F; --feature-spot: #B08E8E; --container: #EADADA;
  --hero: url("/webapp/img/hero_film_rose.webp"); --login-hero: url("/webapp/img/login_hero_rose.webp");
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overscroll-behavior: none; }
body { font-family: "hn-latin-digits", "Dana", Tahoma, sans-serif; font-size: 14px; line-height: 1.8; letter-spacing: 0; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
/* A tap on a button never selects its words or opens Safari's Copy / Look Up menu. */
button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; }

/* مقیاس متن Material با فونت یکان؛ ارتفاع خط همان ضریب‌های Theme.kt */
.t-headline-lg { font-size: 32px; line-height: 1.4; font-weight: 900; }
.t-headline-md { font-size: 28px; line-height: 1.4; font-weight: 900; }
.t-title-lg { font-size: 22px; line-height: 1.5; font-weight: 800; }
.t-title-md { font-size: 16px; line-height: 1.6; font-weight: 700; }
.t-title-sm { font-size: 14px; line-height: 1.6; font-weight: 700; }
.t-body-lg { font-size: 16px; line-height: 1.85; font-weight: 400; }
.t-body-md { font-size: 14px; line-height: 1.8; font-weight: 400; }
.t-body-sm { font-size: 12px; line-height: 1.7; font-weight: 400; }
.t-label-lg { font-size: 14px; line-height: 1.5; font-weight: 700; }
.t-label-md { font-size: 12px; line-height: 1.5; font-weight: 500; }
.t-label-sm { font-size: 11px; line-height: 1.5; font-weight: 500; }
.muted { color: var(--muted); }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* پوسته: صفحه‌ی بالا، نوار زبانه‌ها پایین */
.shell { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
.shell::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--safe-top); background: var(--bg); z-index: 30; }
.screen { position: relative; flex: 1; min-height: 0; padding-top: var(--safe-top); }
.scroll { scrollbar-width: none; height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }

/* قاب‌ها */
.panel { background: var(--panel); border-radius: var(--r-lg); border: 1px solid transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(var(--edge-top), var(--stroke)) border-box; }
.panel.md { border-radius: var(--r-md); }

/* هیرو: عکس فیلم زیر پرده‌ی تیره، تیتر رویش */
.hero { position: relative; height: 220px; margin-bottom: 4px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--hero) center / cover no-repeat; }
.hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 60%, transparent) 0%, color-mix(in srgb, var(--bg) 33%, transparent) 50%, var(--bg) 100%); }
.hero-text { position: absolute; inset: auto 20px 12px; z-index: 1; }
.hero-text h1 { margin: 0; text-wrap: balance; }
.hero-text h1 em { font-style: normal; color: var(--highlight); }
.hero-text p { margin: 0; color: var(--muted); }

/* «چی بسازیم؟» */
.picker-wrap { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }
.picker-title { display: flex; align-items: center; gap: 6px; color: var(--text); margin: 0; }
.picker-title .ico { width: 20px; height: 20px; color: var(--highlight); }
.picker { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--stroke); }
.picker:not(.compact) { padding: 10px; background: color-mix(in srgb, var(--accent) 16%, var(--panel)); border: 1.5px solid color-mix(in srgb, var(--highlight) 70%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent), 0 8px 24px color-mix(in srgb, var(--accent) 22%, transparent); }
.picker:not(.compact):active { transform: scale(.99); }
.picker:focus-visible { outline: 2px solid var(--soft); outline-offset: 2px; }
.picker .swap { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding-inline: 12px 8px; border-radius: 999px; background: var(--strong); color: #fff; }
.picker .swap .ico { width: 18px; height: 18px; }
.picker.compact { padding: 6px; }
.picker img { width: 48px; height: 48px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.picker.compact img { width: 36px; height: 36px; }
.picker .grow { flex: 1; min-width: 0; }
.picker .line { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drop { width: 24px; height: 24px; flex: none; fill: currentColor; color: var(--text); }

.sticky-pick { position: absolute; top: var(--safe-top); inset-inline: 0; z-index: 20; padding: 8px 16px; padding-inline-end: calc(16px + var(--chip-w, 150px) + 10px);
  background: color-mix(in srgb, var(--bg) 96%, transparent); animation: drop-in 180ms cubic-bezier(.2,.8,.2,1); }
@keyframes drop-in { from { opacity: 0; transform: translateY(-50%); } }

/* کیف پول گوشه‌ی بالا، با سایه‌ی بنفشی که نفس می‌کشد */
.wallet { position: absolute; top: calc(var(--safe-top) + 10px); inset-inline-end: 14px; z-index: 25;
  display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px 6px 10px; padding-inline: 10px 12px;
  border-radius: 999px; background: var(--panel2); border: 1px solid color-mix(in srgb, var(--accent) 47%, transparent);
  animation: wallet-border 1.8s cubic-bezier(.4,0,.2,1) infinite alternate; }
.wallet::before { content: ""; position: absolute; inset: -6px -9px -10px; border-radius: 999px; z-index: -1;
  background: radial-gradient(closest-side at 50% 62%, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
  animation: wallet-glow 1.8s cubic-bezier(.4,0,.2,1) infinite alternate; }
.wallet svg { width: 20px; height: 20px; fill: var(--highlight); flex: none; }
@keyframes wallet-glow { from { opacity: .45; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
@keyframes wallet-border { from { border-color: color-mix(in srgb, var(--accent) 35%, transparent); } to { border-color: color-mix(in srgb, var(--accent) 60%, transparent); } }

/* فرم ساختن */
.form { display: flex; flex-direction: column; gap: 14px; padding: 0 16px 24px; }
.prompt { padding: 18px; }
.prompt textarea { display: block; width: 100%; min-height: 104px; resize: none; border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 16px; line-height: 1.85; caret-color: var(--highlight); field-sizing: content; max-height: 40vh; }
.prompt textarea::placeholder { color: var(--subtle); opacity: 1; }
.ghost { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 16px; width: 100%; color: var(--text); }
.ghost:disabled { color: var(--subtle); }
.field-label { color: var(--muted); }
.model { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; width: 100%; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--stroke); }
.logo { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.logo img { width: 60%; height: 60%; object-fit: contain; }
.model .grow { flex: 1; min-width: 0; }
.model .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row { display: flex; gap: 12px; }
.pick-field { display: flex; align-items: center; gap: 10px; min-height: 56px; width: 100%; padding: 6px 8px 6px 12px; padding-inline: 12px 8px;
  border-radius: var(--r-md); background: var(--panel2); border: 1px solid var(--stroke); }
.pick-field[aria-expanded="true"] { border-color: var(--soft); }
.pick-field .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pick-field .value { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.pick-field .value span:first-child { overflow: hidden; text-overflow: ellipsis; }
.ratio-shape { width: 24px; height: 24px; display: grid; place-items: center; flex: none; }
.ratio-shape i { display: block; border: 1.5px solid var(--highlight); border-radius: 3px; }
.style-thumb { width: 28px; height: 28px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.gallery-ico { width: 20px; height: 20px; fill: var(--muted); margin-inline-end: 4px; flex: none; }
.balance { color: var(--muted); padding: 4px 0; border-radius: var(--r-sm); text-align: start; width: 100%; }

.scroll::-webkit-scrollbar, .rows::-webkit-scrollbar { display: none; }

/*
 * «بساز»: the site's own button (components/shiny-button.blade.php, «Shiny
 * Button» by Hyperiux) - same timing and effect, in the chosen theme's colours
 * as ShinyButton.kt does. A phone has no hover, so the hover look shows while
 * the finger is down. Not ready: dimmed, the light still runs; busy: it stops.
 */
@property --sb-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --sb-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --sb-percent { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --sb-shine { syntax: "<color>"; initial-value: white; inherits: false; }
.shiny-wrap { display: flex; flex-direction: column; }
.shiny {
  --sb-base: var(--strong); --sb-inset: var(--action-end);
  --sb-accent: color-mix(in srgb, var(--soft) 75%, #fff); --sb-accent-soft: color-mix(in srgb, var(--soft) 25%, #fff);
  --sb-duration: 3s; --sb-transition: .8s cubic-bezier(.25, 1, .5, 1);
  isolation: isolate; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 56px; padding: 0 24px; border: 1px solid transparent; border-radius: 32px;
  color: #fff; font-size: 16px; font-weight: 500; line-height: 1.6; -webkit-tap-highlight-color: transparent;
  background:
    linear-gradient(var(--sb-base), var(--sb-base)) padding-box,
    conic-gradient(from calc(var(--sb-angle) - var(--sb-offset)), transparent, var(--sb-accent) var(--sb-percent),
      var(--sb-shine) calc(var(--sb-percent) * 2), var(--sb-accent) calc(var(--sb-percent) * 3), transparent calc(var(--sb-percent) * 4)) border-box;
  box-shadow: inset 0 0 0 1px var(--sb-inset);
  transition: var(--sb-transition); transition-property: --sb-offset, --sb-percent, --sb-shine;
}
.shiny::before, .shiny::after, .shiny > .shiny-label::before {
  content: ""; pointer-events: none; position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: -1;
}
/* Faint speckles that follow the light. */
.shiny::before {
  width: calc(100% - 6px); height: calc(100% - 6px); border-radius: inherit; opacity: .4;
  background: radial-gradient(circle at 2px 2px, white .5px, transparent 0) padding-box; background-size: 4px 4px; background-repeat: space;
  -webkit-mask-image: conic-gradient(from calc(var(--sb-angle) + 45deg), black, transparent 10% 90%, black);
  mask-image: conic-gradient(from calc(var(--sb-angle) + 45deg), black, transparent 10% 90%, black);
}
/* The sheen. */
.shiny::after {
  width: 100%; aspect-ratio: 1; opacity: .6;
  background: linear-gradient(-50deg, transparent, var(--sb-accent), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, black); mask-image: radial-gradient(circle at bottom, transparent 40%, black);
}
.shiny > .shiny-label { display: inline-flex; align-items: center; gap: 8px; }
/* The glow that breathes while pressed. */
.shiny > .shiny-label::before {
  width: calc(100% + 16px); height: calc(100% + 16px); opacity: 0;
  box-shadow: inset 0 -1ex 2rem 4px var(--sb-accent);
  transition: opacity var(--sb-transition); animation: calc(var(--sb-duration) * 1.5) sb-breathe linear infinite;
}
.shiny, .shiny::before { animation: sb-angle var(--sb-duration) linear infinite, sb-angle calc(var(--sb-duration) / .4) linear infinite reverse paused; animation-composition: add; }
.shiny::after { animation: sb-shimmer var(--sb-duration) linear infinite, sb-shimmer calc(var(--sb-duration) / .4) linear infinite reverse paused; animation-composition: add; }
.shiny:not(:disabled):is(:active, :focus-visible) { --sb-percent: 20%; --sb-offset: 95deg; --sb-shine: var(--sb-accent-soft); }
.shiny:not(:disabled):is(:active, :focus-visible), .shiny:not(:disabled):is(:active, :focus-visible)::before,
.shiny:not(:disabled):is(:active, :focus-visible)::after { animation-play-state: running; }
.shiny:not(:disabled):is(:active, :focus-visible) > .shiny-label::before { opacity: 1; }
.shiny:not(:disabled):active { translate: 0 1px; }
.shiny:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 4px; }
@media (hover: hover) {
  .shiny:not(:disabled):hover { --sb-percent: 20%; --sb-offset: 95deg; --sb-shine: var(--sb-accent-soft); }
  .shiny:not(:disabled):hover, .shiny:not(:disabled):hover::before, .shiny:not(:disabled):hover::after { animation-play-state: running; }
  .shiny:not(:disabled):hover > .shiny-label::before { opacity: 1; }
}
.shiny:disabled { cursor: default; opacity: .8; }
.shiny.busy { opacity: 1; }
.shiny.busy, .shiny.busy::before, .shiny.busy::after, .shiny.busy > .shiny-label::before { animation-play-state: paused; }
@keyframes sb-angle { to { --sb-angle: 360deg; } }
@keyframes sb-shimmer { to { rotate: 360deg; } }
@keyframes sb-breathe { from, to { scale: 1; } 50% { scale: 1.2; } }
@media (prefers-reduced-motion: reduce) {
  .shiny, .shiny::before, .shiny::after, .shiny > .shiny-label::before { animation: none !important; }
  .shiny { transition: none; }
}
.price { align-self: flex-end; margin: 6px 0 0 12px; margin-inline-end: 12px; color: var(--muted); }

/* تازه‌ترین ساخته‌ها */
.recent-head { display: flex; align-items: center; padding-top: 12px; }
.recent-head h2 { margin: 0; flex: 1; }
.link { color: var(--highlight); padding: 10px 12px; border-radius: var(--r-sm); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center; text-align: center; color: #fff; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile p { margin: 0; padding: 12px; white-space: pre-line; }

/* دستیار، گوشه‌ی پایین سمت چپ */
.assistant { position: absolute; bottom: 14px; inset-inline-end: 14px; z-index: 15; width: 52px; height: 52px; border-radius: 12px;
  background: radial-gradient(circle at 50% 62%, rgba(152,92,255,.30), transparent 50%); transition: transform 120ms; }
.assistant:active { transform: scale(.94); }
/* شش قاب کنار هم؛ پلک‌زدن با عوض کردن قاب */
.assistant i { position: absolute; inset-inline: 0; top: 50%; height: 41.3px; transform: translateY(-50%);
  background: url("/webapp/img/assistant_brain.webp") 0 0 / 600% 100% no-repeat; }

/* نوار زبانه‌ها؛ همان NavigationBar در Material 3 */
.nav { flex: none; display: flex; background: var(--bg); border-top: 1px solid var(--stroke); padding-bottom: var(--safe-bottom); }
.nav button { flex: 1; height: var(--nav-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--subtle); }
.nav .pill { width: 64px; height: 32px; border-radius: 16px; display: grid; place-items: center; transition: background-color 200ms; }
.nav [aria-selected="true"] { color: var(--highlight); }
.nav [aria-selected="true"] .pill { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav [aria-selected="true"] svg .fill { fill: currentColor; fill-opacity: .22; stroke: none; }
.nav svg .dot { fill: currentColor; stroke: none; }
.nav .t-label-md { font-weight: 500; }

/* برگه‌ی پایینی «چی بسازیم؟» */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.32); animation: fade 200ms ease-out; }
.sheet { position: fixed; inset-inline: 0; bottom: 0; z-index: 51; max-height: min(84dvh, calc(100dvh - var(--safe-top) - 24px)); display: flex; flex-direction: column;
  background: var(--panel2); border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: var(--safe-bottom); animation: rise 260ms cubic-bezier(.2,.8,.2,1); }
.handle { width: 32px; height: 4px; border-radius: 2px; background: var(--muted); opacity: .4; margin: 22px auto; flex: none; }
.sheet h2 { margin: 0; padding: 0 16px 10px; }
.groups { display: flex; gap: 8px; padding: 0 16px; flex: none; }
.group { flex: 1; min-width: 0; min-height: 72px; padding: 8px 3px; /* در Compose خط دور جا نمی‌گیرد؛ اینجا ۱px از هر طرف می‌گیرد */ border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--stroke);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text); }
.group[aria-selected="true"] { background: color-mix(in srgb, var(--highlight) 16%, var(--panel2)); border-color: var(--highlight); color: var(--highlight); }
.group img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.group span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows { scrollbar-width: none; overflow-y: auto; padding: 12px 16px 24px; overscroll-behavior: contain; animation: fade 160ms ease-out; }
.mrow { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 10px 6px; border-radius: var(--r-md); background: var(--panel2); }
.mrow + .mrow { border-top: 1px solid var(--stroke); border-radius: 0; }
.mrow[aria-selected="true"] { background: color-mix(in srgb, var(--highlight) 10%, var(--panel2)); border-radius: var(--r-md); }
.mrow .media { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.mrow .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mrow .name-row { display: flex; align-items: center; gap: 8px; }
.mrow[aria-selected="true"] .name { color: var(--highlight); }
.mrow .line { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.check { width: 26px; height: 26px; border-radius: 50%; background: var(--highlight); display: grid; place-items: center; flex: none; }
.check svg { width: 18px; height: 18px; fill: var(--bg); }
.badge { color: #fff; border-radius: 999px; padding: 2px 8px; white-space: nowrap; background: linear-gradient(to left, var(--strong), var(--accent), var(--action-end)); }

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
}