:root {
  --bg: #212121;
  --bg-side: #171717;
  --bg-elev: #2f2f2f;
  --bg-hover: #2a2a2a;
  --border: #3a3a3a;
  --text: #ececec;
  --text-dim: #a8a8a8;
  --text-mute: #8a8a8a;
  --accent: #10a37f;
  /* bubble user = warna accent; teksnya dihitung dari kontras (lihat applyTheme) */
  --bubble: var(--accent);
  --bubble-text: #fff;
  --danger: #ef4146;
  --radius: 14px;
  --side-w: 260px;
  --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* Touch: no 300ms tap delay, no double-tap zoom stealing the first tap. */
button, a, .sb-item, .chip, .icon-btn { touch-action: manipulation; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ===== auth view ===== */
.auth-body {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 0%, #262626, #171717 65%);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 32px 28px 24px;
  background: #202020;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  text-align: center;
}

.auth-logo {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 16px;
  overflow: hidden;
  background: #2a2a2a;
  color: var(--accent);
}
.auth-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.auth-card h1 { margin: 0 0 6px; font-size: 24px; font-weight: 600; letter-spacing: -.2px; }
.auth-sub { margin: 0 0 22px; color: var(--text-dim); font-size: 14px; }

.tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; margin-bottom: 20px;
  background: #191919; border-radius: 12px;
}

.tab {
  padding: 9px 0; border: 0; border-radius: 9px;
  background: transparent; color: var(--text-dim);
  font-size: 14px; font-weight: 500;
}
.tab.active { background: var(--bg-elev); color: var(--text); }

.field { display: block; text-align: left; margin-bottom: 14px; }
.field > span { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-dim); }
.field input {
  width: 100%; padding: 11px 13px;
  background: #191919; color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 15px; outline: none;
}
.field input:focus { border-color: #5a5a5a; background: #1d1d1d; }

.err {
  margin: 4px 0 12px; padding: 9px 12px;
  background: rgba(239, 65, 70, .12);
  border: 1px solid rgba(239, 65, 70, .35);
  border-radius: 9px; color: #ff9b9e;
  font-size: 13px; text-align: left;
}

.btn-primary {
  width: 100%; padding: 12px;
  margin-top: 6px;
  background: var(--accent); color: #fff;
  border: 0; border-radius: 10px;
  font-size: 15px; font-weight: 600;
}
.btn-primary:disabled { opacity: .6; cursor: default; }
.btn-primary:hover:not(:disabled) { background: #0e8f6f; }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px;
  background: #fff; color: #1f1f1f;
  border: 1px solid #d8d8d8; border-radius: 10px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background .15s, box-shadow .15s;
}
.btn-google:hover { background: #f4f4f4; box-shadow: 0 1px 6px rgba(0, 0, 0, .18); }
.btn-google svg { flex: 0 0 auto; }

.auth-hint { margin: 16px 0 0; color: #7a7a7a; font-size: 12px; line-height: 1.55; }

.auth-foot { margin: 18px 0 0; color: #6f6f6f; font-size: 12px; }

/* pending-approval card: no form, just "we got you, wait for the admin" */
.pending-logo { background: rgba(240, 180, 41, .14); color: #f0b429; }
.pending-mail {
  margin: 0 0 18px; padding: 8px 12px;
  background: var(--bg-side); border: 1px solid var(--border); border-radius: 9px;
  font-size: 13px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis;
}
.pending-steps {
  margin: 0 0 18px; padding: 0 0 0 20px;
  text-align: left; font-size: 13px; line-height: 1.75; color: var(--text-dim);
}
.pending-steps li::marker { color: #f0b429; }
.pending-thanks { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.pending-thanks a { color: #8ab4ff; text-decoration: none; border-bottom: 1px solid rgba(138, 180, 255, .35); }
.pending-thanks a:hover { border-bottom-color: #8ab4ff; }
.pending-retry {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 11px; font-size: 14px; text-decoration: none;
}

/* ===== shell ===== */
/* ponytail: insets keep the topbar/composer clear of the iOS status bar and
   home indicator when this page runs inside another installed PWA's standalone
   window (ChiraOS shortcut). In a plain browser the insets are 0 and nothing
   shifts. */
.app {
  display: flex; height: 100%; height: 100dvh; overflow: hidden;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.sidebar {
  width: var(--side-w);
  flex: 0 0 var(--side-w);
  display: flex; flex-direction: column;
  background: var(--bg-side);
  border-right: 1px solid var(--border);
  position: relative;
  transition: width .2s ease, flex-basis .2s ease;
}

/* desktop: collapsing the sidebar leaves a slim icon rail behind */
@media (min-width: 861px) {
  .app.sb-hidden .sidebar { width: 58px; flex-basis: 58px; overflow: visible; }
  .app.sb-hidden .sb-resize { display: none; }
  /* everything that is text-first disappears; rail icons take over */
  .app.sb-hidden .sb-brand-text,
  .app.sb-hidden .sb-new span,
  .app.sb-hidden .sb-list,
  .app.sb-hidden .sb-archived,
  .app.sb-hidden .sb-foot .user-meta,
  .app.sb-hidden .sb-foot .user-btn > svg { display: none; }
  .app.sb-hidden .sb-head { flex-direction: column; flex-wrap: nowrap; gap: 4px; padding: 10px 0; }
  .app.sb-hidden #sb-toggle { display: none; }
  .app.sb-hidden .sb-brand { order: 1; }
  .app.sb-hidden .sb-new { order: 2; flex: 0 0 auto; margin-top: 2px; }
  .app.sb-hidden #search-btn { order: 3; }
  .app.sb-hidden #sb-recent-btn { order: 4; }
  .app.sb-hidden .recent-menu { top: 8px; left: 56px; }
  .app.sb-hidden .sb-brand { justify-content: center; padding: 0; }
  .app.sb-hidden .sb-brand-mark { display: grid; }
  .app.sb-hidden .sb-brand-toggle { display: none; }
  .app.sb-hidden .sb-brand:hover .sb-brand-mark { display: none; }
  .app.sb-hidden .sb-brand:hover .sb-brand-toggle { display: grid; }
  .app.sb-hidden .sb-brand:hover .sb-brand-text { display: none; }
  .app.sb-hidden .sb-new { justify-content: center; padding: 0; width: 38px; height: 38px; border-radius: 10px; }
  .app.sb-hidden .sb-foot { padding: 8px 0; justify-content: center; }
  .app.sb-hidden .user-btn { justify-content: center; padding: 4px; width: 40px; }
}

/* drag handle on the sidebar's right edge */
.sb-resize {
  position: absolute; top: 0; right: -3px; bottom: 0; width: 7px;
  cursor: col-resize; z-index: 5;
  background: transparent; transition: background .12s;
}
.sb-resize:hover, .sb-resize.dragging { background: rgba(16,163,127,.55); }
@media (max-width: 860px) { .sb-resize { display: none; } }

body.sb-resizing, body.sb-resizing * { cursor: col-resize !important; }
body.sb-resizing { user-select: none; }

.sb-head {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 10px 8px 8px 10px;
}
/* expanded: brand + search + collapse share the top line, new chat wraps below */
.sb-brand { order: 1; }
#search-btn { order: 2; }
#sb-toggle { order: 3; }
.sb-new { order: 4; flex: 0 0 100%; margin-top: 4px; }
.sb-brand {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 auto; min-width: 0;
  color: var(--text); text-decoration: none;
  font-size: 15px; font-weight: 700; letter-spacing: .2px;
}
.sb-brand-mark { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; }
.sb-brand-mark img { width: 24px; height: 24px; border-radius: 6px; display: block; }
.sb-brand-ico, .sb-brand-toggle { display: none; place-items: center; width: 26px; height: 26px; color: var(--text); }
.sb-brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sb-ico { flex: 0 0 auto; width: 32px; height: 32px; }
/* recent-chat icon exists only on the collapsed desktop rail */
.sb-rail-only { display: none !important; }
@media (min-width: 861px) {
  .app.sb-hidden .sb-rail-only { display: grid !important; }
}

.sb-new {
  flex: 1;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  font-size: 14px; font-weight: 500;
  transition: background .12s;
}
.sb-new:hover { background: var(--bg-hover); }

/* recent-chats dropdown on the collapsed rail */
.recent-menu { top: 46px; left: 8px; min-width: 240px; max-width: min(80vw, 320px); }
.recent-menu .sb-item { border-radius: 8px; }
.recent-menu .sb-empty { padding: 8px 10px; }

.sb-list {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 4px 8px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sb-list::-webkit-scrollbar { width: 6px; }
.sb-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.sb-group {
  padding: 14px 8px 6px;
  font-size: 11.5px; font-weight: 600;
  color: var(--text-mute);
  letter-spacing: .02em;
}

.sb-item {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 1px;
  border-radius: 9px;
  color: var(--text-dim);
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
}
.sb-item:hover { background: var(--bg-hover); color: var(--text); }
.sb-item.active { background: var(--bg-elev); color: var(--text); }
.sb-item .t { overflow: hidden; text-overflow: ellipsis; flex: 1; }

.sb-item .acts { display: none; gap: 2px; }
.sb-item:hover .acts, .sb-item.active .acts { display: flex; }
.sb-item .acts button {
  width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 6px;
  color: var(--text-mute);
}
.sb-item .acts button:hover { background: var(--bg-hover); color: var(--text); }

.sb-empty { padding: 16px 10px; color: var(--text-mute); font-size: 13px; }

.sb-foot { padding: 8px; border-top: 1px solid var(--border); position: relative; }

.user-btn {
  width: 100%;
  display: flex; align-items: center; gap: 9px;
  padding: 8px;
  background: transparent; border: 0; border-radius: 10px;
  text-align: left;
}
.user-btn:hover { background: var(--bg-hover); }

.avatar {
  flex: 0 0 30px; width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase;
}

.user-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.user-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.quota { font-size: 11.5px; color: var(--text-mute); }

.user-menu {
  position: absolute; bottom: 60px; left: 8px; right: 8px; min-width: 200px;
  display: flex; flex-direction: column;
  padding: 5px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  z-index: 40;
}
.user-menu button {
  padding: 9px 11px; border: 0; border-radius: 7px;
  background: transparent; text-align: left; font-size: 13.5px;
}
.user-menu button:hover { background: var(--bg-hover); }
/* collapsed desktop rail: let the menu break out instead of squeezing into 58px */
@media (min-width: 861px) {
  .app.sb-hidden .user-menu {
    left: 52px; right: auto; width: 216px; bottom: 52px;
  }
}

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

.topbar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  min-height: 52px;
}
.topbar-spacer { flex: 1; }

.icon-btn {
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 9px;
  color: var(--text-dim);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
#memory-btn[aria-pressed="true"] { color: var(--accent); background: var(--bg-hover); }
#memory-btn[aria-pressed="true"] svg { fill: currentColor; fill-opacity: .12; }
.only-mobile { display: none; }

.model-pick { position: relative; }

.model-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  background: transparent; border: 0; border-radius: 9px;
  color: var(--text-dim); font-size: 14px; font-weight: 500;
}
.model-btn:hover { background: var(--bg-hover); color: var(--text); }

.model-menu {
  position: absolute; top: 44px; left: 0;
  min-width: 258px; max-height: 60vh; overflow-y: auto;
  /* keep a menu scroll from chaining to the page (that chain fires a window
     scroll and used to close the menu mid-scroll) */
  overscroll-behavior: contain; touch-action: pan-y;
  padding: 6px; z-index: 50;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
.model-menu .grp { padding: 8px 9px 4px; font-size: 11.5px; color: var(--text-mute); font-weight: 600; }
.model-menu button {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 9px; border: 0; border-radius: 8px;
  background: transparent; text-align: left; font-size: 13.5px;
}
.model-menu button:hover { background: var(--bg-hover); }
.model-menu button.sel { background: var(--bg-hover); }
.model-menu .chk { margin-left: auto; color: var(--accent); }
.model-menu .sub { display: block; font-size: 11px; color: var(--text-mute); margin-top: 1px; }
#effort-menu { min-width: 200px; }

/* ===== thread ===== */
.thread {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.thread::-webkit-scrollbar { width: 8px; }
.thread::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.hero {
  max-width: 760px; margin: 0 auto;
  padding: 14vh 20px 0;
  text-align: center;
}
.hero h1 { margin: 0 0 26px; font-size: 30px; font-weight: 500; letter-spacing: -.4px; }

.chips {
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
}
.chip {
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 13.5px;
}
.chip:hover { background: var(--bg-hover); color: var(--text); }

/* hero: persona entry point, sits under the suggestion chips */
.hero-persona {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; padding: 7px 13px;
  background: transparent; border: 1px dashed var(--border);
  border-radius: 999px; color: var(--text-mute);
  font-size: 12.5px;
}
.hero-persona:hover { color: var(--text); border-color: var(--text-mute); }
.hero-persona.set { border-style: solid; border-color: #3d6b57; color: #7fc9a8; }

/* topbar indicator: this conversation carries its own instructions */
.persona-ind { color: #7fc9a8; }

/* find-in-conversation bar, pinned above the thread */
.find-bar {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 8px;
  max-width: 768px; margin: 0 auto 4px;
  padding: 7px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-mute);
}
.find-bar input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  color: var(--text); font-size: 13.5px;
}
.find-bar input::placeholder { color: var(--text-mute); }
.find-count {
  font-size: 11.5px; color: var(--text-mute);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.find-bar .icon-btn { width: 24px; height: 24px; }
mark.find-hit { background: #6b5b1f; color: #ffe9a8; border-radius: 2px; padding: 0 1px; }
.msg.find-current mark.find-hit { background: #b8891f; color: #1a1a1a; }

.messages {
  max-width: 768px; margin: 0 auto;
  padding: 8px 20px 40px;
}

/* new-chat view: hero + composer travel together in the middle of the screen.
   Auto margins on either side of the pair absorb the free space evenly, so the
   topbar stays pinned and the composer no longer sticks to the bottom. */
.app.empty .thread { flex: 0 0 auto; overflow: visible; margin-top: auto; }
.app.empty .hero { padding: 0 20px 6px; }
.app.empty .composer-wrap { margin-bottom: auto; background: none; padding-bottom: 0; }
.app.empty .messages { padding-bottom: 0; }
@media (max-width: 860px) {
  .app.empty .hero { padding-top: 0; }
  .app.empty .hero h1 { font-size: 22px; }
}

.msg { margin-bottom: 26px; }

.msg.user { display: flex; justify-content: flex-end; }
.msg.user .bubble {
  max-width: 80%;
  padding: 10px 16px;
  background: var(--bubble, var(--bg-elev));
  border-radius: 20px;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.user .atts {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: flex-end; margin-bottom: 8px;
}
.msg.user .atts img {
  max-width: 220px; max-height: 220px;
  border-radius: 12px; border: 1px solid var(--border);
}
.msg.user .atts .doc {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 11px;
  background: var(--bg-elev); border-radius: 10px;
  font-size: 13px;
}

.msg.bot { position: relative; }
.msg.bot .who {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-dim);
}
.msg.bot .who .dot {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px; font-weight: 700;
}

.body { word-break: break-word; }
.body > *:first-child { margin-top: 0; }
.body > *:last-child { margin-bottom: 0; }
.body p { margin: 0 0 12px; }
.body h1, .body h2, .body h3 { margin: 22px 0 10px; line-height: 1.3; letter-spacing: -.2px; }
.body h1 { font-size: 22px; }
.body h2 { font-size: 19px; }
.body h3 { font-size: 17px; }
.body ul, .body ol { margin: 0 0 12px; padding-left: 24px; }
.body li { margin-bottom: 5px; }
.body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.body blockquote {
  margin: 0 0 12px; padding: 2px 0 2px 14px;
  border-left: 3px solid var(--border); color: var(--text-dim);
}
.body table {
  width: 100%; margin: 0 0 14px;
  border-collapse: collapse; font-size: 14px;
  display: block; overflow-x: auto;
}
.body th, .body td { padding: 8px 11px; border: 1px solid var(--border); text-align: left; }
.body th { background: var(--bg-hover); font-weight: 600; }
.body hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.body code {
  padding: 2px 5px;
  background: var(--bg-hover); border-radius: 5px;
  font-family: var(--mono); font-size: 13.5px;
}

.code-wrap {
  position: relative;
  margin: 0 0 14px;
  border: 1px solid #333;
  border-radius: 11px;
  overflow: hidden;
  background: #0d1117;
}
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  background: #161b22;
  border-bottom: 1px solid #30363d;
  font-size: 12px; color: #8b949e;
}
.code-head button {
  padding: 3px 8px;
  background: transparent; border: 1px solid #30363d; border-radius: 6px;
  color: #8b949e; font-size: 11.5px;
}
.code-head button:hover { background: #21262d; color: #e6edf3; }
.code-wrap pre {
  margin: 0; padding: 13px 14px;
  overflow-x: auto;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.55;
}
.code-wrap pre code { background: none; padding: 0; font-size: inherit; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ==== activity timeline: think / web search / fetch / code ==== */
.steps {
  margin: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-hover);
  overflow: hidden;
}
.steps-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 12.5px; color: var(--text-dim);
  cursor: pointer; user-select: none;
}
.steps:not(.done) .steps-head { cursor: default; }
.steps.done .steps-head:hover { background: var(--bg-hover); }
.steps-head .spin {
  width: 11px; height: 11px; flex: none;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.steps.done .steps-head .spin {
  animation: none;
  border-color: var(--accent);
  border-top-color: var(--accent);
  opacity: .55;
}
.steps-lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps-t { flex: none; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.steps.done .steps-head::after {
  content: "";
  width: 7px; height: 7px; flex: none;
  margin-left: 2px;
  border-right: 1.6px solid var(--text-mute);
  border-bottom: 1.6px solid var(--text-mute);
  transform: rotate(45deg) translateY(-1px);
  transition: transform .15s;
}
.steps.done.collapsed .steps-head::after { transform: rotate(-45deg) translateY(1px); }

.steps-list {
  padding: 2px 12px 9px;
  border-top: 1px solid var(--border);
}
.step {
  display: flex; gap: 8px;
  padding: 5px 0 0;
  font-size: 12.5px; color: var(--text-mute);
}
.step-ic { flex: none; display: flex; padding-top: 2px; opacity: .8; }
.step.run .step-ic { color: var(--accent); opacity: 1; animation: pulse 1.4s ease-in-out infinite; }
.step.done .step-ic { color: var(--text-dim); }
.step.fail .step-ic { color: var(--danger); }
@keyframes pulse { 50% { opacity: .45; } }
.step-tx { min-width: 0; flex: 1; }
.step-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.step-lb { color: var(--text-dim); }
.step.run .step-lb { color: var(--text); }
.step-url {
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--accent); text-decoration: none;
}
.step-url:hover { text-decoration: underline; }
.step-det {
  font-family: var(--mono); font-size: 11.5px;
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-mute);
}
.step-via {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5;
  padding: 0 6px; border-radius: 999px; white-space: nowrap;
  background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-mute);
}
.step.run .step-via { border-color: var(--border); color: var(--text-dim); }
.step-sec { color: var(--text-mute); font-variant-numeric: tabular-nums; }
.step-urls { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.step-urls .step-url {
  padding: 2px 8px;
  background: var(--bg-hover); border: 1px solid var(--border); border-radius: 999px;
  font-size: 11.5px;
}
.step-urls .step-url:hover { background: var(--bg-elev); text-decoration: none; }

.sumber {
  margin-top: 10px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 12.5px; color: var(--text-mute);
}
.sumber a {
  padding: 3px 9px;
  background: var(--bg-hover); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-dim); text-decoration: none;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sumber a:hover { background: var(--bg-elev); color: var(--text); }

.acts-msg {
  display: flex; gap: 2px;
  margin-top: 8px; opacity: 1;
}
.acts-msg button {
  height: 28px; min-width: 28px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: transparent; border: 0; border-radius: 7px;
  color: var(--text-mute); font-size: 12.5px;
}
.acts-msg button:hover { background: var(--bg-hover); color: var(--text); }
.acts-msg button.busy { opacity: .5; }
.acts-msg button.busy svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (hover: none) {
  /* no hover on touch: the row's actions are always visible, so a tap never
     lands on a row that is about to change size under the finger */
  .sb-item .acts { display: flex; }
}

.cursor::after {
  content: "";
  display: inline-block;
  width: 7px; height: 15px;
  margin-left: 2px; vertical-align: -2px;
  background: var(--text-dim);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.err-box {
  margin: 0 0 12px; padding: 11px 13px;
  background: rgba(239, 65, 70, .1);
  border: 1px solid rgba(239, 65, 70, .3);
  border-radius: 10px;
  color: #ff9b9e; font-size: 13.5px;
}

/* ===== composer ===== */
.composer-wrap {
  padding: 0 20px 14px;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}

.composer {
  position: relative;
  max-width: 768px;
  margin: 0 auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 8px 10px;
  transition: border-color .15s;
}
.composer:focus-within { border-color: var(--text-mute); }

.pending {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 4px 4px 9px;
}
.pending .item {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px;
  background: var(--bg-hover); border: 1px solid var(--border); border-radius: 10px;
  font-size: 12.5px; color: var(--text-dim);
  max-width: 220px;
}
.pending .item img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; }
.pending .item .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending .item .x {
  width: 18px; height: 18px; padding: 0;
  display: grid; place-items: center;
  background: var(--border); border: 0; border-radius: 50%;
  color: var(--text-dim); font-size: 12px; line-height: 1;
}
.pending .item.uploading { opacity: .6; }

.composer-row { display: flex; align-items: flex-end; gap: 4px; }

.input {
  flex: 1;
  max-height: 200px;
  padding: 8px 6px;
  background: transparent; border: 0; outline: none;
  color: var(--text); font-family: inherit; font-size: 15.5px; line-height: 1.5;
  resize: none;
  scrollbar-width: thin;
}
.input::placeholder { color: var(--text-mute); }

.send {
  flex: 0 0 33px;
  width: 33px; height: 33px; padding: 0;
  display: grid; place-items: center;
  background: var(--text); color: var(--bg);
  border: 0; border-radius: 50%;
}
.send:disabled { background: var(--border); color: var(--text-mute); cursor: default; }
.send.stop { background: var(--text); }

.disclaimer {
  max-width: 768px;
  margin: 8px auto 0;
  text-align: center;
  font-size: 11.5px; color: var(--text-mute);
}

.scrim {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 60;
}

/* ===== mobile ===== */
@media (max-width: 860px) {
  .sidebar {
    position: fixed; inset: 0 auto 0 0;
    z-index: 70;
    /* fixed ignores the .app padding, so the drawer needs its own insets */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateX(-100%);
    transition: transform .22s ease;
    width: 84vw; max-width: 300px;
    flex-basis: auto;
  }
  .sidebar.open { transform: none; }
  .only-mobile { display: grid; }
  #sb-recent-btn { display: none !important; }
  .messages, .composer, .disclaimer { padding-left: 12px; padding-right: 12px; }
  .messages { padding-left: 14px; padding-right: 14px; }
  .composer-wrap { padding: 0 10px 10px; }
  .hero { padding-top: 10vh; }
  .app.empty .main { padding-bottom: 4vh; }
  .app.empty .hero { padding-top: 0; }
  .hero h1 { font-size: 24px; }
  .msg.user .bubble { max-width: 88%; }
  .model-menu { min-width: 0; width: min(78vw, 300px); }
  .cmd-menu { width: min(86vw, 300px); min-width: 0; left: 0; }
}



@media (prefers-color-scheme: light) {
  /* ponytail: dark only for now — add a light palette when asked */
}

/* ================= fitur parity ChatGPT ================= */

/* --- search entry in the sidebar --- */
/* --- archive section --- */
.sb-archived { margin-top: auto; padding: 4px 0 8px; }
.arch-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 12px; background: transparent; border: 0;
  color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer;
}
.arch-toggle:hover { background: var(--bg-hover); color: var(--text); }
.arch-toggle .count {
  margin-left: auto; font-size: 11px; color: var(--text-mute);
  background: var(--bg-hover); border-radius: 999px; padding: 0 6px;
}
.arch-list { max-height: 34vh; overflow-y: auto; }

/* --- conversation title in the topbar --- */
.conv-title {
  font-size: 14px; color: var(--text-dim);
  max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- topbar conversation menu --- */
.conv-menu {
  position: absolute; top: 52px; right: 12px; z-index: 60;
  min-width: 190px; padding: 6px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  display: flex; flex-direction: column;
}
.conv-menu button {
  text-align: left; padding: 9px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer;
}
.conv-menu button:hover { background: var(--bg-hover); }

/* --- attachment / command dropdown (opens upward from the composer) --- */
.cmd-menu {
  top: auto; bottom: calc(100% + 8px); left: 0;
  min-width: 268px; max-height: min(58vh, 420px);
}
.cmd-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; font-size: 13.5px;
  text-align: left; cursor: pointer; touch-action: manipulation;
}
.cmd-item:hover { background: var(--bg-hover); }
.cmd-name { flex: 0 0 76px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); }
.cmd-label { flex: 1 1 auto; color: var(--text-dim); font-size: 13px; }
.cmd-sep { height: 1px; margin: 5px 6px; background: var(--border); }
.cmd-opts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.cmd-opt {
  padding: 6px 11px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--fg);
  cursor: pointer; touch-action: manipulation; text-align: left;
}
.cmd-opt:hover { background: var(--bg-hover); border-color: var(--border-strong, var(--border)); }
.md-dl {
  display: inline-block; margin-top: 8px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); font-size: 13px; text-decoration: none;
}
.md-dl:hover { background: var(--bg-hover); }

/* --- modal shell --- */
.modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
}
.modal-card {
  width: min(640px, 100%);
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
  overflow: hidden;
}
.modal-title { margin: 0; padding: 16px 18px 0; font-size: 15px; font-weight: 600; }
.modal-sub { margin: 6px 18px 0; font-size: 12.5px; color: var(--text-mute); }
.modal-textarea {
  display: block; width: calc(100% - 36px); margin: 12px 18px 0;
  background: var(--bg-side); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical;
}
.modal-textarea:focus { outline: none; border-color: #4a4a4a; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; }
#persona-modal .fld { padding: 12px 0 0; }
#persona-modal .fld > span { padding: 0 18px; }
#persona-modal .fld-hint { padding: 0 18px; }
#persona-modal .err { margin: 8px 18px 0; }
#persona-modal #persona-input { font-family: inherit; line-height: 1.55; }
.modal-hint {
  margin: 0; padding: 8px 18px 12px;
  font-size: 11.5px; color: var(--text-mute); border-top: 1px solid var(--border);
}
.btn-ghost {
  height: 34px; padding: 0 14px;
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 9px;
  font: inherit; font-size: 13.5px; cursor: pointer;
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }

/* --- command palette search --- */
.modal-search {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  color: var(--text-mute);
}
.modal-search input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--text); font: inherit; font-size: 15px;
}
.search-results { max-height: 52vh; overflow-y: auto; padding: 6px; }
.search-results .hit {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: 9px;
  background: transparent; text-align: left; cursor: pointer;
  color: var(--text); font: inherit;
}
.search-results .hit.sel, .search-results .hit:hover { background: var(--bg-hover); }
.hit-t { font-size: 13.5px; font-weight: 500; }
.hit-s {
  font-size: 12px; color: var(--text-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- message search highlight --- */
.flash { animation: flashhit 1.4s ease-out; border-radius: 8px; }
@keyframes flashhit {
  0%, 30% { background: rgba(16,163,127,.22); }
  100% { background: transparent; }
}

/* --- user message actions --- */
.acts-msg.user-acts {
  justify-content: flex-end; margin-top: 6px;
  opacity: 1;
}

/* --- public share view --- */
.share-body {
  min-height: 100%; max-width: 780px; margin: 0 auto;
  padding: 0 20px 56px;
  display: flex; flex-direction: column;
}
.share-top {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 0; border-bottom: 1px solid #2a2a2a;
}
.share-brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px;
}
.share-brand img { border-radius: 6px; }
.share-tag { font-size: 12px; color: var(--text-mute); }
.share-thread { flex: 1; padding-top: 8px; }
.share-title { font-size: 21px; font-weight: 600; margin: 18px 0 6px; }
.share-foot { display: flex; justify-content: center; padding-top: 28px; border-top: 1px solid #2a2a2a; }
.share-cta { text-decoration: none; display: inline-flex; align-items: center; }

/* --- admin dashboard --- */
.admin-body {
  min-height: 100%; max-width: 980px; margin: 0 auto;
  padding: 0 20px 64px;
  display: flex; flex-direction: column;
}
.admin-top {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 0; border-bottom: 1px solid #2a2a2a;
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
}
.admin-back { margin-left: auto; display: inline-flex; align-items: center; }

.admin-tabs {
  display: flex; gap: 4px; padding: 12px 0 0;
  border-bottom: 1px solid #2a2a2a;
}
.admin-tab {
  padding: 8px 16px; font-size: 13.5px; font-weight: 500;
  background: transparent; color: var(--text-mute); border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.admin-tab:hover { color: var(--text-dim); }
.admin-tab.active { color: var(--text); border-bottom-color: #4f8cff; }

.admin-wrap { padding-top: 18px; }
.admin-stats {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.stat-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px;
  background: var(--bg-hover); border: 1px solid var(--border); border-radius: 12px;
}
.stat-num { font-size: 22px; font-weight: 600; line-height: 1.2; }
.stat-lbl { font-size: 11.5px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .04em; }

.admin-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.admin-search, .admin-filter {
  height: 38px; padding: 0 12px;
  background: var(--bg-hover); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  font: inherit; font-size: 14px;
}
.admin-search { flex: 1; min-width: 0; }
.admin-search:focus, .admin-filter:focus { outline: none; border-color: var(--text-mute); }
.admin-filter { min-width: 150px; }

.admin-list { display: flex; flex-direction: column; gap: 10px; }
.admin-empty { color: var(--text-mute); font-size: 14px; padding: 20px 2px; }

.admin-row {
  display: grid; gap: 10px;
  grid-template-columns: 1fr auto;
  grid-template-areas: "head acts" "stats stats";
  padding: 13px 15px;
  background: var(--bg-hover); border: 1px solid var(--border); border-radius: 12px;
}
.admin-row.is-blocked { opacity: .62; border-color: #4a2f2f; }
.ar-head { grid-area: head; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ar-who { display: flex; flex-direction: column; min-width: 0; }
.ar-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ar-sub { font-size: 11.5px; color: var(--text-mute); }
.badge {
  padding: 1px 6px; border-radius: 5px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
}
.badge.admin { background: rgba(16, 163, 127, .18); color: #37d3a8; }
.badge.blocked { background: rgba(239, 65, 70, .16); color: #ff7b7f; }
.badge.pending { background: rgba(240, 180, 41, .17); color: #f0b429; }
.admin-row.is-pending { border-color: #4a3f22; }
.ar-btn.b-approve { color: #f0b429; }

.ar-stats { grid-area: stats; display: flex; flex-wrap: wrap; gap: 14px; }
.ar-stat { display: flex; align-items: baseline; gap: 4px; font-size: 12px; color: var(--text-mute); }
.ar-stat b { font-size: 13px; font-weight: 600; color: var(--text-dim); }

.ar-acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ar-btn { height: 30px; padding: 0 10px; font-size: 12.5px; }
.ar-btn.b-del { color: #ff8a8d; border-color: #583032; }
.ar-btn.b-del:hover { background: rgba(239, 65, 70, .14); color: #ffb0b2; }
.ar-btn.b-admin { color: #4fd8b0; border-color: #2c5a4c; }
.ar-btn.b-perm.on { color: #8ab4ff; border-color: #2f4a72; }

/* per-user model permission picker */
.perm-list {
  max-height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain;
  margin: 12px 18px 0; padding: 4px 0;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-side);
}
.perm-grp {
  padding: 8px 12px 4px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-mute);
}
.perm-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 12px; font-size: 13.5px; cursor: pointer;
  touch-action: manipulation;
}
.perm-item:hover { background: rgba(255,255,255,.04); }
.perm-item input { width: 15px; height: 15px; accent-color: #4f8cff; flex: 0 0 auto; }

/* logs section */
.logs-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.logs-list {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 12px; border: 1px solid #333; border-radius: 12px;
  background: var(--bg-side);
  max-height: calc(100vh - 230px); overflow-y: auto; overscroll-behavior: contain;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.55;
}
.log-line { white-space: pre-wrap; word-break: break-all; color: var(--text-dim); }
.log-line.err { color: #ff8a8d; }
.log-line.warn { color: #f0b429; }
.log-line.req { color: var(--text-mute); }
.log-empty { color: var(--text-mute); font-size: 13px; padding: 14px 2px; font-family: inherit; }

@media (max-width: 620px) {
  .admin-body { padding: 0 14px 48px; }
  .admin-row { grid-template-columns: 1fr; grid-template-areas: "head" "stats" "acts"; }
  .logs-list { font-size: 11px; max-height: calc(100vh - 250px); }
  .ar-acts { justify-content: flex-start; }
  .admin-filter { min-width: 120px; }
}

/* `hidden` must beat the display:flex rules above */
[hidden] { display: none !important; }
.topbar { position: relative; }

/* ---- admin: providers ---- */
.prov-list { display: grid; gap: 10px; }
.prov-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  background: var(--bg-hover);
}
.prov-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prov-name { font-weight: 600; font-size: 14px; }
.prov-key {
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
  background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 5px;
}
.prov-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: #7ee787; border: 1px solid rgba(126,231,135,.35); border-radius: 5px; padding: 1px 5px;
}
.prov-count { font-size: 11px; color: var(--text-dim); margin-left: auto; }
.prov-add-model {
  font-size: 11px; padding: 3px 8px; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--text-dim); border: 1px solid var(--border);
}
.prov-add-model:hover { color: var(--text); border-color: var(--text-dim); }
.prov-del {
  font-size: 11px; padding: 3px 8px; border-radius: 6px; cursor: pointer;
  background: transparent; color: #ef5b5f; border: 1px solid rgba(239,91,95,.35);
}
.prov-del:hover { background: rgba(239,91,95,.12); border-color: #ef5b5f; }
.prov-url { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin: 6px 0 8px; word-break: break-all; }
.prov-models { display: flex; flex-wrap: wrap; gap: 5px; }
.prov-chip {
  font-size: 11px; padding: 2px 7px; border-radius: 5px;
  background: rgba(255,255,255,.05); color: var(--text-dim);
  font-family: var(--mono); border: 1px solid transparent;
  cursor: pointer; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.prov-chip:hover { color: #ef5b5f; border-color: rgba(239,91,95,.35); text-decoration: line-through; }
.prov-chip:disabled { opacity: .4; cursor: default; }
.prov-chip.empty { cursor: default; font-style: italic; opacity: .6; }
.prov-chip.empty:hover { color: var(--text-dim); border-color: transparent; text-decoration: none; }

/* ---- add-provider modal ---- */
/* ---- theme picker (Personalize) ---- */
.pers-theme { padding: 10px 18px 0; }
.pers-h {
  margin: 0 0 8px; font-size: 12px; font-weight: 600;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em;
}
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-row {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 7px 9px; background: var(--bg-hover);
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 12.5px; color: var(--text-dim);
}
.theme-row > span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-row input[type="color"] {
  flex: 0 0 30px; width: 30px; height: 26px; padding: 0;
  background: none; border: 1px solid var(--border); border-radius: 7px; cursor: pointer;
}
.theme-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.theme-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.pers-theme .btn-ghost { margin: 8px 0 0; padding: 6px 10px; font-size: 12px; }
.pers-sep { margin: 14px 18px 0; border: 0; border-top: 1px solid var(--border); }

#prov-modal .modal-card { width: min(470px, 100%); }
.prov-form { display: grid; gap: 13px; padding: 14px 18px 4px; }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld > span {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-dim);
}
.fld > span em {
  font-style: normal; font-size: 10px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-mute);
}
.fld input {
  width: 100%; box-sizing: border-box; height: 38px; padding: 0 11px;
  background: var(--bg-side); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  font: inherit; font-size: 13.5px;
}
.fld input::placeholder { color: #5f5f5f; }
.fld input:focus { outline: none; border-color: #4a4a4a; }
.fld-hint { font-size: 11.5px; font-style: normal; color: #6f6f6f; line-height: 1.5; }
.fld-hint code, .modal-sub code {
  font-family: var(--mono); font-size: 11px;
  background: rgba(255,255,255,.06); padding: 0 4px; border-radius: 4px;
}
#prov-modal-err { margin: 0; }

@media (max-width: 620px) {
  .prov-form { padding: 12px 14px 2px; gap: 12px; }
  #prov-modal .modal-title { padding: 14px 14px 0; }
  #prov-modal .modal-sub { margin: 6px 14px 0; }
  #prov-modal .modal-actions { padding: 14px; }
  .prov-head { gap: 6px; }
  .prov-count { margin-left: 0; }
}