* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; }
.aurora {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 50vmax at 0% 0%, var(--glow-1), transparent 60%),
    radial-gradient(55vmax 55vmax at 100% 20%, var(--glow-2), transparent 60%),
    radial-gradient(60vmax 50vmax at 30% 100%, var(--glow-3), transparent 60%);
}
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--glass-edge);
}
.icon {
  width: 22px; height: 22px; flex: none; display: inline-block; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout ---------- */
#app { min-height: 100dvh; }
.page {
  max-width: 1080px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 16px) 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 28px);
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.round-btn {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
  transition: transform .15s ease;
}
.round-btn:active { transform: scale(.94); }
.me-avatar {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; color: #fff; background: var(--brand-grad);
  box-shadow: var(--shadow);
}
h1.hello { font-size: clamp(28px, 7vw, 40px); line-height: 1.12; letter-spacing: -0.02em; margin: 0; font-weight: 800; max-width: 14ch; }
.hello-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
h2.section { font-size: 18px; font-weight: 800; margin: 28px 0 12px; letter-spacing: -0.01em; }

/* ---------- Chips ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 6px; margin: 0 -16px 14px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 14px;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--plum); color: var(--plum-ink); border-color: transparent; }
.tag {
  display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.35);
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Hero carousel ---------- */
.hero-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 380px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 4px 16px 10px; margin: 8px -16px 0;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero {
  scroll-snap-align: start; position: relative; overflow: hidden; border-radius: 28px; min-height: 380px;
  color: #fff; padding: 18px; display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(120% 80% at 80% 10%, hsla(var(--h), 90%, 78%, .9), transparent 60%),
    linear-gradient(160deg, hsl(calc(var(--h) + 20), 70%, 62%), hsl(var(--h), 55%, 34%) 70%, hsl(calc(var(--h) - 20), 50%, 22%));
  box-shadow: var(--shadow); text-align: left;
}
.hero .big-avatar {
  position: absolute; right: -24px; top: 56px; color: rgba(255,255,255,.9);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.25)); transform: rotate(-10deg); pointer-events: none;
}
.hero .big-avatar .icon { width: 190px; height: 190px; }
.hero h3 { font-size: 30px; line-height: 1.1; margin: 0 0 10px; font-weight: 800; letter-spacing: -0.02em; max-width: 9ch; text-shadow: 0 2px 16px rgba(0,0,0,.2); }
.hero-bottom { display: flex; align-items: center; gap: 10px; position: relative; }
.hero-input {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 999px;
  background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: rgba(255,255,255,.92); font-weight: 500;
}
.hero-heart { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.4); color: #fff; }

/* ---------- Character list ---------- */
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.char-row {
  display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 20px; text-align: left; width: 100%;
  background: var(--glass); border: 1px solid var(--glass-edge); text-decoration: none; color: inherit;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .15s ease;
}
.char-row:active { transform: scale(.985); }
.tile {
  width: 64px; height: 64px; flex: none; border-radius: 18px; display: grid; place-items: center; font-size: 26px; color: #fff;
  background: linear-gradient(150deg, hsl(calc(var(--h) + 20), 75%, 72%), hsl(var(--h), 55%, 44%));
}
.tile .icon { width: 30px; height: 30px; }
.tile.sm { width: 40px; height: 40px; border-radius: 50%; font-size: 17px; }
.tile.sm .icon { width: 20px; height: 20px; }
.char-row .meta { flex: 1; min-width: 0; display: grid; gap: 6px; }
.char-row .name { font-weight: 700; font-size: 16px; }
.char-row .tag { background: var(--rose-soft); border-color: transparent; color: var(--ink-2); }
.char-row .chev { color: var(--ink-3); }
.create-row { justify-content: center; font-weight: 700; color: var(--ink-2); min-height: 84px; border-style: dashed; border-color: var(--line); }

/* ---------- Chats list ---------- */
.chat-row .last { color: var(--ink-2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { padding: 32px 16px; text-align: center; color: var(--ink-2); }

/* ---------- Tab bar ---------- */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 20;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  display: flex; gap: 4px; padding: 6px; border-radius: 999px; box-shadow: var(--shadow); max-width: calc(100% - 24px); overflow: hidden;
  background: var(--glass-strong);
}
.tabbar[hidden] { display: none; }
.tab { text-decoration: none; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 999px; color: var(--ink-2); font-weight: 700; font-size: 14px; }
.tab span:not(.icon) { display: none; }
.tab[aria-current="page"] { color: var(--plum-ink); padding: 0 18px; }
.tab[aria-current="page"] span:not(.icon) { display: inline; }

/* ---------- Chat ---------- */
.chat-page { max-width: 780px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
.chat-head {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 10px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.chat-head .who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; }
.chat-head h1 { font-size: 17px; margin: 0; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .round-btn { width: 42px; height: 42px; box-shadow: none; flex: none; }
.thread { flex: 1; padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.msg.user { justify-content: flex-end; }
.msg .tile.sm { margin-bottom: 26px; }
.bubble-wrap { display: grid; gap: 6px; max-width: min(84%, 620px); }
.msg.user .bubble-wrap { justify-items: end; }
.bubble {
  padding: 12px 15px; border-radius: 22px; white-space: normal; overflow-wrap: anywhere;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: 0 4px 18px -10px rgba(76,33,92,.25);
  border-bottom-left-radius: 8px;
}
.msg.user .bubble { background: var(--bubble-mine); color: var(--bubble-mine-ink); border-color: transparent; border-bottom-left-radius: 22px; border-bottom-right-radius: 8px; }
.bubble p { margin: 0 0 8px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble em { color: var(--ink-2); font-style: italic; }
.msg.user .bubble em { color: inherit; opacity: .8; }
.bubble.typing { display: inline-flex; gap: 5px; padding: 15px 18px; }
.bubble.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: blink 1.2s infinite; }
.bubble.typing i:nth-child(2) { animation-delay: .2s; }
.bubble.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.cursor::after { content: "▍"; margin-left: 1px; color: var(--rose); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.msg-actions { display: flex; flex-wrap: wrap; gap: 4px; opacity: 0; transition: opacity .15s; }
.msg:hover .msg-actions, .msg.show-actions .msg-actions, .msg.last-ai .msg-actions { opacity: 1; }
.act-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--glass); border: 1px solid var(--glass-edge);
  white-space: nowrap;
}
.act-btn .icon { width: 15px; height: 15px; }
.act-btn:disabled { opacity: .35; cursor: default; }
.swipe { display: inline-flex; align-items: center; gap: 2px; }
/* Gestur geser versi di balasan terakhir: browser tetap menggulir vertikal, gerak horizontal diserahkan ke JS. */
.msg.last-ai .bubble { touch-action: pan-y; }
.swipe .act-btn { width: 30px; padding: 0; justify-content: center; }
.swipe-count { font-size: 12.5px; font-weight: 700; color: var(--ink-2); padding: 0 6px; font-variant-numeric: tabular-nums; }
/* Kotak edit mengisi lebar kolom chat (bukan lebar layar), dan menyisakan ruang di atas composer yang sticky. */
.bubble-wrap:has(> .edit-box) { width: min(84%, 620px); }
.edit-box { width: 100%; display: grid; gap: 8px; scroll-margin-bottom: 120px; }
.edit-box textarea { width: 100%; min-height: 120px; }
.err-card { align-self: center; max-width: 520px; padding: 12px 16px; border-radius: 18px; background: var(--rose-soft); color: var(--ink); font-size: 14px; display: grid; gap: 8px; }

.composer-wrap {
  position: sticky; bottom: 0; padding: 8px 12px calc(env(safe-area-inset-bottom) + 12px);
  background: linear-gradient(transparent, var(--bg) 45%);
}
.stop-row { display: flex; justify-content: center; margin-bottom: 8px; }
.stop-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 13px; }
.stop-btn .icon { width: 16px; height: 16px; }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 18px; border-radius: 28px; box-shadow: var(--shadow); background: var(--glass-strong); }
.composer textarea {
  flex: 1; border: 0; outline: 0; background: transparent; resize: none; padding: 11px 0; max-height: 160px; line-height: 1.45;
}
.composer textarea::placeholder { color: var(--ink-3); }
.composer textarea:focus { border: 0; box-shadow: none; }
.composer:focus-within { box-shadow: var(--shadow), 0 0 0 2px color-mix(in srgb, var(--plum) 45%, transparent); }
.send-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--rose); color: #fff; flex: none; transition: transform .15s, opacity .15s; }
.send-btn:disabled { opacity: .4; cursor: default; }
.send-btn:not(:disabled):active { transform: scale(.92); }

/* ---------- Forms ---------- */
.card { padding: 18px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.card + .card { margin-top: 14px; }
.card h2 { margin: 0 0 14px; font-size: 18px; font-weight: 800; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span { font-weight: 700; font-size: 13.5px; color: var(--ink-2); }
input[type="text"], input[type="email"], input[type="url"], textarea, select {
  width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); outline: 0;
  background: var(--glass-strong); transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus, select:focus { border-color: var(--rose); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 22%, transparent); }
textarea { resize: vertical; line-height: 1.5; }
input[type="range"] { width: 100%; accent-color: var(--rose); }
.row { display: flex; gap: 10px; align-items: center; }
.row > * { flex: 1; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 18px;
  border-radius: 999px; font-weight: 700; background: var(--glass-strong); border: 1px solid var(--line);
}
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.btn.danger { color: var(--danger); }
.btn.small { height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn:disabled { opacity: .5; cursor: default; }
.status-line { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 12px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
.dot.ok { background: var(--online); }
.hint { margin: 0 0 14px; }
code { font-size: 13px; padding: 2px 6px; border-radius: 6px; background: var(--rose-soft); }
.emoji-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.emoji-pick button { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2); background: var(--glass-strong); border: 1px solid var(--line); }
.emoji-pick button[aria-pressed="true"] { color: var(--rose); }
.pv-avatar { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.22); }
.emoji-pick button[aria-pressed="true"] { border-color: var(--rose); box-shadow: 0 0 0 2px var(--rose); }
.hue-preview { height: 56px; border-radius: 16px; display: flex; align-items: center; gap: 12px; padding: 0 12px; color: #fff; font-weight: 800; }

/* ---------- Bottom sheet ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(23, 12, 28, .35); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s ease; }
.sheet {
  width: min(640px, 100%); max-height: 88dvh; overflow: auto; border-radius: 28px 28px 0 0;
  padding: 10px 18px calc(env(safe-area-inset-bottom) + 20px); background: var(--bg);
  box-shadow: 0 -10px 40px -10px rgba(0,0,0,.3); animation: up .26s cubic-bezier(.2,.9,.3,1);
}
.sheet .grab { width: 44px; height: 5px; border-radius: 99px; background: var(--line); margin: 0 auto 12px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sheet-head h2 { margin: 0; font-size: 20px; font-weight: 800; }
@media (min-width: 720px) {
  .scrim { align-items: center; }
  .sheet { border-radius: 28px; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.mem-list { margin-bottom: 14px; }
/* Peta ingatan: gelembung inti + 4 gelembung kategori (posisi dari MEM_POS di app.js). */
.mem-map { position: relative; height: 300px; margin: 4px 0 14px; }
.mem-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mem-link { stroke: var(--line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mem-core, .mem-bubble { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 0; border: 0; cursor: pointer; font: inherit; transition: transform .18s, box-shadow .18s, opacity .18s; }
.mem-core { left: 50%; top: 50%; width: 104px; height: 104px; background: var(--ink); color: var(--bg); font-weight: 800; font-size: 16px; z-index: 1; }
.mem-core.on { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 25%, transparent); }
.mem-bubble { --c: var(--plum); --s: calc(78px + var(--n, 0) * 4px); width: var(--s); height: var(--s); background: color-mix(in srgb, var(--c) 30%, var(--bg)); border: 2px solid color-mix(in srgb, var(--c) 70%, transparent); color: var(--ink); font-size: 12.5px; font-weight: 700; line-height: 1.15; text-align: center; }
.mem-bubble .icon { width: 18px; height: 18px; color: var(--c); }
.mem-bubble b { font-size: 12px; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--c) 40%, transparent); }
.mem-bubble[data-cat="likes"] { --c: var(--star); }
.mem-bubble[data-cat="events"] { --c: var(--ok); }
.mem-bubble[data-cat="bond"] { --c: var(--rose); }
.mem-bubble:disabled { opacity: .4; cursor: default; }
.mem-bubble.on { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 35%, transparent); }
.mem-map.has-sel .mem-bubble:not(.on):not(:disabled) { opacity: .55; }
.mem-items { display: grid; gap: 8px; }
.mem-tabs { margin-bottom: 10px; }
.mem-item { --c: var(--plum); }
.mem-item[data-cat="likes"] { --c: var(--star); }
.mem-item[data-cat="events"] { --c: var(--ok); }
.mem-item[data-cat="bond"] { --c: var(--rose); }
.mem-dot { flex: none; width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: var(--c); }
.mem-item { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line); }
.mem-item p { flex: 1; margin: 0; }
.mem-item p[contenteditable="true"] { outline: 0; }
.icon-btn { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-3); flex: none; }
.icon-btn .icon { width: 18px; height: 18px; }
.icon-btn:hover { color: var(--danger); background: var(--rose-soft); }

.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 100px); transform: translate(-50%, 20px); z-index: 60;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.banner { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--rose-soft); margin-bottom: 16px; font-size: 14px; }
.banner p { margin: 0; flex: 1; }

/* Gambar karakter dari artist */
.av-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.tile, .pv-avatar { overflow: hidden; }
.hero.has-img {
  background:
    linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.65) 100%),
    var(--img) center / cover no-repeat,
    hsl(var(--h), 55%, 34%);
}
.tag.credit { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
a.tag.credit:hover { text-decoration: underline; }
.thread-meta { display: flex; justify-content: center; padding: 4px 0 8px; }
.thread-meta .tag { color: var(--ink-2); background: var(--glass); border-color: var(--line); }
.img-row { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
.img-row .btn { cursor: pointer; }

/* Login */
.login-page { max-width: 420px; margin: 0 auto; padding-top: 12vh; display: grid; gap: 16px; }
.login-logo { width: 64px; height: 64px; border-radius: 18px; }
.login-page .card { display: grid; gap: 14px; }
.login-page .card p { margin: 0; color: var(--ink-2); }
.check-row { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14.5px; }
.or { text-align: center; color: var(--ink-3); font-size: 13px; }
.dev-note { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px dashed var(--line); font-size: 13.5px; }
.code-input { letter-spacing: .4em; font-size: 22px; font-weight: 700; text-align: center; }
.account-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.account-row .status-line { margin: 0; flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.account-row .status-line .tag { white-space: nowrap; }
a.btn { text-decoration: none; }
.tag.admin-tag { background: var(--rose-soft); border-color: transparent; color: var(--ink); margin-left: 6px; }

/* Dashboard admin */
.admin-page { max-width: 960px; }
.admin-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.admin-bar h1 { flex: 1; margin: 0; }
.muted { color: var(--ink-3); font-size: 13px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.kpi { padding: 14px; border-radius: var(--radius-sm); background: var(--glass-strong); border: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.kpi b { font-size: 26px; font-weight: 800; line-height: 1.1; }
.kpi span { color: var(--ink-2); font-weight: 600; }
.kpi small { flex-basis: 100%; color: var(--ink-3); font-size: 12px; line-height: 1.4; }
.ret-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; flex-wrap: wrap; }
.ret-label { width: 32px; font-weight: 800; }
.ret-row b { font-size: 20px; }
.ret-row .good { color: var(--ok); }
.ret-row .bad { color: var(--danger); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-wrap th, .table-wrap td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table-wrap thead th { color: var(--ink-3); font-weight: 700; font-size: 12.5px; }
.table-wrap tbody th { color: var(--ink-2); font-weight: 600; }
.table-wrap td .tag.credit { color: var(--ink-2); background: var(--glass); border-color: var(--line); }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.chart-grid h3 { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.bars { width: 100%; height: 90px; display: block; }
.bars rect { fill: var(--rose); }
.bars-axis { display: flex; justify-content: space-between; color: var(--ink-2); font-size: 11.5px; margin-top: 4px; }
.quota-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.quota-bar i { display: block; height: 100%; background: var(--rose); border-radius: inherit; }
.bubble.queued { font-size: 13.5px; color: var(--ink-2); }

/* ---------- v9: layar baru (port dari mockups/src/app.html) ---------- */
.page-narrow { max-width: 640px; }
.btn.block { width: 100%; }
.btn.danger:hover { background: var(--rose-soft); }
.tag.g { background: transparent; color: var(--ink-2); border: 1px solid var(--line); }
.char-row .tag.g { background: transparent; color: var(--ink-2); border-color: var(--line); }
.hero .tag.g, .cover .tag.g { background: rgba(20, 8, 24, .28); color: #fff; border-color: rgba(255, 255, 255, .35); }
.search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; margin-bottom: 12px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--line); color: var(--ink-3); }
.search input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }
.search input:focus { outline: 0; }
.search .icon { width: 18px; height: 18px; }

/* Lanjutkan obrolan (Beranda) */
.cont-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 230px); gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 8px; margin: 0 -2px; }
.cont-track::-webkit-scrollbar { display: none; }
.cont-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 20px; text-decoration: none; background: var(--glass); border: 1px solid var(--glass-edge); min-width: 0; }
.cont-card .tile.sm { width: 40px; height: 40px; }
.cont-meta { display: grid; gap: 2px; min-width: 0; }
.cont-meta b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cont-meta span { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Profil karakter */
.cover { position: relative; overflow: hidden; height: 340px; margin: 0 -16px; padding: 16px; border-radius: 0 0 28px 28px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(20, 8, 24, .05) 30%, rgba(20, 8, 24, .72) 100%),
    radial-gradient(120% 80% at 80% 10%, hsla(var(--h), 90%, 78%, .9), transparent 60%),
    linear-gradient(160deg, hsl(calc(var(--h) + 30), 70%, 66%), hsl(var(--h), 50%, 34%)); }
.cover.has-img { background:
    linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .7) 100%),
    var(--img) center / cover no-repeat, hsl(var(--h), 55%, 34%); }
.cover .big-avatar { position: absolute; right: -20px; top: 64px; color: rgba(255, 255, 255, .9); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .25)); transform: rotate(-8deg); pointer-events: none; }
.cover .big-avatar .icon { width: 170px; height: 170px; }
.cover-top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; }
.cover-top .round-btn { background: rgba(255, 255, 255, .25); border-color: rgba(255, 255, 255, .35); color: #fff; box-shadow: none; }
.cover-body { position: relative; display: grid; gap: 10px; }
.cover h1 { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 16px rgba(0, 0, 0, .2); }
.cover .tags .tag { background: rgba(255, 255, 255, .22); color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0 0; }
.stat-row > div { padding: 12px 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-edge); display: grid; gap: 2px; }
.stat-row b { font-size: 18px; font-weight: 800; }
.stat-row span { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.lead-text { margin: 14px 0 0; color: var(--ink-2); line-height: 1.55; }
.scen-list { display: grid; gap: 8px; }
.scen { display: grid; gap: 4px; text-align: left; padding: 13px 15px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-edge); }
.scen b { font-size: 14px; font-weight: 800; }
.scen span { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.scen[aria-pressed="true"] { border: 2px solid var(--plum); padding: 12px 14px; }
.cta-row { display: flex; gap: 8px; margin-top: 18px; }
.cta-row > * { flex: 1; }

/* Aku (profil user) */
.me-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
.me-avatar.big { width: 68px; height: 68px; border-radius: 24px; font-size: 26px; flex: none; }
.me-name { margin: 0; flex: 1; min-width: 0; font-size: 22px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quota-note { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; }
.card .quota-note + .quota-note { margin-top: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--line); }
.seg-btn { flex: 1 1 auto; padding: 8px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.seg-btn[aria-pressed="true"] { background: var(--plum); color: var(--plum-ink); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 14.5px; margin-top: 4px; }
.status-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--glass-strong); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.status-badge.s-visible { color: var(--ok, #2FA36B); }
.status-badge.s-review { color: var(--plum-text); }
.status-badge.s-hidden { color: var(--danger); }
.mine-list { display: grid; gap: 8px; }
.mine-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 8px 12px 8px 8px; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--line); }
.mine-row .tile.sm { width: 40px; height: 40px; }
.mine-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-actions { margin-top: 12px; justify-content: flex-start; }
.mine-actions > * { flex: none; }
.danger-card h2 { color: var(--danger); }
.danger-card #del-acc-box { margin-top: 12px; }
.danger-card .btn.danger { width: auto; }
.split-row { display: flex; justify-content: space-between; gap: 8px; }
.split-row .btn { flex: none; }
.split-row .btn:disabled { opacity: .5; }

/* Login: kode 6 digit */
.code-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.code-box { width: 100%; min-width: 0; height: 56px; padding: 0; text-align: center; font-size: 22px; font-weight: 800; border-radius: 14px; border: 1px solid var(--line); background: var(--glass-strong); outline: 0; }
.code-box:focus { border-color: var(--rose); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 22%, transparent); }

/* Editor karakter */
.head-row { gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.head-row h2 { margin: 0; }
.steps { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-row .field { margin-bottom: 14px; }
.alt-list { display: grid; gap: 8px; margin-bottom: 8px; }
.alt-row { display: flex; gap: 8px; align-items: flex-start; }
.alt-row textarea { flex: 1; min-width: 0; }
.alt-row .icon-btn { margin-top: 6px; }
.editor-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.editor-foot .grow { flex: 1; }
.editor-foot .btn { flex: none; }
.radio-list { display: grid; gap: 6px; }
.radio-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line); font-weight: 600; cursor: pointer; }
.chat-head .who h1 { flex: 0 1 auto; min-width: 0; }
.chat-head .who .tag.g { flex: none; }
/* Avatar + nama selalu satu baris; teks panjang dipotong (…), bukan turun ke baris baru. */
.chat-head .who { flex-wrap: nowrap; }
.chat-head .who .tile { flex: none; }
.chat-head .who-text { flex: 1 1 0; }

@media (max-width: 480px) {
  .cover { height: 300px; }
  .cover h1 { font-size: 26px; }
  .field-row { grid-template-columns: 1fr; }
}

/* ---------- Checkbox, radio, toggle (satu gaya untuk semua) ---------- */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer;
  width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--ink-3); background: transparent;
  display: inline-grid; place-items: center; transition: background .15s, border-color .15s;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::after {
  content: ""; width: 12px; height: 12px; background: var(--plum-ink); transform: scale(0); transition: transform .12s;
  -webkit-mask: url(/icons/check.svg) center / contain no-repeat; mask: url(/icons/check.svg) center / contain no-repeat;
}
input[type="radio"]::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--plum-ink); transform: scale(0); transition: transform .12s; }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--plum); border-color: var(--plum); }
input[type="checkbox"]:checked::after, input[type="radio"]:checked::after { transform: scale(1); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
/* Toggle switch untuk preferensi on/off */
.toggle-row input[type="checkbox"] { width: 46px; height: 28px; border-radius: 999px; border: none; background: var(--line); box-shadow: inset 0 0 0 1px var(--glass-edge); place-items: center start; padding: 3px; }
.toggle-row input[type="checkbox"]::after { -webkit-mask: none; mask: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-2); transform: none; transition: translate .15s, background .15s; }
.toggle-row input[type="checkbox"]:checked { background: var(--plum); }
.toggle-row input[type="checkbox"]:checked::after { translate: 18px 0; background: var(--plum-ink); }

/* ---------- v11: paritas dengan mockups/src/app.html (phone column, tab bar, kontrol form, Masuk, Beranda) ---------- */
/* Kolom seperti bingkai HP 390px di layar lebar; latar aurora mengikuti kolom. */
body { background: var(--page); }
.aurora { left: 50%; right: auto; width: min(100%, 480px); transform: translateX(-50%); background: var(--bg); }
.aurora::after { content: ""; position: absolute; inset: 0; opacity: .7;
  background: radial-gradient(60% 40% at 0% 0%, var(--glow-1), transparent 70%), radial-gradient(50% 40% at 100% 20%, var(--glow-2), transparent 70%), radial-gradient(60% 40% at 50% 100%, var(--glow-3), transparent 70%); }
#app { max-width: 480px; margin: 0 auto; min-height: 100dvh; background: transparent; position: relative; }
.page { max-width: 480px; padding-left: 16px; padding-right: 16px; }

/* Tab bar: sama dengan mockup (4 ikon, tab aktif berlabel) */
.tabbar { bottom: calc(env(safe-area-inset-bottom) + 18px); gap: 4px; padding: 6px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); }
.tab { height: 46px; padding: 0 14px; font-size: 14px; color: var(--ink-2); gap: 8px; }
.tab[aria-current="page"] { padding: 0 16px; color: var(--plum-ink); }
.tab .icon { width: 22px; height: 22px; }
/* Lebar tetap (tidak ikut lebar label), jadi bar tidak meluncur ke samping saat pindah tab; hanya pill yang bergerak. */
.tabbar { width: min(calc(100% - 24px), 400px); }
.tab { flex: 1 1 0; justify-content: center; min-width: 0; }
.tab[aria-current="page"] { flex: 0 0 auto; }

/* Kartu, tombol, tag, chip, section */
.card { border-radius: 24px; padding: 16px; background: var(--glass); border: 1px solid var(--glass-edge); }
.card + .card { margin-top: 12px; }
.card h2, .card h3 { margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.btn { height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass-strong); color: var(--ink); font-weight: 700; gap: 8px; }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.btn.small { height: 34px; padding: 0 12px; font-size: 13px; }
.btn.block { width: 100%; }
.round-btn, .round { width: 40px; height: 40px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--line); box-shadow: none; }
.round-btn .icon { width: 20px; height: 20px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 16px; padding: 0; }
.chip { padding: 8px 14px; font-size: 13px; font-weight: 700; background: var(--glass-strong); border: 1px solid var(--line); }
.chip.on, .chip[aria-pressed="true"] { background: var(--plum); color: var(--plum-ink); border-color: transparent; }
.tag { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--rose-soft); color: var(--plum-text); border: 0; }
.tag.g, .char-row .tag.g { background: transparent; color: var(--ink-2); border: 1px solid var(--line); }
.on-art .tag { background: rgba(255,255,255,.25); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.on-art .tag.g { background: rgba(20,8,24,.25); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.char-row .tag { background: var(--rose-soft); color: var(--plum-text); border-color: transparent; }
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field > span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
input[type="text"], input[type="email"], input[type="url"], textarea, select { padding: 12px 14px; border-radius: 14px; font-size: 14.5px; min-height: 44px; border: 1px solid var(--line); background: var(--glass-strong); }
.dot { background: var(--rose); }
.muted { color: var(--ink-3); font-size: 13px; }
.section, h2.section { font-size: 18px; font-weight: 800; letter-spacing: 0; margin: 22px 0 10px; }

/* Checkbox dan radio: satu gaya kotak/lingkaran plum, bukan abu-abu bawaan browser */
input[type="checkbox"], input[type="radio"] { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--ink-3); background: var(--glass-strong); display: inline-grid; place-content: center; cursor: pointer; transition: background .12s, border-color .12s; }
input[type="checkbox"] { border-radius: 6px; }
input[type="radio"] { border-radius: 999px; }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--plum); border-color: var(--plum); }
input[type="checkbox"]::after { content: ""; width: 5px; height: 10px; border: solid var(--plum-ink); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg) scale(0); transition: transform .12s; }
input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(45deg) scale(1); }
input[type="radio"]::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--plum-ink); transform: scale(0); transition: transform .12s; }
input[type="radio"]:checked::after { transform: scale(1); }
.toggle-row input[type="checkbox"]::after { border: 0; }
.check-row, .check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.radio-row { border-radius: 16px; }

/* Textarea di composer chat: tanpa border/ring ganda di dalam pill */
.composer textarea, .composer textarea:focus { border: 0; box-shadow: none; background: transparent; outline: 0; padding: 8px 0; min-height: 0; }

/* Beranda */
.topbar { margin: 4px 0 6px; justify-content: space-between; }
.topbar .me-avatar { width: 40px; height: 40px; border-radius: 14px; font-size: 16px; }
.topbar .row-btns { display: flex; gap: 8px; }
h1.h-app { font-size: 30px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin: 6px 0 14px; max-width: none; }
.char-row { gap: 12px; padding: 10px; border-radius: 22px; margin-bottom: 10px; background: var(--glass); border: 1px solid var(--glass-edge); }
.char-row .name { font-weight: 800; font-size: 15px; }
.char-row .meta { gap: 6px; }
.char-row > .tile { width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(140deg, hsl(calc(var(--h) + 20) 75% 70%), hsl(var(--h) 55% 42%)); }
.char-row > .tile .icon { width: 22px; height: 22px; }
.char-row > .dot { margin-left: 4px; }
.hero-track { display: block; margin: 0 0 4px; padding: 0; overflow: visible; }
.hero { --h: 330; height: 300px; min-height: 0; border-radius: 28px; padding: 16px; color: #fff; box-shadow: none; text-align: left;
  background: linear-gradient(180deg, transparent 40%, rgba(20,8,24,.7)), radial-gradient(120% 80% at 80% 10%, hsla(var(--h),90%,80%,.9), transparent 60%), linear-gradient(160deg, hsl(calc(var(--h) + 20) 70% 62%), hsl(var(--h) 55% 32%)); }
.hero.has-img { background: linear-gradient(180deg, transparent 40%, rgba(20,8,24,.7)), var(--img) center / cover; }
.hero h3 { font-size: 26px; line-height: 1.15; margin: 0 0 10px; font-weight: 800; letter-spacing: normal; max-width: none; text-shadow: none; }
.hero .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.hero-input { flex: 1; height: 44px; padding: 0 14px; gap: 8px; border-radius: 999px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.35); font-size: 14px; font-weight: 400; color: #fff; }
.hero .big-avatar { display: none; }

/* Masuk */
.login { display: grid; gap: 16px; padding-top: 70px; }
.logo { width: 68px; height: 68px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: var(--brand-grad); }
.logo .icon { width: 30px; height: 30px; }
.login .h-app { margin: 0; }
.preview-bubbles { display: grid; gap: 8px; margin: 4px 0 6px; }
.preview-bubbles .bubble { font-size: 13.5px; width: fit-content; max-width: 85%; padding: 11px 14px; border-radius: 22px; background: var(--glass-strong); border: 1px solid var(--glass-edge); line-height: 1.5; }
.preview-bubbles .bubble.me { justify-self: end; background: var(--bubble-mine); color: var(--bubble-mine-ink); border: 0; border-radius: 22px 22px 7px 22px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12.5px; font-weight: 700; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-page .card { display: grid; gap: 14px; }
.continue-list .char-row { align-items: center; }
.continue-list .char-row .muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.continue-list .char-row .dot { flex: none; }

/* ---------- v12: paritas mockups/src/app.html untuk Profil karakter (#s-char) dan Chat (#s-chat) ---------- */
/* Profil karakter: cover penuh dengan tombol mengambang, stat 3 kolom, skenario, CTA lengket di bawah */
.round { display: grid; place-items: center; }
.char-page { padding-top: 0; }
.char-page .cover { position: relative; margin: 0 -16px; height: 360px; padding: 64px 16px 18px; border-radius: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
  background: linear-gradient(180deg, rgba(20, 8, 24, .15), rgba(20, 8, 24, .75) 85%), linear-gradient(160deg, hsl(calc(var(--h) + 30) 70% 72%), hsl(var(--h) 50% 34%)); }
.char-page .cover.has-img { background: linear-gradient(180deg, rgba(20, 8, 24, .15), rgba(20, 8, 24, .75) 85%), var(--img) center / cover no-repeat, hsl(var(--h), 50%, 34%); }
.char-page .cover h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; text-shadow: none; }
.char-page .cover .tags { margin: 0; gap: 6px; }
.char-page .cover .credit { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 10px; padding: 5px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .35); }
.char-page .cover .credit .icon { width: 14px; height: 14px; }
.float-top { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top) + 14px); left: 14px; right: 14px; display: flex; justify-content: space-between; }
.float-top .round { background: rgba(255, 255, 255, .25); border-color: rgba(255, 255, 255, .35); color: #fff; box-shadow: none; }
.char-page .big-avatar { top: 96px; }
.stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.stat3 > div { display: grid; gap: 2px; padding: 10px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-edge); }
.stat3 b { font-size: 18px; font-weight: 800; }
.stat3 span { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.persona { margin: 0 0 14px; line-height: 1.55; color: var(--ink-2); }
.char-page > .section { margin-top: 6px; }
button.scenario, .latar-opt { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; margin: 0 0 8px; padding: 12px 14px;
  border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-edge); font-size: 14px; line-height: 1.45; }
.scenario b { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 800; }
.scenario.on, .scenario[aria-pressed="true"] { border: 2px solid var(--plum); }
.scenario b .icon { width: 15px; height: 15px; vertical-align: -2px; margin-right: 2px; color: var(--plum-text); }
.latar-opt { position: relative; padding-right: 48px; cursor: pointer; }
.latar-del { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; }
.custom-scene { display: grid; gap: 8px; margin: -2px 0 10px; }
.custom-scene textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.custom-scene .check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.story-list { display: grid; gap: 6px; margin-bottom: 6px; }
.story-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.story-row .meta { flex: 1; min-width: 0; display: grid; gap: 2px; }
.story-row .meta b, .story-row .meta .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.story-row .meta b { font-size: 15px; }
.story-time { font-size: 12px; flex: none; }
.continue-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 4px 0 6px; border-radius: var(--radius); background: color-mix(in srgb, var(--primary) 14%, var(--glass-strong)); border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); color: var(--ink); text-decoration: none; }
.continue-card .meta { flex: 1; min-width: 0; display: grid; gap: 2px; }
.continue-card .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.continue-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); }
.cta { position: sticky; bottom: 0; z-index: 3; margin: 0 -16px; padding: 28px 16px calc(env(safe-area-inset-bottom) + 18px); display: flex; gap: 8px;
  background: linear-gradient(180deg, transparent, var(--bg) 45%); }
.cta .btn { flex: 1; height: 52px; font-size: 15.5px; }

/* Chat: header pill, meta chip, acts ikon, composer pill */
.chat-head { padding: calc(env(safe-area-inset-top) + 8px) 14px 8px; border-bottom: 0; }
.chat-head .round { width: 40px; height: 40px; }
.chat-head .who { flex: 1; min-width: 0; height: 48px; padding: 4px 12px 4px 4px; gap: 10px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--line); }
.chat-head .who b { font-size: 15px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head .who .tile.sm { width: 36px; height: 36px; border-radius: 12px; }
.thread { gap: 12px; padding: 8px 14px 12px; }
.msg .tile.sm { margin-bottom: 0; }
button.meta-chip { align-self: center; padding: 4px 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font: inherit; font-size: 12px; line-height: 1.4; color: var(--ink-2); cursor: pointer; max-width: 100%; text-align: center; }
.ai-note { align-self: center; margin: -8px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-2); text-align: center; max-width: 34ch; }
.bubble.queue { font-size: 13px; color: var(--ink-2); }
.msg:not(.user) .msg-actions { opacity: 1; }
.msg-actions { gap: 6px; color: var(--ink-3); font-size: 12px; font-weight: 700; }
.msg-actions .act-btn { height: 26px; padding: 0 4px; background: none; border: 0; color: var(--ink-3); font-size: 12px; font-weight: 700; }
.msg-actions .act-btn .icon { width: 15px; height: 15px; }
.msg-actions .act-btn.speed { height: auto; padding: 2px 8px; border-radius: 999px; background: var(--rose-soft); color: var(--plum-text); }
.msg-actions .swipe .act-btn { width: 24px; }
.msg-actions .swipe-count { padding: 0 2px; color: var(--ink-3); font-size: 12px; }
/* Versi pesan user: di luar .msg-actions (yang tersembunyi sampai hover), selalu tampil di bawah bubble. */
.user-versions { display: flex; justify-content: flex-end; margin-top: 2px; color: var(--ink-3); }
.user-versions .swipe-count { font-size: 12px; font-weight: 700; color: var(--ink-3); padding: 0 4px; }
.quota-card { align-self: center; max-width: 520px; display: grid; gap: 4px; padding: 14px 16px; border-radius: 18px; background: var(--rose-soft); color: var(--ink); font-size: 14px; line-height: 1.45; }
.quota-card b { font-weight: 800; }
.quota-card span { color: var(--ink-2); }
/* E8 v4: kartu bantuan di obrolan (bukan modal), bisa ditutup */
.support-card { align-self: center; width: min(100%, 520px); display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 14px 12px 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--glass-strong); color: var(--ink); font-size: 14px; line-height: 1.5; }
.support-card .support-ic { width: 22px; height: 22px; margin-top: 1px; color: var(--plum-text); }
.support-body { display: grid; gap: 10px; min-width: 0; }
.support-body p { margin: 0; }
.support-body small { color: var(--ink-3); font-size: 12px; }
.support-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.support-actions .btn .icon { width: 16px; height: 16px; }
.support-link { color: var(--ink-2); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.support-x { margin: -6px -4px 0 0; }
/* Radius tetap (bukan 999px): satu baris tetap terlihat pil, banyak baris tidak jadi oval yang memotong teks. */
.composer { gap: 8px; align-items: flex-end; padding: 6px 6px 6px 16px; border-radius: 27px; border: 1px solid var(--glass-edge); background: var(--glass-strong); box-shadow: var(--shadow); }
.composer:focus-within { box-shadow: var(--shadow); }
.composer textarea { font-size: 14.5px; align-self: stretch; overflow-y: auto; }
.send-btn { width: 42px; height: 42px; }

/* Baris menu (sheet) dan kartu ramah: pakai gaya .list-row mockup */
.list-row { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: 14.5px; font-weight: 600; }
button.list-row { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer; }
.list-row .icon { color: var(--ink-2); }
.list-row.danger, .list-row.danger .icon { color: var(--danger); }

/* ---------- v13: paritas mockups/src/app.html untuk Obrolan (#s-chats) dan Aku (#s-me) ---------- */
/* Obrolan: baris .convo dengan geser kiri (Arsipkan / Hapus). Baris transparan; aksi muncul saat digeser. */
.chats-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.chats-top .h-app { margin: 6px 0 0; }
.chats-top .chip { flex: none; }
.chats-top .chip.on { background: var(--plum); color: var(--plum-ink); }
.search { margin-bottom: 14px; }
.search input { font-size: 14.5px; }
.chips { margin-bottom: 14px; }
.convo-wrap { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.convo-wrap:last-child { border-bottom: 0; }
.convo { position: relative; display: flex; gap: 12px; align-items: center; padding: 10px 6px; color: inherit; text-decoration: none;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; transition: transform .18s ease; }
.convo .tile { width: 56px; height: 56px; border-radius: 18px; }
.convo .tile .icon { width: 26px; height: 26px; }
.convo .body { flex: 1; min-width: 0; }
.convo .top-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.convo b { font-size: 15px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo .muted { font-size: 12.5px; white-space: nowrap; flex: none; }
.convo p { margin: 3px 0 0; color: var(--ink-2); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo .dot { width: 9px; height: 9px; border-radius: 99px; background: var(--rose); flex: none; }
.convo-acts { position: absolute; top: 0; right: 0; bottom: 0; display: flex; opacity: 0; transition: opacity .12s; }
.convo-wrap.swiping .convo-acts, .convo-wrap.open .convo-acts { opacity: 1; }
.convo-act { width: 76px; height: 100%; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 800; color: #fff; cursor: pointer; background: var(--plum); }
.convo-act.danger { background: var(--danger); }
.convo-confirm { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--bg); font-size: 13.5px; font-weight: 700; }
.convo-confirm[hidden] { display: none; }
.convo-confirm span { flex: 1; min-width: 0; line-height: 1.35; }
.convo-confirm .btn { height: 34px; padding: 0 12px; font-size: 13px; }
.btn.danger { background: var(--danger); color: #fff; border-color: transparent; }

/* Aku: header identitas, angka kebiasaan, kartu, kontrol .seg dan .switch */
.me-head { display: flex; align-items: center; gap: 14px; margin: 8px 0 14px; }
.me-head .me-avatar { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; flex: none; font-size: 26px; font-weight: 800; color: #fff;
  background: var(--brand-grad); }
.me-head .me-name { flex: 1; min-width: 0; margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: 0; max-width: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-head .round { cursor: pointer; }
/* Foto profil: tombol avatar + badge kamera di pojok */
.me-head .me-avatar { position: relative; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.me-head .me-avatar:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.me-avatar-cam { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); color: var(--ink); box-shadow: var(--shadow); }
.me-avatar-cam .icon { width: 14px; height: 14px; }
.me-avatar .av-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.me-head + .stat3 { margin-top: 0; }
.quota { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 4px 0 8px; }
.quota i { display: block; height: 100%; background: var(--rose); border-radius: inherit; }
.input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 14px; font: inherit; font-size: 14.5px; min-height: 44px; color: var(--ink);
  border: 1px solid var(--line); background: var(--glass-strong); }
textarea.input.area, .input.area { min-height: 84px; line-height: 1.45; color: var(--ink-2); resize: vertical; }
.field .seg { margin-top: 0; }
.seg span { flex: 1; text-align: center; padding: 8px 6px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; user-select: none; -webkit-user-select: none; white-space: nowrap; }
.seg span.on { background: var(--plum); color: var(--plum-ink); }
.switch-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 14.5px; font-weight: 600; }
.switch { margin-left: auto; box-sizing: border-box; width: 42px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: var(--plum); position: relative; cursor: pointer; flex: none; transition: background .15s; }
.switch::after { content: ""; position: absolute; right: 3px; top: 3px; width: 18px; height: 18px; border-radius: 999px; background: var(--plum-ink); transition: transform .15s; }
.switch[aria-checked="false"] { background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--line); }
.switch[aria-checked="false"]::after { right: auto; left: 3px; background: var(--ink-3); }
.mini-chars { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mini-chars > div { display: grid; justify-items: center; gap: 6px; width: 64px; flex: none; font-size: 12px; font-weight: 700; text-align: center; cursor: pointer; }
.mini-chars .tile { width: 56px; height: 56px; border-radius: 18px; }
.mini-chars .tile .icon { width: 24px; height: 24px; }
.mini-chars .add { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; border: 1.5px dashed var(--ink-3); color: var(--ink-2); }
.list-card { padding: 4px 14px; }
.list-card + .card, .del-box { margin-top: 12px; }
.del-box[hidden] { display: none; }
.list-card .list-row { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.list-card .list-row:last-child { border-bottom: 0; }
.list-card a.list-row { color: var(--ink); }
.list-row .chev { margin-left: auto; color: var(--ink-3); }
.list-row .muted { margin-left: auto; }
.list-row .ck { margin-left: auto; color: var(--plum-text); }
.list-row.danger, .list-row.danger .icon { color: var(--danger); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheet-head h3 { margin: 0; font-size: 20px; font-weight: 800; }

/* ---------- v14: paritas mockups/src/app.html untuk Editor karakter (#s-editor, sheet 3 langkah) ---------- */
.editor-sheet { height: calc(100dvh - 70px); max-height: none; padding-bottom: 0; overflow: hidden; display: flex; flex-direction: column; }
.editor-form { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-bottom: 4px; }
.editor-sheet .steps { flex-wrap: nowrap; }
.editor-sheet .steps .chip { flex: none; padding: 8px 14px; font-size: 13px; }
.editor-sheet .seg { flex-wrap: nowrap; }
.editor-sheet .seg-btn { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 13px; white-space: nowrap; }
.upload { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; border: 1.5px dashed var(--ink-3); margin-bottom: 12px; }
.upload .tile { width: 72px; height: 88px; border-radius: 16px; flex: none; }
.upload-body { min-width: 0; display: grid; gap: 4px; }
.upload-body b { font-size: 14px; }
.upload-body .muted { margin: 0; }
.upload-body .img-row { margin-top: 6px; }
.tag-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; min-height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass-strong); }
.tag-input:focus-within { border-color: var(--rose); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 22%, transparent); }
.tag-input input { flex: 0 0 96px; width: 96px; height: 28px; padding: 0 4px; border: 0; background: transparent; box-shadow: none; font-size: 14.5px; }
.tag-input input:focus { border: 0; box-shadow: none; }
.tag-input .tag { font-size: 12.5px; }
.tag-x { background: none; border: 0; color: inherit; font: inherit; padding: 0 0 0 2px; cursor: pointer; line-height: 1; }
.import-row { margin-bottom: 12px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--plum-text); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
.assist-panel { display: grid; gap: 10px; padding: 12px; margin-bottom: 14px; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--line); }
.assist-panel .row { gap: 8px; }
.assist-err { color: var(--danger); font-size: 13px; font-weight: 600; }
.assist-choice { display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--rose-soft); font-size: 13.5px; font-weight: 700; }
.assist-choice .row { gap: 8px; }
.editor-extra { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.del-confirm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding: 12px; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; }
.del-confirm[hidden] { display: none; }
.del-confirm span { flex: 1 1 100%; line-height: 1.35; }
.editor-sheet .sheet-foot { flex: none; margin: 0 -18px; padding: 12px 18px calc(env(safe-area-inset-bottom) + 18px); background: var(--bg); border-top: 1px solid var(--line); display: flex; gap: 8px; }
.editor-sheet .sheet-foot .btn { flex: none; }
.editor-sheet .sheet-foot .btn.primary { flex: 1; }
.editor-sheet .sheet-foot .btn[hidden] { display: none; }
@media (min-width: 720px) {
  .editor-sheet { height: min(760px, 88dvh); }
}
.editor-sheet .head-row { flex: 1 1 auto; justify-content: flex-start; }
.editor-sheet .head-row .status-badge { width: max-content; flex: none; }
.assist-panel .tag-input input { flex: 1 1 140px; width: auto; }

/* Run 4 (judge fixes): subjudul header chat, badge ingatan, edit sekunder profil karakter, chip art */
.chat-head .who-text { display: grid; min-width: 0; line-height: 1.2; }
.chat-head .who-sub { font-size: 12px; color: var(--ink-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .who { height: auto; min-height: 48px; }
.chat-head .mem-btn { position: relative; }
.mem-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--plum); color: var(--plum-ink); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.char-page .cta .edit-sec { flex: none; width: 52px; height: 52px; }
.tag.art-chip { font-weight: 800; }

/* Run 5 (judge 2 fixes): avatar header Beranda, import satu baris, scrollbar tersembunyi */
.topbar .me-avatar { text-decoration: none; line-height: 1; box-shadow: none; background: var(--brand-grad); }
.topbar .me-avatar:hover, .topbar .me-avatar:focus { text-decoration: none; }
.import-row { min-width: 0; white-space: nowrap; }
.import-row .icon { flex: none; }
.import-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-row .link-btn { flex: none; }
.editor-form, .thread { scrollbar-width: none; }
.editor-form::-webkit-scrollbar, .thread::-webkit-scrollbar { display: none; }

/* Run 6 (judge 3 fixes) */
/* Masuk: checkbox 20px, glyph 14px di tengah (sama dengan mockup .box) */
.check input[type="checkbox"] { width: 20px; height: 20px; border-radius: 6px; }
.check input[type="checkbox"]::after { content: ""; width: 14px; height: 14px; border: 0; transform: scale(0); background: var(--plum-ink); -webkit-mask: url(/icons/check.svg) center / contain no-repeat; mask: url(/icons/check.svg) center / contain no-repeat; }
.check input[type="checkbox"]:checked::after { transform: scale(1); }
/* Beranda: tag satu baris, tanpa wrap */
.char-row .tags, .hero .tags { flex-wrap: nowrap; overflow: hidden; }
.char-row .tags .tag, .hero .tags .tag { white-space: nowrap; flex: none; }
/* Beranda: kartu tanpa gambar memakai ikon karakter */
.hero:not(.has-img) .big-avatar { display: block; }
/* Profil karakter: CTA inline di bawah pilihan skenario, bukan bar lengket */
.char-page .cta { position: static; margin: 14px 0 0; padding: 0; background: none; }
/* Chat: opener meta chip jadi bar lebar penuh, teks rata kiri */
button.meta-chip { align-self: stretch; width: 100%; text-align: left; border-radius: 999px; }
/* Chat: ikon aksi balasan hanya di balasan terakhir; lainnya muncul saat hover/tap */
.msg:not(.user) .msg-actions { opacity: 0; }
.msg.last-ai .msg-actions, .msg:hover .msg-actions, .msg:focus-within .msg-actions { opacity: 1; }
/* Buat: error inline di field, preset trope */
.field.err input, .field.err textarea, .field.err .seg { border-color: var(--danger); }
.field-err { color: var(--danger); font-size: 12.5px; font-weight: 600; }
.trope-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.trope-presets .chip { font-size: 12.5px; padding: 5px 10px; }
/* Run 7 (judge 4 fixes) */
/* Buat: trope & tag sebagai pill inline seperti mockup (tanpa kotak teks tinggi) */
.tag-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0; min-height: 0; border: 0; border-radius: 0; background: none; }
.tag-input input { width: auto; height: 32px; flex: 0 1 7.5em; min-width: 6.5em; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--glass-strong); }
.tag-input input:focus { border-color: var(--rose); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 22%, transparent); }
/* Beranda: kartu tanpa gambar, ikon sedang dan utuh di pojok kanan atas (tidak terpotong) */
.hero:not(.has-img) .big-avatar { position: absolute; right: 16px; top: 52px; transform: none; filter: none; opacity: .35; }
.hero:not(.has-img) .big-avatar .icon { width: 84px; height: 84px; }
/* Masuk: seluruh baris 18+ adalah target klik (label membungkus checkbox) */
.login .check { min-height: 44px; cursor: pointer; }
.check input, .check span { cursor: pointer; }

/* Run 8: tombol favorit (sebelah CTA, sama dengan mockup) dan daftar Obrolan lain di profil */
.char-page .cta .fav-btn { flex: none; width: 52px; height: 52px; }
.fav-btn[aria-pressed="true"] { background: var(--plum); color: var(--plum-ink); border-color: transparent; }
.chat-mini { display: grid; gap: 0; margin-top: 4px; }
.chat-mini-row { text-decoration: none; color: inherit; align-items: center; }
.chat-mini-row .meta { min-width: 0; }
.chat-mini-row .meta > .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-mini-time { flex: none; font-size: 12px; text-align: right; max-width: 42%; line-height: 1.35; }
.chat-mini-all { width: 100%; margin-top: 4px; }

/* Run 9 (judge 5 polish) */
.char-page .cta .btn { white-space: nowrap; padding: 0 12px; }
.fav-btn[aria-pressed="true"] .icon { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.assist-panel + .field { margin-top: 14px; }

/* Sheet mengikuti kolom app (480px) di layar lebar, supaya tidak keluar dari frame HP. */
.sheet { width: min(480px, 100%); }
@media (min-width: 720px) {
  .scrim { align-items: flex-end; }
  .sheet { border-radius: 28px 28px 0 0; }
}

/* Run 10 (motion): semua gerak di blok no-preference. Durasi 150-300ms, ease-out cubic-bezier(.2,.9,.3,1). */
/* Token scrim: gelap di mode gelap, plus blur ringan. */
:root { --scrim: rgba(23, 12, 28, .35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --scrim: rgba(0, 0, 0, .55); } }
:root[data-theme="dark"] { --scrim: rgba(0, 0, 0, .55); }
.scrim { background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* Body tidak ikut scroll saat sheet terbuka. */
html.sheet-open, html.sheet-open body { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  /* 1. Transisi halaman: hanya saat navigasi hash (body.nav-in). backwards: tidak menahan transform setelah selesai. */
  /* Fade saja, tanpa transform: transform di halaman membuat elemen fixed di dalamnya (latar chat, header) ikut bergeser.
     Mulai dari .6, bukan lebih rendah: di mode gelap fade dari opacity rendah terlihat seperti kedip. */
  @keyframes route-in { from { opacity: .6; } to { opacity: 1; } }
  body.nav-in #app > * { animation: route-in .18s ease-out backwards; }

  /* 2. Stagger: hero dan baris/kartu, maks 8 item (sisanya ikut delay item ke-8). */
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  body.nav-in .hero-track .hero { animation: rise .3s cubic-bezier(.2,.9,.3,1) backwards; }
  body.nav-in .char-grid > *, body.nav-in .convo-list > *, body.nav-in .chat-mini > * {
    animation: rise .24s cubic-bezier(.2,.9,.3,1) backwards; animation-delay: 175ms;
  }
  body.nav-in .char-grid > :nth-child(1), body.nav-in .convo-list > :nth-child(1), body.nav-in .chat-mini > :nth-child(1) { animation-delay: 0ms; }
  body.nav-in .char-grid > :nth-child(2), body.nav-in .convo-list > :nth-child(2), body.nav-in .chat-mini > :nth-child(2) { animation-delay: 25ms; }
  body.nav-in .char-grid > :nth-child(3), body.nav-in .convo-list > :nth-child(3), body.nav-in .chat-mini > :nth-child(3) { animation-delay: 50ms; }
  body.nav-in .char-grid > :nth-child(4), body.nav-in .convo-list > :nth-child(4), body.nav-in .chat-mini > :nth-child(4) { animation-delay: 75ms; }
  body.nav-in .char-grid > :nth-child(5), body.nav-in .convo-list > :nth-child(5), body.nav-in .chat-mini > :nth-child(5) { animation-delay: 100ms; }
  body.nav-in .char-grid > :nth-child(6), body.nav-in .convo-list > :nth-child(6), body.nav-in .chat-mini > :nth-child(6) { animation-delay: 125ms; }
  body.nav-in .char-grid > :nth-child(7), body.nav-in .convo-list > :nth-child(7), body.nav-in .chat-mini > :nth-child(7) { animation-delay: 150ms; }
  body.nav-in .char-grid > :nth-child(8), body.nav-in .convo-list > :nth-child(8), body.nav-in .chat-mini > :nth-child(8) { animation-delay: 175ms; }

  /* 3. Press feedback: scale .97 saat :active. */
  .btn, .chip, .char-row, .round-btn, .tab, .fav-btn {
    transition: transform .15s cubic-bezier(.2,.9,.3,1), background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .btn:active, .chip:active, .char-row:active, .round-btn:active, .tab:active, .fav-btn:active { transform: scale(.97); }


  /* 6. Hati favorit: pop 1 -> 1.25 -> 1 (dipicu JS saat berpindah ke favorit). */
  @keyframes heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
  .fav-btn.pop { animation: heart-pop .32s cubic-bezier(.2,.9,.3,1); }

  /* 7. Chat: baris pesan baru (kirim user + awal balasan) masuk dengan slide + fade. */
  @keyframes msg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .msg.enter { animation: msg-in .3s cubic-bezier(.2,.9,.3,1) backwards; }

  /* 8. Sheet keluar: slide turun + fade, lalu node dibuang oleh closeSheet(). */
  @keyframes sheet-down { to { transform: translateY(40px); opacity: 0; } }
  @keyframes scrim-out { to { opacity: 0; } }
  .scrim.out { animation: scrim-out .2s ease forwards; }
  .scrim.out .sheet { animation: sheet-down .2s cubic-bezier(.4, 0, 1, 1) forwards; }

  /* 9. Toast: slide naik + fade masuk dan keluar. */
  .toast { transition: opacity .22s ease, transform .28s cubic-bezier(.2,.9,.3,1); }
}

/* Run 11 (spacing + timestamps) */
/* Buat: header + langkah jadi blok sticky dengan latar solid; garis bawah hanya saat isi di-scroll. */
.editor-sheet .sheet-top { flex: none; margin: 0 -18px; padding: 0 18px 12px; background: var(--bg); position: relative; z-index: 2; transition: box-shadow .15s ease; }
.editor-sheet .sheet-top .sheet-head { margin: 0 0 12px; }
.editor-sheet .sheet-top .steps { margin: 0; }
.editor-sheet.is-scrolled .sheet-top { box-shadow: 0 1px 0 var(--line), 0 10px 14px -12px rgba(0, 0, 0, .35); }
/* Isi: jarak atas 16px dari langkah; padding bawah 24px supaya field terakhir tidak tertutup footer. */
.editor-sheet .editor-form { padding: 16px 2px 24px; }
/* Ritme field: 20px antar blok, 8px label ke input. */
.editor-sheet .editor-form > [data-pane] > * { margin: 0 0 20px; }
.editor-sheet .editor-form > [data-pane] > *:last-child { margin-bottom: 0; }
.editor-sheet .field { gap: 8px; }
.editor-sheet .assist-panel { display: grid; gap: 10px; }
/* Khusus admin: kartu kecil, baris 44px, jarak 12px. */
.admin-card { display: grid; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--line); }
.admin-card-title { font-size: 13px; font-weight: 800; color: var(--ink-2); }
.admin-card .check-row { min-height: 44px; }
/* Import kartu: baris sendiri, dibedakan dengan kartu tipis. */
.editor-sheet .import-row { min-height: 44px; padding: 12px 14px; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line); white-space: normal; line-height: 1.4; }
.editor-sheet .import-text { white-space: normal; overflow: visible; }
/* Tag: pill input dan chip saran sama tinggi (36px). */
.editor-sheet .trope-presets .chip { height: 36px; padding: 0 12px; font-size: 13px; display: inline-flex; align-items: center; box-sizing: border-box; }
.editor-sheet .tag-input input { height: 36px; min-height: 0; box-sizing: border-box; padding: 0 14px; }
.editor-sheet .tag-input .tag { height: 36px; padding: 0 12px; font-size: 13px; display: inline-flex; align-items: center; box-sizing: border-box; }

/* Chat: pemisah tanggal (WIB) di tengah, dan jam di bawah bubble. */
.day-sep { display: flex; justify-content: center; margin: 6px 0 2px; }
.day-sep span { padding: 4px 12px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--line); color: var(--ink-2); font-size: 12px; font-weight: 700; }
.msg-time { font-size: 11.5px; font-weight: 600; color: var(--ink-3); line-height: 1.2; font-variant-numeric: tabular-nums; }
.msg-time.start { justify-self: start; }
.msg-time.end { justify-self: end; }
.msg-actions .msg-time { display: inline-flex; align-items: center; height: 26px; padding: 0 4px; font-size: 12px; }

/* ---------- Tab bar: pill aktif meluncur antar tab (FLIP + spring, lihat renderTabbar di app.js) ---------- */
.tab { position: relative; z-index: 1; transition: transform .15s cubic-bezier(.2,.9,.3,1), color .2s ease; }
.tab-pill { position: absolute; z-index: 0; background: var(--plum); border-radius: 999px; pointer-events: none; }

/* ---------- Login: demo chat rotasi (renderLogin + loginDemo di app.js) ---------- */
.demo-chat { position: relative; align-content: start; align-items: start; }
.demo-probe { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
.demo-chat .bubble.demo-in { animation: demo-in .26s cubic-bezier(.34, 1.4, .64, 1) both; }
.demo-chat .bubble.demo-fade { animation: demo-fade .2s ease both; }
.demo-chat .bubble.demo-out, .demo-chat .bubble.demo-out.demo-in { animation: demo-fade .2s ease reverse both; }
@keyframes demo-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes demo-fade { from { opacity: 0; } to { opacity: 1; } }
.demo-chat .bubble.typing { width: fit-content; }

/* Run 19: Karakter buatanmu (#/mine) dan Tentang kamu (#/about-me) */
.mine-list { display: grid; gap: 12px; }
.mine-row { padding: 14px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-edge); }
.mine-top { display: flex; gap: 12px; align-items: flex-start; }
.mine-top .tile { width: 56px; height: 56px; flex: none; border-radius: 18px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(140deg, hsl(calc(var(--h) + 20) 75% 70%), hsl(var(--h) 55% 42%)); }
.mine-top .tile .av-img { width: 100%; height: 100%; object-fit: cover; }
.mine-top .tile .icon { width: 22px; height: 22px; }
.mine-meta { flex: 1; min-width: 0; display: grid; gap: 6px; }
.mine-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mine-name b { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.mine-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mine-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mine-actions .btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.mine-del { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.mine-del[hidden] { display: none; }
.mine-del p { margin: 0; font-size: 14px; font-weight: 600; }
.mine-del-btns { display: flex; gap: 8px; justify-content: flex-end; }
.mine-empty { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 22px 18px; }
.mine-empty p { margin: 0; color: var(--ink-2); font-weight: 600; }
.status-badge.s-draft { color: var(--ink-3); }
.status-badge.s-private { color: var(--ink-2); }
.status-badge.s-submitted { color: var(--plum-text); }
.status-badge.s-public { color: var(--ok, #2FA36B); }
.status-badge.s-hidden { color: var(--danger); }

.fact-list { display: grid; gap: 8px; margin-bottom: 12px; }
.fact-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--line); }
.fact-row.editing { display: block; }
.fact-row .fact-text { min-width: 0; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.fact-row .fact-cat { white-space: nowrap; }
.fact-btns { display: flex; gap: 6px; }
.fact-ico { width: 34px; height: 34px; }
.fact-ico .icon { width: 16px; height: 16px; }
.fact-edit { display: grid; gap: 6px; }
.fact-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 18px; }
.fact-foot .row-btns { display: flex; gap: 8px; }
.fact-err { color: var(--danger); font-size: 12.5px; font-weight: 700; }
.fact-add { display: grid; gap: 10px; margin-top: 4px; }
.fact-cats { align-self: flex-start; }
.fact-input-row { display: flex; gap: 8px; align-items: center; }
.fact-input-row .input { flex: 1; min-width: 0; }
.fact-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.fact-sugg .chip { font-size: 12.5px; padding: 6px 12px; }
.old-bio { display: grid; gap: 8px; padding: 12px; border-radius: 18px; border: 1px dashed var(--line); margin-bottom: 12px; }
.old-bio textarea { min-height: 84px; }

/* Run 20: #/mine kartu jadi kolom (info di atas, aksi dan konfirmasi hapus di bawah, lebar penuh).
   Akar bug: .mine-row (rule Run 17/18 di atas) display:flex baris, sehingga aksi dan panel hapus berdampingan dengan info. */
.mine-list .mine-row { display: grid; gap: 12px; min-width: 0; text-align: left; }
.mine-top, .mine-meta, .mine-name { min-width: 0; }
.mine-name .status-badge { flex: none; white-space: nowrap; }
.mine-name b { min-width: 0; }
.mine-stats { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mine-actions[hidden], .mine-menu[hidden], .mine-del[hidden] { display: none; }
.mine-actions .mine-more-btn { min-width: 40px; padding: 0 10px; font-size: 18px; line-height: 1; letter-spacing: 1px; }
.mine-actions .btn, .mine-menu .btn { max-width: 100%; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.mine-menu { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.mine-del { margin-top: 0; padding-top: 10px; }
.mine-del p { overflow-wrap: anywhere; }
.mine-del-btns { flex-wrap: wrap; justify-content: stretch; }
.mine-del-btns .btn { flex: 1 1 120px; justify-content: center; white-space: normal; }
.fact-cats .seg-btn { padding: 7px 10px; font-size: 13px; }

/* Run 18: Buat (warna swatch, grup Artist, area tanpa gambar) dan kreator (profil, kartu) */
.no-img { display: grid; gap: 4px; margin: 0 0 16px; padding: 12px; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--line); }
.no-img[hidden] { display: none; }
.no-img-title { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.no-img .field { margin-bottom: 12px; }
.no-img .field:last-child { margin-bottom: 0; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px; }
.swatch { width: 36px; height: 36px; flex: none; border-radius: 50%; padding: 0; border: 0; cursor: pointer; background: linear-gradient(140deg, hsl(calc(var(--sw) + 20) 75% 70%), hsl(var(--sw) 55% 42%)); transition: box-shadow .15s ease, transform .15s ease; }
.swatch:active { transform: scale(.92); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.swatch:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }
.artist-row { display: grid; gap: 8px; }
.artist-field small { line-height: 1.4; }
.creator-row { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0 0 16px; }
.creator-av { width: 36px; height: 36px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; background: linear-gradient(140deg, hsl(calc(var(--h, 330) + 20) 75% 70%), hsl(var(--h, 330) 55% 42%)); }
.creator-av.is-official { background: none; }
.creator-av img { width: 100%; height: 100%; display: block; }
.creator-name { font-weight: 700; font-size: 14px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag.creator-badge { flex: none; }
.creator-link { color: var(--ink-2); }
.creator-chip { display: inline-flex; align-items: center; gap: 4px; }
.verified-mark { width: 12px; height: 12px; }
.creator-inline { display: block; font-size: 12px; color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Run 21: menu Aku (#/me) dan halaman pengaturan (#/set/:id) ---------- */
.menu-group { margin: 22px 4px 8px; font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.set-page .field { grid-template-columns: minmax(0, 1fr); }
.set-page .seg { flex-wrap: nowrap; }
.set-page .seg span { flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.list-card .list-row > .muted { flex: 0 0 auto; min-width: 0; max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.set-page .seg:has(> span:nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.set-page .seg:has(> span:nth-child(4)) span { border-radius: 999px; }

/* ---------- Run 22: tanpa UI native browser (konfirmasi, validasi, search, textarea, tooltip, scrollbar, focus, autofill) ---------- */
/* Konfirmasi in-app (confirmSheet): isi dan tombol di dalam sheet */
.confirm-body { margin: 0 0 4px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.confirm-actions { display: flex; gap: 10px; margin-top: 18px; }
.confirm-actions .btn { flex: 1; min-width: 0; }

/* Validasi inline (login, dan field lain yang memakai .field-err) */
.field-err { display: block; color: var(--danger); font-size: 13px; font-weight: 600; line-height: 1.4; margin: -6px 0 10px; }
.field.err .field-err { margin: 0; }
.check + .field-err { margin: 2px 0 12px; }

/* Search: sembunyikan × native WebKit, pakai tombol sendiri */
.search input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-clear { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; }
.search-clear:hover { background: var(--rose-soft); color: var(--ink); }
.search-clear[hidden] { display: none; }
.search-clear .icon { width: 16px; height: 16px; }

/* Textarea: tanpa grip resize native; tinggi mengikuti isi (growArea), batas 40vh lalu scroll */
textarea, .input.area, textarea.input.area { resize: none; max-height: 40vh; overflow-y: auto; }

/* Tooltip ringan untuk tombol ikon (data-tip). Hover pointer halus dan fokus keyboard. Layar sentuh: aria-label saja. */
@media (hover: hover) and (pointer: fine) {
  [data-tip]:hover::after { content: attr(data-tip); }
}
[data-tip]:focus-visible::after { content: attr(data-tip); }
[data-tip] { position: relative; }
[data-tip]::after {
  content: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 12px; font-weight: 700; line-height: 1.2; padding: 6px 9px; border-radius: 10px;
  background: var(--ink); color: var(--bg); box-shadow: var(--shadow); pointer-events: none; z-index: 30;
  transform: translateX(calc(-50% + var(--tip-shift, 0px)));
}
@media (prefers-reduced-motion: no-preference) {
  [data-tip]::after { animation: tip-in .12s ease-out; }
}
@keyframes tip-in { from { opacity: 0; } to { opacity: 1; } }

/* Scrollbar tipis, sesuai token (sheet dan area scroll) */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink-3) 45%, transparent) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink-3) 45%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: padding-box; }

/* Focus ring konsisten (accent token) untuk tombol, link, dan elemen role=button */
:where(button, a, [role="button"], summary):focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

/* Autofill browser: ikuti token warna app (tanpa latar kuning atau biru) */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--glass-strong) inset; box-shadow: 0 0 0 1000px var(--glass-strong) inset;
  transition: background-color 9999s ease-out 0s;
}

/* ---------- Run 23 (editor kartu terstruktur) ---------- */
.legacy-note { display: grid; gap: 10px; padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.legacy-note[hidden] { display: none; }
.promise-box b { color: var(--ink); font-size: 14px; }
.promise-box ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.card-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.card-total.over { color: var(--danger); }
.card-total .field-warn { font-weight: 600; }
.field-warn { color: var(--ink-3, var(--ink-2)); font-size: 12.5px; font-weight: 600; }
.cnt { justify-self: end; font-size: 12px; font-weight: 600; color: var(--ink-3, var(--ink-2)); font-variant-numeric: tabular-nums; }
.cnt.over { color: var(--danger); }
.field > small.muted { font-size: 12.5px; line-height: 1.45; }
.alt-fields { display: grid; gap: 6px; flex: 1; min-width: 0; }
.alt-fields input { min-width: 0; }
.alt-row .icon-btn { flex: none; }
.editor-sheet .card-total[hidden] { display: none; }
#bicara-lain-wrap { margin-top: -4px; }

.editor-sheet .steps .chip { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Run 23c: seg pilihan (Speech 5 opsi) wrap di layar sempit, bukan keluar kartu */
.editor-sheet .seg { flex-wrap: wrap; }
.editor-sheet .seg-btn { flex: 1 1 auto; }
.editor-sheet .steps .chip { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; padding: 8px 3px; font-size: 12px; }

/* ---------- Run 24 (tema obrolan: latar, redupkan, blur, warna bubble) ---------- */
/* Lapisan latar di belakang pesan. Fixed di kolom app (480px), jadi tidak ikut scroll. */
.chat-page { isolation: isolate; }
.chat-bg { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: min(100vw, 480px); height: 100dvh; z-index: -1; overflow: hidden; pointer-events: none; }
.chat-bg-img { position: absolute; inset: -14px; background-size: cover; background-position: center; }
.chat-bg::after { content: ""; position: absolute; inset: 0; background: #170C1C; opacity: var(--dim, 0); }
.chat-bg[data-kind="photo"] .chat-bg-img { background: var(--photo) center / cover no-repeat; filter: blur(var(--blur, 0px)); }
/* Pola dan gradien hanya CSS. Setiap preset punya token terang (--cb-l) dan gelap (--cb-d). */
[data-bg="senja"] { --cb-l: linear-gradient(165deg, #FFE7D9 0%, #F8C4D6 100%); --cb-d: linear-gradient(165deg, #3A2130 0%, #251B38 100%); }
[data-bg="lavender"] { --cb-l: linear-gradient(160deg, #EFE6FF 0%, #D8E6FB 100%); --cb-d: linear-gradient(160deg, #2A1F40 0%, #1A2440 100%); }
[data-bg="mint"] { --cb-l: linear-gradient(160deg, #DFF7EE 0%, #CBEBF1 100%); --cb-d: linear-gradient(160deg, #13302A 0%, #15263A 100%); }
[data-bg="pasir"] { --cb-l: linear-gradient(170deg, #F8EEE1 0%, #EBDBC6 100%); --cb-d: linear-gradient(170deg, #2E261D 0%, #221D17 100%); }
[data-bg="malam"] { --cb-l: linear-gradient(180deg, #DDE4F6 0%, #C8D2EE 100%); --cb-d: linear-gradient(180deg, #131B30 0%, #0A0F1F 100%); }
[data-bg="mawar"] { --cb-l: radial-gradient(circle, rgba(226, 85, 138, .16) 1.5px, transparent 2px) 0 0 / 22px 22px, #FBEAF1; --cb-d: radial-gradient(circle, rgba(242, 123, 166, .14) 1.5px, transparent 2px) 0 0 / 22px 22px, #2A1A27; }
[data-bg="garis"] { --cb-l: repeating-linear-gradient(45deg, rgba(91, 42, 110, .07) 0 2px, transparent 2px 14px), #F4F0FA; --cb-d: repeating-linear-gradient(45deg, rgba(201, 155, 224, .08) 0 2px, transparent 2px 14px), #1D1628; }
[data-bg="kisi"] { --cb-l: linear-gradient(rgba(47, 125, 91, .08) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(47, 125, 91, .08) 1px, transparent 1px) 0 0 / 24px 24px, #F2F6F3; --cb-d: linear-gradient(rgba(127, 211, 168, .07) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(127, 211, 168, .07) 1px, transparent 1px) 0 0 / 24px 24px, #101A16; }
.bg-fill { background: var(--cb-l, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bg-fill { background: var(--cb-d, transparent); }
}
:root[data-theme="dark"] .bg-fill { background: var(--cb-d, transparent); }
/* Tema bisa dipakai: header dan composer tetap terbaca di atas latar. */
.chat-page.ct-on .chat-head { background: color-mix(in srgb, var(--bg) 80%, transparent); }
.chat-page.ct-on .composer-wrap { background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 88%, transparent) 45%); }
/* Warna bubble: token dari hue (--ct-h). Terang: L 30% (putih 5.4:1 atau lebih). Gelap: L 78% (teks 7.8:1 atau lebih). */
.ct-accent { --ct-user: hsl(var(--ct-h, 260) 56% 30%); --ct-user-ink: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ct-accent { --ct-user: hsl(var(--ct-h, 260) 72% 78%); --ct-user-ink: #1E1426; }
}
:root[data-theme="dark"] .ct-accent { --ct-user: hsl(var(--ct-h, 260) 72% 78%); --ct-user-ink: #1E1426; }
.ct-accent .msg.user .bubble, .ct-accent .ct-bub.me { background: var(--ct-user); color: var(--ct-user-ink); border-color: transparent; }
.ct-accent .send-btn { background: var(--ct-user); color: var(--ct-user-ink); }

/* Sheet Tema obrolan */
.ct-preview { position: relative; height: 170px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--bg); isolation: isolate; }
.ct-preview .chat-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: none; z-index: 0; }
.ct-pv-thread { position: relative; z-index: 1; display: grid; gap: 10px; padding: 16px; }
.ct-bub { justify-self: start; max-width: 74%; padding: 10px 14px; border-radius: 18px 18px 18px 6px; font-size: 14px; line-height: 1.4; background: var(--glass-strong); color: var(--ink); border: 1px solid var(--line); }
.ct-bub.me { justify-self: end; border-radius: 18px 18px 6px 18px; background: var(--bubble-mine); color: var(--bubble-mine-ink); border-color: transparent; }
.ct-bgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.ct-bg-opt { display: grid; gap: 6px; justify-items: center; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 12px; font-weight: 700; }
.ct-bg-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-chip { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; border: 2px solid var(--line); overflow: hidden; color: var(--ink-2); }
.ct-chip-default { background: var(--glass-strong); }
.ct-chip-photo { background: var(--glass-strong); }
.ct-chip .icon { width: 20px; height: 20px; }
.ct-bg-opt[aria-checked="true"] .ct-chip { border-color: var(--plum); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--plum); }
.ct-bg-opt:focus-visible, .ct-pill:focus-visible, .ct-switch:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.ct-photo-ctl { display: grid; gap: 12px; margin-top: 14px; }
.ct-photo-ctl[hidden] { display: none; }
.ct-photo-row { display: flex; }
.ct-note { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.ct-srow { display: grid; grid-template-columns: 74px minmax(0, 1fr) 52px; align-items: center; gap: 12px; min-height: 44px; }
.ct-slabel { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.ct-slider { position: relative; height: 26px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--line); cursor: pointer; touch-action: none; }
.ct-slider:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.ct-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--p, 0%); border-radius: inherit; background: var(--plum); opacity: .45; }
.ct-thumb { position: absolute; top: 50%; left: var(--p, 0%); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--line); box-shadow: var(--shadow); }
.ct-sval { font-size: 13px; font-weight: 700; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.ct-acc { display: grid; gap: 12px; }
.ct-pill { justify-self: start; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass-strong); color: var(--ink-2); font-size: 13px; font-weight: 700; }
.ct-pill[aria-checked="true"] { background: var(--plum); color: var(--plum-ink); border-color: transparent; }
.ct-acc .swatches { padding: 0; }
.ct-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; margin-top: 16px; padding: 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font-size: 14.5px; font-weight: 600; text-align: left; }
.ct-knob { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--line); transition: background .2s ease; }
.ct-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: var(--shadow); transition: transform .2s ease; }
.ct-switch[aria-checked="true"] .ct-knob { background: var(--plum); }
.ct-switch[aria-checked="true"] .ct-knob::after { transform: translateX(18px); }
.ct-actions { margin-top: 14px; }
.ct-actions .btn { flex: 1 1 0; }
@media (prefers-reduced-motion: reduce) {
  .ct-knob, .ct-knob::after { transition: none; }
}
@media (max-width: 340px) {
  .ct-srow { grid-template-columns: 62px minmax(0, 1fr) 48px; gap: 8px; }
  .ct-bgs { gap: 8px 6px; }
  .ct-bg-opt { font-size: 11px; }
}

/* Run 25: Obrolan = satu daftar terbaru dulu, chip per karakter dengan jumlah, tombol Tampilkan lebih banyak. */
.convo-n { font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--glass-strong); color: var(--ink-2, var(--muted)); margin-right: auto; margin-left: 8px; white-space: nowrap; }
.chat-more { display: block; margin: 14px auto 0; }

/* Run 26: tooltip sentuh. Tahan ~450 ms pada tombol ikon (data-tip) untuk menampilkan tooltip; tidak memicu klik atau menu konteks native. */
[data-tip] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
[data-tip].tip-touch::after { content: attr(data-tip); }
[data-tip][data-tip-pos="below"]::after { bottom: auto; top: calc(100% + 6px); }

/* Biaya per balasan di chat playground (hanya admin) */
.pg-cost { margin: 4px 4px 0; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.pg-cost::-webkit-scrollbar { display: none; }

/* Tombol ke pesan terbaru: melayang di atas composer, kanan. Titik = ada balasan baru di bawah. */
.to-bottom { position: absolute; left: calc(50% - 20px); bottom: calc(100% + 4px); width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
  background: var(--glass-strong); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow); }
.to-bottom[hidden] { display: none; }
.to-bottom .icon { width: 20px; height: 20px; }
.to-bottom-dot { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 999px; background: var(--primary); border: 2px solid var(--bg); }
.to-bottom-dot[hidden] { display: none; }

/* Editor satu halaman: chip petunjuk persona dan bagian "Lanjutan" yang bisa dilipat. */
.hint-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.hint-chips .chip { font-size: 13px; padding: 6px 12px; }
.ed-more { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px; margin: 6px 0 14px; background: var(--glass); }
.ed-more > summary { list-style: none; cursor: pointer; padding: 14px 0; display: grid; gap: 2px; font-weight: 600; }
.ed-more > summary::-webkit-details-marker { display: none; }
.ed-more > summary small { font-weight: 400; font-size: 13px; }
.ed-more[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }

/* Saat mengedit pesan: kotak tulis bawah dan tombol ke-bawah disembunyikan supaya tidak menutupi kotak edit. */
body:has(.edit-box) .composer-wrap, body:has(.edit-box) .to-bottom { display: none; }

/* ---------- Mode visual novel (renderVn) ----------
   Layar imersif varian "Malam": kanvas gelap bergaris, sprite artist, KotakDialog putih dengan PapanNama violet
   miring -14° dan segitiga lanjut sakura (brand book Kyara, komponen KotakDialog + PapanNama). */
.vn-page {
  --vn-canvas: #121020; --vn-ink: #1C1A2E; --vn-muted: #6B6789;
  position: fixed; inset: 0; z-index: 5; overflow: hidden; color: var(--vn-ink);
  background:
    radial-gradient(120% 70% at 50% 35%, hsl(var(--h, 260) 45% 22% / .55), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 14px, transparent 14px 28px),
    var(--vn-canvas);
}
.vn-head { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px; }
.vn-head .round { background: rgba(18,16,32,.55); border-color: rgba(255,255,255,.12); color: #fff; }
.vn-title { flex: 1; min-width: 0; color: #fff; font-weight: 800; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sprite diukur dari tinggi stage (bukan dvh) supaya tidak pernah keluar layar: padding atas = ruang header. */
.vn-stage { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; pointer-events: none;
  padding-top: calc(env(safe-area-inset-top) + 64px); }
.vn-sprite { display: block; height: 100%; max-width: min(100%, 720px); object-fit: contain; object-position: bottom center; }
/* Half body: pinggang ke atas, wajah di sepertiga atas, bagian bawah sprite tertutup kotak dialog. */
.vn-page[data-frame="half"] .vn-stage { padding-bottom: 20%; }
.vn-sprite-empty { width: 160px; height: 160px; margin-bottom: 40dvh; border-radius: 40px; display: grid; place-items: center; }
.vn-sprite-empty .icon { width: 64px; height: 64px; }
.vn-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 16px calc(env(safe-area-inset-bottom) + 12px);
  max-width: 760px; margin: 0 auto; }
.vn-choices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.vn-choices:empty { display: none; }
.vn-choice { text-align: left; padding: 14px 18px; border-radius: 16px; background: rgba(28,26,46,.88); color: #fff;
  border: 1px solid rgba(169,150,255,.45); font: inherit; font-weight: 600; font-size: 15px; line-height: 1.35; cursor: pointer;
  animation: vn-in .22s ease-out both; }
.vn-choice:nth-child(2) { animation-delay: .05s; } .vn-choice:nth-child(3) { animation-delay: .1s; }
.vn-choice:hover, .vn-choice:focus-visible { background: #7B5CFF; border-color: #7B5CFF; outline: none; }
.vn-box { position: relative; background: #fff; border-radius: 24px; box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
  padding: 30px 22px 22px; min-height: 132px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.vn-box:focus-visible { outline: 3px solid #A996FF; outline-offset: 3px; }
.vn-plate { position: absolute; top: 0; left: 22px; transform: translateY(-55%) skewX(-14deg); background: #7B5CFF;
  border-radius: 12px; padding: 6px 18px; max-width: calc(100% - 44px); }
.vn-plate span { display: block; transform: skewX(14deg); color: #fff; font-weight: 800; font-size: 19px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-text { display: flex; flex-direction: column; gap: 6px; padding-right: 22px; }
.vn-text p { margin: 0; }
.vn-narr { color: var(--vn-muted); font-style: italic; font-size: 16px; line-height: 1.45; }
.vn-say { color: var(--vn-ink); font-weight: 600; font-size: 18px; line-height: 1.45; }
.vn-next { position: absolute; right: 20px; bottom: 16px; width: 0; height: 0; border-left: 10px solid transparent;
  border-right: 10px solid transparent; border-top: 12px solid #E8417A; animation: vn-bob 1.1s ease-in-out infinite; }
.vn-next[hidden] { display: none; }
.vn-box.live .vn-text p:last-child::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  vertical-align: -2px; background: #E8417A; animation: vn-blink 1s steps(1) infinite; }
.vn-typing { display: flex; gap: 5px; padding: 6px 0; }
.vn-typing i { width: 7px; height: 7px; border-radius: 99px; background: var(--vn-muted); animation: vn-blink 1s infinite; }
.vn-typing i:nth-child(2) { animation-delay: .15s; } .vn-typing i:nth-child(3) { animation-delay: .3s; }
.vn-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin-top: 10px;
  color: rgba(244,241,255,.78); font-size: 13px; font-weight: 600; }
.vn-foot .stop-btn { background: #F4F1FF; color: #1C1A2E; }
#vn-support .support-card { margin-top: 10px; }
.vn-log { display: flex; flex-direction: column; gap: 14px; max-height: 65dvh; overflow-y: auto; padding-bottom: 8px; }
.vn-log-row b { display: block; font-size: 13px; color: var(--plum-text); margin-bottom: 2px; }
.vn-log-row.you b { color: var(--rose); }
.vn-log-row p { margin: 0 0 6px; }
@keyframes vn-bob { 50% { transform: translateY(3px); } }
@keyframes vn-blink { 50% { opacity: .25; } }
@keyframes vn-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .vn-next, .vn-choice, .vn-typing i, .vn-box.live .vn-text p:last-child::after { animation: none; } }

/* Editor: slot sprite VN */
.vn-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.vn-slot { position: relative; display: flex; flex-direction: column; gap: 4px; }
.vn-slot-pick { aspect-ratio: 3 / 4; border-radius: 14px; border: 1.5px dashed var(--line); background: var(--glass);
  display: grid; place-items: center; overflow: hidden; cursor: pointer; padding: 0; color: var(--ink-3); }
.vn-slot-pick img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.vn-slot.filled .vn-slot-pick { border-style: solid; }
.vn-slot small { font-size: 12px; font-weight: 700; color: var(--ink-2); text-align: center; }
.vn-slot-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 99px; background: var(--glass-strong);
  border: 1px solid var(--line); display: grid; place-items: center; }
.vn-slot-x .icon { width: 14px; height: 14px; }
.vn-slot-add { display: flex; gap: 8px; margin-top: 10px; }
.vn-slot-add input { flex: 1; min-width: 0; }
.vn-frame { display: flex; gap: 8px; margin: 6px 0 10px; }
.vn-cont { margin: 0; font-size: 13px; font-weight: 700; opacity: .85; }