/* Langkah kerja ala Claude/ChatGPT: baris ringkasan + timeline bertitik dengan garis penghubung. */
.app .chat .wt{margin:2px 0 4px;font-size:14px;color:var(--sig-ink-3,var(--ink-3))}
.app .chat .wt-head{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:5px 10px 5px 4px;margin-left:-4px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .15s,color .15s}
.app .chat .wt-head:hover{background:var(--sig-surface-2,#0000000a);color:var(--sig-ink,var(--ink))}
.app .chat .wt-head-icon{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:var(--sig-ok,var(--ok))}
.app .chat .wt:is(.has-failure,.has-review) .wt-head-icon{color:var(--sig-warn,#c98a1b)}
.app .chat .wt-head-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .chat .wt.is-active .wt-head-text{color:var(--sig-ink-2,var(--ink-2));background:linear-gradient(90deg,var(--sig-ink-3,#999) 0%,var(--sig-ink,#222) 50%,var(--sig-ink-3,#999) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wt-shimmer 1.8s linear infinite}
.app .chat .wt-head-meta{flex:none;font-size:12px;color:var(--sig-ink-3,var(--ink-3));font-variant-numeric:tabular-nums}
.app .chat .wt-chevron{flex:none;opacity:.7;transition:transform .15s}
.app .chat .wt.is-open .wt-chevron{transform:rotate(90deg)}
.app .chat .wt-list{list-style:none;margin:4px 0 6px;padding:0 0 0 2px;display:grid;gap:0;animation:wt-in .18s ease-out both}
.app .chat .wt-row{position:relative;display:flex;align-items:flex-start;gap:10px;padding:3px 0;min-width:0}
.app .chat .wt-row:not(:last-child)::before{content:'';position:absolute;left:11px;top:27px;bottom:-5px;width:1.5px;background:var(--sig-line,var(--line));border-radius:1px}
.app .chat .wt-node{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sig-surface,var(--surface));border:1px solid var(--sig-line,var(--line));color:var(--sig-ink-2,var(--ink-2))}
.app .chat .wt-row:is(.is-failed,.is-review) .wt-node{color:var(--sig-warn,#c98a1b);border-color:currentColor}
.app .chat .wt-row.is-running .wt-node{border-color:var(--sig-clay,#c5785a)}
.app .chat .wt-body{flex:1;min-width:0}
.app .chat .wt-body>summary{list-style:none;display:flex;align-items:baseline;gap:8px;min-height:24px;padding-top:2px;cursor:pointer;color:var(--sig-ink-2,var(--ink-2))}
.app .chat .wt-body>summary::-webkit-details-marker{display:none}
.app .chat .wt-body>summary::before,.app .chat .wt-body>summary::after{content:none;display:none}
.app .chat .wt-body>summary:hover .wt-label{color:var(--sig-ink,var(--ink))}
.app .chat .wt-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5}
.app .chat .wt-row.is-live .wt-label{padding-top:2px;color:var(--sig-ink-3,var(--ink-3))}
.app .chat .wt-meta{flex:none;font-size:12px;color:var(--sig-ink-3,var(--ink-3));font-variant-numeric:tabular-nums}
.app .chat .wt-body[open]>summary .wt-label{white-space:normal}
.app .chat .wt-body .work-row-detail{margin:4px 0 6px;padding:10px 12px;border:1px solid var(--sig-line-soft,var(--line));border-radius:10px;background:var(--sig-surface,var(--surface));font-size:13px}
.app .chat .wt-body .work-row-detail p{margin:0 0 4px}
.app .chat .wt-body .work-row-detail a{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .chat .wt-spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--sig-clay,#c5785a);border-top-color:transparent;animation:wt-spin .8s linear infinite}
@keyframes wt-spin{to{transform:rotate(360deg)}}
@keyframes wt-shimmer{to{background-position:-200% 0}}
@keyframes wt-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (max-width:760px){.app .chat .wt{font-size:13.5px}.app .chat .wt-head-meta{display:none}}
@media (prefers-reduced-motion:reduce){.app .chat :is(.wt-spin,.wt-list,.wt.is-active .wt-head-text){animation:none!important}.app .chat .wt.is-active .wt-head-text{-webkit-text-fill-color:currentColor;background:none}}

/* Lebar percakapan: satu sumber kebenaran (mengalahkan lapisan CSS lama). "Lebar" kini bawaan, mirip Claude. */
:root{--suvi-chat-w:780px}
:root[data-transcript-width="wide"]{--suvi-chat-w:1040px}
html .app .chat .thread-inner{max-width:var(--suvi-chat-w)}
html .app .chat .composer-wrap,html .app .unified-chat .chat .composer-wrap{max-width:calc(var(--suvi-chat-w) + 48px)}
html .app .chat .composer-wrap>.composer{max-width:none}

/* Baris timeline ringkas ala Claude: teks abu, alasan gagal langsung terlihat, tanpa kotak detail. */
.app .chat .wt-body{flex:1;min-width:0;padding-top:2px}
.app .chat .wt-line{display:flex;align-items:baseline;gap:8px;min-height:22px;max-width:100%;padding:0;border:0;background:none;font:inherit;color:var(--sig-ink-2,var(--ink-2));text-align:left;list-style:none}
.app .chat button.wt-link{cursor:pointer}
.app .chat button.wt-link:hover .wt-label{color:var(--sig-ink,var(--ink));text-decoration:underline;text-underline-offset:3px}
.app .chat .wt-more>summary{cursor:pointer}
.app .chat .wt-more>summary::-webkit-details-marker{display:none}
.app .chat .wt-more>summary::before,.app .chat .wt-more>summary::after{content:none;display:none}
.app .chat .wt-more>summary:hover .wt-label{color:var(--sig-ink,var(--ink))}
.app .chat .wt-detail{display:grid;gap:4px;margin:4px 0 6px;font-size:12.5px;color:var(--sig-ink-3,var(--ink-3))}
.app .chat .wt-detail a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .chat .wt-reason{margin:1px 0 3px;font-size:12.5px;line-height:1.45;color:var(--sig-warn,#b7791f)}

/* Jawaban: huruf serif yang tenang dan jarak baris lega seperti Claude (bisa diganti di Personalisasi). */
:root[data-response-font="serif"] .app .chat .msg.ai .prose{font-family:Georgia,"Iowan Old Style","Times New Roman",serif;font-size:16.5px;line-height:1.65;letter-spacing:0;color:var(--cl-ink)}
:root[data-response-font="serif"] .app .chat .msg.ai .prose :is(h1,h2,h3,h4){font-family:inherit;letter-spacing:-.01em}
:root[data-response-font="serif"] .app .chat .msg.ai .prose :is(code,pre,kbd){font-family:var(--mono)}

/* Peringatan hasil belum lengkap: lebih tenang, tidak seperti alarm. */
.app .chat .msg.ai .msg-error{background:transparent;border:0;border-left:3px solid var(--sig-warn,#d39b3a);border-radius:0;padding:4px 0 4px 12px;box-shadow:none;color:var(--sig-ink-2,var(--ink-2));font-size:14px}

/* Palet terang ala Claude: latar #FAF9F5, tinta #1F1E1D, gelembung pengguna #F0EEE6 bersudut rata, kolom pesan putih. */
:root{--cl-bg:#faf9f5;--cl-side:var(--sig-bg-deep,#f5f4ef);--cl-ink:var(--sig-ink,#1f1e1d);--cl-ink-2:var(--sig-ink-2,#3d3d3a);--cl-ink-3:var(--sig-ink-2,#73726c);--cl-on-clay:#fff;--cl-bubble:#f0f0ef;--cl-line:#1f1e1d26}
:root:not([data-theme="dark"]) .app .main,:root:not([data-theme="dark"]) .app .chat{background:var(--sig-surface)}
/* Area utama putih bersih; sidebar tetap krem. Blok sapaan dan bilah atas mengikuti putih. */
:root:not([data-theme="dark"]) .app .chat .welcome{background:transparent;box-shadow:none;border-color:transparent}
:root:not([data-theme="dark"]) .app .main .topbar{background:var(--sig-surface)}
:root:not([data-theme="dark"]) .app .sidebar{background:var(--cl-side)}
:root:not([data-theme="dark"]) .app .chat .msg.user .bubble{background:var(--sig-surface-2);color:var(--cl-ink);border-radius:14px;padding:10px 16px;font-size:15.5px;line-height:1.55}
:root:not([data-theme="dark"]) .app .chat .msg.ai .prose{color:var(--cl-ink)}
:root:not([data-theme="dark"]) .app .chat .composer{background:var(--sig-surface);border-color:var(--cl-line);box-shadow:0 1px 6px #00000008}
:root:not([data-theme="dark"]) .app .chat .composer:focus-within{border-color:#1f1e1d40;box-shadow:0 2px 10px #0000000d}
:root:not([data-theme="dark"]) .app .chat .cw-strip{background:var(--sig-surface)}
.app .chat .msg.ai .prose :is(strong,b){font-weight:700;color:var(--cl-ink)}
.app .chat .msg.ai .prose :is(ul,ol){padding-left:1.4em}
.app .chat .msg.ai .prose li{margin:.3em 0}
.app .chat .msg.ai .prose li::marker{color:var(--cl-ink-2)}
.app .chat .wt-note{margin:1px 0 3px;font-size:12.5px;line-height:1.45;color:var(--sig-ink-3,var(--ink-3))}
:root:not([data-theme="dark"]) .app .main .chat-mode-bar{background:var(--sig-surface)}
/* Composer ramping di percakapan yang sudah berjalan (seperti Claude): satu baris, tanpa petunjuk keyboard. */
.app .chat.chat-existing .composer-hint{display:none}
.app .chat.chat-existing .composer textarea{min-height:26px;padding:14px 18px 2px;line-height:1.5}
.app .chat.chat-existing .composer-bar{min-height:0;padding:2px 8px 8px 10px}
.app .chat.chat-existing .composer-dock{padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
/* Catatan sandbox pratinjau: tombol tidak pernah terlipat per huruf; teks ringkas di HP. */
.app .sandbox-note{padding:.4rem .8rem;border-bottom:1px solid var(--line-soft);font-size:.78rem;gap:8px;flex-wrap:nowrap;align-items:center}
.app .sandbox-note .btn{white-space:nowrap;flex:none}
.app .sandbox-note-text{min-width:0}
.app .sandbox-short{display:none}
@media (max-width:760px){.app .sandbox-long{display:none}.app .sandbox-short{display:inline}.app .sandbox-note-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* Sidebar di layar sentuh: tombol "…" tanpa blok latar sehingga tidak membentuk kolom abu. */
@media (hover:none),(max-width:760px){.app .sidebar .more{background:transparent!important;box-shadow:none!important;border-color:transparent!important;width:36px;height:36px;color:var(--ink-3)}}
/* Animasi saat AI bekerja: teks status berkilau + masuk halus, kursor tulis berpendar (bukan titik berkedip). */
.app .chat .status-line .phase-live{background:linear-gradient(90deg,var(--sig-ink-3,#8a877f) 0%,var(--sig-ink,#1f1e1d) 45%,var(--sig-ink-3,#8a877f) 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wt-shimmer 2s linear infinite,phase-in .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes phase-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.app .chat .streaming-caret::after{width:.62em;height:.62em;border-radius:50%;vertical-align:-.02em;margin-left:5px;background:radial-gradient(circle at 35% 35%,#f3b48f,#c5785a 70%);box-shadow:0 0 0 0 #c5785a66;animation:caret-glow 1.3s ease-in-out infinite}
@keyframes caret-glow{0%,100%{transform:scale(.72);box-shadow:0 0 0 0 #c5785a55}50%{transform:scale(1);box-shadow:0 0 0 7px #c5785a00}}
@media (prefers-reduced-motion:reduce){.app .chat .status-line .phase-live{animation:none;-webkit-text-fill-color:currentColor;background:none}.app .chat .streaming-caret::after{animation:none}}
/* Kartu pertanyaan: aksen Suvi, progres bersegmen, opsi terpilih jelas. */
.app .chat .msg.ai .clarification{background:var(--sig-surface);border:1px solid var(--sig-line);color:var(--cl-ink);border-radius:18px;box-shadow:var(--sig-shadow);padding:20px 22px 18px;max-width:640px}
.app .chat .msg.ai .clarification>header{gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:6px;font-size:12.5px;color:var(--cl-ink-3,#73726c)}
.app .chat .msg.ai .clarification>header strong{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--cl-ink-2,#3d3d3a);flex:1;min-width:0}
.app .chat .msg.ai .clarification-spark{color:var(--sig-clay);font-size:13px}
.app .chat .msg.ai .clarification-progress{display:flex;gap:4px}
.app .chat .msg.ai .clarification-progress i{width:22px;height:4px;border-radius:4px;background:var(--sig-surface-3);transition:background .25s}
.app .chat .msg.ai .clarification-progress i.done{background:var(--sig-clay-line)}
.app .chat .msg.ai .clarification-progress i.current{background:var(--sig-clay)}
.app .chat .msg.ai .clarification-count{white-space:nowrap;font-variant-numeric:tabular-nums}
.app .chat .msg.ai .clarification h3{font-size:18px;line-height:1.4;margin:10px 0 14px;color:var(--cl-ink,#1f1e1d);animation:phase-in .3s ease-out both}
.app .chat .msg.ai .clarification-option{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 14px;margin:0 0 8px;border:1px solid var(--sig-line);border-radius:12px;background:var(--sig-surface);font-size:15px;color:var(--cl-ink,#1f1e1d);cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.app .chat .msg.ai .clarification-option:hover{border-color:var(--sig-clay)80;background:var(--sig-surface-2)}
.app .chat .msg.ai .clarification-option:active{transform:scale(.995)}
.app .chat .msg.ai .clarification-option>span:first-child{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;border:1px solid var(--sig-line);font-size:12px;font-weight:600;color:var(--cl-ink-3,#73726c);background:var(--sig-surface)}
.app .chat .msg.ai .clarification-option-copy{flex:1;min-width:0}
.app .chat .msg.ai .clarification-check{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;color:var(--cl-on-clay)}
.app .chat .msg.ai .clarification-option[aria-pressed="true"]{border-color:var(--sig-clay);background:var(--sig-clay-soft);box-shadow:0 0 0 3px #c5785a1f}
.app .chat .msg.ai .clarification-option[aria-pressed="true"]>span:first-child{background:var(--sig-clay);border-color:var(--sig-clay);color:var(--cl-on-clay)}
.app .chat .msg.ai .clarification-option[aria-pressed="true"] .clarification-check{background:var(--sig-clay)}
.app .chat .msg.ai .clarification label.col{margin-top:6px;font-size:12.5px;color:var(--cl-ink-3,#73726c);gap:6px}
.app .chat .msg.ai .clarification label.col .input{border-radius:12px;background:var(--sig-surface);color:var(--cl-ink)}
.app .chat .msg.ai .clarification>footer{margin-top:14px;padding-top:14px;border-top:1px solid var(--sig-line);align-items:center}
.app .chat .msg.ai .clarification>footer .btn.primary,.app .chat .msg.ai .clarification>footer .btn:not(.ghost){background:var(--sig-clay-strong);border-color:var(--sig-clay-strong);color:var(--cl-on-clay);border-radius:10px;padding:9px 18px}
.app .chat .msg.ai .clarification>footer .btn.primary:hover,.app .chat .msg.ai .clarification>footer .btn:not(.ghost):hover{background:var(--sig-clay-strong)}
.app .chat .msg.ai .clarification>footer .btn:disabled{opacity:.45}
@media (max-width:760px){.app .chat .msg.ai .clarification{padding:16px 14px 14px;border-radius:16px}.app .chat .msg.ai .clarification-count{font-size:11.5px}.app .chat .msg.ai .clarification-progress i{width:14px}}
/* Proses berpikir. */
.app .chat .think{margin:2px 0 6px}
.app .chat .think-head{display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 4px;margin-left:-4px;border:0;border-radius:10px;background:none;color:var(--sig-ink-3,var(--ink-3));font:inherit;font-size:14px;cursor:pointer}
.app .chat .think-head:hover{background:var(--sig-surface-2,#0000000a);color:var(--sig-ink,var(--ink))}
.app .chat .think-icon{display:grid;place-items:center;width:20px;height:20px;color:#c5785a;font-size:15px}
.app .chat .think.is-active .think-icon{animation:think-spin 3s linear infinite}
.app .chat .think.is-active .think-label{background:linear-gradient(90deg,var(--sig-ink-3,#8a877f) 0%,var(--sig-ink,#1f1e1d) 45%,var(--sig-ink-3,#8a877f) 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wt-shimmer 2s linear infinite}
.app .chat .think.is-open .wt-chevron{transform:rotate(90deg)}
.app .chat .think-body{margin:4px 0 6px 10px;padding:2px 0 2px 14px;border-left:2px solid var(--sig-line);max-height:280px;overflow:auto;white-space:pre-wrap;font-size:13.5px;line-height:1.6;color:var(--sig-ink-3,var(--ink-3));animation:wt-in .18s ease-out both}
@keyframes think-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.app .chat .think.is-active .think-icon,.app .chat .think.is-active .think-label{animation:none;-webkit-text-fill-color:currentColor;background:none}}
/* Saran lanjutan di bawah jawaban terakhir. */
.app .chat .followups{display:block;width:100%;margin:24px 0 12px;animation:wt-in .25s ease-out both}
.app .chat .followup-title{font:600 17px/1.5 var(--font);color:var(--ink);margin:0 0 12px}
.app .chat .followup-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.app .chat .followup-chip{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0;min-height:112px;width:100%;padding:18px 20px;border:1px solid transparent;border-radius:24px;background:var(--surface-2,var(--sig-surface));color:var(--ink);font:500 14px/1.5 var(--font);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.app .chat .followup-chip:hover{border-color:var(--sig-clay-line,var(--line));background:var(--surface,var(--sig-surface-2))}
.app .chat .followup-chip:focus-visible{outline:2px solid var(--sig-clay);outline-offset:3px}
.app .chat .followup-chip span{min-width:0;white-space:normal;overflow-wrap:anywhere}
.app .chat .followup-arrow{font-size:21px;line-height:1;color:var(--ink-2)}
.app .chat .followup-chip:only-child{grid-column:1/-1}
@media(max-width:540px){.app .chat .followup-cards{grid-template-columns:1fr;gap:10px}.app .chat .followup-chip{min-height:98px;border-radius:20px;padding:16px 18px}.app .chat .followup-title{font-size:16px}}
.app .chat .followup-chip:disabled{opacity:.5;cursor:default}

/* Keep accent labels readable in explicit and system dark themes. */
:root[data-theme="dark"]{--cl-on-clay:#171614}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--cl-on-clay:#171614}}

/* A stopped stream is not a completed job. */
.app .chat .wt-status-note{margin:3px 0 8px 28px;max-width:64ch;font-size:12.5px;line-height:1.6;color:var(--sig-ink-3,var(--ink-3));overflow-wrap:anywhere}
@media(max-width:760px){.app .chat .wt-status-note{margin-left:26px;font-size:12px}}