/* صفحه‌های اپ: قطعه‌های مشترک، ورود، ساخته‌ها، چت، حساب و دستیار. رنگ‌ها همه از توکن‌های app.css. */

/* ------------------------------------------------------------ قطعه‌های مشترک (Components.kt) */
.ico { width: 24px; height: 24px; fill: currentColor; flex: none; }
.flip { transform: scaleX(-1); }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.pad-x { padding-inline: 16px; }
.pad { padding: 24px 16px; }
.row.spread { justify-content: space-between; }
.center-y { align-items: center; }
.center-text { text-align: center; }
.one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clamp2, .clamp3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp2 { -webkit-line-clamp: 2; }
.clamp3 { -webkit-line-clamp: 3; }
.subtle { color: var(--subtle); }
.accent-text { color: var(--highlight); }
.ok-text { color: var(--success); }
.error-text { color: var(--error); margin: 0; }
.soft-white { color: rgba(255, 255, 255, .72); }
.field-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dd { position: relative; min-width: 0; }
p { margin: 0; }

.icon-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); flex: none; transition: background-color 120ms; }
.icon-btn:active { background: color-mix(in srgb, var(--text) 10%, transparent); }
.icon-btn.sm { width: 32px; height: 32px; }
.icon-btn.sm .ico { width: 18px; height: 18px; }
.icon-btn.on-dark { color: #fff; background: rgba(0, 0, 0, .35); width: 44px; height: 44px; }
.icon-btn.on-feature { color: rgba(255, 255, 255, .8); }
.icon-btn:disabled { opacity: .4; }
.star-on { color: #F9EB57 !important; }
.spin { animation: turn 900ms linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }

.ghost-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; width: 100%; padding: 0 16px; border-radius: var(--r-md);
  color: var(--text); background: transparent; border: 1px solid var(--stroke); }
.ghost-btn.danger, .danger { color: var(--error); }
.ghost-btn:disabled { color: var(--subtle); }
.ghost.accent-text { color: var(--highlight); }
.ghost.accent-text:disabled { color: var(--subtle); }
.text-btn { min-height: 44px; padding: 0 14px; border-radius: 22px; color: var(--muted); }
.text-btn.accent { color: var(--highlight); }
.text-btn:disabled { opacity: .5; }

.screen-title { display: flex; align-items: center; gap: 4px; min-height: 64px; padding-block: 12px 4px; padding-inline: 20px calc(16px + var(--chip-w, 120px)); }
.screen-title h1 { margin: 0; }
.page { padding-bottom: 96px; display: flex; flex-direction: column; gap: 12px; }
.list-head { margin: 8px 0 0; }

.loader { position: relative; width: var(--s); height: var(--s); display: grid; place-items: center; flex: none; }
.loader i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--highlight) 22%, transparent); border-top-color: var(--highlight); animation: turn 1s linear infinite; }
.loader img { width: 52%; height: 52%; animation: breathe 1.6s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .55; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.load-state { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; text-align: center; }
.load-state .ghost-btn { width: auto; min-width: 140px; }
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); }
.boot img { animation: breathe 1.2s ease-in-out infinite alternate; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: turn 800ms linear infinite; display: inline-block; vertical-align: middle; }
.spinner.sm { width: 16px; height: 16px; border-color: color-mix(in srgb, var(--text) 25%, transparent); border-top-color: var(--text); }
.list-end { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; min-height: 40px; }
.list-end .spinner, .slot-empty .spinner { border-color: color-mix(in srgb, var(--text) 25%, transparent); border-top-color: var(--highlight); }

.toast { position: fixed; z-index: 90; inset-inline: 16px; bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px); margin: 0 auto; max-width: 420px; padding: 12px 16px; border-radius: var(--r-md);
  background: var(--panel3); color: var(--text); box-shadow: 0 8px 28px rgba(0, 0, 0, .35); text-align: center; animation: rise-in 220ms cubic-bezier(.2, .8, .2, 1); }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }

.money-row { display: flex; align-items: center; gap: 10px; }
.money-row .ghost-btn { width: auto; }
img.fade { opacity: 0; }
img.in { opacity: 1; transition: opacity 420ms; }

/* منوی کشویی */
.menu-scrim { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.menu { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 41; margin: 0; padding: 8px 0; list-style: none; background: var(--panel2); border: 1px solid var(--stroke);
  border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); max-height: 300px; overflow: auto; animation: fade 120ms ease-out; }
.menu.end { inset-inline: auto 0; min-width: 200px; }
.menu.in-sheet { position: static; border-radius: var(--r-md); }
.menu.up { top: auto; bottom: calc(100% + 6px); inset-inline: 0 auto; min-width: 260px; }
.menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 14px; text-align: start; }
.menu [aria-selected="true"] button { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--highlight); }
.menu button.danger { color: var(--error); }
.menu .ico { width: 22px; height: 22px; color: var(--muted); }
.pick-field:disabled { opacity: .6; }

/* برگه و پنجره */
.sheet.full { height: min(84dvh, calc(100dvh - var(--safe-top) - 24px)); }
.sheet-scroll > * { flex-shrink: 0; }
.sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 20px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; scrollbar-width: none; }
.sheet-foot { flex: none; padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--stroke); background: var(--panel2); }
.sheet-foot.row { flex-direction: row; align-items: center; }
.sheet-foot.row > * { flex: 1; }
.scrim.center { display: grid; place-items: center; padding: 24px; }
.dialog { width: 100%; max-width: 360px; background: var(--panel2); border-radius: var(--r-xl); padding: 24px 24px 12px; display: flex; flex-direction: column; gap: 12px; animation: pop 200ms cubic-bezier(.2, .8, .2, 1); }
.dialog h2 { margin: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 4px; }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }
.full-page { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); animation: fade 160ms; }
.page-bar { display: flex; align-items: center; gap: 4px; padding: 8px; }
.page-bar h2 { margin: 0; }

/* جستجو */
.search { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 14px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--stroke); color: var(--muted); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--subtle); }
.search input::-webkit-search-cancel-button { display: none; }

/* فیلدها */
.field { display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.field-box { display: flex; align-items: center; gap: 4px; min-height: 56px; padding-inline: 14px 4px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--stroke); transition: border-color 120ms; }
.field-box:focus-within { border-color: var(--soft); }
.field.invalid .field-box { border-color: var(--error); }
.field-box input, .field-box textarea, .writing textarea, .writing input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; line-height: 1.8; padding: 12px 0; resize: none; }
.field-box.tall { align-items: stretch; }
.field-box input.center { text-align: center; }
.field-box input::placeholder, textarea::placeholder { color: var(--subtle); opacity: 1; }
.writing { padding: 4px 14px; }
.writing textarea, .writing input { width: 100%; }
.more-toggle { display: flex; align-items: center; gap: 4px; color: var(--highlight); min-height: 44px; align-self: flex-start; }
.more-toggle .drop { color: var(--highlight); transition: transform 180ms; }
.more-toggle[aria-expanded="true"] .drop { transform: rotate(180deg); }
.check-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--stroke); }
.switch { -webkit-appearance: none; appearance: none; width: 52px; height: 32px; border-radius: 16px; background: var(--panel3); border: 2px solid var(--stroke); position: relative; flex: none; transition: background-color 150ms; margin: 0; }
.switch::after { content: ""; position: absolute; top: 4px; inset-inline-start: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: inset-inline-start 150ms, background-color 150ms; }
.switch:checked { background: var(--accent); border-color: var(--accent); }
.switch:checked::after { inset-inline-start: 24px; background: #fff; }
.guide { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.offer { color: var(--soft); }
.recent-title { margin: 12px 0 0; }

/* خانه‌ی عکس و فایل */
.slot { display: flex; flex-direction: column; gap: 6px; }
.slot-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; border-radius: var(--r-md); border: 1.5px dashed var(--stroke); background: var(--panel); color: var(--muted); padding: 12px; text-align: center; }
.slot-empty .ico { width: 30px; height: 30px; color: var(--highlight); }
.slot-pic { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--panel2); }
.slot-pic img { width: 100%; max-height: 260px; object-fit: contain; }
.slot-pic .icon-btn { position: absolute; top: 8px; inset-inline-end: 8px; }
.slot-file { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 12px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--stroke); }
.slot-file .ico { color: var(--highlight); }
.group-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.group-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.group-head { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.add-line { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: var(--r-md); border: 1px solid var(--stroke); color: var(--highlight); }
.add-line .ico { width: 18px; height: 18px; }
.add-line:active { background: var(--panel); }
.add-line:focus-visible { outline: 2px solid var(--soft); outline-offset: 2px; }
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot-grid .slot-empty { min-height: 96px; }
.slot-grid .slot-pic img { aspect-ratio: 1; object-fit: cover; }

/* انتخاب مدل و سبک */
.logo.none { background: var(--panel3); }
.model:disabled { opacity: 1; cursor: default; }
.pick-list { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; scrollbar-width: none; }
.pick-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--stroke); text-align: start; }
.pick-row[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 16%, var(--panel2)); border-color: var(--soft); }
.pick-row:disabled { opacity: .55; }
.pick-row .grow { display: flex; flex-direction: column; gap: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { color: var(--highlight); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 999px; padding: 2px 8px; }
.name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge.hot { background: linear-gradient(to left, #E5484D, #F76B15); }
.style-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; padding: 16px; scrollbar-width: none; align-content: start; }
.style-card { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.style-card .pic { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--panel2); border: 1px solid var(--stroke); display: grid; place-items: center; color: var(--muted); }
.style-card[aria-checked="true"] .pic { border: 3px solid var(--highlight); }
.style-card[aria-checked="true"] > span:last-child { color: var(--highlight); }
.style-card .pic img { width: 100%; height: 100%; object-fit: cover; }
.style-card .tick { position: absolute; top: 8px; inset-inline-end: 8px; width: 28px; height: 28px; border-radius: 50%; background: var(--highlight); color: #1A1033; display: grid; place-items: center; font-weight: 700; }

/* ساختن، کاشی و نمایش بزرگ */
.making, .feature-card, .wallet-card { color: #fff;
  background: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--feature-spot) 45%, transparent), transparent 75%), linear-gradient(to bottom left, var(--feature-top), var(--feature-deep)); }
.making { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--r-lg); }
.making .muted { color: rgba(255, 255, 255, .72); }
.tile { padding: 0; }
.tile-wait { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; color: #fff; text-align: center; }
.tile.creation .excerpt { position: absolute; inset: 0; padding: 14px; text-align: start; color: rgba(255, 255, 255, .92); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; white-space: normal; }
.play-dot { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .45); display: grid; place-items: center; color: #fff; }
.play-dot.big { width: 60px; height: 60px; }
.fav-mark { position: absolute; top: 8px; inset-inline-end: 8px; color: #F9EB57; }
.fav-mark .ico { width: 20px; height: 20px; }
.tile-foot { position: absolute; inset: auto 0 0; display: flex; align-items: center; gap: 6px; padding: 18px 10px 8px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.tile-foot .ico { width: 16px; height: 16px; }
.tile-foot span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.star-toggle { width: 56px; min-height: 56px; border-radius: var(--r-md); background: var(--panel2); border: 1px solid var(--stroke); display: grid; place-items: center; color: var(--muted); flex: none; }
.star-toggle.on { color: #F9EB57; border-color: #F9EB57; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; }
.empty-ico { width: 48px; height: 48px; color: var(--subtle); }

.viewer { position: fixed; inset: 0; z-index: 70; background: #000; display: flex; flex-direction: column; color: #fff; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); animation: fade 160ms; }
.viewer-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; }
.viewer-img { flex: 1; min-height: 0; display: grid; place-items: center; overflow: auto; touch-action: pinch-zoom; }
.viewer-img img, .viewer-img video { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer-actions { display: flex; justify-content: center; gap: 10px; padding: 12px 16px; }
.pill-btn { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 24px; background: rgba(255, 255, 255, .14); color: #fff; }
.viewer-sheet { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.action-pills { display: flex; gap: 8px; margin-top: 6px; }
.action-pill { flex: 1; min-height: 56px; border-radius: var(--r-md); background: rgba(255, 255, 255, .12); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.action-pill:disabled { opacity: .4; }
.action-pill .ico { width: 20px; height: 20px; }
.viewer-panel { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; max-height: 75%; overflow-y: auto; background: var(--panel2); color: var(--text); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 20px 16px calc(16px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 12px; animation: rise 240ms cubic-bezier(.2, .8, .2, 1); }
.viewer-panel h2 { margin: 0; }
.info-rows { margin: 0; display: flex; flex-direction: column; }
.info-rows div { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--stroke); }
.info-rows dt { flex: 1; color: var(--muted); }
.info-rows dd { margin: 0; }
.prompt-box { background: var(--panel); border-radius: var(--r-sm); padding: 10px 12px; }
.audio-card { position: relative; width: min(320px, 90%); aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden; display: flex; align-items: flex-end; }
.audio-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.audio-card audio { position: relative; width: 100%; }
.text-card { max-width: 560px; margin: 16px; padding: 18px; border-radius: var(--r-lg); background: var(--panel); color: var(--text); max-height: 100%; overflow: auto; white-space: pre-wrap; }

.video-card { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center; color: #fff; text-align: center; padding: 0; }
.video-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-card p { padding: 20px; }
.video-cap { position: absolute; inset: auto 0 0; padding: 18px 12px 8px; text-align: start; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--stroke); }
.track-pic { position: relative; width: 56px; height: 56px; border-radius: var(--r-sm); overflow: hidden; flex: none; }
.track-pic img { width: 100%; height: 100%; object-fit: cover; }
.track audio { width: 100%; height: 36px; margin-top: 4px; }
.on-site video, .on-site img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-md); }

/* ورود */
.login { position: fixed; inset: 0; top: var(--vvtop, 0px); bottom: auto; height: var(--vvh, 100dvh); overflow-y: auto; overflow-x: hidden; background: var(--bg); }
.login-art { position: fixed; inset: 0; background: var(--login-hero) center top / cover no-repeat; animation: drift 22s ease-in-out infinite alternate; }
@keyframes drift { to { transform: scale(1.04); } }
.login-veil { position: fixed; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .4) 0%, transparent 30%, color-mix(in srgb, var(--bg) 50%, transparent) 40%, color-mix(in srgb, var(--bg) 82%, transparent) 52%, var(--bg) 64%); }
.login-body { position: relative; min-height: 100%; display: flex; flex-direction: column; gap: 10px; padding: calc(var(--safe-top) + 24px) 20px calc(var(--safe-bottom) + 24px); max-width: 480px; margin: 0 auto; }
.login-mark { margin-bottom: auto; }
.login-body h1 { margin: 0; text-wrap: balance; }
.login-body h1 em { font-style: normal; color: var(--highlight); }
.login-step { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; animation: fade 200ms; }
.switch-link { color: var(--highlight); min-height: 44px; padding: 0 8px; align-self: center; border-radius: var(--r-sm); }
.switch-link:disabled { color: var(--subtle); }
.inline-link { color: var(--highlight); font: inherit; }
.show-list { display: flex; flex-direction: column; gap: 16px; }
.show-card { display: flex; flex-direction: column; gap: 6px; text-align: start; }
.show-pic { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; }
.show-pic img { width: 100%; height: 100%; object-fit: cover; }
.show-title { position: absolute; inset: auto 0 0; padding: 32px 16px 12px; color: #fff; display: flex; flex-direction: column; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.tile.sample { margin: 0; }
.tile.sample video, .tile.sample img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile.sample audio { position: relative; width: 92%; }
.tile.sample figcaption { position: absolute; inset: auto 0 0; padding: 14px 8px 6px; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); }
.prose h3 { margin: 8px 0 0; }
.prose p { white-space: pre-line; }

/* چت */
.feature-card { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 16px; border-radius: var(--r-lg); text-align: start; }
.feature-card .grow { display: flex; flex-direction: column; }
.feature-card .t-body-sm { color: rgba(255, 255, 255, .72); }
.plus-dot { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; }
.outline-card { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-radius: var(--r-lg); border: 1px solid var(--stroke); text-align: start; }
.outline-card .grow { display: flex; flex-direction: column; }
.icon-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--panel2); display: grid; place-items: center; color: var(--highlight); flex: none; }
.chat-row { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--stroke); }
.chat-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 60px; text-align: start; }
.chat-ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.chat-ico .ico { width: 18px; height: 18px; }

.convo { position: absolute; inset: 0; top: var(--safe-top); display: flex; flex-direction: column; background: var(--bg); padding-bottom: var(--safe-bottom); }
.convo-bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--stroke); flex: none; }
.convo-list { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; scrollbar-width: none; }
.bubble { max-width: 88%; display: flex; flex-direction: column; gap: 6px; }
.bubble.mine { align-self: flex-start; background: var(--container); padding: 10px 14px; border-radius: 20px; border-start-start-radius: 6px; }
.bubble.theirs { align-self: stretch; max-width: 100%; }
.bubble.queue { align-self: stretch; padding: 12px 14px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--stroke); }
.bubble-pics { display: flex; gap: 6px; flex-wrap: wrap; }
.bubble-pics img { width: 88px; height: 88px; border-radius: var(--r-sm); object-fit: cover; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.file-chip .ico { width: 16px; height: 16px; }
.answer-actions { display: flex; gap: 2px; }
.thinking { display: flex; flex-direction: column; gap: 6px; }
.dots { display: inline-flex; gap: 5px; padding: 8px 0; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--highlight); animation: blink 1.2s infinite both; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.md { display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
.md .md-h { font-weight: 800; font-size: 17px; }
.md-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.md code { font-family: ui-monospace, Menlo, monospace; font-size: 14px; background: var(--panel2); padding: 1px 6px; border-radius: 6px; }
.md pre { margin: 0; padding: 12px; border-radius: var(--r-sm); background: var(--panel); overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md a { color: var(--highlight); }
.md-table { overflow-x: auto; }
.md table { border-collapse: collapse; font-size: 14px; }
.md th, .md td { border: 1px solid var(--stroke); padding: 6px 10px; text-align: start; }
.composer { flex: none; padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--stroke); background: var(--bg); }
.composer-row { display: flex; align-items: flex-end; gap: 6px; }
.composer-input { flex: 1; min-width: 0; min-height: 48px; max-height: 160px; padding: 11px 16px; border-radius: 24px; background: var(--panel); border: 1px solid var(--stroke); color: var(--text); font: inherit; font-size: 16px; line-height: 1.6; resize: none; outline: 0; field-sizing: content; }
.composer-input:focus { border-color: var(--soft); }
.send-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--strong); color: #fff; display: grid; place-items: center; flex: none; }
.send-btn:disabled { background: var(--panel2); color: var(--subtle); }
.send-btn .ico { width: 20px; height: 20px; }
.send-btn.stop { background: var(--panel3); color: var(--text); }
.send-btn.quiet { background: var(--panel3); color: var(--text); border: 1px solid var(--stroke); }
.model-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding-inline: 12px 6px; border-radius: 18px; background: var(--panel2); border: 1px solid var(--stroke); }
.attach-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.attach-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding-block: 4px; padding-inline: 10px 4px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--stroke); }
.attach-chip img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.attach-chip .ico { width: 16px; height: 16px; }

/* حساب */
.wallet-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--r-lg); }
.who { display: flex; align-items: center; gap: 12px; padding: 10px 0; text-align: start; color: #fff; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.topup-btn { min-height: 48px; border-radius: var(--r-md); background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; text-align: center; }
.topup-btn.small { min-height: 40px; align-self: flex-start; padding: 0 18px; background: var(--strong); color: #fff; }
.row-btn { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border-radius: var(--r-lg); text-align: start; }
.row-btn .ico { color: var(--highlight); }
.chev { width: 18px; height: 18px; color: var(--subtle); }
.panel.list { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 16px; text-align: start; color: var(--text); text-decoration: none; width: 100%; }
.panel.list .list-row + .list-row { border-top: 1px solid var(--stroke); }
a.list-row { border-radius: var(--r-lg); }
.ok-badge { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--subtle); flex: none; }
.dot.on { background: var(--success); }
.state { border-radius: 999px; padding: 2px 8px; background: var(--panel3); color: var(--muted); white-space: nowrap; }
.state.answered { color: var(--success); }
.amount { white-space: nowrap; }
.now-balance { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pack { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--stroke); text-align: start; }
.pack.on { border: 2px solid var(--highlight); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.pack .badge { position: absolute; top: -10px; inset-inline-end: 10px; }
.pack .price-tag { align-self: flex-start; margin: 4px 0 6px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--highlight); }
.custom-lines { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
.custom-lines p { margin: 0; }
.t-msg { display: flex; flex-direction: column; gap: 2px; max-width: 88%; padding: 10px 14px; border-radius: 18px; background: var(--panel); }
.t-msg.mine { align-self: flex-start; background: var(--container); }
.t-msg.theirs { align-self: flex-end; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: var(--r-md); border: 1px solid transparent; }
.swatch.on { border-color: var(--highlight); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sw { position: relative; width: 64px; height: 64px; border-radius: 18px; border: 2px solid; overflow: hidden; }
.sw i { position: absolute; inset: auto 8px 8px; height: 18px; border-radius: 6px; }
.sw b { position: absolute; top: 8px; inset-inline-start: 8px; width: 18px; height: 18px; border-radius: 50%; }
.sw s { position: absolute; top: 8px; inset-inline-end: 8px; width: 18px; height: 8px; border-radius: 4px; }

/* دستیار */
.assistant-panel { position: fixed; inset-inline: 0; bottom: 0; z-index: 51; height: calc(100dvh - var(--safe-top) - 24px); display: flex; flex-direction: column;
  background: var(--bg); border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: var(--safe-bottom); overflow: hidden; animation: rise 260ms cubic-bezier(.2, .8, .2, 1); }
.chip-btn { min-height: 36px; padding: 0 12px; border-radius: 18px; background: var(--panel2); border: 1px solid var(--stroke); color: var(--text); white-space: nowrap; }
.suggest { text-align: start; padding: 12px 14px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--stroke); }
.step { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--panel); }
.step-n { width: 22px; height: 22px; border-radius: 50%; background: var(--container); display: grid; place-items: center; flex: none; }

.install-hint { position: fixed; z-index: 95; inset-inline: 12px; bottom: calc(var(--safe-bottom) + 12px); display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-lg);
  background: var(--panel2); border: 1px solid var(--stroke); box-shadow: 0 12px 32px rgba(0, 0, 0, .4); animation: rise-in 300ms cubic-bezier(.2, .8, .2, 1); }
.install-hint img { border-radius: 12px; }

/* An empty dir=auto field is LTR in browsers, which put the Persian placeholder and its ellipsis on the wrong side. */
textarea[dir="auto"]:placeholder-shown, input[dir="auto"]:placeholder-shown { direction: rtl; }

/* iPhone has no Back button: every sheet closes from its own header too. */
.sheet-head { display: flex; align-items: center; gap: 8px; padding-inline: 16px 8px; padding-bottom: 6px; }
.sheet-head h2 { flex: 1; min-width: 0; padding: 0; }

/* Before the web app opens to everyone. */
.soon { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: calc(var(--safe-top) + 24px) 24px calc(var(--safe-bottom) + 24px); text-align: center; }
.soon img { align-self: center; }
.soon h1 { margin: 0; }

/* ترندها (TrendScreen.kt) */
.trend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trend-tile { position: relative; aspect-ratio: 9 / 14; border-radius: var(--r-lg); overflow: hidden; padding: 0; color: #fff; text-align: start; }
.trend-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trend-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, rgba(8, 9, 15, .8)); }
.trend-badge { position: absolute; top: 10px; inset-inline-start: 10px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 85%, transparent); }
.trend-cap { position: absolute; inset: auto 0 0; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.trend-cap .t-body-sm { color: rgba(255, 255, 255, .78); }
.trend-back { display: flex; align-items: center; gap: 8px; min-height: 64px; width: 100%; padding-block: 12px 4px; padding-inline: 16px calc(16px + var(--chip-w, 120px)); color: var(--muted); }
.trend-hero { position: relative; height: 300px; width: 100%; max-width: 100%; border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center; padding: 0; }
.trend-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trend-hero .play-dot { position: relative; background: rgba(255, 255, 255, .2); }
.trend-h { margin: 4px 0 0; }
.trend-note { padding: 16px; margin: 0; }
.trend-part { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.trend-part-head { display: flex; align-items: center; gap: 12px; }
.trend-num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--highlight); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.trend-guide { flex: none; width: 52px; height: 52px; border-radius: var(--r-md); object-fit: cover; }
.trend-check { display: flex; align-items: center; gap: 10px; }
.trend-warn { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; }
.agree { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 4px; cursor: pointer; }
.agree input { flex: none; width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--accent); }
.trend-made { padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.trend-made h2 { margin: 0; text-wrap: balance; }
.trend-made .shiny-wrap, .trend-made .ghost-btn { width: 100%; }
.center-row { display: flex; justify-content: center; padding: 8px 0; }
.empty-line { padding: 24px 8px; margin: 0; }

/* متن روی عکس (TextOnImageScreen.kt و صفحه‌ی image-text سایت) */
.itx-stage { display: flex; justify-content: center; }
.itx-frame { position: relative; max-width: 100%; overflow: hidden; border-radius: var(--r-md); line-height: 0; user-select: none; -webkit-user-select: none; touch-action: none; background: var(--panel2); }
.itx-frame > img { display: block; width: 100%; height: 100%; object-fit: fill; -webkit-user-drag: none; }
.itx-layer { position: absolute; padding: 0; border: 0; background: none; line-height: 1; cursor: grab; outline: 1.5px dashed transparent; outline-offset: 4px; border-radius: 4px; touch-action: none; }
.itx-layer.on { outline-color: var(--highlight); }
.itx-box { display: block; }
.itx-text { display: block; white-space: pre; paint-order: stroke fill; letter-spacing: 0; }
.itx-actions { display: flex; align-items: center; gap: 8px; }
.itx-actions .ghost-btn { width: auto; flex: 1 1 0; min-width: 0; padding: 0 8px; gap: 4px; white-space: nowrap; }
.itx-actions .ghost-btn .ico { width: 20px; height: 20px; flex: none; }
.itx-fields { display: flex; flex-direction: column; gap: 12px; }
.itx-fields .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.itx-fields .two > * { min-width: 0; }
.ink-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--stroke); }
.range { display: flex; flex-direction: column; gap: 4px; }
.range-head { display: flex; align-items: center; }
.range input { width: 100%; height: 32px; accent-color: var(--accent); margin: 0; }
.itx-done { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--success) 8%, transparent); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); }
.itx-done p { margin: 0; }
.itx-done img { width: 100%; max-height: 420px; object-fit: contain; border-radius: var(--r-md); }

/* شبیه‌سازی صدا (VoiceCloneScreen.kt) */
.form.vc { gap: 18px; }
.vc-sec { display: flex; flex-direction: column; gap: 10px; }
.vc-sec h2, .vc-new h2 { margin: 0; }
.vc-sub { margin: 4px 0 0; }
.vc-voice, .vc-reading { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.vc-reading p { margin: 0; }
.vc-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vc-row .grow { min-width: 0; }
.vc-play { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--panel3); color: var(--text); }
.vc-play:disabled { color: var(--muted); }
.vc-badge { color: var(--soft); }
.vc-acts { display: flex; gap: 8px; }
.vc-acts .ghost-btn { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.ghost-btn.auto { width: auto; }
.ghost-btn.on { color: var(--highlight); border-color: var(--highlight); }
.vc-insert { display: flex; flex-direction: column; gap: 6px; }
.vc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-chip { min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--stroke); color: var(--text); background: transparent; }
.vc-fold { padding: 0; }
.vc-fold-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 14px; text-align: start; color: var(--text); }
.vc-fold-head .one-line { max-width: 55%; }
.vc-fold-body { display: flex; flex-direction: column; gap: 12px; padding: 0 14px 14px; }
.vc-fold-body .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vc-fold-body .two > * { min-width: 0; }
.vc-word { display: grid; grid-template-columns: 1fr 1fr 44px; gap: 8px; align-items: center; }
.vc-word .field-box { min-width: 0; }
.vc-tool { display: flex; flex-direction: column; gap: 8px; }
.vc-new { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.vc-step { display: flex; align-items: center; gap: 8px; }
.vc-step-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--soft); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.vc-step-num.done { color: var(--success); background: color-mix(in srgb, var(--success) 16%, transparent); }
.vc-sentence { margin: 0; padding: 12px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.vc-meter { height: 8px; border-radius: 4px; background: var(--stroke); overflow: hidden; }
.vc-meter i { display: block; height: 100%; border-radius: 4px; background: var(--success); transition: width 100ms linear; }
.vc-meter i.hot { background: var(--error); }

/* برگه‌های دعوت، حافظه، برند و تازه‌ها (InviteScreen.kt، MemoryScreen.kt، AccountMoreScreen.kt) */
.more-card { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.more-card h3, .more-card h4, .more-card p { margin: 0; }
.more-stat { padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.sheet-scroll .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sheet-scroll .two > * { min-width: 0; }
.invite-code { align-self: flex-start; font-size: 22px; font-weight: 700; color: var(--text); unicode-bidi: isolate; }
.more-switch { flex-direction: row; align-items: center; gap: 12px; cursor: pointer; }
.more-switch .grow { min-width: 0; }
.fact { display: flex; align-items: center; gap: 8px; padding-block: 4px; border-bottom: 1px solid var(--stroke); }
.fact .grow { min-width: 0; overflow-wrap: anywhere; }
.more-suggest { display: flex; flex-direction: column; gap: 8px; padding-block: 6px; }
.brand-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; width: 100%; text-align: start; color: var(--text); min-height: 64px; }
.brand-row .grow { min-width: 0; }
.brand-row .ink-dot { width: 18px; height: 18px; flex: none; }
.brand-sub { margin: 8px 0 0; }
.changelog-h { margin: 6px 0 0; color: var(--soft); }
.changelog-list { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.more-card .text-btn { align-self: flex-start; min-height: 44px; }
.text-btn.danger { color: var(--error); }

/* گنجوتسو (GenjutsuScreen.kt) */
.gj-play { inset: 0; margin: auto; background: rgba(255, 255, 255, .2); }
.gj-viewer-panel { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 20px; background: linear-gradient(to bottom, transparent, rgba(8, 9, 15, .9) 25%); }
.gj-viewer-panel h2, .gj-viewer-panel p { margin: 0; }
.gj-viewer-panel p { color: rgba(255, 255, 255, .8); }
.gj-chips { display: flex; gap: 8px; }
.gj-chips.scroll { overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.gj-chips.scroll::-webkit-scrollbar { display: none; }
.gj-chip { min-height: 48px; padding: 0 16px; border-radius: 999px; color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .12); }
.gj-chip[aria-pressed="true"] { color: #fff; background: var(--accent); }
.gj-tag { flex: none; min-height: 48px; padding: 0 14px; border-radius: 999px; color: var(--highlight); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.gj-tag:disabled { color: var(--subtle); border-color: var(--stroke); background: transparent; }
.gj-pick { display: flex; align-items: center; gap: 12px; padding: 12px; width: 100%; text-align: start; color: var(--text); }
.gj-pick .grow { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gj-pick-pic { position: relative; flex: none; width: 64px; height: 96px; border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center; }
.gj-pick-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gj-pick-pic .play-dot { position: relative; width: 36px; height: 36px; }
.gj-own { display: flex; flex-direction: column; gap: 10px; }
.gj-own p { margin: 0; }
.gj-own-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gj-own-row .grow { min-width: 0; }
.gj-own-pic { flex: none; width: 56px; height: 72px; border-radius: var(--r-sm); object-fit: cover; background: var(--panel3); }
.gj-photo { display: flex; flex-direction: column; gap: 6px; }
.gj-mentions { padding: 6px; display: flex; flex-direction: column; }
.gj-mention { display: flex; align-items: center; gap: 12px; padding: 6px 8px; min-height: 56px; border-radius: var(--r-sm); text-align: start; color: var(--text); }
.gj-mention:active { background: var(--panel3); }
.gj-mention-pic { flex: none; width: 44px; height: 44px; border-radius: var(--r-sm); overflow: hidden; background: var(--panel3); display: grid; place-items: center; color: var(--highlight); }
.gj-mention-pic img, .gj-mention-pic video { width: 100%; height: 100%; object-fit: cover; }

/* گفتگوی صوتی (VoiceCallScreen.kt و voice-chat.css سایت) */
.send-btn.live { background: linear-gradient(to left, var(--strong), var(--accent), var(--action-end)); }
.composer-row .send-btn.live + .send-btn { margin-inline-start: 2px; }
.vcall-off { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; text-align: center; color: var(--muted); }
.vcall-off .ico { width: 48px; height: 48px; }
.vcall-off p { margin: 0; color: var(--text); }
.vcall-facts { display: flex; flex-direction: column; gap: 4px; padding: 14px; }
.vcall-facts p { margin: 0; }
.vcall { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 12px 20px 16px;
  background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%); }
.vcall-pills { display: flex; gap: 8px; }
.vcall-pill { padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--panel2) 80%, transparent); border: 1px solid var(--stroke); color: var(--text); }
.vcall-orb-wrap { position: relative; width: min(62vw, 260px); aspect-ratio: 1; display: grid; place-items: center; margin-top: 4vh; flex: none; }
.vcall-orb { --vc-level: 0; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cyan) 90%, transparent), transparent 55%),
    radial-gradient(circle at 70% 75%, var(--action-end), transparent 60%),
    radial-gradient(circle at 50% 50%, var(--accent), color-mix(in srgb, var(--strong) 55%, #000));
  box-shadow: 0 0 calc(30px + 60px * var(--vc-level)) color-mix(in srgb, var(--accent) 45%, transparent);
  transform: scale(calc(.92 + .22 * var(--vc-level)));
  transition: transform 90ms linear, box-shadow 90ms linear, filter 240ms ease;
  animation: vc-breathe 5s ease-in-out infinite; }
.vcall-orb.dim { filter: grayscale(.6) brightness(.8); }
.vcall[data-phase="connecting"] .vcall-orb, .vcall[data-phase="reconnecting"] .vcall-orb { animation-duration: 1.6s; }
.vcall[data-phase="thinking"] .vcall-orb { animation-duration: 1.4s; }
.vcall-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); animation: vc-ring 3.2s ease-out infinite; }
.vcall-ring + .vcall-ring { animation-delay: 1.6s; }
@keyframes vc-breathe { 0%, 100% { rotate: 0deg; } 50% { rotate: 25deg; } }
@keyframes vc-ring { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.15); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vcall-orb, .vcall-ring { animation: none; } .vcall-orb { transition: none; } }
.vcall-status { margin: 8px 0 0; text-align: center; }
.vcall-captions { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 14px; text-align: center; }
.vcall-captions p { margin: 0; max-width: 100%; }
.vcall-ai { overflow-y: auto; min-height: 0; color: var(--text); }
.vcall-ai.subtle { color: var(--subtle); }
.vcall-warn { margin: 0 0 8px; text-align: center; }
.vcall-buttons { display: flex; justify-content: space-evenly; width: 100%; padding-top: 8px; }
.vcall-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 96px; }
.vcall-round { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--panel3); border: 1px solid var(--stroke); color: var(--text); }
.vcall-round .ico { width: 28px; height: 28px; }
.vcall-btn.off .vcall-round { background: color-mix(in srgb, var(--error) 25%, var(--panel3)); }
.vcall-btn.end .vcall-round { background: #D9364A; border-color: #D9364A; color: #fff; }
.vcall-btn:disabled { opacity: .5; }
.vcall-end { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.vcall-end p { margin: 0; }
.vcall-end .shiny-wrap, .vcall-end .ghost-btn { width: 100%; margin-top: 12px; }

/* ---------------------------------------------------------------- موشن‌ساز (MotionScreen.kt) */
.mo-steps { display: flex; gap: 8px; }
.mo-step { flex: 1; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; border-radius: 24px; background: var(--panel); border: 1px solid var(--stroke); color: var(--muted); transition: background-color 120ms, border-color 120ms; }
.mo-step.on { background: color-mix(in srgb, var(--accent) 18%, var(--panel)); border-color: var(--soft); color: var(--text); }
.mo-step.done { color: var(--text); }
.mo-step-n { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--panel3); }
.mo-step.on .mo-step-n, .mo-step.done .mo-step-n { background: var(--accent); color: #fff; }
.mo-step-n .ico { width: 16px; height: 16px; fill: currentColor; }
.mo-step .t-label-md { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-actions { display: flex; gap: 10px; align-items: flex-start; }
.mo-actions > .shiny-wrap { flex: 1; min-width: 0; }
.mo-actions > .ghost-btn { flex: 0 0 32%; min-height: 56px; }
.mo-hint { display: flex; gap: 8px; color: var(--subtle); }
.mo-count { align-self: flex-end; }
.mo-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mo-two > * { min-width: 0; }
@media (max-width: 360px) { .mo-two { grid-template-columns: 1fr; } }
.mo-dots { display: flex; gap: 12px; flex-wrap: wrap; }
.mo-dot { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--stroke); flex: none; }
.mo-dot.add { display: grid; place-items: center; background: var(--panel2); border-style: dashed; color: var(--muted); }
.mo-dot.add .ico { width: 22px; height: 22px; fill: currentColor; }
.mo-dot.sm { width: 36px; height: 36px; }
.mo-dot.xs { width: 20px; height: 20px; }
.mo-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.mo-swatch { aspect-ratio: 1; max-width: 100%; border-radius: 50%; border: 2px solid var(--stroke); }
.mo-swatch.on { outline: 3px solid var(--highlight); outline-offset: 2px; }
.mo-code { display: flex; align-items: flex-end; gap: 12px; }
.mo-code-dot { width: 40px; height: 40px; border-radius: 50%; flex: none; margin-bottom: 8px; border: 2px solid var(--stroke); }
.mo-file { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border-radius: var(--r-md); text-align: start;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--text); transition: background-color 120ms; }
.mo-file:active { background: color-mix(in srgb, var(--accent) 20%, var(--panel)); }
.mo-file > .ico { width: 24px; height: 24px; fill: var(--highlight); flex: none; }
.ltr-name { display: block; direction: ltr; unicode-bidi: plaintext; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-file > .grow { min-width: 0; }
.mo-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.mo-photo { position: relative; width: 72px; height: 72px; flex: none; border-radius: var(--r-sm); overflow: hidden; background: var(--panel3); display: block; }
.mo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-photo .icon-btn { position: absolute; top: 2px; inset-inline-end: 2px; width: 32px; height: 32px; }
.mo-photo .icon-btn::after { content: ""; position: absolute; inset: -6px; }
.mo-switch { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--text); }
.mo-mine { margin: 12px 0 0; }
.mo-orders { display: flex; flex-direction: column; gap: 8px; }
.mo-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; text-align: start; color: var(--text); }
.mo-row > .grow { min-width: 0; }
.mo-thumb { width: 52px; height: 52px; flex: none; border-radius: var(--r-sm); overflow: hidden; background: var(--panel3); display: grid; place-items: center; }
.mo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mo-thumb .ico { width: 24px; height: 24px; fill: var(--muted); }
.clamp1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-chip { flex: none; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: var(--panel3); color: var(--muted); }
.mo-chip.hi { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--highlight); }
.mo-chip.ok { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.mo-chip.bad { background: color-mix(in srgb, var(--error) 16%, transparent); color: var(--error); }
.mo-wait { padding: 28px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.mo-wait p { margin: 0; }
.mo-back { display: flex; align-items: center; gap: 6px; min-height: 64px; width: 100%; padding-block: 12px 4px; padding-inline: 16px calc(16px + var(--chip-w, 120px)); color: var(--highlight); }
.mo-back .ico { width: 20px; height: 20px; fill: currentColor; }
.mo-head { display: flex; align-items: flex-start; gap: 10px; }
.mo-head h1 { margin: 0; min-width: 0; }
.mo-ok { margin: 0; color: var(--success); }
.mo-scene { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.mo-scene p { margin: 0; }
.mo-scene-head { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-block: -8px -4px; }
.mo-hi { color: var(--highlight); }
.mo-say { display: flex; gap: 6px; align-items: flex-start; color: var(--text); }
.mo-say .ico { width: 18px; height: 18px; fill: var(--highlight); flex: none; margin-top: 4px; }
.mo-dialog { max-height: calc(100dvh - 48px); overflow-y: auto; }
.mo-video { position: relative; width: 100%; max-width: 100%; max-height: 70dvh; margin-inline: auto; border-radius: var(--r-lg); overflow: hidden; background: #000; display: grid; place-items: center; }
.mo-video video, .mo-video > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mo-video > img { position: absolute; inset: 0; object-fit: cover; opacity: .5; }
.mo-video .loader { position: relative; }
.mo-rt-video { flex: none; padding: 0 16px 10px; display: flex; justify-content: center; }
.mo-rt-video .mo-video { width: auto; height: 26dvh; max-height: 26dvh; }
.mo-rt-video > img { height: 26dvh; border-radius: var(--r-md); }
.mo-tabs { flex: none; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 16px 10px; }
.mo-tabs::-webkit-scrollbar { display: none; }
.mo-tabs .chip-btn { min-height: 44px; padding: 0 16px; border-radius: 22px; }
.mo-tabs .chip-btn[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 22%, var(--panel2)); border-color: var(--soft); color: var(--highlight); }
.mo-color-row, .mo-photo-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: start; color: var(--text); width: 100%; }
.mo-color-row > .grow, .mo-photo-row > .grow { min-width: 0; }
.mo-photo-acts { display: flex; flex-wrap: wrap; margin-inline-start: -14px; }
@media (prefers-reduced-motion: reduce) { .mo-step, .mo-file { transition: none; } }

/* ---------------------------------------------------------------- زیرنویس (SubtitleScreen.kt) */
.sb-help-row { display: flex; align-items: center; gap: 4px; }
.sb-help-row > .grow { min-width: 0; }
.sb-help .ico { width: 22px; height: 22px; fill: var(--muted); }
.sb-help[aria-expanded="true"] .ico { fill: var(--highlight); }
.sb-help-text { margin: 6px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--panel2); }
.sb-progress { display: flex; flex-direction: column; gap: 6px; }
.sb-bar { height: 6px; border-radius: 3px; background: var(--panel3); overflow: hidden; }
.sb-bar i { display: block; height: 100%; background: var(--highlight); border-radius: inherit; transition: width 240ms cubic-bezier(.2, .8, .2, 1); }
.sb-title, .sb-meta { margin: 0; }
.sb-lines-head { margin: 6px 0 0; }
.sb-lines { display: flex; flex-direction: column; gap: 8px; }
.sb-line { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 12px; text-align: start; color: var(--text); }
.sb-line > span { min-width: 0; overflow-wrap: anywhere; }
.sb-time { color: var(--subtle); }
.sb-chosen { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: var(--r-sm); background: var(--panel2); border: 1px solid var(--stroke); text-align: start; color: var(--text); }
.sb-chosen > .grow { min-width: 0; }
.sb-preview { display: block; width: 112px; aspect-ratio: 1.6; max-width: 100%; flex: none; border-radius: 8px; overflow: hidden; background: var(--panel3); }
.sb-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-group { margin: 8px 0 0; }
.sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sb-card { display: flex; flex-direction: column; gap: 6px; padding: 5px; min-width: 0; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--stroke); color: var(--text); text-align: center; }
.sb-card .sb-preview { width: 100%; }
.sb-card.on { background: var(--panel3); border: 2px solid var(--accent); padding: 4px; }
.sb-two > .ghost-btn { flex: 1; }
@media (prefers-reduced-motion: reduce) { .sb-bar i { transition: none; } }

/* «ویرایشگر زیرنویس»: تمام‌صفحه و همیشه تیره مثل خود ویدیو (SubtitleEditor.kt). */
.se { position: fixed; inset: 0; z-index: 60; background: #000; color: #fff; display: flex; flex-direction: column; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); overscroll-behavior: contain; animation: fade 160ms; }
.se-top { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.se-top h2 { margin: 0; }
.se-export { min-height: 44px; padding: 0 20px; border-radius: 22px; background: var(--accent); color: #fff; flex: none; }
.se-msg { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.se-mid { flex: 1; min-height: 0; display: flex; align-items: center; gap: 6px; padding: 0 8px; }
.se-tools { display: flex; flex-direction: column; gap: 10px; align-self: stretch; justify-content: center; overflow-y: auto; scrollbar-width: none; flex: none; }
.se-tool { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; padding: 6px 0; border-radius: var(--r-sm); color: #fff; }
.se-tool:disabled { opacity: .35; }
.se-tool-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.se-tool-ico .ico { width: 20px; height: 20px; fill: #fff; }
.se-tool:focus-visible { outline: 2px solid var(--soft); outline-offset: 2px; }
.se-stage { flex: 1; min-width: 0; align-self: stretch; display: grid; place-items: center; }
.se-frame { position: relative; overflow: hidden; border-radius: 6px; background: #111; max-width: 100%; }
.se-frame video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; }
.se-place { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.se-place:focus-visible { outline: 2px solid var(--soft); outline-offset: -2px; }
.se-place > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.se-box { fill: none; stroke: var(--soft); stroke-width: 1.5; }
.se-knob { fill: #fff; }
.se-knob-ico { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.se-guide { stroke: var(--cyan); stroke-opacity: .85; stroke-width: 1; }
/* زمان کلمه‌ها: هر کلمه تکه‌ای روی زمان جمله، مرزها کشیدنی. */
.se-strip { position: relative; height: 72px; border-radius: var(--r-sm); background: var(--panel3); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; flex: none; }
.se-strip-word { position: absolute; top: 10px; bottom: 10px; display: grid; place-items: center; overflow: hidden; white-space: nowrap; border-radius: 10px; color: var(--text); background: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: inset 0 0 0 1px var(--panel3); }
.se-strip-word.odd { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.se-strip-word.on { background: var(--accent); color: #fff; }
.se-edge { position: absolute; top: 0; bottom: 0; width: 24px; transform: translateX(-50%); background: none; } /* rtl-ignore */
.se-edge::before { content: ""; position: absolute; top: 4px; bottom: 4px; inset-inline-start: 11px; width: 2px; border-radius: 1px; background: color-mix(in srgb, var(--text) 60%, transparent); }
.se-edge::after { content: ""; position: absolute; bottom: 4px; inset-inline-start: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--text); }
.se-edge.on::before { width: 3px; background: var(--highlight); }
.se-edge.on::after { inset-inline-start: 5px; width: 14px; height: 14px; background: var(--highlight); }
.se-edge:focus-visible { outline: 2px solid var(--soft); outline-offset: -2px; border-radius: 6px; }
.se-now { position: absolute; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: var(--cyan); pointer-events: none; } /* rtl-ignore */
.se-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.se-busy i { width: 35%; animation: se-busy 1.2s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes se-busy { from { transform: translateX(-110%); } to { transform: translateX(300%); } } /* rtl-ignore */
@media (prefers-reduced-motion: reduce) { .se-busy i { width: 100%; animation: none; opacity: .6; } }
.se-post { display: flex; flex-direction: column; gap: 2px; padding: 4px 12px 12px; border-radius: var(--r-sm); background: var(--panel3); }
.se-post-head { display: flex; align-items: center; color: var(--highlight); }
.se-post p { margin: 0; white-space: pre-wrap; }
.se-play { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(0, 0, 0, .6); }
.se-play .ico { width: 28px; height: 28px; fill: #fff; }
.se-fail { position: absolute; z-index: 3; inset-inline: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; border-radius: var(--r-md); background: rgba(0, 0, 0, .8); text-align: center; }
.se-fail p { margin: 0; }
/* خود زیرنویس: جایش با پیکسل‌های قاب خروجی است، پس left و right فیزیکی‌اند (حاشیه‌های ASS). */
.se-cap { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; pointer-events: none; transform-origin: center; } /* rtl-ignore */
.se-stack { display: grid; text-align: center; unicode-bidi: plaintext; white-space: pre-wrap; overflow-wrap: anywhere; }
.se-stack > span { grid-area: 1 / 1; }
/* سایه‌ی لایه‌ی دورخط (filter) لایه‌ی تازه می‌سازد و روی متن می‌آید؛ متن باید بالاتر بماند. */
.se-stack > .se-fill { position: relative; z-index: 1; }
.se-fill > span, .se-stroke > span { border-radius: .12em; }
/* حرکت «قطعه‌ای»: شکل‌ها در یک SVG به پیکسل قاب، هر کلمه جدا روی جای خودش (لایه‌ها به ترتیب: جلوه، دورخط، رنگ). */
.sb-root { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sb-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sb-line { position: absolute; inset: 0; }
.sb-word { position: absolute; display: grid; white-space: nowrap; text-align: center; unicode-bidi: plaintext; }
.sb-word > span { grid-area: 1 / 1; position: relative; color: transparent; }
.se-play-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px 0; }
.se-clock { color: #ccc; flex: none; font-variant-numeric: tabular-nums; }
.se-seek { flex: 1; min-width: 0; height: 32px; accent-color: var(--soft); margin: 0; }
.se-words { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px 12px; min-height: 56px; align-items: center; }
.se-word { flex: none; min-height: 40px; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, .15); color: #fff; white-space: nowrap; }
.se-word.on { background: var(--accent); }
.se-bar { margin: 4px 16px 8px; }
.se-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 16px 8px; flex: none; }
.se-sheet-body { max-height: 38dvh; }
/* پشت برگه کم‌رنگ، مثل اندروید، تا تغییر روی ویدیو دیده شود. */
.se .scrim { background: rgba(0, 0, 0, .13); }
.se-groups { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; }
.se-groups .chip-btn[aria-pressed="true"] { border-color: var(--soft); color: var(--highlight); }
.se-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.se-grid .sb-card { text-align: center; color: var(--text); }
.se-poster { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--panel3); }
.se-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.se-sample { margin: 0; padding: 14px; border-radius: var(--r-sm); background: var(--panel3); color: var(--text); font-size: 22px; line-height: 1.8; text-align: center; }
.se-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.se-swatch { aspect-ratio: 1; min-height: 44px; border-radius: 50%; border: 1px solid var(--stroke); }
.se-swatch.on { border: 3px solid var(--highlight); }
.se-range { gap: 0; }
.se-val { color: var(--highlight); }
.se-saved { display: flex; align-items: center; gap: 4px; border-radius: var(--r-sm); background: var(--panel3); }
.se-saved-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; color: var(--text); text-align: start; }
.se-saved-pick i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--stroke); flex: none; }
.sb-editor-text { margin: 0; }
@media (prefers-reduced-motion: reduce) { .se { animation: none; } }

/* چندهوش */
.ch-seat { display: flex; align-items: center; gap: 4px; }
.ch-past { display: flex; align-items: center; gap: 10px; padding: 14px; text-align: start; min-height: 56px; }
.ch-past:focus-visible { outline: 2px solid var(--soft); outline-offset: 2px; }
.ch-head { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--panel2); }
.ch-head p { margin: 0; }
.ch-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-chip { padding: 4px 10px; border-radius: var(--r-sm); background: var(--panel3, var(--panel)); border: 1px solid var(--stroke); }
.ch-msg { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.ch-msg p { margin: 0; }
.ch-msg.mine { background: var(--panel2); }
.ch-msg-head { display: flex; align-items: center; gap: 8px; }
.ch-seat-name { color: var(--soft); }
.ch-wait { display: flex; align-items: center; gap: 10px; }
.ch-verdict { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--panel2); border: 1px solid color-mix(in srgb, var(--soft) 50%, transparent); }
.ch-verdict > p { margin: 0; }
.ch-foot { position: sticky; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px; background: var(--bg); border-top: 1px solid var(--stroke); }
.ch-say { display: flex; align-items: flex-end; gap: 8px; }

/* «بیشتر» پایین برگه وقتی ادامه دارد */
.sheet-more { position: absolute; inset-inline-start: 50%; transform: translateX(50%); z-index: 2; display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding-inline: 14px 8px;
  border-radius: 999px; background: var(--strong); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); animation: fade 200ms; }
.sheet-more svg { width: 20px; height: 20px; fill: currentColor; }
.sheet-more:focus-visible { outline: 2px solid var(--soft); outline-offset: 2px; }

/* چت: ابزارها بالا، نوشتن پایین */
.composer-tools { display: flex; align-items: center; gap: 6px; }
.composer-tools .model-pill { align-self: center; }
.composer-tools .send-btn { width: 40px; height: 40px; }
.composer-tools .send-btn .ico { width: 20px; height: 20px; }
.menu.up.at-end { inset-inline: auto 0; }