/* ══════════════════════════════════════════════
   NICK'S COMMAND — Royal Violet & Silver
   Sophisticated · Refined · Powerful
   ══════════════════════════════════════════════ */

/* Fonts loaded via link tag in HTML instead of blocking @import */

:root {
  /* ── Core Palette — Deep Plum Base ── */
  --bg: #0a080e;
  --bg-accent: #0e0b14;
  --bg-elevated: #131019;
  --bg-hover: #1a1622;
  --bg-muted: #1a1622;
  --card: #110e17;
  --card-foreground: #ece8f2;
  --card-highlight: #ffffff05;
  --popover: #131019;
  --popover-foreground: #ece8f2;
  --panel: #0a080e;
  --panel-strong: #131019;
  --panel-hover: #1a1622;
  --chrome: #0a080ef5;
  --chrome-strong: #0a080efa;

  /* ── Text — Warm Ivory ── */
  --text: #c4bdd0;
  --text-strong: #ece8f2;
  --chat-text: #c4bdd0;
  --muted: #564d68;
  --muted-strong: #3e3750;
  --muted-foreground: #564d68;

  /* ── Borders — Subtle Plum ── */
  --border: #1e1a2a;
  --border-strong: #2e2840;
  --border-hover: #3e3655;
  --input: #1e1a2a;

  /* ── Primary — Royal Amethyst ── */
  --ring: #9B7ADB;
  --accent: #9B7ADB;
  --accent-hover: #B49AE8;
  --accent-muted: #9B7ADB;
  --accent-subtle: rgba(155, 122, 219, 0.1);
  --accent-foreground: #0a080e;
  --accent-glow: rgba(155, 122, 219, 0.2);
  --primary: #9B7ADB;
  --primary-foreground: #fff;

  /* ── Secondary ── */
  --secondary: #110e17;
  --secondary-foreground: #ece8f2;

  /* ── Silver Accent ── */
  --accent-2: #A8A3B5;
  --accent-2-muted: rgba(168, 163, 181, 0.7);
  --accent-2-subtle: rgba(168, 163, 181, 0.1);

  /* ── Status — Muted Elegance ── */
  --ok: #7DD3A8;
  --ok-muted: rgba(125, 211, 168, 0.7);
  --ok-subtle: rgba(125, 211, 168, 0.08);
  --destructive: #E06070;
  --destructive-foreground: #fafafa;
  --warn: #D4A85C;
  --warn-muted: rgba(212, 168, 92, 0.7);
  --warn-subtle: rgba(212, 168, 92, 0.08);
  --danger: #E06070;
  --danger-muted: rgba(224, 96, 112, 0.7);
  --danger-subtle: rgba(224, 96, 112, 0.08);
  --info: #7A9BD4;
  --focus: rgba(155, 122, 219, 0.18);

  /* ── Shadows ── */
  --shadow-glow: 0 0 20px var(--accent-glow);

  /* ── Fonts ── */
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Cormorant Garamond', serif;
}

/* ── Body Font ── */
body {
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Subtle Background ── */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 60% 50% at 10% 0%, rgba(155, 122, 219, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 90% 90%, rgba(155, 122, 219, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ── Sidebar ── */
.shell-nav {
  border-right: 1px solid var(--border) !important;
  position: relative;
}

.shell-nav::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 10%,
    rgba(155, 122, 219, 0.25) 40%,
    rgba(155, 122, 219, 0.15) 70%,
    transparent 90%
  );
  pointer-events: none;
}

/* ── Brand — Serif Elegance ── */
.sidebar-brand__title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  font-size: 17px !important;
  color: #ece8f2 !important;
}

.sidebar-brand__eyebrow {
  color: var(--accent) !important;
  letter-spacing: 3px !important;
  font-size: 9px !important;
}

/* ── Nav Active — Soft Violet ── */
.nav-item.active,
.nav-item--active {
  background: rgba(155, 122, 219, 0.07) !important;
  border-color: rgba(155, 122, 219, 0.15) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,0.03),
    0 6px 18px rgba(0,0,0,0.25) !important;
}

.nav-item.active .nav-item__icon,
.nav-item--active .nav-item__icon {
  color: var(--accent) !important;
}

/* ── Collapsed Nav Indicator ── */
.sidebar--collapsed .nav-item--active:before,
.sidebar--collapsed .nav-item.active:before {
  background: var(--accent) !important;
  box-shadow: 0 0 12px rgba(155, 122, 219, 0.35) !important;
}

/* ── Connection Status ── */
.sidebar-version__dot {
  background: var(--ok) !important;
  box-shadow: 0 0 0 4px rgba(125, 211, 168, 0.12) !important;
}

.sidebar-version__status.sidebar-connection-status--online {
  background: var(--ok) !important;
  box-shadow: 0 0 0 4px rgba(125, 211, 168, 0.12) !important;
}

.statusDot.ok {
  background: var(--ok) !important;
  box-shadow: 0 0 8px rgba(125, 211, 168, 0.4) !important;
}

/* ── Page Titles — Serif ── */
.page-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  letter-spacing: 0.5px !important;
}

/* ── Chat Bubbles — Soft Violet ── */
.chat-group.user .chat-bubble {
  background: rgba(155, 122, 219, 0.08) !important;
  border-color: rgba(155, 122, 219, 0.12) !important;
}

.chat-group.user .chat-bubble:hover {
  background: rgba(155, 122, 219, 0.12) !important;
}

/* ── Send Button ── */
.chat-send-btn {
  background: linear-gradient(135deg, #7B5BBF, #9B7ADB) !important;
}

.chat-send-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #9B7ADB, #B49AE8) !important;
  box-shadow: 0 2px 16px rgba(155, 122, 219, 0.4) !important;
}

/* ── Primary Buttons ── */
.btn.primary {
  background: linear-gradient(135deg, #7B5BBF, #9B7ADB) !important;
  border-color: #9B7ADB !important;
  box-shadow: 0 1px 3px rgba(155, 122, 219, 0.25) !important;
}

.btn.primary:hover {
  background: linear-gradient(135deg, #9B7ADB, #B49AE8) !important;
  box-shadow: 0 2px 12px rgba(155, 122, 219, 0.35) !important;
}

/* ── Active / Toggle States ── */
.btn.active {
  border-color: var(--accent) !important;
  background: var(--accent-subtle) !important;
  color: var(--accent) !important;
}

.config-mode-toggle__btn.active {
  background: linear-gradient(135deg, #7B5BBF, #9B7ADB) !important;
  box-shadow: 0 1px 3px rgba(155, 122, 219, 0.25) !important;
}

.cfg-segmented__btn.active {
  background: linear-gradient(135deg, #7B5BBF, #9B7ADB) !important;
  box-shadow: 0 1px 3px rgba(155, 122, 219, 0.25) !important;
}

/* ── Toggles ── */
.cfg-toggle input:checked + .cfg-toggle__track {
  background: rgba(125, 211, 168, 0.1) !important;
  border-color: rgba(125, 211, 168, 0.3) !important;
}

.cfg-toggle input:checked + .cfg-toggle__track:after {
  background: var(--ok) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar-thumb {
  background: rgba(155, 122, 219, 0.12) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(155, 122, 219, 0.2) !important;
}

/* ── Selection ── */
::selection {
  background: rgba(155, 122, 219, 0.2) !important;
  color: #ece8f2 !important;
}

/* ── Stream Pulse ── */
@keyframes chatStreamPulse {
  0%, 100% { border-color: var(--border); }
  50% { border-color: rgba(155, 122, 219, 0.4); }
}

/* ── Welcome ── */
.agent-chat__welcome h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 24px !important;
  letter-spacing: 1px !important;
}

/* ── Tabs ── */
.agent-tab.active {
  background: var(--accent-subtle) !important;
  border-color: rgba(155, 122, 219, 0.2) !important;
  color: var(--accent) !important;
}

.config-top-tabs__tab.active {
  color: var(--accent) !important;
  border-color: rgba(155, 122, 219, 0.25) !important;
  background: var(--accent-subtle) !important;
}

/* ── Login ── */
.login-gate__title {
  font-family: 'Cormorant Garamond', serif !important;
  letter-spacing: 2px !important;
  font-size: 22px !important;
}

/* ── Cards Hover ── */
.ov-card:hover {
  border-color: rgba(155, 122, 219, 0.15) !important;
  box-shadow: 0 4px 20px rgba(155, 122, 219, 0.06) !important;
}

/* ── Config Section Icons ── */
.config-section-card__icon,
.config-section-hero__icon {
  color: var(--accent) !important;
  background: var(--accent-subtle) !important;
}

/* ── Links — Soft Violet ── */
a {
  color: var(--accent) !important;
}

a:hover {
  color: var(--accent-hover) !important;
}

/* ── Slash Menu ── */
.slash-menu-group__label,
.slash-menu-name {
  color: var(--accent) !important;
}

/* ══════════════════════════════════════
   CUSTOM BRANDING — SIMON · COMMAND
   ══════════════════════════════════════ */

/* ── Hide default logo image, replace with S monogram ── */
.sidebar-brand__logo {
  background: linear-gradient(135deg, #7B5BBF, #9B7ADB) !important;
  border: 1px solid rgba(155, 122, 219, 0.3) !important;
  box-shadow: 0 4px 16px rgba(155, 122, 219, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.sidebar-brand__logo img {
  display: none !important;
}

.sidebar-brand__logo::after {
  content: '👑';
  font-size: 19px;
  line-height: 1;
}

/* ── Override brand eyebrow (top line) → SIMON ── */
.sidebar-brand__eyebrow {
  font-size: 0 !important;
  line-height: 0 !important;
  order: -1 !important;
}

/* ── Brand container — center it ── */
.sidebar-brand__copy {
  align-items: center !important;
  text-align: center !important;
}

/* ── Eyebrow (top) → SIMON ── */
.sidebar-brand__eyebrow {
  font-size: 0 !important;
  line-height: 0 !important;
}

.sidebar-brand__eyebrow::after {
  content: 'SIMON';
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 17px !important;
  letter-spacing: 3px !important;
  color: #ece8f2 !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}

/* ── Title (bottom) → Control ── */
.sidebar-brand__title {
  font-size: 0 !important;
  line-height: 0 !important;
}

.sidebar-brand__title::after {
  content: 'Control';
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  color: var(--accent) !important;
  line-height: 1.2 !important;
  margin-left: -2px !important;
  display: inline-block !important;
}

/* ── Login screen title ── */
.login-gate__title {
  font-size: 0 !important;
}

.login-gate__title::after {
  content: 'Simon · Command';
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 22px !important;
  letter-spacing: 2px !important;
}

/* ── Collapsed sidebar — S monogram ── */
.sidebar--collapsed .sidebar-brand__logo {
  border-radius: 12px !important;
  width: 34px !important;
  height: 34px !important;
}

/* ── Welcome screen ── */
.agent-chat__welcome h2 {
  font-size: 0 !important;
}

.agent-chat__welcome h2::after {
  content: 'Simon · Command';
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 24px !important;
  letter-spacing: 1px !important;
}