/* Suvi Signature — lapisan desain terakhir untuk Chat, Cowork dan Studio Game.
   Konsep "kertas & tanah liat": latar kertas hangat, aksen clay yang sama dengan logo,
   judul serif editorial, isi sans yang lega, dan ritme jarak 4/8/12/16/24/32.
   Dimuat paling akhir; hanya mengubah tampilan, tidak mengubah struktur DOM. */

:root,:root[data-theme="light"]{
 --sig-bg:#f6f4ee;--sig-bg-deep:#efece4;--sig-surface:#fffdf8;--sig-surface-2:#f1eee6;--sig-surface-3:#e7e3d8;
 --sig-line:#ddd8cc;--sig-line-soft:#e8e4da;--sig-ink:#262522;--sig-ink-2:#5c5a53;--sig-ink-3:#878479;
 --sig-clay:#b5562f;--sig-clay-strong:#9c4524;--sig-clay-soft:#b5562f14;--sig-clay-line:#b5562f59;
 --sig-ok:#3f7a52;--sig-warn:#a86b12;
 --sig-shadow:0 1px 2px #2625220a,0 8px 24px -12px #26252224;
 --sig-shadow-lift:0 2px 4px #2625220d,0 18px 40px -18px #26252233;
 --sig-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
 --sig-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 --sig-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme="dark"]{
 --sig-bg:#1c1b19;--sig-bg-deep:#171614;--sig-surface:#252421;--sig-surface-2:#2c2a27;--sig-surface-3:#37352f;
 --sig-line:#3d3b36;--sig-line-soft:#2f2d2a;--sig-ink:#ecebe5;--sig-ink-2:#b4b1a7;--sig-ink-3:#8b887e;
 --sig-clay:#e08b64;--sig-clay-strong:#eb9f7c;--sig-clay-soft:#e08b641c;--sig-clay-line:#e08b6466;
 --sig-ok:#7dbb8f;--sig-warn:#e0aa55;
 --sig-shadow:0 1px 2px #0000004d,0 8px 24px -12px #00000080;
 --sig-shadow-lift:0 2px 4px #00000059,0 18px 40px -18px #000000a6;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --sig-bg:#1c1b19;--sig-bg-deep:#171614;--sig-surface:#252421;--sig-surface-2:#2c2a27;--sig-surface-3:#37352f;
 --sig-line:#3d3b36;--sig-line-soft:#2f2d2a;--sig-ink:#ecebe5;--sig-ink-2:#b4b1a7;--sig-ink-3:#8b887e;
 --sig-clay:#e08b64;--sig-clay-strong:#eb9f7c;--sig-clay-soft:#e08b641c;--sig-clay-line:#e08b6466;
 --sig-ok:#7dbb8f;--sig-warn:#e0aa55;
 --sig-shadow:0 1px 2px #0000004d,0 8px 24px -12px #00000080;
 --sig-shadow-lift:0 2px 4px #00000059,0 18px 40px -18px #000000a6;
}}

/* Token aplikasi diarahkan ke palet signature agar lapisan lama ikut seragam. */
:root,:root[data-theme],.app,.app .chat{
 --bg:var(--sig-bg);--bg-deep:var(--sig-bg-deep);--surface:var(--sig-surface);--surface-2:var(--sig-surface-2);--surface-3:var(--sig-surface-3);
 --line:var(--sig-line);--line-soft:var(--sig-line-soft);--ink:var(--sig-ink);--ink-2:var(--sig-ink-2);--ink-3:var(--sig-ink-3);
 --accent:var(--sig-clay);--accent-2:var(--sig-clay);--accent-ink:var(--sig-clay-strong);--accent-soft:var(--sig-clay-soft);--accent-line:var(--sig-clay-line);
 --font:var(--sig-sans);
}
html,body{background:var(--sig-bg)}
.app .chat .msg.user .bubble,.app .chat .ai-head,.app .chat .composer-hint,.app .chat .topbar,.app .chat .msg.ai .prose,.app .sidebar .sb-link,.app .sidebar .conv-item{font-family:var(--sig-sans)}
body,.app{font-family:var(--sig-sans);color:var(--sig-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.app :focus-visible{outline:2px solid var(--sig-clay);outline-offset:2px}

/* ── Sidebar ── */
.app .sidebar{background:var(--sig-bg-deep);border-right:1px solid var(--sig-line-soft)}
.app .sidebar .brand-name{font-family:var(--sig-serif);font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--sig-ink)}
.app .sidebar .sb-link{font-size:14px;font-weight:500;color:var(--sig-ink-2);border-radius:10px;min-height:34px;padding:7px 10px;transition:background .15s,color .15s}
.app .sidebar .sb-link:hover{background:var(--sig-surface-2);color:var(--sig-ink)}
.app .sidebar .sidebar-new .sb-link{background:var(--sig-surface);color:var(--sig-ink);box-shadow:inset 0 0 0 1px var(--sig-line-soft)}
.app .sidebar .sidebar-new .sb-link:hover{box-shadow:inset 0 0 0 1px var(--sig-clay-line)}
.app .sidebar .sb-history-title{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--sig-ink-3)}
.app .sidebar .conv-item{border-radius:10px;min-height:34px;font-size:14px;color:var(--sig-ink-2);transition:background .15s}
.app .sidebar .conv-item:hover{background:var(--sig-surface-2);color:var(--sig-ink)}
.app .sidebar .conv-item.active,.app .sidebar .conv-item[aria-current="page"]{background:var(--sig-surface-3);color:var(--sig-ink);font-weight:500}
.app .sidebar .conversation-dot{background:var(--sig-ink-3);opacity:.5}
.app .sidebar .conv-item.active .conversation-dot{background:var(--sig-clay);opacity:1}
.app .sidebar .sb-foot{border-top:1px solid var(--sig-line-soft)}

/* ── Kepala percakapan ── */
.app .chat .topbar{background:color-mix(in srgb,var(--sig-bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;min-height:52px}
.app .chat.chat-existing .topbar{border-bottom-color:var(--sig-line-soft)}
.app .chat .topbar-title button{font-size:14px;font-weight:600;color:var(--sig-ink)}
.app .chat .topbar .btn.ghost.sm{font-size:13px;font-weight:500;color:var(--sig-ink-2);border-radius:9px}
.app .chat .topbar .btn.ghost.sm:hover{background:var(--sig-surface-2);color:var(--sig-ink)}

/* ── Utas pesan: ritme tetap 24px antar giliran ── */
.app .chat .thread-inner{gap:18px;padding:32px 32px 24px;max-width:784px}
.app .chat .msg.ai{padding:0;gap:10px}
.app .chat .msg.user{gap:4px;position:relative}
/* Aksi pesan pengguna melayang di celah bawah bubble, jadi tidak menambah jarak antar giliran. */
.app .chat .msg.user .msg-actions{position:absolute;right:0;top:100%;z-index:2}
.app .chat .msg.user .bubble{background:var(--sig-surface-2);border:1px solid var(--sig-line-soft);color:var(--sig-ink);border-radius:18px 18px 6px 18px;padding:12px 16px;font-size:15.5px;line-height:1.6;box-shadow:none}
.app .chat .msg.user .msg-actions{min-height:26px;opacity:0;transition:opacity .15s}
.app .chat .msg.user:hover .msg-actions,.app .chat .msg.user:focus-within .msg-actions{opacity:1}
@media (hover:none){.app .chat .msg.user .msg-actions{opacity:1}}

.app .chat .ai-head{min-height:22px;gap:8px;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--sig-ink-3)}
.app .chat .ai-mark{color:var(--sig-clay)}

/* Isi jawaban: sans yang lega, judul serif editorial */
.app .chat .msg.ai .prose{font-size:16px;line-height:1.75;color:var(--sig-ink)}
.app .chat .msg.ai .prose p{margin:0 0 .9em}
.app .chat .msg.ai .prose>:last-child{margin-bottom:0}
.app .chat .msg.ai .prose :is(h1,h2,h3){font-family:var(--sig-serif);font-weight:600;letter-spacing:-.01em;color:var(--sig-ink);line-height:1.3}
.app .chat .msg.ai .prose h1{font-size:1.6em;margin:1.3em 0 .5em}
.app .chat .msg.ai .prose h2{font-size:1.35em;margin:1.4em 0 .45em}
.app .chat .msg.ai .prose h3{font-size:1.12em;margin:1.2em 0 .4em}
.app .chat .msg.ai .prose>:is(h1,h2,h3):first-child{margin-top:0}
.app .chat .msg.ai .prose strong{font-weight:650;color:var(--sig-ink)}
.app .chat .msg.ai .prose :is(ul,ol){padding-left:1.35em;margin:0 0 1em}
.app .chat .msg.ai .prose li{margin:.3em 0;padding-left:.15em}
.app .chat .msg.ai .prose li::marker{color:var(--sig-clay)}
.app .chat .msg.ai .prose a{color:var(--sig-clay-strong);text-decoration:underline;text-decoration-color:var(--sig-clay-line);text-underline-offset:3px}
.app .chat .msg.ai .prose a:hover{text-decoration-color:currentColor}
.app .chat .msg.ai .prose blockquote{margin:1em 0;padding:.2em 0 .2em 1em;border-left:3px solid var(--sig-clay-line);color:var(--sig-ink-2)}
.app .chat .msg.ai .prose :not(pre)>code{font-family:var(--sig-mono);font-size:.88em;background:var(--sig-surface-2);border:1px solid var(--sig-line-soft);border-radius:6px;padding:.1em .38em}
.app .chat .msg.ai .prose hr{border:0;border-top:1px solid var(--sig-line);margin:1.6em 0}

/* Blok kode */
.app .chat .code-block{border:1px solid var(--sig-line);border-radius:12px;background:var(--sig-surface);overflow:hidden;margin:1em 0;box-shadow:none}
.app .chat .code-block .code-head{background:var(--sig-surface-2);border-bottom:1px solid var(--sig-line-soft);padding:6px 10px 6px 14px;min-height:34px}
.app .chat .code-block .lang{font-family:var(--sig-mono);font-size:12px;color:var(--sig-ink-3);text-transform:lowercase}
.app .chat .code-block .code-copy{font-size:12px;border-radius:7px;color:var(--sig-ink-2)}
.app .chat .code-block pre{margin:0;padding:14px 16px;background:transparent;font-family:var(--sig-mono);font-size:13.5px;line-height:1.65}

/* Tabel */
.app .chat .table-wrap{border:1px solid var(--sig-line);border-radius:12px;overflow:auto;margin:1em 0;background:var(--sig-surface)}
.app .chat .table-wrap table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.5}
.app .chat .table-wrap th{background:var(--sig-surface-2);font-weight:600;text-align:left;color:var(--sig-ink);padding:10px 14px;border-bottom:1px solid var(--sig-line)}
.app .chat .table-wrap td{padding:10px 14px;border-bottom:1px solid var(--sig-line-soft);color:var(--sig-ink)}
.app .chat .table-wrap tr:last-child td{border-bottom:0}
.app .chat .table-wrap tbody tr:hover td{background:var(--sig-clay-soft)}

/* Aksi pesan: lebih jelas, tetap tenang */
.app .chat .msg-actions{gap:2px}
.app .chat .msg-actions .btn.icon{width:32px;height:32px;min-height:32px;border-radius:9px;color:var(--sig-ink-3)}
.app .chat .msg-actions .btn.icon:hover{background:var(--sig-surface-2);color:var(--sig-ink)}
.app .chat .msg-actions .source-circles-trigger{border-radius:9px;color:var(--sig-ink-2);font-size:12.5px}

/* Kartu hasil / artefak */
.app .chat .art-card{border:1px solid var(--sig-line);border-radius:14px;background:var(--sig-surface);box-shadow:var(--sig-shadow);max-width:560px;transition:border-color .15s,box-shadow .2s,transform .2s}
.app .chat .art-card:hover{border-color:var(--sig-clay-line);box-shadow:var(--sig-shadow-lift);transform:translateY(-1px)}
.app .chat .art-card .art-ic{background:var(--sig-clay-soft);color:var(--sig-clay);border-radius:11px}
.app .chat .art-card .art-title{font-weight:600;font-size:14.5px;color:var(--sig-ink)}
.app .chat .art-card .art-sub{font-size:12.5px;color:var(--sig-ink-3)}
.app .chat .art-card .result-file-download{border-left:1px solid var(--sig-line-soft);color:var(--sig-ink-2)}

/* ── Composer: pusat perhatian ── */
.app .chat .composer-wrap{padding:8px 24px 14px}
.app .chat .composer{background:var(--sig-surface);border:1px solid var(--sig-line);border-radius:22px;box-shadow:var(--sig-shadow);transition:border-color .15s,box-shadow .2s}
.app .chat .composer:focus-within{border-color:var(--sig-clay-line);box-shadow:var(--sig-shadow-lift),0 0 0 4px var(--sig-clay-soft)}
.app .chat .composer textarea{font-family:var(--sig-sans);font-size:15.5px;line-height:1.55;color:var(--sig-ink);padding:16px 18px 6px}
.app .chat .composer textarea::placeholder{color:var(--sig-ink-3)}
.app .chat .composer-bar{padding:4px 8px 8px 10px}
.app .chat .composer .send-btn{width:36px;height:36px;border-radius:12px;background:var(--sig-clay);color:#fff;transition:background .15s,transform .1s,opacity .15s}
.app .chat .composer .send-btn:hover:not(:disabled){background:var(--sig-clay-strong)}
.app .chat .composer .send-btn:active:not(:disabled){transform:scale(.95)}
.app .chat .composer .send-btn:disabled{background:var(--sig-surface-3);color:var(--sig-ink-3);opacity:1}
.app .chat .composer .pill-btn,.app .chat .composer .composer-more,.app .chat .composer .btn.ghost.icon{border-radius:10px;color:var(--sig-ink-2)}
.app .chat .composer-hint{font-size:11px;color:var(--sig-ink-3)}

/* Pengalih mode: segmented control dengan penanda clay */
.app .unified-chat .composer-workspace-modes{background:var(--sig-surface-2);border-radius:11px;padding:3px;gap:2px;box-shadow:inset 0 0 0 1px var(--sig-line-soft)}
.app .unified-chat .composer-workspace-modes button{font:500 12.5px/1.2 var(--sig-sans);color:var(--sig-ink-2);border-radius:8px;padding:5px 10px;min-height:28px;border:0}
.app .unified-chat .composer-workspace-modes button:hover:not(:disabled){color:var(--sig-ink)}
.app .unified-chat .composer-workspace-modes button[aria-pressed=true]{background:var(--sig-surface);color:var(--sig-ink);box-shadow:0 1px 2px #2625221f,inset 0 -2px 0 var(--sig-clay)}

/* ── Layar sambutan ── */
.app .chat .welcome h1{font-family:var(--sig-serif);font-weight:500;letter-spacing:-.02em;font-size:clamp(28px,3.4vw,40px);color:var(--sig-ink)}
.app .chat .welcome .welcome-symbol{color:var(--sig-clay)}
.app .chat .welcome-plan{background:var(--sig-surface-2);border:1px solid var(--sig-line-soft);border-radius:999px;font-size:12px;color:var(--sig-ink-2)}
.app .chat .conversation-intro{font-size:18px;line-height:1.5;color:var(--sig-ink);max-width:34ch;margin-inline:auto}
.app .chat .conversation-guide{font-size:14px;line-height:1.6;color:var(--sig-ink-2);max-width:56ch;margin-inline:auto}
.app .chat .getting-started-link{color:var(--sig-clay-strong);font-size:13px;text-decoration-color:var(--sig-clay-line);text-underline-offset:3px}
.app .chat .welcome h1,.app .chat .conversation-intro,.app .chat .conversation-guide{animation-duration:.35s}
.app .chat .starters .chip{background:var(--sig-surface);border:1px solid var(--sig-line-soft);border-radius:14px;font-size:13.5px;color:var(--sig-ink);box-shadow:none;transition:border-color .15s,background .15s,transform .15s}
.app .chat .starters .chip:hover{border-color:var(--sig-clay-line);background:var(--sig-surface);transform:translateY(-1px)}
.app .chat .starters .chip svg{color:var(--sig-clay)}
.app .chat .starter-disclosure summary{font-size:13px;font-weight:500;color:var(--sig-ink-2)}

/* Studio Game: aksen penanda mode */
.app .unified-chat[data-workspace-mode=game] .chat .welcome-symbol{filter:drop-shadow(0 4px 12px var(--sig-clay-soft))}
.app .unified-chat[data-workspace-mode=game] .chat .composer{border-color:var(--sig-clay-line)}

/* ── Cowork: kartu tugas sebagai linimasa ── */
.app .chat .cowork-step-marker{align-self:center;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--sig-ink-3);background:var(--sig-surface-2);border:1px solid var(--sig-line-soft);border-radius:999px;padding:4px 12px}
.app .chat .cowork-task-card{background:var(--sig-surface);border:1px solid var(--sig-line);border-radius:18px;box-shadow:var(--sig-shadow);overflow:hidden}
.app .chat .cowork-task-header{padding:18px 20px 6px}
.app .chat .cowork-task-eyebrow{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--sig-clay)}
.app .chat .cowork-task-symbol{color:var(--sig-clay)}
.app .chat .cowork-task-card h3{font-family:var(--sig-serif);font-weight:600;font-size:21px;letter-spacing:-.01em;color:var(--sig-ink);line-height:1.3}
.app .chat .cowork-task-subtitle{font-size:14px;color:var(--sig-ink-2)}
.app .chat .cowork-task-status{border-radius:999px;font-size:12px;font-weight:600;padding:4px 10px;background:var(--sig-surface-2);color:var(--sig-ink-2);border:1px solid var(--sig-line-soft)}
.app .chat .cowork-task-status.status-running{background:var(--sig-clay-soft);color:var(--sig-clay-strong);border-color:var(--sig-clay-line)}
.app .chat .cowork-task-status.status-completed{color:var(--sig-ok)}
.app .chat .cowork-task-status.status-failed{color:var(--sig-warn)}
.app .chat .cowork-task-meta{padding:4px 20px 12px;font-size:12.5px;color:var(--sig-ink-3);gap:14px}
.app .chat .cowork-task-body{padding:4px 20px 16px}
.app .chat .cowork-plan-heading{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--sig-ink-3)}
.app .chat .cowork-plan-list{position:relative;margin:10px 0 0;padding:0}
.app .chat .cowork-plan-step{position:relative;padding:8px 0 8px 0;gap:12px}
.app .chat .cowork-plan-step:not(:last-child)::after{content:"";position:absolute;left:13px;top:38px;bottom:-6px;width:2px;border-radius:2px;background:var(--sig-line-soft)}
.app .chat .cowork-plan-step.step-done:not(:last-child)::after{background:var(--sig-clay-line)}
.app .chat .cowork-step-number{width:28px;height:28px;min-width:28px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:600;background:var(--sig-surface-2);color:var(--sig-ink-2);border:1px solid var(--sig-line)}
.app .chat .cowork-plan-step.step-done .cowork-step-number{background:var(--sig-clay);color:#fff;border-color:var(--sig-clay)}
.app .chat .cowork-plan-step.step-running .cowork-step-number{background:var(--sig-surface);color:var(--sig-clay);border:2px solid var(--sig-clay);box-shadow:0 0 0 4px var(--sig-clay-soft)}
.app .chat .cowork-step-title{font-size:14.5px;font-weight:500;color:var(--sig-ink)}
.app .chat .cowork-plan-step.step-pending .cowork-step-title{color:var(--sig-ink-2)}
.app .chat .cowork-plan-step small{font-size:12.5px;color:var(--sig-ink-3)}
.app .chat .cowork-recovery{background:var(--sig-surface-2);border:1px solid var(--sig-line-soft);border-left:3px solid var(--sig-clay);border-radius:12px;padding:12px 14px;margin-top:14px}
.app .chat .cowork-recovery strong{font-size:14px;color:var(--sig-ink)}
.app .chat .cowork-recovery p{font-size:13.5px;color:var(--sig-ink-2);margin:4px 0 0}
.app .chat .cowork-task-options{border-top:1px solid var(--sig-line-soft);margin-top:14px;padding-top:4px}
.app .chat .cowork-task-footer{background:var(--sig-surface-2);border-top:1px solid var(--sig-line-soft);padding:12px 20px}
.app .chat .cowork-task-footer p{font-size:12px;color:var(--sig-ink-3)}
.app .chat .cowork-task-actions .btn.primary{background:var(--sig-clay);border-color:var(--sig-clay);color:#fff;border-radius:11px;padding-inline:14px}
.app .chat .cowork-task-actions .btn.primary:hover{background:var(--sig-clay-strong);border-color:var(--sig-clay-strong)}
.app .chat .conversation-task-hint{font-size:13px;color:var(--sig-ink-2)}

/* Tombol utama di area chat ikut aksen clay */
.app .chat .btn.primary{background:var(--sig-clay);border-color:var(--sig-clay);color:#fff}
.app .chat .btn.primary:hover:not(:disabled){background:var(--sig-clay-strong);border-color:var(--sig-clay-strong)}

/* ── Ponsel ── */
@media (max-width:760px){
 .app .chat .thread-inner{padding:20px 16px 16px;gap:20px}
 /* Pengalih mode sudah ada di bar atas; judul percakapan cukup satu baris. */
 .app .chat .topbar>.btn.ghost.sm{display:none}
 .app .chat .topbar-title,.app .chat .topbar-title button{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .app .chat .msg.user .bubble{font-size:15px}
 .app .chat .msg.ai .prose{font-size:15.5px;line-height:1.7}
 .app .chat .composer-wrap{padding:6px 10px 10px}
 .app .chat .composer{border-radius:20px}
 .app .chat .composer textarea{padding:14px 14px 4px;font-size:16px}
 .app .chat .cowork-task-header,.app .chat .cowork-task-meta,.app .chat .cowork-task-body{padding-inline:16px}
 .app .chat .cowork-task-footer{padding:12px 16px}
 .app .unified-chat .composer-workspace-modes button{padding:5px 8px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.app .chat *{transition:none!important}.app .chat .art-card:hover,.app .chat .starters .chip:hover{transform:none}}

/* ── Transkrip kerja (Cowork & Studio Game) ──
   Narasi pendek mengalir; aktivitas diringkas jadi satu baris abu-abu yang bisa dibuka. */
.app .chat .msg.msg-work{gap:8px}
.app .chat :is(.msg.msg-work,.cowork-step-marker)+.msg.msg-work .ai-head{display:none}
.app .chat .msg.msg-work:not(.last) .msg-actions{opacity:0;transition:opacity .15s}
.app .chat .msg.msg-work:not(.last):hover .msg-actions,.app .chat .msg.msg-work:not(.last):focus-within .msg-actions{opacity:1}
@media (hover:none){.app .chat .msg.msg-work:not(.last) .msg-actions{opacity:1}}
.app .chat .msg.msg-work .prose{font-size:15.5px;line-height:1.7}

.app .chat .work-trace{margin:2px 0;color:var(--sig-ink-3);font-size:14px}
.app .chat .work-trace>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;max-width:100%;cursor:pointer;padding:4px 8px 4px 0;border-radius:8px;color:var(--sig-ink-3);transition:color .15s}
.app .chat .work-trace>summary::-webkit-details-marker{display:none}
.app .chat .work-trace>summary:hover{color:var(--sig-ink)}
.app .chat .work-trace-text{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .chat .work-trace-count{font-family:var(--sig-mono);font-size:12px;font-weight:600;color:var(--sig-ok)}
.app .chat .work-trace.has-failure .work-trace-count{color:var(--sig-warn)}
.app .chat .work-trace-time{font-size:12px;color:var(--sig-ink-3)}
.app .chat .work-trace-chevron{flex:none;transition:transform .15s;opacity:.8}
.app .chat .work-trace[open]>summary .work-trace-chevron{transform:rotate(90deg)}
.app .chat .work-trace.is-active>summary{color:var(--sig-ink-2)}
.app .chat .work-trace-pulse{width:7px;height:7px;border-radius:50%;background:var(--sig-clay);animation:sig-pulse 1.2s ease-in-out infinite}
@keyframes sig-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

.app .chat .work-trace-list{list-style:none;margin:6px 0 4px;padding:0;border:1px solid var(--sig-line-soft);border-radius:12px;background:var(--sig-surface);overflow:hidden}
.app .chat .work-row+.work-row{border-top:1px solid var(--sig-line-soft)}
.app .chat .work-row>details>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;color:var(--sig-ink-2);font-size:13.5px}
.app .chat .work-row>details>summary::-webkit-details-marker{display:none}
.app .chat .work-row>details>summary:hover{background:var(--sig-surface-2);color:var(--sig-ink)}
.app .chat .work-row-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--sig-ok)}
.app .chat .work-row.is-failed .work-row-dot{background:var(--sig-warn)}
.app .chat .work-row.is-running .work-row-dot{background:var(--sig-clay);animation:sig-pulse 1.2s ease-in-out infinite}
.app .chat .work-row-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .chat .work-row-file .work-row-label{color:var(--sig-ink)}
.app .chat .work-row-meta{flex:none;font-size:12px;color:var(--sig-ink-3)}
.app .chat .work-row-chevron{flex:none;color:var(--sig-ink-3);transition:transform .15s}
.app .chat .work-row>details[open]>summary .work-row-chevron{transform:rotate(90deg)}
.app .chat .work-row-detail{padding:2px 14px 12px 30px;font-size:13px;color:var(--sig-ink-2);display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.app .chat .work-row-detail p{margin:0}
.app .chat .work-row-detail a{color:var(--sig-clay-strong)}
.app .chat .work-row-detail pre{margin:0;width:100%;max-height:220px;overflow:auto;background:var(--sig-surface-2);border:1px solid var(--sig-line-soft);border-radius:8px;padding:8px 10px;font:12px/1.55 var(--sig-mono)}

/* Penanda langkah Cowork sebagai pembatas tenang */
.app .chat .cowork-step-marker{align-self:stretch;display:flex;align-items:center;gap:10px;background:none;border:0;border-radius:0;padding:6px 0 0;font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--sig-ink-3)}
.app .chat .cowork-step-marker::after{content:"";flex:1;height:1px;background:var(--sig-line-soft)}
.app .chat .cowork-step-marker-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sig-clay)}
.app .chat .cowork-step-marker-title{color:var(--sig-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}

/* Kartu file di transkrip kerja lebih ringkas */
.app .chat .msg.msg-work .art-card{max-width:520px;box-shadow:none}
.app .chat :is(.work-trace,.work-row details)>summary::before,.app .chat :is(.work-trace,.work-row details)>summary::after{content:none;display:none}
.app .chat :is(.work-trace-time,.work-trace-count,.work-row-meta){white-space:nowrap;flex:none}
/* Rencana hidup: langkah dilewati & langkah tambahan dari agen */
.app .chat .cowork-plan-step.step-skipped .cowork-step-title{text-decoration:line-through;text-decoration-color:var(--sig-ink-3);color:var(--sig-ink-3)}
.app .chat .cowork-plan-step.step-skipped .cowork-step-number{opacity:.5}
.app .chat .cowork-step-added{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:600;vertical-align:1px;color:var(--sig-clay-strong);background:var(--sig-clay-soft)}

/* ── Gerak hidup saat Cowork bekerja ──
   Status aktif selalu "bernapas": penunjuk berputar, teks berkilau, waktu berjalan. Status selesai tenang. */
@keyframes sig-spin{to{transform:rotate(360deg)}}
@keyframes sig-shimmer{from{background-position:150% 0}to{background-position:-50% 0}}
@keyframes sig-pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes sig-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes sig-breathe{0%,100%{box-shadow:0 0 0 0 var(--sig-clay-soft)}50%{box-shadow:0 0 0 6px var(--sig-clay-soft)}}
.app .chat .cowork-task-card,.app .chat .cowork-task-card :is(span,small,p,strong,button,label,summary,li,div){font-family:var(--sig-sans)}
.app .chat .cowork-task-card h3{font-family:var(--sig-serif)}

/* Langkah aktif: cincin clay yang berputar menggantikan nomor */
.app .chat .cowork-plan-step.step-running .cowork-step-number{position:relative;color:transparent;background:var(--sig-surface);border:2px solid var(--sig-clay-soft);box-shadow:none;animation:sig-breathe 2.4s ease-in-out infinite}
.app .chat .cowork-plan-step.step-running .cowork-step-number::after{content:"";position:absolute;inset:-2px;width:auto;height:auto;margin:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--sig-clay);border-right-color:var(--sig-clay);background:none;animation:sig-spin .9s linear infinite}
.app .chat .cowork-plan-step.step-running .cowork-step-number::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--sig-clay);opacity:.85}
/* Teks berkilau pada pekerjaan yang sedang berjalan */
.app .chat :is(.cowork-plan-step.step-running .cowork-step-title,.work-trace.is-active .work-trace-text,.cowork-plan-step.step-running small){background:linear-gradient(90deg,var(--sig-ink-2) 0%,var(--sig-ink-2) 35%,var(--sig-clay) 50%,var(--sig-ink-2) 65%,var(--sig-ink-2) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sig-shimmer 2.4s linear infinite}
.app .chat .cowork-plan-step.step-running .cowork-step-title{background-image:linear-gradient(90deg,var(--sig-ink) 0%,var(--sig-ink) 35%,var(--sig-clay) 50%,var(--sig-ink) 65%,var(--sig-ink) 100%)}
/* Lencana status berjalan dengan titik berdenyut */
.app .chat .cowork-task-status.status-running{display:inline-flex;align-items:center;gap:6px}
.app .chat .cowork-task-status.status-running::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sig-clay);animation:sig-pulse 1.2s ease-in-out infinite}
.app .chat .cowork-task-status.status-running>*:first-child:is(svg,i,.spinner){display:none}
/* Centang langkah selesai muncul dengan pantulan kecil */
.app .chat .cowork-plan-step.step-done .cowork-step-number{animation:sig-pop .35s cubic-bezier(.2,.9,.3,1.3) both}
/* Isi baru masuk dengan halus */
.app .chat .msg.msg-work,.app .chat .cowork-step-marker{animation:sig-in .28s ease-out both}
.app .chat .work-trace[open]>.work-trace-list,.app .chat .work-row>details[open]>.work-row-detail{animation:sig-in .18s ease-out both}
.app .chat .work-trace.is-active .work-trace-time{font-variant-numeric:tabular-nums}

/* ── Cowork di ponsel: lebih lega ── */
@media (max-width:760px){
 .app .unified-chat .chat-mode-bar{min-height:44px;padding-block:4px}
 .app .unified-chat .chat-mode-bar .btn.sm{min-height:34px;padding-block:4px}
 .app .chat .topbar{min-height:44px;padding-inline:12px}
 .app .chat .topbar-title button{font-size:15px}
 .app .chat .thread-inner{padding:14px 12px 12px;gap:16px}
 /* Kartu tugas memakai hampir seluruh lebar layar */
 .app .chat .cowork-task-card{margin-inline:-4px;border-radius:16px}
 .app .chat .cowork-task-header{padding:14px 14px 4px}
 .app .chat .cowork-task-card h3{font-size:19px}
 .app .chat .cowork-task-meta{padding:2px 14px 10px;gap:10px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;font-size:12px}
 .app .chat .cowork-task-meta::-webkit-scrollbar{display:none}
 .app .chat .cowork-task-body{padding:2px 14px 12px}
 .app .chat .cowork-plan-step{padding:6px 0;gap:10px}
 .app .chat .cowork-step-number{width:26px;height:26px;min-width:26px;font-size:12px}
 .app .chat .cowork-plan-step:not(:last-child)::after{left:12px;top:34px}
 .app .chat .cowork-step-title{font-size:14.5px;line-height:1.4}
 .app .chat .cowork-recovery{padding:10px 12px;margin-top:10px}
 .app .chat .cowork-task-footer{padding:10px 14px}
 .app .chat .cowork-task-footer p{display:none}
 /* Petunjuk di atas composer mengulang status kartu */
 .app .chat .conversation-task-hint{display:none}
 /* Composer ringkas: satu baris saat kosong, tumbuh saat diketik */
 .app .chat .composer-wrap{padding:4px 8px 8px}
 .app .chat .composer{border-radius:18px}
 .app .chat .composer textarea{min-height:44px;padding:12px 14px 2px;font-size:16px;line-height:1.45}
 .app .chat .composer-bar{padding:2px 6px 6px 8px;min-height:40px}
 .app .chat .composer .send-btn{width:34px;height:34px;border-radius:11px}
 .app .chat .work-trace{font-size:13.5px}
 .app .chat .work-row>details>summary{padding:9px 12px}
 .app .chat .work-row-detail{padding:2px 12px 10px 28px}
}
@media (prefers-reduced-motion:reduce){
 .app .chat :is(.cowork-step-number,.cowork-step-number::after,.cowork-step-title,.work-trace-text,.msg.msg-work,.cowork-step-marker,.work-trace-list,.cowork-task-status::before){animation:none!important}
 .app .chat :is(.cowork-plan-step.step-running .cowork-step-title,.work-trace.is-active .work-trace-text,.cowork-plan-step.step-running small){color:var(--sig-ink);background:none}
}
@media (max-width:760px){.app .unified-chat .chat .topbar{height:46px;min-height:46px;padding-inline:12px}.app .unified-chat .chat .topbar .btn.icon{width:36px;height:36px;min-height:36px}}

/* ── Bar atas desktop: satu bar ringkas ──
   Bar mode hanya berisi "⋯" & Incognito di desktop (tombol mode ada di composer), jadi digabung ke bar judul. */
.app .chat .topbar-extra{display:none;align-items:center;gap:2px}
@media (min-width:761px){
 /* Hanya bila bar judul tampil (percakapan berisi); di layar percakapan baru bar mode tetap menjadi tempat Incognito & alat. */
 .app .unified-chat:is([data-workspace-mode=chat],[data-workspace-mode=cowork],[data-workspace-mode=game]):has(> .chat:not(.chat-empty)) .chat-mode-bar{display:none}
 .app .unified-chat .chat .topbar-extra{display:inline-flex;margin-left:2px;padding-left:6px;border-left:1px solid var(--sig-line-soft)}
 .app .unified-chat .chat .topbar{height:48px;min-height:48px}
 .app .unified-chat .chat .topbar .btn.icon{width:34px;height:34px;min-height:34px}
}

/* ── Pengalih mode di composer: tab teks, bukan blok ── */
.app .unified-chat .composer-workspace-modes{background:none;box-shadow:none;padding:0;gap:4px}
.app .unified-chat .composer-workspace-modes button{background:none;border:0;border-radius:6px;padding:5px 6px;min-height:28px;color:var(--sig-ink-3);box-shadow:none;position:relative}
.app .unified-chat .composer-workspace-modes button:hover:not(:disabled){color:var(--sig-ink);background:var(--sig-surface-2)}
.app .unified-chat .composer-workspace-modes button[aria-pressed=true]{background:none;color:var(--sig-ink);font-weight:600;box-shadow:none}
.app .unified-chat .composer-workspace-modes button[aria-pressed=true]::after{content:"";position:absolute;left:6px;right:6px;bottom:1px;height:2px;border-radius:2px;background:var(--sig-clay)}

/* ── Tombol ke pesan terbaru ── */
@keyframes sig-jump-in{from{opacity:0;transform:translate(-50%,6px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.app .chat .jump-down{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px;border-radius:999px;background:var(--sig-surface);color:var(--sig-ink-2);border:1px solid var(--sig-line);box-shadow:var(--sig-shadow-lift)}
.app .chat .jump-down:hover{color:var(--sig-ink);border-color:var(--sig-clay-line)}
.app .chat .jump-down.is-working{color:var(--sig-ink)}
.app .chat .jump-ring{position:relative;width:14px;height:14px;border-radius:50%;border:2px solid var(--sig-clay-soft)}
.app .chat .jump-ring::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:var(--sig-clay);animation:sig-spin .8s linear infinite}
.app .chat .jump-label{font-size:12.5px;font-weight:600;background:linear-gradient(90deg,var(--sig-ink) 0%,var(--sig-ink) 35%,var(--sig-clay) 50%,var(--sig-ink) 65%,var(--sig-ink) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sig-shimmer 2.4s linear infinite}

/* ── Artefak rencana: kelompok & catatan bukan langkah ── */
.app .planview .plan-group{list-style:none;display:flex;align-items:baseline;gap:10px;margin:14px 0 4px calc(var(--lvl,0) * 22px);font-weight:700;color:var(--sig-ink)}
.app .planview .plan-group:first-child{margin-top:4px}
.app .planview .pg-count{font-size:12px;font-weight:600;color:var(--sig-ink-3);font-variant-numeric:tabular-nums}
.app .planview .plan-note{list-style:none;margin:-2px 0 6px calc(var(--lvl,0) * 22px + 4px);padding-left:12px;border-left:2px solid var(--sig-line-soft);font-size:13px;line-height:1.5;color:var(--sig-ink-3)}
@media (prefers-reduced-motion:reduce){.app .chat :is(.jump-ring::after,.jump-label){animation:none!important}.app .chat .jump-label{color:var(--sig-ink);background:none}}
.app .unified-chat .chat .jump-down.is-working{width:auto;min-width:0;height:34px;padding:0 14px 0 10px;border-radius:999px;white-space:nowrap;left:50%;right:auto;transform:translateX(-50%);gap:8px;animation:sig-jump-in .22s ease-out both}.app .unified-chat .chat .jump-down:not(.is-working){animation:sig-in .2s ease-out both}

/* ── Layar sambutan di ponsel: salam + panduan saja; contoh di atas composer ── */
@media (max-width:760px){
 .app .chat .welcome :is(.welcome-plan,.conversation-guide){display:none}
 .app .chat .welcome .conversation-intro{font-size:15px;margin-top:2px} /* satu kalimat penjelas mode tetap terlihat di ponsel */
 .app .chat .welcome .getting-started-link{margin-top:6px}
 .app .chat.chat-empty .composer-dock{display:flex;flex-direction:column}
 .app .chat.chat-empty .composer-dock>.starter-disclosure{order:-1;margin:0 0 6px}
 .app .chat .starter-disclosure>summary{padding:0 14px 6px;font-size:12.5px}
 .app .chat .starter-disclosure .starters{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:0 12px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
 .app .chat .starter-disclosure .starters::-webkit-scrollbar{display:none}
 .app .chat .starter-disclosure .starters .chip{flex:0 0 auto;width:auto;white-space:nowrap;padding:8px 12px;scroll-snap-align:start}
 .app .chat .starter-disclosure .starters .chip .starter-chevron{display:none}
}

/* ── Sambutan di ponsel: kelompok salam + contoh + composer di tengah layar ── */
@media (max-width:760px){
 .app .chat.chat-empty{justify-content:center;padding-bottom:6vh}
 .app .chat.chat-empty .welcome{flex:0 0 auto;padding-top:0}
}

/* ── Masuk mode Incognito ──
   Selubung gelap meluas dari tombol Incognito lalu memudar; tanda topi & kacamata muncul, kilau menyapu lensa;
   teks naik berurutan; composer bergaris putus-putus sebagai penanda percakapan sementara. */
@keyframes incog-veil{0%{clip-path:circle(0% at calc(100% - 48px) 22px);opacity:1}55%{clip-path:circle(150% at calc(100% - 48px) 22px);opacity:1}100%{clip-path:circle(150% at calc(100% - 48px) 22px);opacity:0}}
@keyframes incog-mark-in{0%{opacity:0;transform:translateY(10px) scale(.7) rotate(-8deg)}60%{opacity:1;transform:translateY(0) scale(1.08) rotate(2deg)}100%{transform:none}}
@keyframes incog-glint{0%,55%{opacity:0;transform:translate(-3px,3px)}70%{opacity:1}100%{opacity:0;transform:translate(3px,-3px)}}
@keyframes incog-hat{0%,100%{transform:none}50%{transform:translateY(-1.5px) rotate(-2deg)}}
.app .unified-chat[data-workspace-mode=incognito]{background:color-mix(in srgb,var(--sig-bg) 92%,#000)}
.app .mode-thread.is-incognito{position:relative}
.app .mode-thread .incog-veil{position:fixed;inset:0;z-index:40;pointer-events:none;background:radial-gradient(circle at calc(100% - 48px) 22px,color-mix(in srgb,var(--sig-ink) 55%,#000) 0%,#0b0b0a 70%);animation:incog-veil .9s cubic-bezier(.4,0,.2,1) both}
.app .mode-thread.is-incognito .mode-welcome{display:flex;flex-direction:column;align-items:center;text-align:center}
.app .mode-thread.is-incognito .incog-mark{color:var(--sig-ink);margin-bottom:6px;animation:incog-mark-in .7s .35s cubic-bezier(.2,.9,.3,1.2) both;overflow:visible}
.app .mode-thread.is-incognito .incog-hat{transform-origin:32px 27px;animation:incog-hat 2.6s 1.2s ease-in-out 1}
.app .mode-thread.is-incognito .incog-glint{stroke:var(--sig-clay);stroke-width:2.5;opacity:0;animation:incog-glint 1.1s 1s ease-out 2}
.app .mode-thread.is-incognito .mode-welcome>:is(h1,p,details){animation:sig-in .45s ease-out both}
.app .mode-thread.is-incognito .mode-welcome>h1{animation-delay:.5s;font-family:var(--sig-serif);font-weight:500}
.app .mode-thread.is-incognito .mode-welcome>p{animation-delay:.62s;color:var(--sig-ink-2)}
.app .mode-thread.is-incognito .mode-welcome>details{animation-delay:.74s}
.app .mode-thread .incognito-composer{border-style:dashed;border-color:color-mix(in srgb,var(--sig-ink-3) 70%,transparent);animation:sig-in .4s .8s ease-out both}
.app .mode-thread .incognito-composer:focus-within{border-color:var(--sig-ink-2)}
@media (prefers-reduced-motion:reduce){.app .mode-thread :is(.incog-veil,.incog-mark,.incog-hat,.incog-glint,.incognito-composer),.app .mode-thread.is-incognito .mode-welcome>*{animation:none!important}.app .mode-thread .incog-veil{display:none}}

/* Work feedback: one calm cue, a moving arrow and a warm orbit while running. */
.app .chat .jump-down.btn{width:44px;height:44px;min-width:44px;min-height:44px;isolation:isolate;border-color:var(--sig-clay-line);background:var(--sig-surface);box-shadow:0 5px 20px #0002;transition:box-shadow .2s,border-color .2s,background .2s;}
.app .chat .jump-down.btn::before{content:"";position:absolute;inset:-4px;border:1px solid var(--sig-clay-line);border-radius:inherit;pointer-events:none;animation:suvi-arrival-halo 3.2s ease-out infinite;z-index:-1;}
.app .chat .jump-down.btn .ic{animation:suvi-arrow-flow 2.6s cubic-bezier(.4,0,.2,1) infinite;}
.app .chat .jump-down.btn.is-working{width:auto;gap:9px;height:40px;min-height:40px;padding:0 14px 0 12px;border-radius:999px;}
.app .chat .jump-down.btn.is-working .jump-ring{width:15px;height:15px;border-color:var(--sig-clay-soft);}
.app .chat .jump-down.btn:hover{box-shadow:0 7px 24px #0003;border-color:var(--sig-clay);}
.app .chat .jump-down.btn:focus-visible{outline:2px solid var(--sig-clay);outline-offset:5px;}
@keyframes suvi-arrow-flow{0%,35%,100%{transform:translateY(0);opacity:1}52%{transform:translateY(3px);opacity:.45}53%{transform:translateY(-3px);opacity:.45}70%{transform:translateY(0);opacity:1}}
@keyframes suvi-arrival-halo{0%,45%{opacity:0;scale:.97}55%{opacity:.6}90%,100%{opacity:0;scale:1.14}}
/* Chromium's default scrollbar corner is white without an explicit surface. */
.app .chat :is(pre,code,.work-row-detail)::-webkit-scrollbar-corner{background:var(--sig-surface-2);}
.app .chat :is(pre,.executed-source){scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent;}
.app .chat :is(pre,.executed-source)::-webkit-scrollbar{width:7px;height:7px;}
.app .chat :is(.work-row-detail,.execution-code) .executed-source{max-height:340px;overflow:auto;padding:14px;border-radius:9px;background:var(--sig-surface-2);font:12px/1.7 var(--sig-mono);white-space:pre;word-break:normal;overflow-wrap:normal;}
.app .chat .executed-source code{background:none;padding:0;white-space:pre;overflow-wrap:normal;word-break:normal;}
.app .chat .image-unavailable{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:16px;border:1px solid var(--sig-line);border-radius:12px;font-size:13px;color:var(--sig-ink-2);background:var(--sig-surface);}
.app .chat .prose img{max-width:100%;height:auto;}
@media(prefers-reduced-motion:reduce){.app .chat .jump-down.btn::before,.app .chat .jump-down.btn .ic{animation:none!important;}.app .chat .jump-down.btn::before{display:none;}}