@font-face{font-family:Alexandria;src:url(/static/brand/alex-arabic.woff2) format("woff2");font-weight:300 800;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC}
@font-face{font-family:Alexandria;src:url(/static/brand/alex-latin.woff2) format("woff2");font-weight:300 800;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  color-scheme: dark;
  --bg:#07070c; --bg2:#0e0e17; --card:#12121d; --line:#22223a;
  --text:#eeeef6; --muted:#9a9ab3; --violet:#8b5cf6; --cyan:#22d3ee; --pink:#f472b6;
  --success:#6ee7b7; --danger:#fda4af; --warning:#fcd34d;
  --primary:linear-gradient(135deg,#8b5cf6,#6d28d9);
  --glow:0 10px 30px rgba(139,92,246,.3);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-width:0; min-height:100dvh; background:radial-gradient(circle at 80% 0%,rgba(139,92,246,.25),transparent 60%),var(--bg); color:var(--text); font:400 15px/1.75 Alexandria,system-ui,sans-serif; font-variant-numeric:tabular-nums; }
h1,h2,h3 { font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
h1 { font-size:28px; } h2 { font-size:20px; }
p { overflow-wrap:anywhere; }
a { color:var(--cyan); text-underline-offset:4px; }
button,input,textarea,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:44px; padding:10px 18px; border:1px solid var(--line); border-radius:14px; background:var(--bg2); color:var(--text); font-weight:600; cursor:pointer; transition:background .2s,border-color .2s,box-shadow .2s,transform .2s; }
button:hover { border-color:var(--violet); }
button:active { transform:translateY(1px); }
button:disabled { opacity:.6; cursor:wait; }
.primary,.btn-primary { background:var(--primary); border-color:transparent; box-shadow:var(--glow); color:#fff; }
.primary:hover,.btn-primary:hover { box-shadow:0 12px 36px rgba(139,92,246,.45); }
.ghost,.btn-ghost { background:transparent; box-shadow:none; }
.icon-button { flex:none; width:44px; height:44px; padding:10px; }
.icon { display:block; flex:none; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
label { font-weight:600; }
input:not([type=checkbox]):not([type=radio]),textarea,select { width:100%; min-width:0; background:var(--bg2); color:var(--text); border:1px solid var(--line); border-radius:14px; padding:12px 16px; font-size:16px; }
input:focus,textarea:focus,select:focus { border-color:var(--violet); }
textarea { resize:vertical; min-height:75px; }
:where(button,a,input,textarea,select,[tabindex]):focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.card { min-width:0; padding:24px; margin-bottom:16px; background:linear-gradient(135deg,rgba(255,255,255,.025),transparent),var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.pill,.chip,.status-chip { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:5px 12px; border:1px solid var(--line); border-radius:999px; background:var(--bg2); font-size:12px; line-height:1.75; }
.pill.active,.chip.active { background:var(--primary); color:#fff; }
.status-chip.processing,.status-chip.pending { color:var(--warning); background:rgba(252,211,77,.08); border-color:rgba(252,211,77,.25); }
.status-chip.ready { color:var(--success); background:rgba(110,231,183,.08); border-color:rgba(110,231,183,.25); }
.status-chip.failed { color:var(--danger); background:rgba(253,164,175,.08); border-color:rgba(253,164,175,.25); }
.error { color:var(--danger); font-size:13px; }
.muted { color:var(--muted); }
.gradient-text { background:linear-gradient(90deg,var(--violet),var(--cyan)); background-clip:text; -webkit-background-clip:text; color:transparent; }
.spinner { display:inline-block; width:18px; height:18px; flex:none; border:2px solid currentColor; border-inline-end-color:transparent; border-radius:50%; animation:spin .8s linear infinite; }
.skeleton { position:relative; overflow:hidden; min-height:20px; border-radius:10px; background:var(--bg2); }
.skeleton::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent,rgba(154,154,179,.12),transparent); transform:translateX(100%); animation:shimmer 1.6s ease-in-out infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes shimmer { to { transform:translateX(-100%); } }
.safe-area { padding-top:env(safe-area-inset-top,0px); padding-right:env(safe-area-inset-right,0px); padding-bottom:env(safe-area-inset-bottom,0px); padding-left:env(safe-area-inset-left,0px); }
.safe-bottom { padding-bottom:max(16px,env(safe-area-inset-bottom,0px)); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* Login: one real password field, with no length restriction. */
.login-page { display:grid; place-items:center; padding: max(32px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.login-wrap { width:min(100%,420px); margin:0 auto; padding:0; }
.login-brand { text-align:center; margin-bottom:32px; }
.login-brand img { display:block; width:76px; height:76px; margin:0 auto 18px; border-radius:20px; box-shadow:0 12px 48px rgba(139,92,246,.15); }
.login-brand h1 { font-size:32px; margin:0 0 10px; }
.login-brand p { margin:0; color:var(--muted); font-size:13px; font-weight:300; }
.login-card { padding:28px; margin:0; }
.login-card h2 { margin:0 0 4px; }
.login-card>p { color:var(--muted); font-size:13px; margin:0 0 24px; }
.login-card label { display:block; font-size:13px; margin-bottom:10px; }
.password-field { display:flex; align-items:center; background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:4px; }
.password-field:focus-within { border-color:var(--violet); }
.password-field input:not([type=checkbox]):not([type=radio]) { border:0; background:transparent; text-align:center; letter-spacing:.18em; direction:ltr; padding:10px 4px; }
.password-field input:focus-visible { outline-offset:-2px; }
.password-field .icon-button { border:0; background:transparent; color:var(--muted); }
.password-field:has(input[aria-invalid=true]) { border-color:var(--danger); }
.login-error { min-height:24px; margin:10px 0 14px; }
.login-submit { width:100%; min-height:50px; }
.login-wrap footer { text-align:center; margin-top:28px; font-size:12px; color:var(--muted); }
.login-wrap footer a { display:inline-flex; align-items:center; min-height:44px; color:var(--text); text-decoration:none; }
.login-wrap footer a:hover { color:var(--cyan); }

/* Compatibility for the existing home/editor; their redesign is separate. */
header,main { width:100%; max-width:1200px; margin:auto; padding:16px; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
header h1 { margin:8px 0; }
.layout { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.layout>* { min-width:0; }
.players { display:flex; gap:8px; min-width:0; }
video { width:100%; min-width:0; max-height:60vh; background:#000; border-radius:14px; }
.players video:not([hidden]) { flex:1; width:50%; }
#tabs { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
#tabs button { border-radius:999px; }
#tabs button.active { background:var(--primary); }
#messages { max-height:50vh; overflow:auto; }
.message { padding:12px; border-radius:14px; margin:8px 0; background:var(--bg2); border:1px solid var(--line); white-space:pre-wrap; overflow-wrap:anywhere; unicode-bidi:plaintext; text-align:start; }
.message.user { background:var(--primary); }
.message ul { margin:0; padding-inline-start:1.4em; }
.timestamp { color:var(--cyan); cursor:pointer; text-decoration:underline; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; }
#typing { color:var(--muted); }
@media(min-width:800px) { .layout { grid-template-columns:minmax(0,3fr) minmax(0,2fr); } }
@media(max-width:799px) { .players video:not([hidden]) { width:100%; } .players.compare #player { display:none; } #form { position:sticky; bottom:0; background:var(--card); padding:10px 0 max(10px,env(safe-area-inset-bottom)); z-index:2; } }
@media(max-width:380px) { .card { padding:18px; } .login-brand h1 { font-size:28px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* HOME — DAF upload workspace. */
.app-header { padding-top:max(24px,env(safe-area-inset-top)); padding-bottom:24px; }
.home-brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-size:23px; font-weight:700; }
.home-brand img { border-radius:12px; }
.app-header #logout { color:var(--muted); }
.upload-hero { position:relative; isolation:isolate; padding:36px 24px 28px; text-align:center; border-radius:24px; background:radial-gradient(ellipse at 50% 0%,rgba(139,92,246,.12),transparent 75%),rgba(18,18,29,.8); transition:background .2s,box-shadow .2s; }
.drop-border { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; }
.drop-border rect { x:1px; y:1px; width:calc(100% - 2px); height:calc(100% - 2px); rx:24px; }
.upload-hero.dragging { background:rgba(139,92,246,.22); box-shadow:0 0 0 4px rgba(34,211,238,.15),var(--glow); }
.hero-icon,.empty-icon { display:grid; place-items:center; margin:0 auto 16px; width:64px; height:64px; border:1px solid rgba(139,92,246,.35); border-radius:20px; background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(34,211,238,.08)); color:#bba2ff; }
.hero-icon .icon { width:30px; height:30px; }
.upload-hero h1 { margin:0 0 8px; font-size:28px; }
.hero-subtitle { margin:0 0 24px; color:var(--muted); font-weight:300; }
#choose-file { min-width:176px; min-height:50px; }
.drop-hint { margin:12px 0 22px; font-size:12px; color:var(--muted); }
.constraints { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.constraints .chip { font-size:11px; padding:5px 10px; }
#upload-error:empty,#jobs-error:empty { display:none; }
#upload-error { margin:18px 0 0; }
#upload-active { max-width:480px; margin:0 auto; }
#upload-active h2 { margin:0 0 10px; }
#upload-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#upload-size { margin:4px 0 20px; font-size:13px; }
.progress-label { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); }
#upload-percent { color:var(--cyan); font-weight:600; }
#progress { display:block; width:100%; appearance:none; border:0; height:8px; background:var(--line); border-radius:99px; overflow:hidden; margin:10px 0 22px; direction:ltr; }
#progress::-webkit-progress-bar { background:var(--line); border-radius:99px; }
#progress::-webkit-progress-value { background:linear-gradient(90deg,var(--violet),var(--cyan)); border-radius:99px; }
#progress::-moz-progress-bar { background:linear-gradient(90deg,var(--violet),var(--cyan)); border-radius:99px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:32px 0 18px; }
.section-heading h2 { display:flex; align-items:center; gap:10px; margin:0; }
.section-heading>.muted { font-size:12px; }
#jobs-count { color:var(--muted); min-width:32px; padding:2px 9px; }
.jobs-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.job-card { display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:0; min-width:0; width:auto; margin:0; border:1px solid var(--line); border-radius:20px; overflow:hidden; text-decoration:none; color:var(--text); background:var(--card); transition:border-color .2s,transform .2s; }
.job-card:hover { border-color:var(--violet); transform:translateY(-2px); }
.job-thumbnail { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:9/16; max-height:240px; overflow:hidden; background:radial-gradient(ellipse at 70% 20%,rgba(139,92,246,.3),transparent 80%),linear-gradient(140deg,#19172c,#101a26); color:#73658e; }
.job-thumbnail>.icon { width:38px; height:38px; }
.job-thumbnail img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.thumbnail-play { position:absolute; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:#fff; background:rgba(7,7,12,.6); border:1px solid rgba(255,255,255,.18); }
.thumbnail-play .icon { width:20px; height:20px; }
.job-content { min-width:0; padding:18px; }
.job-name { display:block; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.job-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:8px 0 12px; color:var(--muted); font-size:11px; }
.job-meta .job-time { font-size:inherit; }
.job-card .status-chip { max-width:100%; font-size:11px; padding:4px 9px; }
.job-card .status-chip .icon,.job-card .spinner { width:14px; height:14px; }
.job-error { margin:8px 0 0; color:var(--muted); font-size:11px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.empty-state { padding:40px 20px 48px; text-align:center; border:1px solid var(--line); border-radius:20px; background:rgba(18,18,29,.5); }
.empty-state h2 { margin:0 0 10px; font-size:18px; }
.empty-state p { margin:0; color:var(--muted); font-size:13px; }
.empty-icon { width:56px; height:56px; border-radius:18px; }
.app-footer { padding:28px 16px max(28px,env(safe-area-inset-bottom)); text-align:center; color:var(--muted); font-size:12px; }
.app-footer a { display:inline-flex; align-items:center; min-height:44px; color:var(--text); text-decoration:none; }
.back-home { display:inline-flex; align-items:center; min-height:44px; margin-bottom:12px; }
@media(min-width:700px) and (max-width:1023px) { .jobs-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:700px) { .job-card { flex-direction:row; } .job-thumbnail { flex:0 0 108px; width:108px; max-height:none; } .job-content { flex:1; align-self:center; padding:16px; } }
@media(max-width:699px) {
  .app-header { padding:20px 20px 12px; }
  .home-brand { font-size:20px; gap:10px; }
  .home-brand img { width:38px; height:38px; }
  .upload-hero { padding:28px 14px 24px; }
  .upload-hero h1 { font-size:24px; }
  .hero-subtitle { font-size:12px; }
  .jobs-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .section-heading { margin-top:26px; }
  .section-heading>.muted { display:none; }
  .job-card { flex-direction:row; align-items:stretch; }
  .job-thumbnail { flex:0 0 80px; width:80px; max-height:none; min-height:142px; }
  .job-content { flex:1; padding:16px 12px; }
  .job-name { font-size:12px; }
  .job-meta { gap:4px 10px; margin:6px 0 10px; }
  .job-error { font-size:10px; }
}
/* Override the shared input sizing for the visually hidden file control. */
input#file.sr-only { width:1px; height:1px; padding:0; border:0; }

/* Job workspace: the document stays still; messages own vertical scrolling. */
.file-stem { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-extension { display:inline-flex; flex:none; margin-inline-start:6px; padding:1px 5px; border:1px solid var(--line); border-radius:5px; color:var(--muted); font-size:9px; font-weight:600; vertical-align:middle; }
.job-name,#upload-name,#job-title { display:flex; align-items:center; min-width:0; }
body.job-open { height:100dvh; min-height:0; display:flex; flex-direction:column; }
.job-open>.app-header,.job-open>.app-footer { display:none; }
.job-open>main { max-width:none; height:100%; min-height:0; padding:0; }
#job { height:100%; display:flex; flex-direction:column; min-height:0; }
.job-topbar { display:flex; align-items:center; gap:10px; flex:none; padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left)); border-bottom:1px solid var(--line); background:var(--bg2); }
.job-topbar .back-home { display:flex; margin:0; text-decoration:none; color:var(--text); }
#job-title { flex:1; font-size:13px; font-weight:600; }
#status { flex:none; font-size:10px; padding:4px 8px; }
.job-workspace { display:flex; flex:1; min-height:0; flex-direction:column; }
.media-column { min-width:0; flex:none; padding:12px max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left)); }
#player-card { min-height:0; }
#player-card .players { position:relative; height:min(34dvh,280px); border:1px solid var(--line); border-radius:16px; background:#000; overflow:hidden; }
#player-card video:not([hidden]) { display:block; width:100%; height:100%; max-height:none; object-fit:contain; border-radius:0; }
#compare-badge { position:absolute; top:12px; left:12px; padding:4px 12px; border-radius:999px; background:rgba(7,7,12,.85); border:1px solid var(--cyan); font-size:12px; }
.player-toolbar { display:flex; gap:6px; align-items:center; padding-top:8px; }
#tabs { display:flex; flex:1; min-width:0; gap:4px; margin:0; flex-wrap:nowrap; }
#tabs button { flex:1; min-width:0; min-height:44px; padding:6px 8px; font-size:11px; }
#download { display:flex; align-items:center; justify-content:center; color:var(--muted); border:1px solid var(--line); border-radius:14px; }
#compare { font-size:11px; padding:4px; }
#compare[aria-pressed=true] { border-color:var(--cyan); color:var(--cyan); }
#version-info { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); font-size:10px; padding:6px 2px 8px; }
#swap-source { width:100%; min-height:44px; font-size:11px; margin-bottom:8px; }
.chat-column { display:flex; flex:1; flex-direction:column; min-height:0; min-width:0; background:rgba(18,18,29,.6); }
.chat-heading { display:flex; align-items:center; gap:10px; padding:12px 16px; border-block:1px solid var(--line); flex:none; }
.chat-heading img { border-radius:8px; }
.chat-heading h2 { font-size:13px; margin:0; }
.chat-heading .muted { font-size:9px; }
.online-dot { margin-inline-start:auto; width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 12px #6ee7b744; }
#messages { flex:1; min-height:0; max-height:none; overflow-y:auto; overscroll-behavior:contain; padding:8px 16px; }
#messages .message { font-size:12px; }
#activity,#typing,#chat-error { flex:none; margin:0; padding:0 16px; font-size:11px; }
#activity:empty,#chat-error:empty { display:none; }
.composer { flex:none; position:sticky; bottom:0; background:var(--card); padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); border-top:1px solid var(--line); min-width:0; }
#quick-actions { display:flex; gap:6px; overflow-x:auto; overscroll-behavior:contain; scrollbar-width:none; padding-bottom:8px; }
#quick-actions button { flex:none; min-height:44px; padding:6px 10px; border-radius:999px; font-size:10px; color:var(--muted); }
#form { position:static; display:flex; align-items:flex-end; gap:8px; padding:0; background:none; }
#text { min-height:48px; max-height:144px; height:48px; line-height:24px; padding:11px 12px; resize:none; overflow-y:auto; font-size:16px; }
#form button { margin-bottom:2px; }
.composer-hint { font-size:9px; color:var(--muted); text-align:center; margin:6px 0 0; }
#mini-player { height:72px; align-items:center; gap:8px; border:1px solid var(--line); border-radius:16px; padding:8px; background:var(--card); }
#mini-thumb { height:54px; width:32px; object-fit:cover; border-radius:6px; background:var(--bg2); }
#expand-player { margin-inline-start:auto; font-size:11px; padding:4px 8px; }
#player-card.collapsed .players,#player-card.collapsed .player-toolbar,#player-card.collapsed #version-info,#player-card.collapsed #swap-source { display:none; }
#player-card.collapsed #mini-player { display:flex; }
#processing-panel { max-width:420px; margin:auto; padding:12px; }
.eyebrow { color:var(--cyan); font-size:11px; margin:0 0 4px; }
#processing-panel h1 { font-size:22px; margin:0; }
#processing-panel>.muted { font-size:11px; margin:6px 0 12px; }
#stepper { list-style:none; padding:0; margin:0; }
#stepper li { display:flex; align-items:center; gap:12px; min-height:34px; color:var(--muted); font-size:11px; }
.stage-marker { width:24px; height:24px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; flex:none; }
.stage-marker .icon { width:14px; height:14px; }
#stepper .done { color:var(--success); }
#stepper .current { color:var(--text); font-weight:600; }
#stepper .current .stage-marker { border-color:var(--violet); color:var(--violet); }
.processing-note { font-size:10px; color:var(--muted); border-top:1px solid var(--line); padding-top:10px; }
#job-failure { max-width:420px; margin:20px auto; padding:20px; border:1px solid var(--danger); border-radius:16px; background:#fda4af0a; }
@media(min-width:1024px) {
  .job-topbar { padding-inline:24px; }
  .job-workspace { flex-direction:row; }
  .media-column { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:24px; }
  .chat-column { flex:0 0 440px; width:440px; border-inline-start:1px solid var(--line); }
  #player-card { display:flex; flex-direction:column; width:100%; height:100%; max-width:1100px; }
  #player-card .players { flex:1; height:auto; min-height:0; }
  #player-card .players.compare video { width:calc(50% - 4px); }
  #player-card .players.compare #player { display:block; }
  #tabs { flex:0 1 auto; }
  #tabs button { min-width:68px; }
  #compare { margin-inline-start:auto; }
  #messages .message { font-size:13px; }
  #version-info { font-size:12px; padding-block:12px; }
  #processing-panel { width:100%; }
  #stepper li { min-height:56px; font-size:14px; }
  #processing-panel h1 { font-size:30px; }
  #processing-panel>.muted,.processing-note { font-size:12px; }
}
@media(max-height:720px) and (max-width:1023px) { #processing-panel { padding:4px; } #stepper li { min-height:27px; } .chat-heading { padding-block:6px; } .composer-hint { display:none; } }
#upload-name { justify-content:center; }
#tabs { overflow-x:auto; scrollbar-width:none; }
#tabs button { flex:none; }
/* Messenger: physical sides are intentional in this RTL workspace. */
.chat-column { position:relative; }
#messages { padding:16px 14px; scroll-behavior:auto; }
.message-group { position:relative; display:flex; flex-direction:column; align-items:flex-start; direction:ltr; margin:0 0 18px; padding-left:32px; }
.message-group.user { align-items:flex-end; padding-left:0; }
#messages .message { max-width:85%; width:fit-content; margin:0 0 4px; padding:11px 14px; border-radius:16px; white-space:normal; background:var(--card); border:1px solid var(--line); color:var(--text); line-height:1.85; }
#messages .message.assistant { border-bottom-left-radius:3px; }
#messages .message.user { background:linear-gradient(135deg,#8b5cf6,#6d28d9); border-color:transparent; border-bottom-right-radius:3px; color:white; }
.message-text { unicode-bidi:plaintext; text-align:start; }
.message-text p { margin:0; }
.message-text p+p,.message-text ul+p { margin-top:8px; }
.message-text ul { direction:rtl; margin:4px 0; padding-inline-start:18px; }
.message-avatar { position:absolute; left:0; bottom:24px; width:24px; height:24px; border:1px solid var(--line); border-radius:8px; }
.group-time { font-size:9px; color:var(--muted); padding:2px 6px 0; font-variant-numeric:tabular-nums; }
.timestamp { text-decoration:none; display:inline-flex; align-items:center; gap:4px; min-height:30px; padding:2px 7px; margin:2px; background:#22d3ee12; border:1px solid #22d3ee40; border-radius:8px; color:var(--cyan); font:inherit; font-size:10px; vertical-align:middle; font-variant-numeric:tabular-nums; }
.timestamp .icon { width:12px; height:12px; }
.tool-line { display:flex; direction:rtl; align-items:center; gap:7px; border-top:1px solid var(--line); margin-top:10px; padding-top:8px; color:var(--muted); font-size:10px; }
.stream-caret { display:inline-block; width:2px; height:15px; margin-inline:4px; vertical-align:middle; background:var(--cyan); animation:caret-blink 1s steps(2,start) infinite; }
@keyframes caret-blink { to { opacity:0; } }
.version-card { margin:10px 0 18px 32px; padding:14px; border:1px solid #22d3ee60; border-radius:14px; background:linear-gradient(135deg,#22d3ee0d,#8b5cf60d); font-size:12px; }
.version-card strong { display:flex; gap:6px; flex-wrap:wrap; }
.version-card p { color:var(--muted); margin:5px 0 10px; }
.watch-version { display:flex; align-items:center; gap:6px; color:var(--cyan); border-color:#22d3ee60; font-size:11px; }
.version-flash .players,.version-flash #mini-player { animation:version-flash 1.6s ease-out; }
@keyframes version-flash { from { border-color:var(--cyan); box-shadow:0 0 24px #22d3ee66; } to { border-color:var(--line); box-shadow:none; } }
.first-review { color:var(--muted); }
.skeleton-lines { height:36px; margin-top:12px; background:linear-gradient(100deg,var(--line) 20%,#8b5cf633 45%,var(--line) 70%); background-size:200% 100%; border-radius:5px; mask-image:linear-gradient(to bottom,#000 0 25%,transparent 25% 45%,#000 45% 70%,transparent 70%); animation:chat-shimmer 1.8s linear infinite; }
@keyframes chat-shimmer { to { background-position:-200% 0; } }
#latest-messages { position:absolute; bottom:158px; left:50%; transform:translateX(-50%); z-index:2; border-radius:999px; background:var(--bg2); box-shadow:0 5px 22px #0008; font-size:11px; color:var(--cyan); white-space:nowrap; }
#chat-error { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 12px; padding:8px 10px; border:1px solid #ff547060; background:#ff547012; border-radius:12px; }
#retry-message { font:inherit; font-size:11px; color:inherit; flex:none; }
button:disabled,textarea:disabled { opacity:.45; cursor:not-allowed; }
@media(max-width:1023px) { .chat-heading { height:44px; padding:5px 14px; box-sizing:border-box; } .chat-heading>div { display:flex; align-items:center; gap:9px; } .chat-heading img { width:24px; height:24px; } }
@media(prefers-reduced-motion:reduce) { .stream-caret,.skeleton-lines,.version-flash .players,.version-flash #mini-player { animation:none; } }