/* language: CSS, file: style.css, target: chat UI (dkiru+tokai+core+highlight) */

/* ── token ─────────────────────────────────────────────────────────────── */
:root {
  --bg:#ffffff;
  --bg-elev:#ffffff;
  --sidebar-bg:#f9f9f9;
  --sidebar-hover:rgba(0,0,0,.05);
  --sidebar-active:rgba(0,0,0,.055);
  --text:#0d0d0d;
  --text-2:#5d5d5d;
  --text-3:#8f8f8f;
  --border:rgba(0,0,0,.10);
  --hairline:rgba(0,0,0,.07);
  --composer-border:#d9d9e3;
  --composer-focus:#acacbe;
  --user-bubble:#f4f4f5;
  --hover:rgba(0,0,0,.045);
  --accent:#0d0d0d;
  --accent-fg:#ffffff;
  --send-off:#d1d1d1;
  --code-bg:#0d0d0d;
  --code-fg:#ececec;
  --code-plain:#f7f7f8;
  --inline-code-bg:rgba(0,0,0,.055);
  --quote:#5d5d5d;
  --link:#0285ff;
  --danger:#d42e2e;
  --shadow:0 8px 30px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:26px;
  --sidebar-w:260px;
  --thread-w:768px;
  --font:"OpenAI Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
         Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono:"Söhne Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
         "Liberation Mono", monospace;
}
html[data-theme="dark"] {
  --bg:#212121;
  --bg-elev:#2f2f2f;
  --sidebar-bg:#171717;
  --sidebar-hover:rgba(255,255,255,.055);
  --sidebar-active:rgba(255,255,255,.075);
  --text:#ececec;
  --text-2:#b4b4b4;
  --text-3:#8f8f8f;
  --border:rgba(255,255,255,.10);
  --hairline:rgba(255,255,255,.07);
  --composer-border:#3d3d3d;
  --composer-focus:#6d6d6d;
  --user-bubble:#303030;
  --hover:rgba(255,255,255,.05);
  --accent:#ececec;
  --accent-fg:#212121;
  --send-off:#3d3d3d;
  --code-bg:#0d0d0d;
  --code-fg:#ececec;
  --code-plain:#1c1c1c;
  --inline-code-bg:rgba(255,255,255,.09);
  --link:#4d9fff;
  --danger:#ff6b6b;
  --shadow:0 10px 34px rgba(0,0,0,.45);
}

* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; font-family:var(--font); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-size:16px; line-height:1.5; overflow:hidden;
}
.ic { width:16px; height:16px; display:block; fill:none; flex:none; }
button { font-family:inherit; font-size:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
::selection { background:rgba(0,0,0,.16); }
html[data-theme="dark"] ::selection { background:rgba(255,255,255,.2); }

/* scrollbar tipis ala chatgpt */
* { scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.18) transparent; }
html[data-theme="dark"] * { scrollbar-color:rgba(255,255,255,.16) transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:rgba(0,0,0,.16); border-radius:8px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,.28); background-clip:content-box; }
html[data-theme="dark"] *::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); background-clip:content-box; }

/* ── layout ────────────────────────────────────────────────────────────── */
.app { display:flex; height:100dvh; width:100%; }

/* ── sidebar ───────────────────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w); flex:none; background:var(--sidebar-bg);
  display:flex; flex-direction:column; height:100dvh;
  transition:margin-left .22s cubic-bezier(.2,.7,.3,1);
  padding-top:env(safe-area-inset-top);
}
body.sb-collapsed .sidebar { margin-left:calc(-1 * var(--sidebar-w)); }
.sb-scrim { display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:40; }

.sb-head { display:flex; align-items:center; gap:6px; height:50px; padding:0 10px 0 12px; }
.sb-brand { font-size:17px; font-weight:600; letter-spacing:-.01em; }
.sb-head .sb-close { display:none; margin-left:auto; }
.icon-btn {
  width:32px; height:32px; border-radius:var(--r-sm); display:grid; place-items:center;
  color:var(--text); transition:background .12s;
}
.icon-btn:hover { background:var(--sidebar-hover); }
.sb-close:hover { background:var(--sidebar-hover); }

.sb-actions { padding:2px 8px 10px; display:flex; flex-direction:column; gap:2px; }
.sb-new {
  display:flex; align-items:center; gap:10px; height:40px; padding:0 12px;
  border-radius:999px; font-size:14px; font-weight:500; width:100%;
  border:.5px solid var(--border); transition:background .12s;
}
.sb-new:hover { background:var(--sidebar-hover); }

.sb-list { flex:1; overflow-y:auto; padding:0 8px 12px; }
.sb-group { margin-top:6px; }
.sb-label { font-size:12px; color:var(--text-3); padding:8px 12px 6px; }
.sb-item {
  display:flex; align-items:center; gap:8px; height:36px; padding:0 8px 0 12px;
  border-radius:var(--r-sm); cursor:pointer; color:var(--text); position:relative;
}
.sb-item:hover { background:var(--sidebar-hover); }
.sb-item.on { background:var(--sidebar-active); }
.sb-item .sb-t { flex:1; min-width:0; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-item .sb-del { opacity:0; width:26px; height:26px; border-radius:6px; display:grid; place-items:center; color:var(--text-2); }
.sb-item:hover .sb-del { opacity:1; }
.sb-item .sb-del:hover { background:rgba(0,0,0,.08); color:var(--danger); }
html[data-theme="dark"] .sb-item .sb-del:hover { background:rgba(255,255,255,.1); }

.sb-foot { padding:8px 8px calc(10px + env(safe-area-inset-bottom)); border-top:.5px solid var(--hairline); }
.sb-user { display:flex; align-items:center; gap:10px; width:100%; height:40px; padding:0 10px; border-radius:var(--r-sm); }
.sb-user:hover { background:var(--sidebar-hover); }
.avatar {
  width:26px; height:26px; border-radius:50%; background:linear-gradient(140deg,#10a37f,#0d6a52);
  color:#fff; font-size:12px; font-weight:600; display:grid; place-items:center; flex:none;
}
.sb-user-name { font-size:14px; }

/* ── main ──────────────────────────────────────────────────────────────── */
.main { flex:1; min-width:0; display:flex; flex-direction:column; position:relative; }

.topbar {
  height:50px; flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; position:relative; z-index:30; padding-top:env(safe-area-inset-top);
}
.top-left { position:relative; display:flex; align-items:center; gap:4px; }
.model-btn {
  display:flex; align-items:center; gap:6px; height:34px; padding:0 10px;
  border-radius:var(--r-sm); font-size:16px; font-weight:600; letter-spacing:-.01em;
}
.model-btn:hover { background:var(--hover); }
.model-btn .chev { width:14px; height:14px; color:var(--text-2); }
.top-right { display:flex; align-items:center; gap:4px; }
.text-btn {
  display:flex; align-items:center; gap:6px; height:32px; padding:0 10px; border-radius:var(--r-sm);
  font-size:13px; color:var(--text-2);
}
.text-btn:hover { background:var(--hover); color:var(--text); }
.text-btn.on { background:var(--sidebar-active); color:var(--text); }

/* dropdown model */
.dropdown {
  position:absolute; top:40px; left:0; width:288px; background:var(--bg-elev);
  border:.5px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:6px; z-index:50; animation:pop .12s ease-out;
}
@keyframes pop { from { opacity:0; transform:translateY(-4px) } to { opacity:1; transform:none } }
.dd-head { font-size:12px; color:var(--text-3); padding:6px 10px 8px; }
.dd-sep { height:1px; background:var(--hairline); margin:6px 4px; }
.dd-row { display:flex; align-items:center; gap:10px; width:100%; height:38px; padding:0 10px; border-radius:var(--r-sm); font-size:14px; }
.dd-row:hover { background:var(--hover); }
.dd-row .dd-check { margin-left:auto; color:var(--text); }
.dd-row .dd-meta { margin-left:auto; font-size:12px; color:var(--text-3); }
.dd-toggle span { display:flex; align-items:center; gap:10px; }
.dd-toggle input { margin-left:auto; accent-color:#10a37f; }

/* ── thread ────────────────────────────────────────────────────────────── */
.thread-scroll { flex:1; overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth; }
.thread { max-width:var(--thread-w); margin:0 auto; padding:0 20px; }
.thread-tail { height:8px; }
.msgs-empty { min-height:calc(100dvh - 50px - 190px); display:grid; place-items:center; padding:40px 20px; }
.msgs-empty h2 { font-size:28px; font-weight:400; letter-spacing:-.02em; margin:0; text-align:center; }

.msg { padding:14px 0; }
.msg.model-label { padding:6px 0 2px; }
.msg.model-label .lbl { font-size:16px; font-weight:600; letter-spacing:-.01em; }

/* user: bubble kanan */
.msg.user { display:flex; justify-content:flex-end; padding:10px 0 18px; }
.bubble {
  max-width:80%; background:var(--user-bubble); padding:10px 18px;
  border-radius:var(--r-xl); border-bottom-right-radius:8px; white-space:pre-wrap;
  word-break:break-word; overflow-wrap:anywhere;
}

/* assistant: polos kiri */
.msg.assistant { padding:6px 0 22px; }
.assistant .avatar-row { width:26px; height:26px; border-radius:50%; margin:2px 0 0; display:none; }
.msg.assistant .prose { font-size:16px; }

/* reasoning */
.reasoning { margin:0 0 10px; }
.reasoning > summary {
  list-style:none; cursor:pointer; font-size:13px; color:var(--text-3);
  display:flex; align-items:center; gap:6px; padding:2px 0; user-select:none;
}
.reasoning > summary::-webkit-details-marker { display:none; }
.reasoning > summary:hover { color:var(--text-2); }
.reasoning .rbody {
  margin-top:6px; padding:8px 12px; border-left:2px solid var(--hairline);
  color:var(--text-2); font-size:13.5px; white-space:pre-wrap; max-height:260px; overflow:auto;
}

/* aksi di bawah balasan */
.msg-actions { display:flex; gap:2px; margin-top:6px; opacity:0; transition:opacity .12s; }
.msg:hover .msg-actions, .msg:focus-within .msg-actions { opacity:1; }
.msg-actions button {
  width:30px; height:30px; border-radius:var(--r-sm); display:grid; place-items:center;
  color:var(--text-2);
}
.msg-actions button:hover { background:var(--hover); color:var(--text); }
.msg-actions button.on { color:var(--text); background:var(--sidebar-active); }

.err-box {
  border:.5px solid var(--danger); color:var(--danger); border-radius:var(--r-md);
  padding:10px 12px; font-size:14px; white-space:pre-wrap;
}

/* editor inline */
.edit-box { max-width:80%; }
.edit-box textarea {
  width:100%; background:var(--bg-elev); color:var(--text); border:.5px solid var(--composer-border);
  border-radius:var(--r-lg); padding:10px 14px; font-family:inherit; font-size:16px;
  line-height:1.5; resize:none; outline:none; min-height:56px;
}
.edit-box textarea:focus { border-color:var(--composer-focus); }
.edit-acts { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.edit-acts button { height:32px; padding:0 14px; border-radius:var(--r-sm); font-size:14px; font-weight:500; }
.edit-acts .cancel { border:.5px solid var(--border); }
.edit-acts .cancel:hover { background:var(--hover); }
.edit-acts .go { background:var(--accent); color:var(--accent-fg); }

/* ── composer ──────────────────────────────────────────────────────────── */
.composer-zone {
  flex:none; padding:0 20px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to bottom, transparent, var(--bg) 22%);
}
.composer {
  max-width:var(--thread-w); margin:0 auto; border:.5px solid var(--composer-border);
  border-radius:var(--r-xl); background:var(--bg); padding:6px 8px 10px;
  box-shadow:0 2px 10px rgba(0,0,0,.03); transition:border-color .12s, box-shadow .12s;
}
html[data-theme="dark"] .composer { background:var(--user-bubble); box-shadow:none; }
.composer:focus-within { border-color:var(--composer-focus); box-shadow:0 2px 14px rgba(0,0,0,.05); }
.composer-row { display:flex; align-items:center; gap:2px; padding:2px 2px 4px; }
.grow { flex:1; }
.pill {
  display:flex; align-items:center; gap:6px; height:30px; padding:0 10px; border-radius:999px;
  font-size:13px; color:var(--text-2); transition:background .12s, color .12s;
}
.pill:hover { background:var(--hover); color:var(--text); }
.pill.on { background:var(--sidebar-active); color:var(--text); }
.icon-btn.ghost { color:var(--text-2); }
.icon-btn.ghost:hover { background:var(--hover); }
.send-btn {
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-fg); transition:opacity .12s, background .12s;
}
.send-btn:disabled { background:var(--send-off); color:transparent; cursor:not-allowed; }
.send-btn .ic { width:17px; height:17px; }
#input {
  display:block; width:100%; border:0; outline:none; resize:none; background:none;
  color:var(--text); font-family:inherit; font-size:16px; line-height:1.5;
  padding:4px 12px 2px; max-height:260px; overflow-y:auto;
}
#input::placeholder { color:var(--text-3); }
.disclaimer { max-width:var(--thread-w); margin:8px auto 0; text-align:center; font-size:12px; color:var(--text-3); }

/* ── prose / markdown ──────────────────────────────────────────────────── */
.prose > *:first-child { margin-top:0; }
.prose > *:last-child { margin-bottom:0; }
.prose p { margin:0 0 14px; }
.prose h1,.prose h2,.prose h3,.prose h4 { margin:22px 0 10px; font-weight:600; letter-spacing:-.01em; line-height:1.3; }
.prose h1 { font-size:24px; } .prose h2 { font-size:20px; } .prose h3 { font-size:17px; } .prose h4 { font-size:16px; }
.prose ul,.prose ol { margin:0 0 14px; padding-left:22px; }
.prose li { margin:5px 0; }
.prose li > ul,.prose li > ol { margin:4px 0; }
.prose blockquote { margin:0 0 14px; padding:2px 0 2px 14px; border-left:3px solid var(--hairline); color:var(--text-2); }
.prose hr { border:0; border-top:.5px solid var(--hairline); margin:22px 0; }
.prose code {
  font-family:var(--mono); font-size:.855em; background:var(--inline-code-bg);
  padding:2px 5px; border-radius:5px; word-break:break-word;
}
.codeblock { margin:0 0 16px; border-radius:var(--r-md); overflow:hidden; background:var(--code-bg); }
.codeblock pre { margin:0; padding:14px 16px; overflow-x:auto; }
.codeblock code { background:none; padding:0; color:var(--code-fg); font-size:13.5px; line-height:1.55; white-space:pre; }
.codeblock .cb-bar { display:flex; align-items:center; justify-content:space-between; padding:4px 6px 4px 14px; background:rgba(255,255,255,.06); }
.codeblock .cb-lang { font-size:11.5px; color:#a5a5a5; letter-spacing:.04em; text-transform:lowercase; }
.codeblock .cb-copy {
  display:flex; align-items:center; gap:5px; font-size:12px; color:#d6d6d6;
  padding:4px 8px; border-radius:6px;
}
.codeblock .cb-copy:hover { background:rgba(255,255,255,.1); }
.codeblock code.hl .k,.codeblock code.hl .kd { color:#ff7b72; }
.codeblock code.hl .s,.codeblock code.hl .s2 { color:#a5d6ff; }
.codeblock code.hl .c,.codeblock code.hl .c1 { color:#8b949e; font-style:italic; }
.codeblock code.hl .nf { color:#d2a8ff; }
.codeblock code.hl .mi,.codeblock code.hl .mf { color:#79c0ff; }
.prose table { border-collapse:collapse; margin:0 0 16px; font-size:14.5px; }
.prose th,.prose td { border:.5px solid var(--hairline); padding:8px 12px; text-align:left; }
.prose th { font-weight:600; background:var(--sidebar-bg); }
.prose .cursor { display:inline-block; width:8px; height:17px; background:currentColor; vertical-align:-3px; margin-left:1px; animation:blink 1s steps(2,start) infinite; }
@keyframes blink { 50% { opacity:0 } }

/* ── toast + modal ─────────────────────────────────────────────────────── */
.toast {
  position:fixed; left:50%; bottom:120px; transform:translateX(-50%); z-index:80;
  background:var(--text); color:var(--bg); padding:9px 16px; border-radius:999px;
  font-size:13.5px; box-shadow:var(--shadow); animation:pop .12s ease-out;
}
/* [hidden] dari UA stylesheet kalah spesifisitas dari .modal{display:grid} —
   tanpa baris ini, modalDel tidak pernah bisa disembunyikan */
.modal[hidden] { display:none; }
.modal { position:fixed; inset:0; z-index:90; display:grid; place-items:center; background:rgba(0,0,0,.4); animation:fadein .12s ease-out; }
@keyframes fadein { from { opacity:0 } to { opacity:1 } }
.modal-card { width:min(420px,92vw); background:var(--bg-elev); border:.5px solid var(--border); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow); }
.modal-card-wide { width:min(620px,94vw); }
.modal-card textarea {
  width:100%; background:var(--bg); color:var(--text); border:.5px solid var(--composer-border);
  border-radius:var(--r-md); padding:10px 12px; font-family:inherit; font-size:14.5px;
  line-height:1.55; resize:vertical; outline:none; min-height:120px;
}
.modal-card textarea:focus { border-color:var(--composer-focus); }
.modal-card h3 { margin:0 0 8px; font-size:17px; }
.modal-card p { margin:0 0 18px; color:var(--text-2); font-size:14px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; }
.modal-actions button { height:34px; padding:0 16px; border-radius:var(--r-sm); font-size:14px; font-weight:500; }
.btn-ghost { border:.5px solid var(--border); }
.btn-ghost:hover { background:var(--hover); }
.btn-danger { background:var(--danger); color:#fff; }

/* ── responsif ─────────────────────────────────────────────────────────── */
.only-narrow { display:none; }
@media (max-width:820px) {
  .only-narrow { display:grid; }
  #btnOpenSidebar2 { margin-right:2px; }
  .sidebar { position:fixed; z-index:50; box-shadow:var(--shadow); }
  .sb-head .sb-close { display:grid; }
  #btnOpenSidebar { display:none; }
  body:not(.sb-collapsed) .sb-scrim { display:block; }
  .text-btn span { display:none; }
  .thread { padding:0 16px; }
  .composer-zone { padding:0 12px calc(10px + env(safe-area-inset-bottom)); }
  .bubble,.edit-box { max-width:88%; }
  .msgs-empty h2 { font-size:24px; }
}
@media (min-width:821px) {
  body.sb-collapsed .sb-scrim { display:none !important; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* ── jailbreak / provider / gambar ────────────────────────────────────── */
.pt-tier {
  margin-left:auto; background:var(--bg); color:var(--text); border:.5px solid var(--border);
  border-radius:var(--r-sm); padding:4px 6px; font:inherit; font-size:13px; outline:none;
}
#ptTierRow.dim { opacity:.55; }
.dd-search {
  display:block; width:calc(100% - 8px); margin:2px 4px 6px; padding:6px 10px;
  border-radius:var(--r-sm); border:.5px solid var(--border); background:var(--bg);
  color:var(--text); font:inherit; font-size:13px; outline:none;
}
.dd-search:focus { border-color:var(--composer-focus); }
.dd-scroll { max-height:300px; overflow-y:auto; }
.attach-strip { display:flex; gap:8px; flex-wrap:wrap; padding:6px 4px 2px; }
.attach-thumb {
  position:relative; width:54px; height:54px; border-radius:10px; overflow:hidden;
  border:.5px solid var(--border);
}
.attach-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.attach-x {
  position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-size:12px; line-height:1; display:grid; place-items:center;
}
.thumb-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.thumb { max-width:170px; max-height:170px; border-radius:12px; cursor:zoom-in; display:block; }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.78); display:grid; place-items:center; z-index:120; padding:24px; }
.lightbox[hidden] { display:none; }
.lightbox img { max-width:92vw; max-height:88vh; border-radius:10px; }
.prov-list { display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.prov-row { display:flex; align-items:center; gap:8px; border:.5px solid var(--border); border-radius:var(--r-md); padding:8px 10px; }
.prov-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.prov-info strong { font-size:14px; }
.prov-info span { font-size:12px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prov-del { color:var(--text-3); width:26px; height:26px; border-radius:var(--r-sm); }
.prov-del:hover { background:var(--hover); color:var(--danger); }
.prov-form { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.prov-input {
  width:100%; background:var(--bg); color:var(--text); border:.5px solid var(--border);
  border-radius:var(--r-sm); padding:9px 12px; font:inherit; font-size:14px; outline:none;
}
.prov-input:focus { border-color:var(--composer-focus); }
.prov-presets { display:flex; gap:6px; flex-wrap:wrap; }
.chip { border:.5px solid var(--border); border-radius:99px; padding:4px 12px; font-size:13px; }
.chip:hover { background:var(--hover); }