/* KIRA console shell: Liputan6 tokens + app bar shared by /chat, /console and /login.
   Brand: logo gradient #FF6600 -> #FF3300 (decorative only); interactive orange is darkened
   to #E03000 so white text on it passes WCAG AA. Ink and neutrals follow liputan6.com. */
:root {
  --brand-1: #ff6600; --brand-2: #ff3300; --brand-grad: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  --bg: #f5f5f5; --panel: #ffffff; --ink: #1f2937; --ink-strong: #080808; --muted: #6b7280; --line: #e5e5e5;
  --soft: #f3f4f6; --chip: #f3f4f6; --code: #f6f7f9; --user: #f3f4f6;
  --accent: #e03000; --accent-hover: #c42a00; --accent-ink: #ffffff; --tint: #fff0e6; --tint-ink: #b32600;
  --ok: #157347; --warn: #9a6200; --fail: #b42318; --info: #3d4f73; --focus: #ff934b;
  --shadow: 0 12px 40px rgba(8, 8, 8, .16); --shadow-sm: 0 1px 2px rgba(8, 8, 8, .06), 0 1px 1px rgba(8, 8, 8, .04);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --appbar-h: 56px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e0f; --panel: #18181a; --ink: #e8e8ea; --ink-strong: #ffffff; --muted: #a1a1aa; --line: #2c2c30;
    --soft: #222226; --chip: #222226; --code: #121214; --user: #26262b;
    --accent: #ff6a3d; --accent-hover: #ff8560; --accent-ink: #140600; --tint: #3a1a0c; --tint-ink: #ffb08a;
    --ok: #4cc38a; --warn: #f0b44c; --fail: #ff7a6b; --info: #9fb3dd; --focus: #c2501f;
    --shadow: 0 12px 40px rgba(0, 0, 0, .55); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

body { font-family: var(--font); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ---------- app bar ---------- */
.appbar {
  position: relative; z-index: 20; flex: 0 0 auto; height: var(--appbar-h); padding: 0 20px;
  display: flex; align-items: stretch; gap: 28px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.appbar::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--brand-grad); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink-strong); flex-shrink: 0; padding-top: 3px; }
.brand img { display: block; height: 22px; width: auto; }
.brand-sep { width: 1px; height: 22px; background: var(--line); }
.brand-kira { display: grid; line-height: 1.05; }
.brand-kira b { font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.brand-kira small { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .01em; }

.appnav { display: flex; align-items: stretch; gap: 4px; padding-top: 3px; }
.appnav a {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; transition: color .15s;
}
.appnav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.appnav a:hover { color: var(--ink-strong); }
.appnav a[aria-current="page"] { color: var(--ink-strong); }
.appnav a[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand-grad); }
.appnav a[hidden] { display: none; }

.appbar-end { margin-left: auto; display: flex; align-items: center; gap: 12px; padding-top: 3px; }
.envtag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tint-ink); background: var(--tint); padding: 3px 8px; border-radius: 6px; }

.usermenu { position: relative; }
.usermenu summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 6px 4px 4px; border-radius: 999px; border: 1px solid transparent; }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu summary:hover, .usermenu[open] summary { border-color: var(--line); background: var(--soft); }
.usermenu .who { font-size: 13px; font-weight: 500; color: var(--ink); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu .caret { width: 14px; height: 14px; color: var(--muted); }
.avatar-user { width: 28px; height: 28px; border-radius: 50%; background: var(--ink-strong); color: var(--panel); display: grid; place-items: center; font-size: 12px; font-weight: 700; overflow: hidden; flex-shrink: 0; }
.avatar-user img { width: 100%; height: 100%; object-fit: cover; }
.usermenu .menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 260px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: grid;
}
.usermenu .menu-head { padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; display: grid; gap: 2px; }
.usermenu .menu-head b { font-size: 14px; color: var(--ink-strong); }
.usermenu .menu-head span { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.usermenu .menu-head em { font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.usermenu .menu button { width: 100%; text-align: left; display: flex; gap: 10px; align-items: center; border: 0; background: none; padding: 9px 10px; border-radius: 8px; color: var(--ink); font: 500 14px var(--font); cursor: pointer; }
.usermenu .menu button:hover { background: var(--soft); }
.usermenu .menu button svg { width: 16px; height: 16px; color: var(--muted); }

@media (max-width: 720px) {
  .appbar { padding: 0 12px; gap: 10px; }
  .brand { gap: 8px; }
  .brand img { height: 18px; }
  .brand-kira small, .envtag, .usermenu .who, .usermenu .caret { display: none; }
  .appnav a { padding: 0 9px; font-size: 13px; }
  .appnav a .long { display: none; }
}
@media (max-width: 420px) {
  .brand-sep, .brand-kira { display: none; }
  .appnav a svg { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }