/* ══════════════════════════════════════════════════════════════════
   Pinang Dashboard — Dark Neumorphism Design System
   Single source of truth untuk semua CSS tokens dan component classes
   ══════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ────────────────────────────────────────────────── */
:root {
  /* Surface tones — 3 layer depth */
  --bg:           #1E1E2E;   /* page background (was #313338) */
  --sidebar-bg:   #1A1A2C;   /* sidebar surface (was #2b2d31) */
  --server-bg:    #141420;   /* deepest: code bg, drawer (was #1e1f22) */
  --surface:      #252535;   /* mid: card, panel (was #383a40) */
  --surface-2:    #2A2A3E;   /* top: button resting, elevated (was #404249) */
  --border:       #14141F;   /* same as shadow-dark */

  /* Text */
  --text:         #E0E0F0;   /* primary (was #dbdee1) */
  --text-muted:   #8888AA;   /* labels, metadata (was #949ba4) */
  --text-dim:     #555570;   /* ghost, timestamps (was #6d6f78) */
  --name-user:    #c9a0dc;
  --name-claude:  #FF6B35;   /* accent orange (was #5865f2 Discord blue) */

  /* Chat bubbles */
  --user-bubble-bg:   #3A3A4C;   /* user message background */
  --strong-text:      #FFFFFF;   /* bold inside message */

  /* Input bar backdrop */
  --input-bar-bg: rgba(20, 20, 32, 0.82);

  /* Accent — orange warm */
  --accent:       #FF6B35;   /* (was #5865f2) */
  --accent-hover: #E55C28;   /* (was #4752c4) */

  /* Semantic */
  --green:        #23a55a;
  --red:          #f23f43;
  --orange:       #f0a232;

  /* Sidebar width + avatar */
  --sidebar-w:    240px;
  --avatar-size:  40px;

  /* ── Neumorphism Shadow Pair ──────────────────────────────────────── */
  --neu-shadow-dark:  #0a0a12;   /* darker than surface */
  --neu-shadow-light: #2a2a46;   /* lighter than surface */

  /* Border tints (white-overlay for dark; flipped to black-overlay in light theme) */
  --border-tint:        rgba(255, 255, 255, 0.04);
  --border-tint-strong: rgba(255, 255, 255, 0.08);

  /* Mobile address bar / OS chrome */
  color-scheme: dark;

  /* Shadow presets — 3 state system */
  --neu-shadow-raised:
    6px 6px 12px var(--neu-shadow-dark),
    -6px -6px 12px var(--neu-shadow-light);

  --neu-shadow-flat:
    2px 2px 5px var(--neu-shadow-dark),
    -2px -2px 5px var(--neu-shadow-light);

  --neu-shadow-inset:
    inset 4px 4px 8px var(--neu-shadow-dark),
    inset -4px -4px 8px var(--neu-shadow-light);

  --neu-shadow-glow:
    0 0 12px rgba(255, 107, 53, 0.25),
    6px 6px 12px var(--neu-shadow-dark),
    -6px -6px 12px var(--neu-shadow-light);

  --neu-shadow-pressed:
    inset 2px 2px 6px var(--neu-shadow-dark),
    inset -2px -2px 6px var(--neu-shadow-light);

  /* ── Accent Glow ─────────────────────────────────────────────────── */
  --neu-accent-glow: rgba(255, 107, 53, 0.25);

  /* ── Spacing Scale (8px grid) ────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ── Border Radius Scale ─────────────────────────────────────────── */
  --neu-radius-sm:   8px;    /* badge, chip, pill */
  --neu-radius-md:  14px;    /* button, input */
  --neu-radius-lg:  20px;    /* card, panel */
  --neu-radius-xl:  28px;    /* large card */
  --neu-radius-full: 50%;   /* icon button bulat */

  /* ── Transition ──────────────────────────────────────────────────── */
  --neu-transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Background gradients (tokenized untuk theme switch) ─────────── */
  --surface-grad:        linear-gradient(145deg, #171728, #1c1c2f);
  --accent-grad:         linear-gradient(145deg, #d04e1c, #ff7040);
}

/* ── Component: Card ─────────────────────────────────────────────── */
.neu-card {
  background: var(--surface);
  border-radius: var(--neu-radius-md);
  box-shadow: var(--neu-shadow-raised);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.neu-card:hover {
  box-shadow: var(--neu-shadow-flat);
}

/* ── Component: Button ───────────────────────────────────────────── */
.neu-btn {
  background: var(--surface-2);
  border-radius: var(--neu-radius-sm);
  box-shadow: var(--neu-shadow-raised);
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--neu-transition);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.neu-btn:hover:not(:disabled) {
  box-shadow: var(--neu-shadow-flat);
  color: var(--text);
}

.neu-btn:active:not(:disabled) {
  box-shadow: var(--neu-shadow-pressed);
  transform: scale(0.97);
}

.neu-btn:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: var(--neu-shadow-flat);
}

/* ── Component: Button — Accent (primary CTA) ────────────────────── */
.neu-btn--accent {
  background: var(--surface-2);
  box-shadow: var(--neu-shadow-glow);
  color: var(--accent);
  border: 1px solid rgba(255, 107, 53, 0.15);
}

.neu-btn--accent:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--neu-shadow-glow);
  border-color: transparent;
}

.neu-btn--accent:active:not(:disabled) {
  box-shadow: var(--neu-shadow-pressed);
  transform: scale(0.97);
}

.neu-btn--accent:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Component: Button — Danger ──────────────────────────────────── */
.neu-btn--danger {
  background: var(--red);
  box-shadow: var(--neu-shadow-flat);
  color: #fff;
  border: none;
}

.neu-btn--danger:hover:not(:disabled) {
  background: #c0313a;
  box-shadow: var(--neu-shadow-raised);
}

.neu-btn--danger:active:not(:disabled) {
  box-shadow: var(--neu-shadow-pressed);
  transform: scale(0.92);
}

/* ── Component: Input ────────────────────────────────────────────── */
.neu-input {
  background: var(--bg);
  border-radius: var(--neu-radius-sm);
  box-shadow: var(--neu-shadow-inset);
  border: 1px solid transparent;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.neu-input:focus-within {
  border-color: rgba(255, 107, 53, 0.4);
  box-shadow: var(--neu-shadow-inset), 0 0 0 2px rgba(255, 107, 53, 0.08);
}

/* ── Component: Pill (command / tool badge) ──────────────────────── */
.neu-pill {
  background: var(--surface-2);
  border-radius: 999px;
  box-shadow: var(--neu-shadow-flat);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  transition: var(--neu-transition);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.neu-pill:hover {
  box-shadow: var(--neu-shadow-raised);
  color: var(--text);
}

.neu-pill:active {
  box-shadow: var(--neu-shadow-pressed);
  transform: scale(0.93);
}

/* ── Component: Pill — Active (tool in use, accent state) ────────── */
.neu-pill--active {
  color: var(--accent);
  border-color: rgba(255, 107, 53, 0.25);
  box-shadow: var(--neu-shadow-flat), 0 0 8px rgba(255, 107, 53, 0.15);
}

/* Tool pill done — inert, no hover/tap response */
.tool-pill.done {
  pointer-events: none;
  cursor: default;
}

/* ── Component: Sidebar ──────────────────────────────────────────── */
.neu-sidebar {
  background: var(--sidebar-bg);
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.4);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}

/* ── Status Dot — Glow pulse via opacity only (no box-shadow animate) */
.sdot.online,
.sdot.ready {
  background: var(--green);
  box-shadow: 0 0 6px rgba(35, 165, 90, 0.5);
}

.sdot.errored,
.sdot.stopping {
  background: var(--red);
  box-shadow: 0 0 6px rgba(242, 63, 67, 0.5);
}

.sdot.launching,
.sdot.working {
  background: var(--orange);
  box-shadow: 0 0 6px rgba(240, 162, 50, 0.5);
  animation: sdot-pulse 1s ease infinite;
}

.sdot.offline,
.sdot.stopped {
  background: var(--text-dim);
  box-shadow: none;
}

@keyframes sdot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* ══════════════════════════════════════════════════════════════════
   LIGHT THEME — Cool Pearl
   Applied via <html data-theme="light"> — all components inherit
   automatically since they use design tokens.
   ══════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  /* Surfaces — 3 layer depth */
  --bg:           #E8EAF0;   /* page background */
  --sidebar-bg:   #DDE0E8;   /* sidebar surface */
  --server-bg:    #C8CCD8;   /* deepest: code bg, drawer */
  --surface:      #EEF0F5;   /* mid: card, panel */
  --surface-2:    #F5F6FA;   /* top: button resting, elevated */
  --border:       #BCC1CC;   /* same as shadow-dark */

  /* Text */
  --text:         #1F2230;   /* primary */
  --text-muted:   #5C6172;   /* labels, metadata */
  --text-dim:     #9CA2B0;   /* ghost, timestamps */
  --name-user:    #8855B0;   /* darker purple — readable on light */
  --name-claude:  #FF6B35;   /* accent orange (unchanged) */

  /* Chat bubbles */
  --user-bubble-bg:   #4A4C70;   /* user bubble — deep indigo, contrasts on light bg */
  --strong-text:      #1F2230;   /* bold inside Claude bubble (dark text on light surface) */

  /* Input bar backdrop */
  --input-bar-bg: rgba(220, 223, 232, 0.88);

  /* Accent — orange tetap brand identity */
  --accent:       #FF6B35;
  --accent-hover: #E55C28;

  /* Semantic — tetap, kontras cukup di light bg */
  --green:        #1E8E4E;
  --red:          #D63A3D;
  --orange:       #D88820;

  /* Shadow pair — flipped untuk neumorphism light */
  --neu-shadow-dark:  #BCC1CC;   /* soft gray drop shadow */
  --neu-shadow-light: #FFFFFF;   /* pure white highlight */

  /* Border tints — flipped to black-overlay */
  --border-tint:        rgba(0, 0, 0, 0.05);
  --border-tint-strong: rgba(0, 0, 0, 0.09);

  /* Accent glow — slightly softer di light */
  --neu-accent-glow: rgba(255, 107, 53, 0.20);

  /* Background gradient — Cool Pearl pearlescent */
  --surface-grad:        linear-gradient(145deg, #F4F5FA, #FBFCFE);
  --accent-grad:         linear-gradient(145deg, #FF6B35, #FF8855);

  color-scheme: light;
}

/* ── Light theme overrides — rgba(255,255,255,...) yang dipake utk border subtle ── */
:root[data-theme="light"] .neu-card,
:root[data-theme="light"] .neu-pill,
:root[data-theme="light"] .neu-pill--active {
  border-color: var(--border-tint);
}

:root[data-theme="light"] .neu-sidebar {
  border-right-color: var(--border-tint);
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
}

/* Scrollbar — darker thumb on light */
:root[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* Status dot glows — disesuaikan utk light */
:root[data-theme="light"] .sdot.online,
:root[data-theme="light"] .sdot.ready {
  box-shadow: 0 0 6px rgba(30, 142, 78, 0.45);
}
:root[data-theme="light"] .sdot.errored,
:root[data-theme="light"] .sdot.stopping {
  box-shadow: 0 0 6px rgba(214, 58, 61, 0.45);
}
:root[data-theme="light"] .sdot.launching,
:root[data-theme="light"] .sdot.working {
  box-shadow: 0 0 6px rgba(216, 136, 32, 0.45);
}