/* BuatKonten: warna dari logo (biru #1A8CFF -> ungu -> oranye #FF8A1F), abu dingin, tipografi Plus Jakarta Sans. */
:root {
  --bg: #ffffff; --side: #f6f7fb; --surface: #ffffff; --raised: #ffffff;
  --hover: rgba(15, 23, 42, .05); --active: rgba(15, 23, 42, .08);
  --text: #0f172a; --text-2: #475569; --muted: #8a94a6; --line: #e6e9f0; --line-strong: #d3d8e3;
  --user-bubble: #eef3ff; --accent: #1a73f5; --accent-hover: #0f62d9; --brand: #1a73f5; --orange: #ff8a1f;
  --grad: linear-gradient(120deg, #1a8cff 0%, #7a7fe6 48%, #ff8a1f 100%);
  --grad-soft: linear-gradient(120deg, rgba(26, 140, 255, .1), rgba(122, 127, 230, .08) 50%, rgba(255, 138, 31, .1));
  --code-bg: #f6f8fc; --danger: #d92d20; --ok: #12a150; --focus: rgba(26, 115, 245, .3);
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px rgba(15, 23, 42, .06);
  --shadow-lg: 0 16px 48px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06);
  --hl-kw: #a626a4; --hl-str: #50a14f; --hl-num: #986801; --hl-com: #a0a1a7; --hl-fn: #4078f2; --hl-type: #c18401; --hl-attr: #e45649;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0f17; --side: #0f141e; --surface: #131a27; --raised: #172031;
    --hover: rgba(255, 255, 255, .06); --active: rgba(255, 255, 255, .1);
    --text: #e8ecf4; --text-2: #aab4c5; --muted: #7c879a; --line: #1f2838; --line-strong: #2c3749;
    --user-bubble: #1a2436; --accent: #4c9bff; --accent-hover: #6aadff; --brand: #3a8bff; --orange: #ff9a3d;
    --grad-soft: linear-gradient(120deg, rgba(26, 140, 255, .16), rgba(122, 127, 230, .12) 50%, rgba(255, 138, 31, .14));
    --code-bg: #0e1420; --danger: #ff6b5e; --ok: #3ccf7e; --focus: rgba(76, 155, 255, .4);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3);
    --hl-kw: #c678dd; --hl-str: #98c379; --hl-num: #d19a66; --hl-com: #7f848e; --hl-fn: #61afef; --hl-type: #e5c07b; --hl-attr: #e06c75;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0f17; --side: #0f141e; --surface: #131a27; --raised: #172031;
  --hover: rgba(255, 255, 255, .06); --active: rgba(255, 255, 255, .1);
  --text: #e8ecf4; --text-2: #aab4c5; --muted: #7c879a; --line: #1f2838; --line-strong: #2c3749;
  --user-bubble: #1a2436; --accent: #4c9bff; --accent-hover: #6aadff; --brand: #3a8bff; --orange: #ff9a3d;
  --grad-soft: linear-gradient(120deg, rgba(26, 140, 255, .16), rgba(122, 127, 230, .12) 50%, rgba(255, 138, 31, .14));
  --code-bg: #0e1420; --danger: #ff6b5e; --ok: #3ccf7e; --focus: rgba(76, 155, 255, .4);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3);
  --hl-kw: #c678dd; --hl-str: #98c379; --hl-num: #d19a66; --hl-com: #7f848e; --hl-fn: #61afef; --hl-type: #e5c07b; --hl-attr: #e06c75;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; font: 15px/1.68 var(--font); letter-spacing: -.003em; background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: 14px; height: 14px; }
.spacer { flex: 1; }
.icon-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 8px; color: var(--text-2);
  transition: background .15s, color .15s; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.spinner { width: 20px; height: 20px; flex: none; border: 2px solid var(--line-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite; }
.spinner.sm { width: 15px; height: 15px; }
@keyframes spin { to { transform: rotate(360deg); } }

#app { display: flex; height: 100dvh; overflow: hidden; }

/* ---------- sidebar ---------- */
#sidebar { width: 272px; flex: none; background: var(--side); border-right: 1px solid var(--line); display: flex;
  flex-direction: column; gap: 2px; padding: 10px; transition: margin-left .22s ease, transform .22s ease; }
html.pre-collapsed #sidebar, body.side-collapsed #sidebar { margin-left: -272px; }
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 10px 4px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 650;
  font-size: 15.5px; letter-spacing: -.01em; line-height: 1.2; min-width: 0; }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.brand small { display: block; font-size: 11.5px; font-weight: 450; color: var(--muted); letter-spacing: 0; }
.side-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 9px;
  font-weight: 550; font-size: 14.5px; text-align: left; }
.side-btn:hover { background: var(--hover); }
.side-btn kbd { margin-left: auto; font: 11px var(--font); color: var(--muted); opacity: 0; transition: opacity .15s; }
.side-btn:hover kbd { opacity: 1; }
.search { position: relative; display: block; }
.search .i { position: absolute; left: 10px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--muted); }
.search input { width: 100%; padding: 8px 10px 8px 35px; border: 1px solid transparent; border-radius: 9px; background: none;
  color: var(--text); font: inherit; font-size: 14px; }
.search input:hover { background: var(--hover); }
.search input:focus { outline: none; background: var(--surface); border-color: var(--line-strong); }
.search input::-webkit-search-cancel-button { filter: grayscale(1); }
#conv-list { flex: 1; overflow-y: auto; margin: 4px -6px 0; padding: 0 6px 8px; scrollbar-width: thin; }
.conv-group { position: sticky; top: 0; z-index: 1; background: var(--side); font-size: 12px; font-weight: 600;
  color: var(--muted); padding: 14px 10px 4px; }
.conv { position: relative; display: flex; align-items: center; border-radius: 9px; }
.conv a { flex: 1; min-width: 0; padding: 7px 10px; font-size: 14px; color: var(--text); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv:hover { background: var(--hover); }
.conv.active { background: var(--active); }
.conv.active a { font-weight: 550; }
.conv .icon-btn { position: absolute; right: 3px; width: 28px; height: 28px; opacity: 0; }
.conv:hover .icon-btn, .conv.active .icon-btn, .conv .icon-btn:focus-visible { opacity: 1; }
.conv:hover a, .conv.active a { padding-right: 34px; }
.conv-empty { color: var(--muted); font-size: 13.5px; padding: 14px 10px; margin: 0; }
.me { border-top: 1px solid var(--line); padding-top: 8px; }
#me-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: 10px; text-align: left; }
#me-btn:hover { background: var(--hover); }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--brand); color: #fff; display: grid;
  place-items: center; font-size: 12.5px; font-weight: 650; letter-spacing: .02em; }
.me-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.me-text b { font-weight: 550; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-text small { font-size: 12px; color: var(--muted); }
#scrim { display: none; position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, .4); }

/* ---------- menus, dialogs, toasts ---------- */
.menu { position: fixed; z-index: 60; min-width: 230px; max-width: min(340px, calc(100vw - 16px)); padding: 6px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
  animation: pop .12s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px;
  text-align: left; font-size: 14px; line-height: 1.35; }
.menu-item:hover, .menu-item:focus-visible { background: var(--hover); outline: none; }
.menu-item .i { color: var(--text-2); }
.mi-text { display: flex; flex-direction: column; min-width: 0; }
.mi-text .desc { font-size: 12.5px; color: var(--muted); }
.menu-item .i.check { margin-left: auto; color: var(--accent); }
.menu-item.danger, .menu-item.danger .i { color: var(--danger); }
.menu-section { display: flex; align-items: center; gap: 6px; padding: 8px 10px 4px; font-size: 12px; font-weight: 600;
  color: var(--muted); }
.menu-section .i { width: 14px; height: 14px; color: var(--accent); }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--line); }
.dialog { width: min(92vw, 400px); padding: 22px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--raised); color: var(--text); box-shadow: var(--shadow-lg); }
.dialog::backdrop { background: rgba(0, 0, 0, .45); }
.dialog h3 { margin: 0 0 6px; font-size: 17px; font-weight: 650; }
.dialog p { margin: 0 0 20px; color: var(--text-2); font-size: 14.5px; overflow-wrap: anywhere; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.btn-ghost, .btn-danger { height: 36px; padding: 0 16px; border-radius: 9px; font-size: 14px; font-weight: 550; }
.btn-ghost { border: 1px solid var(--line-strong); }
.btn-ghost:hover { background: var(--hover); }
.btn-danger { background: var(--danger); color: #fff; }
#toasts { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 100; display: flex; flex-direction: column;
  align-items: center; gap: 8px; pointer-events: none; }
.toast { max-width: min(90vw, 480px); padding: 10px 16px; border-radius: 10px; background: var(--text); color: var(--bg);
  font-size: 14px; box-shadow: var(--shadow-lg); animation: pop .15s ease-out; }
.toast.error { background: var(--danger); color: #fff; }

/* ---------- main ---------- */
main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
header { flex: none; display: flex; align-items: center; gap: 4px; height: 54px; padding: 8px 12px; }
#open-sidebar, #new-chat-top { display: none; }
html.pre-collapsed #open-sidebar, html.pre-collapsed #new-chat-top,
body.side-collapsed #open-sidebar, body.side-collapsed #new-chat-top { display: inline-grid; }
.header-title { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-size: 15.5px; font-weight: 600;
  letter-spacing: -.01em; }
.auto-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--accent); cursor: help;
  background: color-mix(in srgb, var(--accent) 11%, transparent); }
.auto-pill .i { width: 13px; height: 13px; stroke-width: 2; }
#scroller { flex: 1; overflow-y: auto; overflow-anchor: none; }
#messages { max-width: 780px; margin: 0 auto; padding: 8px 24px 40px; display: flex; flex-direction: column; gap: 30px; }

/* welcome */
body.is-empty #scroller { flex: 0 0 auto; margin-top: auto; overflow: visible; }
body.is-empty #composer-wrap { margin-bottom: auto; padding-bottom: 7vh; }
.welcome { text-align: center; padding: 0 0 22px; animation: rise .35s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.welcome img { width: 58px; height: 58px; object-fit: contain; margin-bottom: 12px; }
.welcome h1 { margin: 0 0 6px; font: 500 clamp(30px, 4.6vw, 40px)/1.2 var(--serif); letter-spacing: -.015em; }
.welcome p { margin: 0; color: var(--text-2); font-size: 16px; }
#suggestions { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
body.is-empty #suggestions { display: grid; }
.suggestion { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; text-align: left;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .15s, background .15s; }
.suggestion:hover { border-color: var(--line-strong); background: var(--hover); }
.s-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
.s-ico .i { width: 17px; height: 17px; }
.suggestion b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.suggestion small { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; }

/* messages */
.msg { animation: rise .2s ease-out; }
.msg.user { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.msg.user .bubble { max-width: 85%; padding: 10px 16px; border-radius: 20px; background: var(--user-bubble);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user .actions { opacity: 0; margin: -2px -4px 0 0; }
.msg.user:hover .actions { opacity: 1; }
.user-images { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.user-images img { display: block; max-width: 220px; max-height: 220px; border-radius: 14px; border: 1px solid var(--line); }
.att-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 85%; }
.att { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 6px 12px 6px 6px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.att .name, .chip .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg.assistant { display: flex; gap: 16px; }
.ai-avatar { width: 28px; height: 28px; flex: none; margin-top: 1px; display: grid; place-items: center; border-radius: 8px;
  background: var(--accent); color: #fff; }
.ai-avatar .i { width: 16px; height: 16px; stroke-width: 2; }
.msg-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.route { margin: 3px 0 -4px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.route b { font-weight: 600; color: var(--text-2); }
.route.pending b { font-weight: 500; color: var(--muted);
  background: linear-gradient(90deg, var(--muted) 30%, var(--text) 50%, var(--muted) 70%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 1.6s linear infinite; }
.doc-card { padding-right: 8px; }
.doc-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.doc-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.doc-card .act-btn { flex: none; color: var(--accent); }
.team { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.team-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; text-align: left; }
.team-head:hover { background: var(--hover); }
.team-head > .i { color: var(--accent); }
.team-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.team-title b { font-size: 14px; font-weight: 600; }
.team-title small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-head .chev { color: var(--muted); transition: transform .2s; }
.team.collapsed .chev { transform: rotate(-90deg); }
.team.collapsed .team-list { display: none; }
.team-list { padding: 4px; border-top: 1px solid var(--line); }
.member-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 9px; text-align: left; }
.member:not(.lead) .member-row:hover { background: var(--hover); }
.member.lead .member-row { cursor: default; }
.mdot { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.mdot .i { width: 14px; height: 14px; stroke-width: 2; }
.mdot.claude { background: #d97757; }
.mdot.gpt { background: #10a37f; }
.mdot.gemini { background: #4285f4; }
.m-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.m-text b { font-size: 13.5px; font-weight: 600; }
.m-text small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-status { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.m-status .i { width: 15px; height: 15px; }
.member[data-status="done"] .m-status .i { color: #1f9d55; }
.member[data-status="partial"] .m-status .i { color: #c98a12; }
.member:is([data-status="error"], [data-status="timeout"]) .m-status { color: var(--danger); }
.member-out { margin: 2px 10px 10px 46px; padding: 8px 12px; max-height: 420px; overflow-y: auto; font-size: 13.5px;
  border-left: 2px solid var(--line-strong); }
.m-task { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.actions { display: flex; align-items: center; gap: 2px; color: var(--muted); }
.msg.assistant .actions { margin-left: -7px; opacity: 0; transition: opacity .15s; }
.msg.assistant:hover .actions, .msg.assistant:last-child .actions, .msg.assistant:focus-within .actions { opacity: 1; }
.actions .icon-btn { width: 30px; height: 30px; color: var(--muted); }
.actions .icon-btn:hover { color: var(--text); }
.actions .icon-btn.on { color: var(--accent); }
.actions .icon-btn .i { width: 17px; height: 17px; }
.act-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px;
  color: var(--text-2); font-size: 13px; font-weight: 500; text-decoration: none; }
.act-btn:hover { background: var(--hover); color: var(--text); }
.act-btn .i { width: 16px; height: 16px; }
.thinking { display: flex; gap: 5px; padding: 9px 0; }
.thinking span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite ease-in-out both; }
.thinking span:nth-child(2) { animation-delay: .15s; }
.thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: none; } }

/* progress while the answer is being prepared */
.progress { width: min(100%, 540px); padding: 12px 16px 0; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow); overflow: hidden; animation: rise .25s ease-out; }
.p-head { display: flex; align-items: center; gap: 11px; }
.orb { position: relative; width: 22px; height: 22px; flex: none; }
.orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 10%, var(--brand), var(--accent));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: spin 1.1s linear infinite; }
.orb::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--accent);
  animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(.55); opacity: .55; } }
.p-stage { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(90deg, var(--text-2) 35%, var(--accent) 50%, var(--text-2) 65%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 2.2s linear infinite; }
.p-stage.swap { animation: shimmer 2.2s linear infinite, swap .35s ease-out; }
@keyframes swap { from { opacity: 0; transform: translateY(4px); } }
.p-time { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.p-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px 0 12px 33px; padding: 0;
  list-style: none; font-size: 12px; color: var(--muted); }
.p-steps li { display: inline-flex; align-items: center; gap: 6px; transition: color .3s; }
.p-steps li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong);
  transition: background .3s, box-shadow .3s; }
.p-steps li:not(:last-child)::after { content: ""; width: 14px; height: 1px; margin-left: 2px; background: var(--line-strong); }
.p-steps li.done { color: var(--text-2); }
.p-steps li.done::before { background: #1f9d55; }
.p-steps li.active { color: var(--text); font-weight: 600; }
.p-steps li.active::before { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: breathe 1.2s ease-in-out infinite; }
.p-bar { position: relative; height: 3px; margin: 0 -16px; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
.p-bar span { position: absolute; inset: 0 auto 0 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent), var(--brand), transparent); animation: slide 1.5s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.msg.assistant.working .ai-avatar { animation: glow 1.8s ease-in-out infinite; }
.msg.assistant.working .ai-avatar .i { animation: twinkle 1.8s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); } }
@keyframes twinkle { 50% { transform: rotate(90deg) scale(.82); } }
/* typing dot after the last words while the answer streams in */
.prose.streaming > :last-child:not(ul, ol, pre, hr, .code-block, .table-wrap)::after,
.prose.streaming > :is(ul, ol):last-child > li:last-child::after {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 5px; border-radius: 50%; vertical-align: .05em;
  background: var(--accent); animation: blink 1s infinite ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .orb::before, .orb::after, .p-stage, .p-bar span, .p-steps li.active::before, .msg.assistant.working .ai-avatar,
  .msg.assistant.working .ai-avatar .i, .prose.streaming *::after { animation: none !important; }
}
.error-box { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; padding: 10px 14px; border-radius: 12px;
  font-size: 14px; color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); }
.error-box .i { margin-top: 2px; }
.gen-images { display: flex; flex-wrap: wrap; gap: 10px; }
.gen-images img { display: block; max-width: min(100%, 512px); max-height: 512px; border-radius: 16px; border: 1px solid var(--line); }
.img-skeleton { width: min(100%, 420px); max-height: 420px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; border-radius: 16px; color: var(--muted); font-size: 14px;
  background: linear-gradient(110deg, var(--code-bg) 30%, var(--hover) 50%, var(--code-bg) 70%) 0 0 / 250% 100%;
  border: 1px solid var(--line); animation: shimmer 1.6s linear infinite; }
.img-skeleton .i { width: 28px; height: 28px; }
.video-skeleton { aspect-ratio: 16 / 9; width: min(100%, 560px); text-align: center; padding: 0 16px; }
.video-skeleton.portrait { aspect-ratio: 9 / 16; width: min(100%, 260px); max-height: none; }
.gen-videos video { display: block; width: min(100%, 640px); max-height: 70vh; border-radius: 16px;
  border: 1px solid var(--line); background: #000; }
.gen-videos video.portrait { width: min(100%, 320px); }
@keyframes shimmer { to { background-position: -250% 0; } }

/* files */
.files { display: flex; flex-wrap: wrap; gap: 8px; }
.files:empty { display: none; }
.file-card { display: flex; align-items: center; gap: 12px; min-width: 250px; max-width: 380px; padding: 10px 12px 10px 10px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none;
  transition: border-color .15s, box-shadow .15s; }
a.file-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.file-card.error { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.file-card .dl { margin-left: auto; color: var(--muted); display: grid; }
.file-card > .icon-btn { margin-left: auto; width: 28px; height: 28px; }
.file-meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.file-meta b { font-size: 14px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.file-card.error small { color: var(--danger); }
.file-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 9px; color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; background: #6b7280; }
.file-ico.mini { width: 26px; height: 26px; border-radius: 7px; font-size: 8.5px; }
.file-ico.docx { background: #2b579a; }
.file-ico.xlsx { background: #217346; }
.file-ico.pptx { background: #c43e1c; }
.file-ico.pdf { background: #d93025; }
.file-ico.zip { background: #7a6a4f; }
.file-ico.img { background: #7c4dbd; }

/* markdown */
.prose { overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 .9em; }
.prose h1, .prose h2, .prose h3, .prose h4 { margin: 1.5em 0 .55em; font-weight: 650; line-height: 1.3; letter-spacing: -.015em; }
.prose h1 { font-size: 1.45em; }
.prose h2 { font-size: 1.25em; }
.prose h3 { font-size: 1.1em; }
.prose h4 { font-size: 1em; }
.prose ul, .prose ol { margin: 0 0 .9em; padding-left: 1.6em; }
.prose li { margin: .3em 0; }
.prose li > p { margin: 0 0 .4em; }
.prose li::marker { color: var(--muted); }
.prose strong { font-weight: 650; }
.prose a { color: var(--accent); text-underline-offset: 2px; }
.prose blockquote { margin: 0 0 .9em; padding: 2px 0 2px 14px; border-left: 3px solid var(--line-strong); color: var(--text-2); }
.prose hr { margin: 1.6em 0; border: 0; border-top: 1px solid var(--line); }
.prose img { max-width: 100%; border-radius: 10px; }
.prose :not(pre) > code { padding: .12em .38em; font: .87em var(--mono); background: var(--code-bg);
  border: 1px solid var(--line); border-radius: 5px; }
.code-block { margin: 0 0 1em; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--code-bg); }
.code-head { display: flex; align-items: center; justify-content: space-between; padding: 5px 6px 5px 14px;
  border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.code-head button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; }
.code-head button:hover { background: var(--hover); color: var(--text); }
.code-head .i { width: 14px; height: 14px; }
.code-block pre { margin: 0; padding: 14px 16px; overflow-x: auto; font: 13.5px/1.6 var(--mono); tab-size: 4; }
.code-block code { font: inherit; }
.table-wrap { margin: 0 0 1em; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; overflow-wrap: normal; }
.prose th { background: var(--code-bg); font-weight: 600; text-align: left; }
.prose th, .prose td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th + th, .prose td + td { border-left: 1px solid var(--line); }
.prose tbody tr:last-child td { border-bottom: 0; }
.hljs-keyword, .hljs-selector-tag, .hljs-doctag { color: var(--hl-kw); }
.hljs-string, .hljs-regexp, .hljs-addition { color: var(--hl-str); }
.hljs-number, .hljs-literal, .hljs-symbol { color: var(--hl-num); }
.hljs-comment, .hljs-quote { color: var(--hl-com); font-style: italic; }
.hljs-title, .hljs-section, .hljs-built_in { color: var(--hl-fn); }
.hljs-type, .hljs-class, .hljs-meta { color: var(--hl-type); }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-name, .hljs-tag, .hljs-deletion { color: var(--hl-attr); }

/* ---------- composer ---------- */
#composer-wrap { position: relative; flex: none; width: 100%; max-width: 828px; margin: 0 auto; padding: 0 24px 10px; }
#to-bottom { position: absolute; top: -50px; left: 50%; translate: -50% 0; width: 36px; height: 36px; display: grid;
  place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text-2); box-shadow: var(--shadow); }
#composer { padding: 10px 10px 8px 12px; border: 1px solid var(--line-strong); border-radius: 24px; background: var(--surface);
  box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
#composer:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
#input { display: block; width: 100%; min-height: 30px; max-height: 260px; padding: 4px 6px; border: 0; outline: 0;
  resize: none; background: none; color: var(--text); font: inherit; font-size: 15.5px; line-height: 1.55; }
#input::placeholder { color: var(--muted); }
.toolbar { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.tool-btn { height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 8px; border: 1px solid transparent; border-radius: 999px; color: var(--text-2); font-size: 13.5px;
  font-weight: 500; cursor: pointer; transition: background .15s, color .15s; }
.tool-btn:hover { background: var(--hover); color: var(--text); }
.tool-btn.pill { padding: 0 12px 0 10px; border-color: var(--line); }
.tool-btn[aria-pressed="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.tool-btn.recording { background: var(--danger); color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .6; } }
#send { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--accent);
  color: #fff; transition: background .15s, opacity .15s; }
#send:hover:not(:disabled) { background: var(--accent-hover); }
#send:disabled { opacity: .35; }
#send.stop { background: var(--text); color: var(--bg); opacity: 1; }
#send .i { stroke-width: 2.4; }
#send.stop .i { fill: currentColor; stroke: none; width: 14px; height: 14px; }
#chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 8px; }
#chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 9px; max-width: 250px; padding: 5px 4px 5px 5px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: 13px; }
.chip img { width: 38px; height: 38px; flex: none; object-fit: cover; border-radius: 8px; }
.chip-meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.chip-meta small { color: var(--muted); font-size: 11.5px; }
.chip .icon-btn { width: 24px; height: 24px; }
.chip .icon-btn .i { width: 14px; height: 14px; }
.chip.uploading { padding: 8px 12px; color: var(--muted); }
.disclaimer { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
#drop { position: absolute; inset: 10px; z-index: 40; display: grid; place-items: center; pointer-events: none;
  border: 2px dashed var(--accent); border-radius: 20px; background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(3px); color: var(--accent); font-weight: 600; font-size: 16px; }

/* ---------- login ---------- */
.login-body { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(900px 500px at 50% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent), var(--bg); }
.login-card { width: 100%; max-width: 390px; display: flex; flex-direction: column; gap: 14px; padding: 32px 28px;
  border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-lg); }
.login-head { text-align: center; margin-bottom: 6px; }
.login-head img { width: 64px; height: 64px; object-fit: contain; }
.login-head h1 { margin: 12px 0 4px; font: 500 27px/1.2 var(--serif); letter-spacing: -.01em; }
.login-head p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 550; color: var(--text-2); }
.field input { padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--bg);
  color: var(--text); font: inherit; font-size: 15px; font-weight: 400; transition: border-color .15s, box-shadow .15s; }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.btn-primary { height: 46px; margin-top: 4px; border-radius: 11px; background: var(--accent); color: #fff; font-size: 15px;
  font-weight: 600; transition: background .15s; }
.btn-primary:hover { background: var(--accent-hover); }
.login-error { margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent); }
.login-foot { margin: 4px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.credit { white-space: nowrap; }
.login-body { grid-template-rows: 1fr auto; }
.login-credit { align-self: end; padding-top: 24px; font-size: 12.5px; color: var(--muted); letter-spacing: .01em; }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  #sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; margin-left: 0 !important; transform: translateX(-100%);
    box-shadow: var(--shadow-lg); }
  body.sidebar-open #sidebar { transform: none; }
  body.sidebar-open #scrim { display: block; }
  #open-sidebar, #new-chat-top { display: inline-grid; }
  #new-chat-top { order: 3; }
  #messages { padding: 8px 16px 32px; }
  #composer-wrap { padding: 0 12px 8px; }
  #input { font-size: 16px; }
  .msg.assistant { gap: 0; }
  .ai-avatar { display: none; }
  .msg.user .actions { display: none; }
  .p-stage { white-space: normal; }
  .p-steps { margin-left: 0; gap: 4px 6px; }
  .p-steps li:not(:last-child)::after { width: 8px; }
}
@media (max-width: 560px) {
  #suggestions { grid-template-columns: 1fr; }
  .suggestion:nth-child(n+3) { display: none; }
  .tool-btn.pill span { display: none; }
  .tool-btn.pill { padding: 0 8px; }
  .file-card { min-width: 0; width: 100%; }
  .credit { display: block; }
  .credit .sep { display: none; }
}
@media (hover: none) {
  .msg.assistant .actions, .conv .icon-btn { opacity: 1; }
}

/* ---------- admin: kelola akun ---------- */
.btn-accent { height: 36px; padding: 0 16px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 14px;
  font-weight: 600; }
.btn-accent:hover { background: var(--accent-hover); }
.btn-accent:disabled, .btn-danger:disabled { opacity: .6; }
.btn-ghost, .btn-accent { display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; }
a.btn-ghost { color: inherit; }
.btn-ghost .i, .btn-accent .i { width: 16px; height: 16px; }
.menu-item:disabled { opacity: .45; cursor: default; }
.menu-item:disabled:hover { background: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.adm-body { min-height: 100dvh; background: var(--side); }
.adm-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 12px 24px;
  background: color-mix(in srgb, var(--side) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.adm { max-width: 1120px; margin: 0 auto; padding: 32px 24px 64px; }
.adm-head h1 { margin: 0 0 4px; font: 500 32px/1.15 var(--serif); letter-spacing: -.015em; }
.adm-head p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.adm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.adm-stat { display: flex; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow); }
.adm-stat > .i { width: 34px; height: 34px; padding: 8px; border-radius: 10px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); }
.adm-stat div { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.adm-stat-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.adm-stat b { font-size: 26px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 2px 0; }
.adm-stat small { font-size: 12.5px; color: var(--text-2); }
.adm-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.adm-search { width: min(320px, 100%); }
.adm-search input { background: var(--surface); border-color: var(--line); }
.adm-select { height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8984' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center / 14px;
  appearance: none; color: var(--text); font: inherit; font-size: 14px; }
.adm-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.adm-select:disabled { color: var(--muted); }
.adm-btn { height: 36px; }
.adm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-table th { padding: 11px 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--muted);
  border-bottom: 1px solid var(--line); background: var(--side); white-space: nowrap; }
.adm-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table tbody tr:hover { background: var(--hover); }
.adm-table tr.off .adm-who, .adm-table tr.off .adm-act { opacity: .55; }
.adm-who-in { display: flex; align-items: center; gap: 12px; min-width: 0; }
.adm-who-in div { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.adm-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-who span:not(.avatar) { font-size: 12.5px; color: var(--muted); font-family: var(--mono); }
.adm-badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600;
  background: var(--hover); color: var(--text-2); }
.adm-badge.admin { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
:root[data-theme="dark"] .adm-badge.admin { color: #9cc0ea; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .adm-badge.admin { color: #9cc0ea; } }
.adm-dot { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
.adm-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.adm-dot.on::before { background: #2f9e5b; box-shadow: 0 0 0 3px rgba(47, 158, 91, .15); }
.adm-act { line-height: 1.35; font-variant-numeric: tabular-nums; }
.adm-act span, .adm-act small { display: block; }
.adm-act small { font-size: 12.5px; color: var(--muted); }
.adm-last { white-space: nowrap; color: var(--text-2); }
.adm-last.muted { color: var(--muted); font-style: italic; }
.adm-more { width: 52px; text-align: right; }
.adm-empty { text-align: center; color: var(--muted); padding: 36px 16px !important; }
.adm-empty .spinner { display: inline-block; }
.adm-dialog { width: min(92vw, 440px); }
.adm-dialog.wide { width: min(94vw, 600px); }
.adm-dialog form { display: flex; flex-direction: column; }
.adm-dialog .adm-intro { margin: 0 0 16px; }
.adm-dialog .login-error { margin-bottom: 14px; }
.adm-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.adm-form .adm-select { height: 44px; border-color: var(--line-strong); border-radius: 11px; background-color: var(--bg); font-size: 15px; }
.field input:disabled { color: var(--muted); background: var(--hover); }
.adm-hint { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.adm-textarea { padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--bg);
  color: var(--text); font: 13.5px/1.6 var(--mono); resize: vertical; min-height: 140px; }
.adm-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.adm-preview:empty { display: none; }
.adm-preview { max-height: 180px; overflow-y: auto; border: 1px solid var(--line); border-radius: 11px; font-size: 13.5px; }
.adm-preview-head { position: sticky; top: 0; padding: 7px 12px; background: var(--side); font-size: 12px; font-weight: 600;
  color: var(--muted); border-bottom: 1px solid var(--line); }
.adm-preview-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding: 5px 12px; }
.adm-preview-row code { font-family: var(--mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.adm-preview-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-preview-more { padding: 5px 12px 8px; color: var(--muted); }
.adm-creds { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.adm-cred-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 11px; }
.adm-cred { display: flex; align-items: center; gap: 12px; padding: 9px 8px 9px 14px; border-bottom: 1px solid var(--line); }
.adm-cred:last-child { border-bottom: 0; }
.adm-cred-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.adm-cred-who b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-cred-who span { font: 12.5px var(--mono); color: var(--muted); }
.adm-pw { padding: 4px 10px; border-radius: 8px; background: var(--code-bg); border: 1px solid var(--line);
  font: 500 14px var(--mono); letter-spacing: .04em; user-select: all; }
.adm-cred-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-failed { padding: 10px 14px; border-radius: 11px; font-size: 13.5px; color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent); }
.adm-failed ul { margin: 4px 0 0; padding-left: 18px; }
@media (max-width: 860px) {
  .adm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-table thead { display: none; }
  .adm-table, .adm-table tbody, .adm-table tr, .adm-table td { display: block; }
  .adm-table tr { position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px 10px;
    padding: 14px 52px 14px 16px; border-bottom: 1px solid var(--line); }
  .adm-table tbody tr:last-child { border-bottom: 0; }
  .adm-table td { padding: 0; border: 0; }
  .adm-who { grid-column: 1 / -1; }
  .adm-role { padding-left: 44px !important; }
  .adm-last { justify-self: end; font-size: 12.5px; }
  .adm-act { order: 1; grid-column: 1 / -1; padding-left: 44px !important; font-size: 13px; }
  .adm-act span, .adm-act small { display: inline; }
  .adm-act small::before { content: " · "; }
  .adm-more { position: absolute; top: 12px; right: 8px; width: auto; }
  .adm-empty { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .adm-top { padding: 10px 16px; }
  .adm-back span { display: none; }
  .adm-back { width: 36px; padding: 0; }
  .adm { padding: 22px 16px 48px; }
  .adm-head h1 { font-size: 27px; }
  .adm-stats { gap: 8px; margin: 18px 0; }
  .adm-stat { padding: 12px; gap: 10px; }
  .adm-stat > .i { display: none; }
  .adm-stat b { font-size: 22px; }
  .adm-search { width: 100%; }
  .adm-tools .spacer { display: none; }
  .adm-tools #filter { flex: 1 1 100%; }
  .adm-tools .adm-btn { flex: 1; }
  .adm-cred { flex-wrap: wrap; }
}

/* ---------- Tim Kreatif (bergantian) & audio ---------- */
.team.chain { margin-bottom: 12px; }
.team.chain .team-list { counter-reset: step; }
.team.chain .member { position: relative; counter-increment: step; }
.team.chain .m-text b::before { content: counter(step) ". "; color: var(--muted); font-weight: 500; }
.team.chain .member:not(:last-child)::after { content: ""; position: absolute; left: 22px; top: 40px; bottom: -6px;
  width: 2px; border-radius: 2px; background: var(--line); }
.team.chain .member[data-status="done"]:not(:last-child)::after { background: color-mix(in srgb, #1f9d55 45%, var(--line)); }
.team.chain .member.open::after { display: none; }
.member[data-status="queued"] .mdot { opacity: .45; }
.member[data-status="running"] .mdot { box-shadow: 0 0 0 0 var(--focus); animation: chain-pulse 1.6s ease-out infinite; }
@keyframes chain-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.gen-audios { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 4px; }
.gen-audio { display: flex; align-items: center; gap: 12px; max-width: 520px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--surface); }
.gen-audio audio { flex: 1; min-width: 0; height: 40px; }
.ga-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--brand)); }
.audio-skeleton { aspect-ratio: auto !important; height: 96px; max-width: 520px; }

.chain-note { display: flex; align-items: flex-start; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.45; color: #a15c07; background: color-mix(in srgb, #e8a317 10%, transparent); }
.chain-note .i { margin-top: 2px; flex: none; }

/* ---------- gambar dalam jawaban ---------- */
.prose img { display: block; max-width: min(100%, 640px); max-height: 520px; margin: 12px auto; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; }
.fig-pending { display: flex; align-items: center; justify-content: center; gap: 8px; height: 140px; max-width: 640px;
  margin: 12px auto; border-radius: 12px; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 13.5px;
  background: linear-gradient(110deg, var(--code-bg) 30%, var(--hover) 50%, var(--code-bg) 70%) 0 0 / 250% 100%;
  animation: shimmer 1.6s linear infinite; }

/* =====================================================================
   BuatKonten Studio: brand, kredit, resep konten, dompet, profil brand
   ===================================================================== */
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn-grad { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px;
  border-radius: 10px; background: var(--grad); color: #fff; font-size: 14px; font-weight: 650; letter-spacing: -.005em;
  box-shadow: 0 4px 14px rgba(26, 115, 245, .22); transition: transform .12s, box-shadow .15s, filter .15s; text-decoration: none; }
.btn-grad:hover { filter: brightness(1.05) saturate(1.05); box-shadow: 0 6px 20px rgba(26, 115, 245, .3); }
.btn-grad:active { transform: translateY(1px); }
.btn-grad:disabled { opacity: .6; cursor: default; }
.btn-grad.sm { height: 32px; padding: 0 13px; font-size: 13px; border-radius: 9px; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }

/* sidebar */
.brand { font-weight: 750; font-size: 16px; letter-spacing: -.02em; }
.brand img { width: 32px; height: 32px; }
.side-btn .i { width: 17px; height: 17px; color: var(--text-2); }
.side-btn.primary { margin: 2px 0 8px; padding: 9px 12px; border: 1px solid var(--line-strong); background: var(--surface);
  box-shadow: var(--shadow); font-weight: 650; }
.side-btn.primary:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); background: var(--surface); }
.side-btn.primary .i { color: var(--accent); }
.side-nav { display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.side-nav .side-btn { font-weight: 550; font-size: 14px; padding: 7px 10px; }
.wallet-card { margin: 6px 0 8px; padding: 12px; border-radius: 14px; background: var(--grad-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); }
.wc-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--text-2); }
.wc-link { font-size: 12px; font-weight: 600; color: var(--accent); }
.wc-link:hover { text-decoration: underline; }
.wc-balance { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 10px; }
.wc-balance b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.wc-balance small { color: var(--muted); font-size: 13px; }
.wallet-card .btn-grad { width: 100%; height: 34px; font-size: 13.5px; }
.wallet-card.low .wc-balance b { color: var(--danger); }
.avatar { background: var(--grad); font-weight: 700; }

/* header */
.header-title span:first-child { font-weight: 700; letter-spacing: -.01em; }
.auto-pill { background: var(--grad-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.credit-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; margin-right: 6px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 13.5px; transition: border-color .15s; }
.credit-pill:hover { border-color: color-mix(in srgb, var(--orange) 55%, var(--line-strong)); }
.credit-pill .i { width: 15px; height: 15px; color: var(--orange); fill: color-mix(in srgb, var(--orange) 30%, transparent); }
.credit-pill b { font-weight: 750; font-variant-numeric: tabular-nums; }
.credit-pill .cp-label { color: var(--muted); font-size: 12.5px; }
.credit-pill.low { border-color: color-mix(in srgb, var(--danger) 55%, var(--line-strong)); }
.credit-pill.low b { color: var(--danger); }

/* welcome + recipes (studio home) */
body.is-empty main { overflow-y: auto; }
body.is-empty #scroller { margin-top: max(5vh, 24px); }
body.is-empty #composer-wrap { margin-bottom: 0; padding-bottom: 32px; }
.welcome { padding-bottom: 24px; }
.welcome h1 { text-wrap: balance; font: 800 clamp(26px, 4vw, 38px)/1.18 var(--font); letter-spacing: -.035em; margin-bottom: 10px; }
.welcome p { max-width: 560px; margin: 0 auto; font-size: 15.5px; }
#composer { box-shadow: 0 2px 6px rgba(15, 23, 42, .04), 0 10px 32px rgba(26, 115, 245, .08); }
#suggestions { display: none; margin-top: 30px; }
body.is-empty #suggestions { display: block; }
.recipes-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.recipes-head h2 { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.rh-sub { color: var(--muted); font-size: 13px; }
.recipe-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px 14px; padding: 2px; }
.recipe-tabs::-webkit-scrollbar { display: none; }
.rtab { flex: none; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600;
  color: var(--text-2); background: var(--surface); }
.rtab:hover { border-color: var(--line-strong); color: var(--text); }
.rtab.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.recipe { --c: var(--accent); position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 138px; padding: 14px;
  text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  transition: border-color .15s, transform .15s, box-shadow .15s; animation: rise .3s ease-out both; }
.recipe:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow); }
.c-video { --c: #ef4b7a; } .c-image { --c: #8b5cf6; } .c-write { --c: #1a73f5; } .c-audio { --c: #f28c28; } .c-plan { --c: #10a37f; }
.r-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: color-mix(in srgb, var(--c, var(--accent)) 12%, transparent); color: var(--c, var(--accent)); }
.r-ico .i { width: 19px; height: 19px; }
.r-text b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.r-text small { display: block; margin-top: 3px; font-size: 12.8px; color: var(--muted); line-height: 1.4; }
.r-foot { display: flex; align-items: center; gap: 4px; margin-top: auto; font-size: 12px; font-weight: 600; color: var(--text-2); }
.r-foot .i { color: var(--orange); width: 13px; height: 13px; }
.r-badge { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 650;
  background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); }

/* message extras */
.ai-avatar { background: url("/static/logo-64.png") center / 22px no-repeat, var(--surface); border: 1px solid var(--line); }
.ai-avatar .i { display: none; }
.cost { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; vertical-align: -1px; font-size: 12px; color: var(--muted); }
.cost .i { color: var(--orange); }
.topup-box { align-items: center; flex-wrap: wrap; }
.topup-box > span { flex: 1; min-width: 200px; }
.msg.user .bubble { border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent); }

/* forms in dialogs */
.field select, .field textarea { padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--bg);
  color: var(--text); font: inherit; font-size: 14.5px; font-weight: 450; }
.field textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.field input { font-weight: 450; }

.recipe-dialog, .profile-dialog { width: min(94vw, 560px); padding: 0; overflow: hidden; }
.profile-dialog { width: min(94vw, 680px); }
.rd-head { display: flex; gap: 12px; align-items: flex-start; padding: 20px 20px 14px; border-bottom: 1px solid var(--line); }
.rd-head > div { flex: 1; min-width: 0; }
.rd-head h3 { margin: 2px 0 2px; font-size: 18px; font-weight: 750; letter-spacing: -.02em; }
.rd-head p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.rd-body { display: grid; gap: 14px; padding: 18px 20px; max-height: min(62vh, 560px); overflow-y: auto; }
.rd-body.two { grid-template-columns: 1fr 1fr; }
.rd-body.two .wide { grid-column: 1 / -1; }
.rd-foot { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--side); }
.rd-cost { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.rd-cost .i { color: var(--orange); }

/* wallet */
.wallet-dialog { width: min(96vw, 860px); padding: 0; overflow: hidden; }
.wd-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 22px 6px; }
.wd-head h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.025em; }
.wd-bal { display: inline-flex; align-items: center; gap: 5px; margin: 4px 0 0; font-size: 14px; color: var(--text-2); font-weight: 600; }
.wd-bal .i { color: var(--orange); }
.wd-tabs { display: flex; gap: 4px; padding: 8px 22px 0; border-bottom: 1px solid var(--line); }
.wd-tabs button { padding: 9px 12px; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.wd-tabs button.on { color: var(--text); border-color: var(--accent); }
.wd-body { padding: 18px 22px 22px; max-height: min(70vh, 640px); overflow-y: auto; }
.wd-loading { display: grid; place-items: center; padding: 40px; }
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding-top: 6px; }
.pkg { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 18px 16px 16px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--surface); }
.pkg.popular { border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box;
  box-shadow: 0 10px 30px rgba(26, 115, 245, .12); }
.pkg-flag { position: absolute; top: -10px; left: 14px; padding: 2px 10px; border-radius: 999px; background: var(--grad); color: #fff;
  font-size: 11px; font-weight: 700; }
.pkg-name { font-size: 13px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
.pkg-credits { font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin-top: 4px; }
.pkg-price { font-size: 16px; font-weight: 700; color: var(--accent); }
.pkg-per { font-size: 12px; color: var(--muted); }
.pkg-desc { margin: 8px 0 14px; font-size: 13px; color: var(--text-2); line-height: 1.45; flex: 1; }
.pkg .btn-grad, .pkg .btn-ghost { width: 100%; height: 38px; }
.wd-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; padding: 10px 12px; border-radius: 11px;
  background: var(--grad-soft); font-size: 13.5px; color: var(--text-2); }
.wd-note .i { color: var(--accent); }
.wd-note a { color: var(--accent); font-weight: 600; }
.wd-foot { margin: 16px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ledger { display: flex; flex-direction: column; }
.lg-row { display: grid; grid-template-columns: 1fr auto 72px; gap: 12px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.lg-row:last-child { border-bottom: 0; }
.lg-main { min-width: 0; }
.lg-main b { display: block; font-size: 14px; font-weight: 600; }
.lg-main small { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-amt { font-weight: 750; font-variant-numeric: tabular-nums; }
.lg-amt.plus { color: var(--ok); }
.lg-amt.minus { color: var(--text); }
.lg-bal { text-align: right; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.price-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pl-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.pl-row:last-child { border-bottom: 0; }
.pl-row:nth-child(odd) { background: var(--side); }
.pl-row b { display: block; font-size: 14px; font-weight: 650; }
.pl-row small { display: block; font-size: 12.5px; color: var(--muted); }
.pl-val { flex: none; font-size: 13.5px; font-weight: 700; color: var(--accent); text-align: right; max-width: 45%; }

@media (max-width: 860px) {
  .credit-pill .cp-label { display: none; }
  .credit-pill { margin-right: 2px; }
  #topup-btn { display: none; }
  .header-title .auto-pill { display: none; }
  .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .recipe { min-height: 128px; padding: 12px; }
  .rd-body.two { grid-template-columns: 1fr; }
  .lg-row { grid-template-columns: 1fr auto; }
  .lg-bal { display: none; }
}
@media (max-width: 420px) {
  .recipe-grid { grid-template-columns: 1fr; }
  .recipe { min-height: 0; }
}