/* ============================================
   EEVEELUTION — ANIME CHAT THEME
   ============================================
   This file is SAFE TO EDIT freely.
   Changes here only affect visuals — never auth or connectivity.
   ============================================ */

/* === THEME SELECTOR === */
.theme-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-family: 'Quicksand', sans-serif;
  cursor: pointer;
  outline: none;
}

.theme-select:hover {
  border-color: var(--accent);
}

/* === DEFAULT ANIME THEME === */
:root, .theme-anime {
  --bg-dark: #0d0d14;
  --bg-card: #161622;
  --bg-input: #1e1e2e;
  --accent: #7c3aed;       /* Purple accent */
  --accent-glow: #8b5cf6;
  --accent-secondary: #06b6d4; /* Cyan */
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --user-bubble: #2d1f4e;  /* Purple tint */
  --assistant-bubble: #1e293b; /* Dark blue */
  --border: #2e2e4a;
  --online: #10b981;
  --font-main: 'Quicksand', sans-serif;
}

/* === JRPG / GOLDEN SUN THEME === */
/* Inspired by Camelot's Golden Sun (GBA) — deep indigo menus, ornate gold borders */
.theme-jrpg {
  --bg-dark: #0c0e24;       /* Deep space indigo */
  --bg-card: #121638;       /* Menu panel blue */
  --bg-input: #1a1e48;      /* Lighter indigo */
  --accent: #e8a820;        /* Golden Sun amber */
  --accent-glow: #f0c850;   /* Bright gold */
  --accent-secondary: #d06030; /* Mars Djinn orange-red */
  --text: #e8e0d0;          /* Warm parchment white */
  --text-muted: #8088a8;    /* Muted lavender */
  --user-bubble: #1a2858;   /* Isaac's blue */
  --assistant-bubble: #141838; /* Deep menu blue */
  --border: #c8a028;        /* Gold border */
  --online: #58d878;        /* Venus Djinn green */
  --font-main: 'Courier New', monospace;

  /* Golden Sun-specific */
  --dialogue-border: 3px solid #c8a028;
  --dialogue-radius: 6px;
  --menu-bg: #121638;
  --cursor-color: #e8a820;
}

/* === JRPG PAPER/AGED DIALOGUE STYLE === */
/* Full parchment light theme — aged paper, ink, wood frames */
.theme-jrpg-paper {
  --bg-dark: #e8dcc8;        /* Warm parchment */
  --bg-card: #d4c4a8;        /* Darker parchment for header/input */
  --bg-input: #f2e8d5;       /* Light cream input */
  --accent: #8b0000;         /* Deep red ink */
  --accent-glow: #a0522d;    /* Sienna */
  --accent-secondary: #5c4033; /* Dark wood */
  --text: #2c1810;           /* Dark brown ink */
  --text-muted: #7a6652;     /* Faded ink */
  --user-bubble: #c8e6c9;    /* Soft green — player */
  --assistant-bubble: #fff8ee; /* Cream white — NPC dialogue */
  --border: #8b7355;         /* Leather/wood border */
  --online: #2e7d32;
  --font-main: 'Courier New', monospace;
}

/* Paper texture background — visible parchment grain */
body.theme-jrpg-paper::before {
  background:
    url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 28px,
      rgba(139, 115, 85, 0.08) 28px,
      rgba(139, 115, 85, 0.08) 29px
    ),
    linear-gradient(180deg, #efe3cf 0%, #e0d0b8 40%, #d8c8a8 100%);
  opacity: 1;
}

/* Wood-frame header */
.theme-jrpg-paper header {
  background:
    linear-gradient(180deg, #a0845c 0%, #8b7042 50%, #6b5530 100%);
  border-bottom: 4px solid #4a3520;
  font-family: var(--font-main);
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 4px 8px rgba(0,0,0,0.4);
}

.theme-jrpg-paper header h1 {
  background: linear-gradient(180deg, #fff8dc 0%, #f0e6c0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-main);
  font-size: 16px;
  letter-spacing: 3px;
}

/* Pixel-style avatar frames */
.theme-jrpg-paper .avatar {
  border: 3px solid #4a3520;
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.1);
  image-rendering: auto;
}

.theme-jrpg-paper .avatar.assistant {
  border-color: #8b0000;
}

.theme-jrpg-paper .avatar.user {
  border-color: #2e7d32;
}

.theme-jrpg-paper .avatar::after {
  border-color: var(--bg-dark);
}

/* Dialogue boxes — lined paper inside bubbles */
.theme-jrpg-paper .bubble {
  background: var(--assistant-bubble);
  border: 3px solid #4a3520;
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(74, 53, 32, 0.35);
  font-family: var(--font-main);
  color: var(--text);
  font-size: 14px;
  line-height: 22px;
  padding: 13px 18px 14px;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 21px,
      rgba(139, 115, 85, 0.25) 21px,
      rgba(139, 115, 85, 0.25) 22px
    );
  background-size: 100% 22px;
  background-position: 0 13px;
}

.theme-jrpg-paper .bubble p {
  line-height: 22px;
}

.theme-jrpg-paper .message.assistant .bubble {
  border-top-left-radius: 0;
}

.theme-jrpg-paper .message.user .bubble {
  background-color: var(--user-bubble);
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 21px,
      rgba(46, 89, 48, 0.2) 21px,
      rgba(46, 89, 48, 0.2) 22px
    );
  background-size: 100% 22px;
  background-position: 0 13px;
  border-color: #2e5930;
  border-top-right-radius: 0;
  box-shadow: 3px 3px 0 rgba(46, 89, 48, 0.3);
}

/* Wood-frame input bar */
.theme-jrpg-paper #input-area {
  background:
    linear-gradient(180deg, #6b5530 0%, #8b7042 50%, #a0845c 100%);
  border-top: 4px solid #4a3520;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.theme-jrpg-paper #message-input {
  background: #fff8ee;
  border: 3px solid #4a3520;
  border-radius: 2px;
  font-family: var(--font-main);
  color: var(--text);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.08);
}

.theme-jrpg-paper #message-input:focus {
  border-color: #8b0000;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.08), 0 0 0 2px rgba(139, 0, 0, 0.2);
}

.theme-jrpg-paper #message-input::placeholder {
  color: #a89880;
  font-style: italic;
}

.theme-jrpg-paper #send-btn {
  background: #8b0000;
  border: 3px solid #4a3520;
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
  color: #fff8dc;
}

.theme-jrpg-paper #send-btn:hover {
  background: #a52a2a;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
}

.theme-jrpg-paper #send-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.theme-jrpg-paper .icon-btn {
  border-radius: 2px;
  border: 2px solid #4a3520;
  background: #f2e8d5;
  color: #4a3520;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}

.theme-jrpg-paper .icon-btn:hover {
  background: #e0d0b0;
  color: #8b0000;
  transform: translate(-1px, -1px);
}

/* Status — ink dot */
.theme-jrpg-paper .status-dot {
  border-radius: 2px;
  border: 1px solid #4a3520;
}

.theme-jrpg-paper .status-dot.connected {
  background: #2e7d32;
  box-shadow: 0 0 4px #2e7d32;
}

.theme-jrpg-paper .status-dot.disconnected {
  background: #8b0000;
}

.theme-jrpg-paper .online-badge {
  color: #fff8dc;
}

.theme-jrpg-paper #signout-btn {
  border-color: rgba(255,248,220,0.3);
  color: #fff8dc;
}

.theme-jrpg-paper #signout-btn:hover {
  border-color: #8b0000;
  color: #ff6b6b;
}

/* Login — full parchment */
.theme-jrpg-paper #login-screen {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 28px,
      rgba(139, 115, 85, 0.06) 28px,
      rgba(139, 115, 85, 0.06) 29px
    ),
    linear-gradient(180deg, #efe3cf 0%, #d8c8a8 100%);
}

.theme-jrpg-paper #login-screen button {
  border: 3px solid #4a3520;
  border-radius: 2px;
  font-family: var(--font-main);
  background: #fff8ee;
  color: #2c1810;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.25);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.theme-jrpg-paper #login-screen button:hover {
  background: #8b0000;
  color: #fff8dc;
}

.theme-jrpg-paper #pairing-screen {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 28px,
      rgba(139, 115, 85, 0.06) 28px,
      rgba(139, 115, 85, 0.06) 29px
    ),
    linear-gradient(180deg, #efe3cf 0%, #d8c8a8 100%);
}

.theme-jrpg-paper #pairing-screen button {
  border: 3px solid #4a3520;
  border-radius: 2px;
  background: #8b0000;
  color: #fff8dc;
  font-family: var(--font-main);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.25);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.theme-jrpg-paper #pairing-screen button:hover {
  background: #a52a2a;
}

/* Code blocks — aged paper */
.theme-jrpg-paper pre {
  background: #f5ecd8;
  border: 2px solid #8b7355;
  border-radius: 2px;
  font-family: var(--font-main);
  color: #2c1810;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.05);
}

.theme-jrpg-paper .time {
  color: var(--text-muted);
}

/* Chat area background */
.theme-jrpg-paper #chat {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 28px,
      rgba(139, 115, 85, 0.05) 28px,
      rgba(139, 115, 85, 0.05) 29px
    );
}

/* Typing indicator — ink colored */
.theme-jrpg-paper .typing-indicator span {
  background: #8b0000;
}

/* Theme selector in paper style */
.theme-jrpg-paper .theme-select {
  background: #fff8ee;
  border: 2px solid #4a3520;
  border-color: rgba(255,248,220,0.3);
  color: #fff8dc;
  font-family: var(--font-main);
  background: rgba(255,248,238,0.15);
}

/* ═══════════════════════════════════════════════════════════
   PAPER VARIANT 2: FULL PAGE
   Lines run across the entire chat area like a notebook page.
   Bubbles are borderless and sit directly on the lines.
   ═══════════════════════════════════════════════════════════ */
.theme-jrpg-paper-full {
  --bg-dark: #f0e6d0;
  --bg-card: #d4c4a8;
  --bg-input: #f2e8d5;
  --accent: #8b0000;
  --accent-glow: #a0522d;
  --accent-secondary: #5c4033;
  --text: #2c1810;
  --text-muted: #7a6652;
  --user-bubble: transparent;
  --assistant-bubble: transparent;
  --border: #8b7355;
  --online: #2e7d32;
  --font-main: 'Courier New', monospace;
}

body.theme-jrpg-paper-full::before {
  background:
    linear-gradient(180deg, #f0e6d0 0%, #e8dcc0 100%);
  opacity: 1;
}

/* Full-page ruled lines on chat */
.theme-jrpg-paper-full #chat {
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 21px,
      rgba(139, 115, 85, 0.3) 21px,
      rgba(139, 115, 85, 0.3) 22px
    );
  background-size: 100% 22px;
  background-attachment: local;
  /* Left margin red line like a real notebook */
  border-left: 2px solid rgba(180, 60, 60, 0.3);
  margin-left: 20px;
  padding-left: 12px;
}

/* Borderless bubbles — text floats on the page */
.theme-jrpg-paper-full .bubble {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-main);
  color: var(--text);
  font-size: 14px;
  line-height: 22px;
  padding: 0 8px;
}

.theme-jrpg-paper-full .bubble p {
  line-height: 22px;
}

.theme-jrpg-paper-full .message.user .bubble {
  color: #1a4a8a;
}

.theme-jrpg-paper-full .message.assistant .bubble {
  color: var(--text);
}

/* Minimal avatar styling */
.theme-jrpg-paper-full .avatar {
  border: 2px solid #8b7355;
  border-radius: 2px;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.15);
  opacity: 0.85;
}

.theme-jrpg-paper-full .avatar::after {
  border-color: var(--bg-dark);
}

/* Header — simple brown bar */
.theme-jrpg-paper-full header {
  background: linear-gradient(180deg, #a0845c 0%, #8b7042 50%, #6b5530 100%);
  border-bottom: 3px solid #4a3520;
  font-family: var(--font-main);
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.theme-jrpg-paper-full header h1 {
  background: linear-gradient(180deg, #fff8dc 0%, #f0e6c0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-main);
  font-size: 16px;
}

/* Input bar */
.theme-jrpg-paper-full #input-area {
  background: linear-gradient(180deg, #6b5530 0%, #8b7042 50%, #a0845c 100%);
  border-top: 3px solid #4a3520;
}

.theme-jrpg-paper-full #message-input {
  background: #fff8ee;
  border: 2px solid #4a3520;
  border-radius: 2px;
  font-family: var(--font-main);
  color: var(--text);
  line-height: 22px;
}

.theme-jrpg-paper-full #message-input:focus {
  border-color: #8b0000;
  box-shadow: 0 0 0 2px rgba(139, 0, 0, 0.2);
}

.theme-jrpg-paper-full #message-input::placeholder {
  color: #a89880;
  font-style: italic;
}

.theme-jrpg-paper-full #send-btn {
  background: #8b0000;
  border: 2px solid #4a3520;
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
  color: #fff8dc;
}

.theme-jrpg-paper-full .icon-btn {
  border-radius: 2px;
  border: 2px solid #4a3520;
  background: #f2e8d5;
  color: #4a3520;
}

.theme-jrpg-paper-full .status-dot { border-radius: 2px; }
.theme-jrpg-paper-full .status-dot.connected { background: #2e7d32; box-shadow: 0 0 4px #2e7d32; }
.theme-jrpg-paper-full .online-badge { color: #fff8dc; }
.theme-jrpg-paper-full #signout-btn { border-color: rgba(255,248,220,0.3); color: #fff8dc; }

.theme-jrpg-paper-full #login-screen,
.theme-jrpg-paper-full #pairing-screen {
  background: linear-gradient(180deg, #f0e6d0 0%, #e0d0b8 100%);
}

.theme-jrpg-paper-full #login-screen button,
.theme-jrpg-paper-full #pairing-screen button {
  border: 3px solid #4a3520;
  border-radius: 2px;
  font-family: var(--font-main);
  background: #fff8ee;
  color: #2c1810;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
  text-transform: uppercase;
}

.theme-jrpg-paper-full #login-screen button:hover,
.theme-jrpg-paper-full #pairing-screen button:hover {
  background: #8b0000;
  color: #fff8dc;
}

.theme-jrpg-paper-full pre {
  background: rgba(245, 236, 216, 0.5);
  border: 1px solid #8b7355;
  border-radius: 0;
  font-family: var(--font-main);
  color: #2c1810;
}

.theme-jrpg-paper-full .time { color: #a89880; }
.theme-jrpg-paper-full .typing-indicator span { background: #8b0000; }

.theme-jrpg-paper-full .theme-select {
  background: rgba(255,248,238,0.15);
  border-color: rgba(255,248,220,0.3);
  color: #fff8dc;
  font-family: var(--font-main);
}

/* ═══════════════════════════════════════════════════════════
   PAPER VARIANT 3: BLEEDTHROUGH
   Lines on the chat background bleed through semi-transparent
   bubbles. Everything feels like one continuous sheet.
   ═══════════════════════════════════════════════════════════ */
.theme-jrpg-paper-bleed {
  --bg-dark: #e8dcc8;
  --bg-card: #d4c4a8;
  --bg-input: #f2e8d5;
  --accent: #8b0000;
  --accent-glow: #a0522d;
  --accent-secondary: #5c4033;
  --text: #2c1810;
  --text-muted: #7a6652;
  --user-bubble: rgba(200, 220, 200, 0.45);
  --assistant-bubble: rgba(255, 252, 242, 0.5);
  --border: #8b7355;
  --online: #2e7d32;
  --font-main: 'Courier New', monospace;
}

body.theme-jrpg-paper-bleed::before {
  background: linear-gradient(180deg, #efe3cf 0%, #e0d0b8 40%, #d8c8a8 100%);
  opacity: 1;
}

/* Ruled lines on the whole chat — bubbles are translucent */
.theme-jrpg-paper-bleed #chat {
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 21px,
      rgba(139, 115, 85, 0.25) 21px,
      rgba(139, 115, 85, 0.25) 22px
    );
  background-size: 100% 22px;
  background-attachment: local;
}

/* Translucent bubbles — lines show through */
.theme-jrpg-paper-bleed .bubble {
  background: var(--assistant-bubble);
  border: 2px solid rgba(74, 53, 32, 0.25);
  border-radius: 4px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.08);
  font-family: var(--font-main);
  color: var(--text);
  font-size: 14px;
  line-height: 22px;
  backdrop-filter: blur(1px);
}

.theme-jrpg-paper-bleed .bubble p {
  line-height: 22px;
}

.theme-jrpg-paper-bleed .message.assistant .bubble {
  border-top-left-radius: 0;
}

.theme-jrpg-paper-bleed .message.user .bubble {
  background: var(--user-bubble);
  border-color: rgba(46, 89, 48, 0.3);
  border-top-right-radius: 0;
}

/* Avatar */
.theme-jrpg-paper-bleed .avatar {
  border: 2px solid rgba(74, 53, 32, 0.4);
  border-radius: 4px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
}

.theme-jrpg-paper-bleed .avatar::after {
  border-color: var(--bg-dark);
}

/* Header */
.theme-jrpg-paper-bleed header {
  background: linear-gradient(180deg, #a0845c 0%, #8b7042 50%, #6b5530 100%);
  border-bottom: 3px solid #4a3520;
  font-family: var(--font-main);
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 3px 8px rgba(0,0,0,0.3);
}

.theme-jrpg-paper-bleed header h1 {
  background: linear-gradient(180deg, #fff8dc 0%, #f0e6c0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-main);
  font-size: 16px;
}

/* Input */
.theme-jrpg-paper-bleed #input-area {
  background: linear-gradient(180deg, #6b5530 0%, #8b7042 50%, #a0845c 100%);
  border-top: 3px solid #4a3520;
}

.theme-jrpg-paper-bleed #message-input {
  background: rgba(255, 248, 238, 0.8);
  border: 2px solid #4a3520;
  border-radius: 2px;
  font-family: var(--font-main);
  color: var(--text);
  line-height: 22px;
}

.theme-jrpg-paper-bleed #message-input:focus {
  border-color: #8b0000;
  box-shadow: 0 0 0 2px rgba(139, 0, 0, 0.2);
}

.theme-jrpg-paper-bleed #message-input::placeholder {
  color: #a89880;
  font-style: italic;
}

.theme-jrpg-paper-bleed #send-btn {
  background: #8b0000;
  border: 2px solid #4a3520;
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
  color: #fff8dc;
}

.theme-jrpg-paper-bleed .icon-btn {
  border-radius: 2px;
  border: 2px solid #4a3520;
  background: rgba(242, 232, 213, 0.8);
  color: #4a3520;
}

.theme-jrpg-paper-bleed .status-dot { border-radius: 2px; }
.theme-jrpg-paper-bleed .status-dot.connected { background: #2e7d32; box-shadow: 0 0 4px #2e7d32; }
.theme-jrpg-paper-bleed .online-badge { color: #fff8dc; }
.theme-jrpg-paper-bleed #signout-btn { border-color: rgba(255,248,220,0.3); color: #fff8dc; }

.theme-jrpg-paper-bleed #login-screen,
.theme-jrpg-paper-bleed #pairing-screen {
  background: linear-gradient(180deg, #efe3cf 0%, #d8c8a8 100%);
}

.theme-jrpg-paper-bleed #login-screen button,
.theme-jrpg-paper-bleed #pairing-screen button {
  border: 3px solid #4a3520;
  border-radius: 2px;
  font-family: var(--font-main);
  background: #fff8ee;
  color: #2c1810;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
  text-transform: uppercase;
}

.theme-jrpg-paper-bleed #login-screen button:hover,
.theme-jrpg-paper-bleed #pairing-screen button:hover {
  background: #8b0000;
  color: #fff8dc;
}

.theme-jrpg-paper-bleed pre {
  background: rgba(245, 236, 216, 0.6);
  border: 1px solid rgba(139, 115, 85, 0.4);
  border-radius: 2px;
  font-family: var(--font-main);
  color: #2c1810;
}

.theme-jrpg-paper-bleed .time { color: #a89880; }
.theme-jrpg-paper-bleed .typing-indicator span { background: #8b0000; }

.theme-jrpg-paper-bleed .theme-select {
  background: rgba(255,248,238,0.15);
  border-color: rgba(255,248,220,0.3);
  color: #fff8dc;
  font-family: var(--font-main);
}

/* ============================================
   BRUTALIST THEME — Raw, exposed, zero decoration
   Hard geometry, monospace, industrial
   ============================================ */
.theme-brutalist {
  --bg-dark: #000000;
  --bg-card: #0a0a0a;
  --bg-input: #111111;
  --accent: #ff4400;
  --accent-glow: #ff6633;
  --accent-secondary: #ffffff;
  --text: #f0f0f0;
  --text-muted: #666666;
  --user-bubble: #111111;
  --assistant-bubble: #080808;
  --border: #333333;
  --online: #00ff00;
  --font-main: 'Space Grotesk', 'Arial Black', Helvetica, sans-serif;
}

body.theme-brutalist { cursor: crosshair; }
body.theme-brutalist ::selection { background: #ff4400; color: #000; }

/* Grid overlay */
body.theme-brutalist::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(255,68,0,0.04) 1px, transparent 1px),
    linear-gradient(rgba(255,68,0,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Header — heavy, industrial */
.theme-brutalist header {
  border-radius: 0;
  border-bottom: 4px solid #fff;
  background: #000;
  padding: 12px 20px;
}
.theme-brutalist header h1 {
  font-family: 'Orbitron', 'Space Grotesk', sans-serif;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 16px;
  -webkit-text-fill-color: #fff;
  background: none;
}
.theme-brutalist .header-info { gap: 8px; }
.theme-brutalist .team-state-btn {
  border-radius: 0;
  border: 2px solid #444;
  background: #000;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  padding: 6px 10px;
}
.theme-brutalist .team-state-btn:hover {
  border-color: #666;
}
.theme-brutalist .team-state-btn.active {
  background: #ff4400;
  border-color: #ff4400;
  color: white;
}
.theme-brutalist .theme-select {
  border-radius: 0;
  border: 2px solid #666;
  background: #000;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.theme-brutalist #signout-btn {
  border-radius: 0;
  border: 2px solid #666;
  background: #000;
  color: #666;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
}

/* Bottom nav — stark tabs with underline indicator */
.theme-brutalist #bottom-nav {
  border-radius: 0;
  border-top: 3px solid #333;
  background: #000;
  gap: 0;
}
.theme-brutalist .nav-tab {
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  transition: border-color 0.1s;
}
.theme-brutalist .nav-tab.active {
  color: #ff4400;
  background: transparent;
  border-bottom: 3px solid #ff4400;
}

/* Messages — no curves, harsh borders */
.theme-brutalist .message {
  border-radius: 0;
  max-width: 85%;
  animation: none;
}
.theme-brutalist .message.user { max-width: 75%; }
.theme-brutalist .bubble {
  border-radius: 0;
  padding: 12px 16px;
  box-shadow: none;
}
.theme-brutalist .message.user .bubble {
  border-right: 4px solid #fff;
  border-radius: 0;
  background: #111;
}
.theme-brutalist .message.assistant .bubble {
  border-left: 4px solid #ff4400;
  border-radius: 0;
  background: #080808;
  font-family: 'Space Grotesk', sans-serif;
}
.theme-brutalist .message.relay-claude .bubble {
  background: #000;
  border: 2px solid #ff4400;
  border-left: 4px solid #ff4400;
  color: #f0f0f0;
  font-family: 'JetBrains Mono', monospace;
  border-radius: 0;
}
.theme-brutalist .bubble .time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.theme-brutalist .avatar {
  border-radius: 0;
  border: 2px solid #333;
}

/* Input — raw rectangle */
.theme-brutalist #input-area {
  border-top: 3px solid #333;
  background: #000;
  padding: 12px 16px;
}
.theme-brutalist #message-input {
  border-radius: 0;
  border: 2px solid #444;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  padding: 12px 16px;
  background: #0a0a0a;
}
.theme-brutalist #message-input:focus {
  border-color: #ff4400;
  box-shadow: none;
}
.theme-brutalist #message-input::placeholder {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
}
@keyframes brutalist-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,68,0,0.6); }
  50% { box-shadow: 0 0 0 6px rgba(255,68,0,0); }
}
.theme-brutalist #send-btn {
  border-radius: 0;
  width: 48px;
  height: 44px;
  background: #ff4400;
  border: 2px solid #ff4400;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  box-shadow: none;
  animation: brutalist-pulse 2s ease-in-out infinite;
  position: relative;
}
.theme-brutalist #send-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(255,68,0,0.3);
}
.theme-brutalist #send-btn:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
  transform: none;
  animation: none;
}
.theme-brutalist #send-btn:hover::after { border-color: rgba(255,255,255,0.3); }
.theme-brutalist #send-btn:active {
  background: #ff4400;
  color: #fff;
  transform: scale(0.92);
}
.theme-brutalist .icon-btn {
  border-radius: 0;
  border: 2px solid #333;
  background: #0a0a0a;
}
.theme-brutalist .icon-btn:hover {
  background: #ff4400;
  border-color: #ff4400;
  transform: none;
}

/* Ops tab — exposed structure */
.theme-brutalist .ops-section-title {
  font-family: 'Orbitron', 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: 0.15em;
  font-size: 11px;
  color: #ff4400;
  border-bottom: 2px solid #333;
  padding-bottom: 6px;
}
.theme-brutalist .ops-pill {
  border-radius: 0;
  border: 2px solid #444;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  padding: 6px 12px;
}
.theme-brutalist .ops-pill:active {
  background: #ff4400;
  border-color: #ff4400;
}
.theme-brutalist .ops-proposal {
  border-radius: 0;
  border: 2px solid #333;
  background: #0a0a0a;
}
.theme-brutalist .ops-proposal-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.theme-brutalist .ops-btn {
  border-radius: 0;
  border: 2px solid #444;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: none;
}
.theme-brutalist .ops-btn.approve {
  border: 2px solid #00ff00;
  background: #001a00;
  color: #00ff00;
}
.theme-brutalist .ops-btn.reject {
  border: 2px solid #ff0000;
  background: #1a0000;
  color: #ff0000;
}
.theme-brutalist .ops-btn.shelve {
  border: 2px solid #666;
  background: #111;
  color: #999;
}
.theme-brutalist .ops-budget {
  border-radius: 0;
  height: 8px;
  border: 1px solid #333;
  background: #0a0a0a;
}
.theme-brutalist .ops-budget-fill {
  border-radius: 0;
  background: #ff4400;
}
.theme-brutalist .ops-brief {
  border-radius: 0;
  border: 2px solid #333;
  font-family: 'Space Grotesk', sans-serif;
}

/* Settings — raw boxes */
.theme-brutalist .settings-section {
  border: 2px solid #222;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 0;
}
.theme-brutalist .settings-section-title {
  font-family: 'Orbitron', 'Space Grotesk', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 11px;
  color: #ff4400;
}
.theme-brutalist .settings-toggle {
  border-radius: 0;
  border: 2px solid #444;
}
.theme-brutalist .settings-toggle.active {
  background: #ff4400;
  border-color: #ff4400;
}
.theme-brutalist .settings-toggle::after {
  border-radius: 0;
}
.theme-brutalist .theme-preview-card {
  border-radius: 0;
  border: 2px solid #333;
}
.theme-brutalist .theme-preview-card.active {
  border-color: #ff4400;
}

/* History tab */
.theme-brutalist .history-search-input {
  border-radius: 0;
  border: 2px solid #444;
  font-family: 'JetBrains Mono', monospace;
}
.theme-brutalist .history-filter-btn {
  border-radius: 0;
  border: 2px solid #333;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  font-size: 10px;
}
.theme-brutalist .history-export-btn {
  border-radius: 0;
  border: 2px solid #ff4400;
  color: #ff4400;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
}

/* Terminal tab */
.theme-brutalist #term-header {
  border-bottom: 2px solid #333;
  border-radius: 0;
}
.theme-brutalist .term-key {
  border-radius: 0;
  border: 1px solid #444;
}

/* Scrollbar */
.theme-brutalist ::-webkit-scrollbar { width: 8px; }
.theme-brutalist ::-webkit-scrollbar-track { background: #000; }
.theme-brutalist ::-webkit-scrollbar-thumb { background: #333; border-radius: 0; }
.theme-brutalist ::-webkit-scrollbar-thumb:hover { background: #ff4400; }

/* Typing indicator */
.theme-brutalist .typing-indicator span {
  border-radius: 0;
  background: #ff4400;
  width: 6px;
  height: 6px;
}

/* Date separator */
.theme-brutalist .date-separator {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 10px;
}

/* Code blocks */
.theme-brutalist .bubble .md-codeblock {
  border-radius: 0;
  border: 1px solid #333;
}
.theme-brutalist .bubble .md-codeblock-header {
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
}
.theme-brutalist .bubble .md-code {
  border-radius: 0;
  background: #1a1a1a;
  border: 1px solid #333;
}

/* Relay messages */
.theme-brutalist .relay-from {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.15em;
  font-size: 0.7em;
}


/* ============================================
   GLITCH THEME — CRT monitor, cyberpunk, neon
   Scanlines, chromatic aberration, digital decay
   ============================================ */
.theme-glitch {
  --bg-dark: #05050a;
  --bg-card: #080810;
  --bg-input: #0c0c16;
  --accent: #00f0ff;
  --accent-glow: #ff00aa;
  --accent-secondary: #39ff14;
  --text: #b8b8cc;
  --text-muted: #44445a;
  --user-bubble: #0c0c1e;
  --assistant-bubble: #08080f;
  --border: #161630;
  --online: #39ff14;
  --font-main: 'Share Tech Mono', monospace;
}

body.theme-glitch { cursor: crosshair; }
body.theme-glitch ::selection { background: #ff00aa; color: #05050a; }

/* CRT scanlines */
body.theme-glitch::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 4px);
}

/* CRT vignette */
body.theme-glitch::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.7) 100%);
}

/* Glitch animations */
@keyframes glitch-text {
  0%, 100% { text-shadow: -2px 0 #00f0ff, 2px 0 #ff00aa; }
  25% { text-shadow: 2px 0 #00f0ff, -2px 0 #ff00aa; }
  50% { text-shadow: -1px 2px #00f0ff, 1px -2px #ff00aa; }
  75% { text-shadow: 1px -1px #00f0ff, -1px 1px #ff00aa; }
}

@keyframes glitch-in {
  0% { opacity: 0; transform: skew(-2deg) translateX(-10px); clip-path: inset(0 100% 0 0); }
  20% { opacity: 1; clip-path: inset(0 20% 0 0); }
  40% { transform: skew(1deg) translateX(3px); clip-path: inset(0 0 0 0); }
  60% { transform: skew(-0.5deg) translateX(-2px); }
  100% { transform: skew(0deg) translateX(0); }
}

@keyframes neon-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes scan-line {
  0% { top: -5%; }
  100% { top: 105%; }
}

/* Header — minimal, neon glow */
.theme-glitch header {
  border-bottom: 1px solid #161630;
  box-shadow: 0 2px 20px rgba(0,240,255,0.08);
  background: linear-gradient(180deg, #0a0a14 0%, #06060c 100%);
  padding: 10px 16px;
}
.theme-glitch header h1 {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2em;
  animation: glitch-text 4s ease-in-out infinite;
  -webkit-text-fill-color: #00f0ff;
  background: none;
}
.theme-glitch .status-dot.connected {
  box-shadow: 0 0 8px #39ff14, 0 0 20px rgba(57,255,20,0.3);
}
.theme-glitch .team-state-btn {
  border-radius: 2px;
  border: 1px solid #222244;
  background: #0a0a14;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #b8b8cc;
  text-transform: uppercase;
  padding: 5px 10px;
}
.theme-glitch .team-state-btn:hover {
  border-color: #00f0ff;
  box-shadow: 0 0 8px rgba(0,240,255,0.1);
}
.theme-glitch .team-state-btn.active {
  background: #00f0ff;
  color: #05050a;
  border-color: #00f0ff;
  box-shadow: 0 0 12px rgba(0,240,255,0.2);
}
.theme-glitch .theme-select {
  border-radius: 2px;
  border: 1px solid #222244;
  background: #08080f;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #00f0ff;
  text-transform: uppercase;
}
.theme-glitch #signout-btn {
  border-radius: 2px;
  border: 1px solid #222244;
  background: transparent;
  color: #44445a;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
}

/* Bottom nav — neon underline tabs */
.theme-glitch #bottom-nav {
  border-top: 1px solid #161630;
  background: #06060c;
  position: relative;
}
.theme-glitch .nav-tab {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 0;
  color: #44445a;
  position: relative;
  transition: color 0.3s, text-shadow 0.3s;
}
.theme-glitch .nav-tab.active {
  color: #00f0ff;
  background: transparent;
  text-shadow: 0 0 10px rgba(0,240,255,0.5);
}
.theme-glitch .nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: #00f0ff;
  box-shadow: 0 0 8px #00f0ff, 0 0 20px rgba(0,240,255,0.3);
}

/* Messages — floating in void with glow */
.theme-glitch .message {
  animation: glitch-in 0.4s ease-out;
}
.theme-glitch .bubble {
  border-radius: 3px;
  padding: 12px 16px;
  box-shadow: 0 0 1px rgba(0,240,255,0.1);
  position: relative;
}
.theme-glitch .message.user .bubble {
  border: 1px solid rgba(0,240,255,0.25);
  box-shadow: 0 0 12px rgba(0,240,255,0.1), inset 0 0 20px rgba(0,240,255,0.03);
  border-radius: 3px;
  background: #0c0c1e;
}
.theme-glitch .message.assistant .bubble {
  border: 1px solid #161630;
  border-left: 2px solid #ff00aa;
  border-radius: 3px;
  background: #08080f;
  box-shadow: -2px 0 10px rgba(255,0,170,0.08);
}
.theme-glitch .message.relay-claude .bubble {
  background: #0a0a14;
  border: 1px solid rgba(0,240,255,0.3);
  box-shadow: 0 0 15px rgba(0,240,255,0.15), inset 0 0 8px rgba(0,240,255,0.03);
  font-family: 'Share Tech Mono', monospace;
  border-radius: 3px;
}
.theme-glitch .bubble .time {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: #333350;
}
.theme-glitch .avatar {
  border-radius: 4px;
  border: 1px solid #222244;
  box-shadow: 0 0 8px rgba(0,240,255,0.15);
}

/* Input — thin, glowing */
.theme-glitch #input-area {
  border-top: 1px solid #161630;
  background: #06060c;
  padding: 10px 14px;
}
.theme-glitch #message-input {
  border-radius: 3px;
  border: 1px solid #222244;
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  padding: 10px 16px;
  background: #0a0a14;
  color: #b8b8cc;
}
.theme-glitch #message-input:focus {
  border-color: #00f0ff;
  box-shadow: 0 0 12px rgba(0,240,255,0.15), inset 0 0 4px rgba(0,240,255,0.05);
}
.theme-glitch #message-input::placeholder {
  color: #333350;
  font-family: 'Share Tech Mono', monospace;
}
@keyframes glitch-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(0,240,255,0.2), 0 0 2px rgba(255,0,170,0); }
  33% { box-shadow: 0 0 12px rgba(0,240,255,0.3), -2px 0 4px rgba(255,0,170,0.2); }
  66% { box-shadow: 0 0 8px rgba(0,240,255,0.15), 2px 0 4px rgba(255,0,170,0.15); }
}
@keyframes glitch-flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.7; transform: translateX(-1px); }
  95% { opacity: 1; transform: translateX(1px); }
  97% { opacity: 0.8; }
}
.theme-glitch #send-btn {
  border-radius: 3px;
  width: 44px;
  height: 40px;
  background: transparent;
  border: 1px solid #00f0ff;
  color: #00f0ff;
  font-family: 'Share Tech Mono', monospace;
  transition: all 0.15s;
  animation: glitch-glow 3s ease-in-out infinite, glitch-flicker 8s linear infinite;
  position: relative;
}
.theme-glitch #send-btn::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(255,0,170,0.15);
  border-radius: 3px;
  transform: translate(2px, -1px);
  pointer-events: none;
}
.theme-glitch #send-btn:hover {
  background: #00f0ff;
  color: #05050a;
  box-shadow: 0 0 25px rgba(0,240,255,0.5), 0 0 50px rgba(0,240,255,0.15);
  transform: none;
  animation: none;
  text-shadow: 0 0 4px rgba(0,240,255,0.5);
}
.theme-glitch #send-btn:hover::before { border-color: transparent; }
.theme-glitch #send-btn:active {
  transform: scale(0.9) skew(-2deg);
  box-shadow: 0 0 30px rgba(255,0,170,0.4);
  background: #ff00aa;
  border-color: #ff00aa;
}
.theme-glitch .icon-btn {
  border-radius: 3px;
  border: 1px solid #222244;
  background: #0a0a14;
}
.theme-glitch .icon-btn:hover {
  border-color: #ff00aa;
  background: transparent;
  box-shadow: 0 0 10px rgba(255,0,170,0.2);
  color: #ff00aa;
  transform: none;
}

/* Ops tab — terminal/matrix style */
.theme-glitch .ops-section-title {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.15em;
  font-size: 11px;
  color: #00f0ff;
  text-shadow: 0 0 6px rgba(0,240,255,0.3);
  border-bottom: 1px solid #161630;
  padding-bottom: 6px;
}
.theme-glitch .ops-pill {
  border-radius: 2px;
  border: 1px solid #222244;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  padding: 5px 12px;
  background: #0a0a14;
}
.theme-glitch .ops-pill:active {
  background: #00f0ff;
  color: #05050a;
  border-color: #00f0ff;
}
.theme-glitch .ops-proposal {
  border-radius: 3px;
  border: 1px solid #161630;
  background: #0a0a14;
}
.theme-glitch .ops-proposal:hover {
  border-color: #222244;
  box-shadow: 0 0 8px rgba(0,240,255,0.05);
}
.theme-glitch .ops-proposal-title {
  font-family: 'Share Tech Mono', monospace;
  color: #b8b8cc;
}
.theme-glitch .ops-btn {
  border-radius: 2px;
  border: 1px solid #222244;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  background: #0a0a14;
}
.theme-glitch .ops-btn.approve {
  border: 1px solid #39ff14;
  background: transparent;
  color: #39ff14;
  box-shadow: 0 0 6px rgba(57,255,20,0.15);
}
.theme-glitch .ops-btn.approve:hover {
  background: rgba(57,255,20,0.1);
}
.theme-glitch .ops-btn.reject {
  border: 1px solid #ff3355;
  background: transparent;
  color: #ff3355;
}
.theme-glitch .ops-btn.shelve {
  border: 1px solid #44445a;
  background: transparent;
  color: #666680;
}
.theme-glitch .ops-budget {
  border-radius: 2px;
  height: 4px;
  background: #0e0e18;
  border: 1px solid #161630;
}
.theme-glitch .ops-budget-fill {
  border-radius: 0;
  background: linear-gradient(90deg, #00f0ff, #ff00aa);
  box-shadow: 0 0 8px rgba(0,240,255,0.3);
}
.theme-glitch .ops-brief {
  border-radius: 3px;
  border: 1px solid #161630;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  line-height: 1.7;
}

/* Settings — dark panels */
.theme-glitch .settings-section {
  border: 1px solid #161630;
  border-radius: 3px;
  padding: 14px;
  margin-bottom: 14px;
  background: #08080f;
}
.theme-glitch .settings-section-title {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 11px;
  color: #00f0ff;
}
.theme-glitch .settings-toggle {
  border-radius: 12px;
  border: 1px solid #222244;
  background: #0e0e18;
}
.theme-glitch .settings-toggle.active {
  background: #00f0ff;
  border-color: #00f0ff;
  box-shadow: 0 0 10px rgba(0,240,255,0.3);
}
.theme-glitch .theme-preview-card {
  border-radius: 3px;
  border: 1px solid #161630;
  background: #0a0a14;
}
.theme-glitch .theme-preview-card.active {
  border-color: #00f0ff;
  box-shadow: 0 0 10px rgba(0,240,255,0.2);
}

/* History tab */
.theme-glitch .history-search-input {
  border-radius: 3px;
  border: 1px solid #222244;
  background: #0a0a14;
  font-family: 'Share Tech Mono', monospace;
  color: #b8b8cc;
}
.theme-glitch .history-filter-btn {
  border-radius: 2px;
  border: 1px solid #161630;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
}
.theme-glitch .history-filter-btn.filter-active {
  border-color: #00f0ff;
  color: #00f0ff;
  box-shadow: 0 0 6px rgba(0,240,255,0.15);
}

/* Terminal tab */
.theme-glitch #term-header {
  border-bottom: 1px solid #161630;
}
.theme-glitch .term-key {
  border-radius: 2px;
  border: 1px solid #222244;
  font-family: 'Share Tech Mono', monospace;
}

/* Scrollbar — thin neon */
.theme-glitch ::-webkit-scrollbar { width: 4px; }
.theme-glitch ::-webkit-scrollbar-track { background: #05050a; }
.theme-glitch ::-webkit-scrollbar-thumb { background: #222244; border-radius: 2px; }
.theme-glitch ::-webkit-scrollbar-thumb:hover { background: #00f0ff; box-shadow: 0 0 6px #00f0ff; }

/* Typing indicator — neon dots */
.theme-glitch .typing-indicator span {
  background: #00f0ff;
  box-shadow: 0 0 6px #00f0ff;
}

/* Date separator */
.theme-glitch .date-separator {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #333350;
  letter-spacing: 0.2em;
}
.theme-glitch .date-separator::before,
.theme-glitch .date-separator::after {
  border-color: #161630;
}

/* Code blocks */
.theme-glitch .bubble .md-codeblock {
  border-radius: 2px;
  border: 1px solid #161630;
  background: #06060c;
}
.theme-glitch .bubble .md-codeblock-header {
  border-radius: 2px 2px 0 0;
  background: #0a0a14;
  font-family: 'Share Tech Mono', monospace;
  color: #00f0ff;
}
.theme-glitch .bubble .md-code {
  border-radius: 2px;
  background: #0c0c16;
  border: 1px solid #161630;
  color: #39ff14;
  font-family: 'Share Tech Mono', monospace;
}

/* Relay messages — neon from */
.theme-glitch .relay-from {
  font-family: 'Orbitron', monospace;
  color: #00f0ff;
  text-shadow: 0 0 6px rgba(0,240,255,0.3);
  letter-spacing: 0.12em;
}

/* Streaming cursor */
.theme-glitch .streaming-content {
  border-right-color: #00f0ff;
}


/* ============================================
   ZINE THEME — Photocopied punk, cut-and-paste
   Noise grain, rotated scraps, marker highlights
   ============================================ */
.theme-zine {
  --bg-dark: #e5e0d4;
  --bg-card: #d8d3c5;
  --bg-input: #f0ebe0;
  --accent: #ff3311;
  --accent-glow: #ff1493;
  --accent-secondary: #ffe01b;
  --text: #1a1a1a;
  --text-muted: #5a5548;
  --user-bubble: #fff8ee;
  --assistant-bubble: #f0ebe0;
  --border: #b5b0a5;
  --online: #2e7d32;
  --font-main: 'Courier Prime', 'Courier New', monospace;
}

body.theme-zine ::selection { background: #ff1493; color: #f2ede3; }

/* Photocopy grain overlay */
body.theme-zine::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* Header — collage, mixed fonts, tape strip */
.theme-zine header {
  background: var(--bg-card);
  border-bottom: 3px solid #1a1a1a;
  padding: 10px 16px;
  position: relative;
}
.theme-zine header::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 30px;
  width: 80px;
  height: 12px;
  background: rgba(255,228,100,0.45);
  transform: rotate(-1deg);
  z-index: 1;
}
.theme-zine header h1 {
  font-family: 'Permanent Marker', cursive;
  font-size: 20px;
  -webkit-text-fill-color: #1a1a1a;
  background: none;
  transform: rotate(-1deg);
  letter-spacing: 0.02em;
}
.theme-zine .team-state-btn {
  border-radius: 0;
  border: 2px solid #1a1a1a;
  background: #fff8ee;
  color: #5a5548;
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  transform: rotate(0.5deg);
  padding: 6px 10px;
}
.theme-zine .team-state-btn:hover {
  transform: rotate(0.7deg);
}
.theme-zine .team-state-btn.active {
  background: #ffc0a0;
  border-color: #cc6633;
  color: #1a1a1a;
}
.theme-zine .theme-select {
  border-radius: 0;
  border: 2px solid #1a1a1a;
  background: #fff8ee;
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  color: #1a1a1a;
  transform: rotate(0.5deg);
}
.theme-zine #signout-btn {
  border-radius: 0;
  border: 2px solid #1a1a1a;
  background: #fff8ee;
  color: #5a5548;
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  transform: rotate(-0.3deg);
}

/* Bottom nav — sticker tabs, marker underline */
.theme-zine #bottom-nav {
  border-top: 3px solid #1a1a1a;
  background: var(--bg-card);
  gap: 0;
}
.theme-zine .nav-tab {
  font-family: 'Special Elite', 'Courier Prime', monospace;
  font-size: 13px;
  padding: 12px 0;
  color: #5a5548;
  position: relative;
  border: none;
  transition: none;
}
.theme-zine .nav-tab.active {
  color: #1a1a1a;
  background: transparent;
  font-weight: 700;
}
.theme-zine .nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 25%;
  right: 25%;
  height: 4px;
  background: #ff3311;
  transform: rotate(-1deg) scaleX(1.2);
  opacity: 0.7;
}

/* Messages — paper scraps, slight rotation, shadow */
.theme-zine .message {
  max-width: 82%;
}
.theme-zine .bubble {
  box-shadow: 3px 3px 0 rgba(0,0,0,0.08);
  padding: 12px 16px;
}
.theme-zine .message.user .bubble {
  background: #fff8ee;
  border: 2px solid #1a1a1a;
  border-radius: 2px;
  transform: rotate(0.4deg);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}
.theme-zine .message.assistant .bubble {
  background: #f0ebe0;
  border: 2px solid #1a1a1a;
  border-left: 5px solid #ff3311;
  border-radius: 2px;
  transform: rotate(-0.3deg);
  box-shadow: 2px 3px 0 rgba(0,0,0,0.08);
  font-family: 'Courier Prime', monospace;
}
.theme-zine .message.relay-claude .bubble {
  background: #fff;
  border: 2px solid #1a1a1a;
  transform: rotate(-0.6deg);
  font-family: 'Special Elite', monospace;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.12);
  position: relative;
  border-radius: 1px;
}
/* Tape strip on relay messages */
.theme-zine .message.relay-claude .bubble::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 20px;
  width: 60px;
  height: 18px;
  background: rgba(255,228,100,0.45);
  border: 1px solid rgba(200,190,150,0.3);
  transform: rotate(-2.5deg);
  z-index: 1;
}
.theme-zine .bubble .time {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  color: #8a8578;
}
.theme-zine .avatar {
  border-radius: 2px;
  border: 2px solid #1a1a1a;
  transform: rotate(-1deg);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

/* Input — notebook-style */
.theme-zine #input-area {
  border-top: 3px solid #1a1a1a;
  background: var(--bg-card);
  padding: 10px 14px;
}
.theme-zine #message-input {
  border-radius: 0;
  border: 2px solid #1a1a1a;
  font-family: 'Courier Prime', monospace;
  font-size: 14px;
  padding: 10px 16px;
  background: #fff8ee;
  color: #1a1a1a;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}
.theme-zine #message-input:focus {
  border-color: #ff3311;
  box-shadow: 3px 3px 0 rgba(255,51,17,0.15);
}
.theme-zine #message-input::placeholder {
  font-family: 'Special Elite', monospace;
  font-style: italic;
  color: #aaa598;
}
@keyframes zine-wobble {
  0%, 100% { transform: rotate(1deg); }
  25% { transform: rotate(2.5deg); }
  50% { transform: rotate(-0.5deg); }
  75% { transform: rotate(1.5deg); }
}
.theme-zine #send-btn {
  border-radius: 0;
  width: 46px;
  height: 42px;
  background: #ff3311;
  border: 3px solid #1a1a1a;
  color: #fff;
  font-family: 'Permanent Marker', cursive;
  box-shadow: 4px 4px 0 #1a1a1a;
  animation: zine-wobble 4s ease-in-out infinite;
  position: relative;
}
.theme-zine #send-btn::after {
  content: 'SEND';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  font-family: 'Permanent Marker', cursive;
  font-size: 8px;
  color: #ff3311;
  white-space: nowrap;
  letter-spacing: 0.1em;
  opacity: 0;
  transition: opacity 0.15s;
}
.theme-zine #send-btn:hover {
  transform: rotate(-2deg) scale(1.1);
  box-shadow: 5px 5px 0 #1a1a1a;
  animation: none;
  background: #1a1a1a;
  color: #ff3311;
}
.theme-zine #send-btn:hover::after { opacity: 1; }
.theme-zine #send-btn:active {
  transform: rotate(0deg) scale(0.95);
  box-shadow: 2px 2px 0 #1a1a1a;
  background: #ff3311;
  color: #fff;
}
.theme-zine .icon-btn {
  border-radius: 0;
  border: 2px solid #1a1a1a;
  background: #fff8ee;
  transform: rotate(-0.5deg);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.08);
}
.theme-zine .icon-btn:hover {
  background: #ffe01b;
  border-color: #1a1a1a;
  color: #1a1a1a;
  transform: rotate(1deg);
}

/* Ops tab — bulletin board, pinned cards */
.theme-zine .ops-section-title {
  font-family: 'Permanent Marker', cursive;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 14px;
  color: #1a1a1a;
  border-bottom: 2px solid #1a1a1a;
  padding-bottom: 4px;
  transform: rotate(-0.3deg);
}
.theme-zine .ops-pill {
  border-radius: 0;
  border: 2px solid #1a1a1a;
  font-family: 'Courier Prime', monospace;
  font-size: 12px;
  padding: 5px 12px;
  background: #fff8ee;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.08);
  transform: rotate(0.3deg);
}
.theme-zine .ops-pill:active {
  background: #ff3311;
  color: #fff;
  transform: rotate(-0.5deg);
}
.theme-zine .ops-proposal {
  border-radius: 0;
  border: 2px solid #1a1a1a;
  background: #fff8ee;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
  transform: rotate(-0.2deg);
  position: relative;
}
/* Pin/tape on proposal cards */
.theme-zine .ops-proposal::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 20px;
  width: 50px;
  height: 14px;
  background: rgba(255,228,100,0.5);
  transform: rotate(2deg);
  border: 1px solid rgba(200,190,150,0.3);
}
.theme-zine .ops-proposal-title {
  font-family: 'Special Elite', monospace;
  font-weight: 400;
  font-size: 15px;
}
.theme-zine .ops-btn {
  border-radius: 0;
  border: 2px solid #1a1a1a;
  font-family: 'Courier Prime', monospace;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
  background: #f0ebe0;
}
.theme-zine .ops-btn:hover {
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.15);
}
.theme-zine .ops-btn.approve {
  background: #c8f7c5;
  border-color: #1a1a1a;
  color: #1a5c1a;
}
.theme-zine .ops-btn.reject {
  background: #ffc5c5;
  border-color: #1a1a1a;
  color: #8b1a1a;
}
.theme-zine .ops-btn.shelve {
  background: #e0ddd5;
  border-color: #1a1a1a;
  color: #5a5548;
}
.theme-zine .ops-budget {
  border-radius: 0;
  height: 8px;
  border: 2px solid #1a1a1a;
  background: #f0ebe0;
}
.theme-zine .ops-budget-fill {
  border-radius: 0;
  background: #ff3311;
}
.theme-zine .ops-brief {
  border-radius: 0;
  border: 2px solid #1a1a1a;
  background: #fff8ee;
  font-family: 'Courier Prime', monospace;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.08);
  transform: rotate(-0.15deg);
}

/* Settings — paper scraps */
.theme-zine .settings-section {
  border: 2px solid #1a1a1a;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 0;
  background: #fff8ee;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.08);
  transform: rotate(-0.15deg);
}
.theme-zine .settings-section-title {
  font-family: 'Permanent Marker', cursive;
  font-size: 14px;
  color: #1a1a1a;
  text-transform: none;
  letter-spacing: 0;
}
.theme-zine .settings-toggle {
  border-radius: 14px;
  border: 2px solid #1a1a1a;
  background: #e0ddd5;
}
.theme-zine .settings-toggle.active {
  background: #ff3311;
  border-color: #1a1a1a;
}
.theme-zine .settings-toggle::after {
  border-radius: 50%;
  border: 1px solid #1a1a1a;
}
.theme-zine .theme-preview-card {
  border-radius: 0;
  border: 2px solid #1a1a1a;
  background: #f0ebe0;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.08);
}
.theme-zine .theme-preview-card.active {
  border-color: #ff3311;
  box-shadow: 3px 3px 0 rgba(255,51,17,0.2);
}
.theme-zine .theme-preview-name {
  font-family: 'Special Elite', monospace;
}

/* History tab */
.theme-zine .history-search-input {
  border-radius: 0;
  border: 2px solid #1a1a1a;
  background: #fff8ee;
  font-family: 'Courier Prime', monospace;
  color: #1a1a1a;
}
.theme-zine .history-filter-btn {
  border-radius: 0;
  border: 2px solid #1a1a1a;
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  background: #f0ebe0;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.06);
}
.theme-zine .history-filter-btn.filter-active {
  background: #ffe01b;
  color: #1a1a1a;
}
.theme-zine .history-export-btn {
  border-radius: 0;
  border: 2px solid #1a1a1a;
  background: #fff8ee;
  color: #1a1a1a;
  font-family: 'Courier Prime', monospace;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.08);
}

/* Terminal tab */
.theme-zine #term-header {
  border-bottom: 3px solid #1a1a1a;
  background: var(--bg-card);
}
.theme-zine .term-key {
  border-radius: 0;
  border: 2px solid #1a1a1a;
  font-family: 'Courier Prime', monospace;
  background: #fff8ee;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}

/* Scrollbar — thick, paper */
.theme-zine ::-webkit-scrollbar { width: 10px; }
.theme-zine ::-webkit-scrollbar-track { background: #d8d3c5; }
.theme-zine ::-webkit-scrollbar-thumb {
  background: #b5b0a5;
  border: 2px solid #d8d3c5;
  border-radius: 0;
}
.theme-zine ::-webkit-scrollbar-thumb:hover { background: #ff3311; }

/* Typing indicator — ink splats */
.theme-zine .typing-indicator span {
  border-radius: 50%;
  background: #1a1a1a;
}

/* Date separator */
.theme-zine .date-separator {
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  color: #8a8578;
  transform: rotate(-0.5deg);
}

/* Code blocks */
.theme-zine .bubble .md-codeblock {
  border-radius: 0;
  border: 2px solid #1a1a1a;
  background: #fff;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.08);
}
.theme-zine .bubble .md-codeblock-header {
  border-radius: 0;
  background: #e8e4da;
  border-bottom: 2px solid #1a1a1a;
  font-family: 'Courier Prime', monospace;
}
.theme-zine .bubble .md-code {
  border-radius: 0;
  background: #f5f0e5;
  border: 1px solid #c4c0b6;
  font-family: 'Courier Prime', monospace;
}

/* Relay messages — stamped, typed */
.theme-zine .relay-from {
  font-family: 'Permanent Marker', cursive;
  color: #ff3311;
  letter-spacing: 0.02em;
  transform: rotate(-0.5deg);
  display: inline-block;
}

/* Streaming cursor */
.theme-zine .streaming-content {
  border-right-color: #1a1a1a;
}

/* Golden Sun Theme Overrides */
body.theme-jrpg::before {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232, 168, 32, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(88, 216, 120, 0.06) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 90%, rgba(208, 96, 48, 0.06) 0%, transparent 40%),
    linear-gradient(180deg, #0c0e24 0%, #08091a 100%);
}

/* Header — ornate gold-trimmed bar */
.theme-jrpg header {
  background:
    linear-gradient(180deg, #1a1e48 0%, #121638 60%, #0e1030 100%);
  border-bottom: 3px solid #c8a028;
  font-family: var(--font-main);
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow:
    inset 0 -1px 0 rgba(200, 160, 40, 0.3),
    inset 0 1px 0 rgba(200, 160, 40, 0.15),
    0 4px 12px rgba(0,0,0,0.5);
}

.theme-jrpg header h1 {
  background: linear-gradient(180deg, #f0d060 0%, #e8a820 50%, #c08018 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-main);
  font-size: 16px;
  letter-spacing: 3px;
}

/* Avatar — gold-framed portraits */
.theme-jrpg .avatar {
  border: 3px solid #c8a028;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 0 8px rgba(200, 160, 40, 0.2),
    3px 3px 0 rgba(0,0,0,0.4);
}

.theme-jrpg .avatar.assistant {
  border-color: #e8a820;
}

.theme-jrpg .avatar.user {
  border-color: #58d878;
}

/* Dialogue boxes — Golden Sun menu style with gold borders and inner glow */
.theme-jrpg .bubble {
  background:
    linear-gradient(180deg, #181c42 0%, #121638 100%);
  border: 2px solid #c8a028;
  border-radius: 6px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(200, 160, 40, 0.1),
    inset 0 0 12px rgba(12, 14, 36, 0.8),
    3px 3px 0 rgba(0,0,0,0.3);
  font-family: var(--font-main);
  position: relative;
}

.theme-jrpg .message.assistant .bubble {
  border-top-left-radius: 2px;
}

.theme-jrpg .message.user .bubble {
  background:
    linear-gradient(180deg, #1a2858 0%, #162048 100%);
  border-color: #58d878;
  border-top-right-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(88, 216, 120, 0.1),
    inset 0 0 12px rgba(12, 14, 36, 0.8),
    3px 3px 0 rgba(0,0,0,0.3);
}

/* Menu cursor — Golden Sun hand pointer */
.theme-jrpg .message::before {
  content: '☞';
  position: absolute;
  left: -22px;
  color: var(--cursor-color);
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.2s;
  text-shadow: 0 0 4px rgba(232, 168, 32, 0.6);
}

.theme-jrpg .message:hover::before {
  opacity: 1;
}

/* Input — dark panel with gold trim */
.theme-jrpg #input-area {
  background:
    linear-gradient(180deg, #0e1030 0%, #121638 50%, #1a1e48 100%);
  border-top: 3px solid #c8a028;
  box-shadow:
    inset 0 1px 0 rgba(200, 160, 40, 0.15),
    0 -4px 12px rgba(0,0,0,0.3);
}

.theme-jrpg #message-input {
  background: #0c0e24;
  border: 2px solid #c8a028;
  border-radius: 4px;
  font-family: var(--font-main);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

.theme-jrpg #message-input:focus {
  border-color: #f0d060;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 0 6px rgba(232, 168, 32, 0.3);
}

.theme-jrpg #send-btn {
  background: linear-gradient(180deg, #e8a820 0%, #c08018 100%);
  border: 2px solid #a07010;
  border-radius: 4px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
  color: #0c0e24;
}

.theme-jrpg #send-btn:hover {
  background: linear-gradient(180deg, #f0d060 0%, #e8a820 100%);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.4);
}

.theme-jrpg .icon-btn {
  border-radius: 4px;
  border: 2px solid #c8a028;
  background: #121638;
  color: #c8a028;
}

.theme-jrpg .icon-btn:hover {
  background: #1a1e48;
  color: #f0d060;
  box-shadow: 0 0 6px rgba(232, 168, 32, 0.2);
}

/* Status — Djinn orb */
.theme-jrpg .status-dot {
  border-radius: 50%;
  border: 1px solid #c8a028;
}

.theme-jrpg .status-dot.connected {
  background: radial-gradient(circle at 40% 35%, #90f0a0 0%, #58d878 50%, #38a858 100%);
  box-shadow: 0 0 8px rgba(88, 216, 120, 0.5);
}

.theme-jrpg #signout-btn {
  border-color: rgba(200, 160, 40, 0.3);
  color: #8088a8;
}

.theme-jrpg #signout-btn:hover {
  border-color: #d06030;
  color: #d06030;
}

/* Login — deep space with gold accents */
.theme-jrpg #login-screen {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(232, 168, 32, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #0c0e24 0%, #08091a 100%);
}

.theme-jrpg #login-screen button {
  border: 2px solid #c8a028;
  border-radius: 6px;
  font-family: var(--font-main);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #1a1e48 0%, #121638 100%);
  color: #e8e0d0;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    3px 3px 0 rgba(0,0,0,0.3);
}

.theme-jrpg #login-screen button:hover {
  background: linear-gradient(180deg, #e8a820 0%, #c08018 100%);
  color: #0c0e24;
  border-color: #f0d060;
}

/* Pairing */
.theme-jrpg #pairing-screen {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(232, 168, 32, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #0c0e24 0%, #08091a 100%);
}

.theme-jrpg #pairing-screen button {
  border: 2px solid #c8a028;
  border-radius: 6px;
  background: linear-gradient(180deg, #e8a820 0%, #c08018 100%);
  color: #0c0e24;
  font-family: var(--font-main);
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
}

.theme-jrpg #pairing-screen button:hover {
  background: linear-gradient(180deg, #f0d060 0%, #e8a820 100%);
}

.theme-jrpg pre {
  background: #0c0e24;
  border: 2px solid rgba(200, 160, 40, 0.4);
  border-radius: 4px;
  font-family: var(--font-main);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

/* Typing indicator — golden pulse */
.theme-jrpg .typing-indicator span {
  background: #e8a820;
}

/* Theme selector */
.theme-jrpg .theme-select {
  background: rgba(200, 160, 40, 0.12);
  border-color: rgba(200, 160, 40, 0.3);
  color: #c8a028;
  font-family: var(--font-main);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg-dark);
  color: var(--text);
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  height: 100vh;
  overflow: hidden;
}

/* Subtle gradient background */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Header */
header {
  background: linear-gradient(135deg, var(--bg-card) 0%, #1a1a2e 100%);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  min-height: 0;
  flex-shrink: 0;
}

header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-glow) 0%, var(--accent-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.online-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #444;
  box-shadow: 0 0 8px currentColor;
  transition: all 0.3s;
}

.status-dot.connected {
  background: var(--online);
  box-shadow: 0 0 12px var(--online);
}
.status-dot.disconnected { background: #ef4444; }

/* Team State Control */
.team-state-buttons {
  display: flex;
  gap: 6px;
  align-items: center;
}

.team-state-btn {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}

.team-state-btn:hover {
  background: var(--bg-card);
  transform: translateY(-1px);
}

.team-state-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}

.team-state-btn.state-running { border-color: #22c55e; }
.team-state-btn.state-quiet { border-color: #6366f1; }
.team-state-btn.state-paused { border-color: #f97316; }
.team-state-btn.state-off { border-color: #ef4444; }

/* Team State Modal */
.team-state-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.team-state-modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.team-state-modal-content p {
  color: var(--text);
  font-size: 15px;
  margin: 0 0 20px 0;
  text-align: center;
}

.team-state-modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.team-state-modal-btn {
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.team-state-modal-btn.confirm {
  background: #ef4444;
  color: white;
}

.team-state-modal-btn.confirm:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

.team-state-modal-btn.cancel {
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
}

.team-state-modal-btn.cancel:hover {
  background: var(--bg-dark);
  transform: translateY(-1px);
}

/* Chat Area */
#chat {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}

.message {
  display: flex;
  gap: 12px;
  max-width: 80%;
  animation: slideUp 0.3s ease-out;
}

.message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Avatar */
.avatar {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar.assistant {
  border: none;
}

.avatar.user {
  border: none;
}

/* No CSS animation on avatars — yap is handled by JS img.src swap */

/* Bubble */
.bubble {
  background: var(--assistant-bubble);
  border-radius: 20px;
  padding: 14px 18px;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.message.assistant .bubble {
  border-top-left-radius: 6px;
}

.message.user .bubble {
  background: var(--user-bubble);
  border-top-right-radius: 6px;
}

.bubble p {
  margin: 0;
  line-height: 1.5;
  white-space: pre-wrap;
}

.bubble .time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  opacity: 0.7;
}

/* Notification bubbles */
.message.notification {
  align-self: center;
  max-width: 90%;
}

.notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: rgba(255, 180, 0, 0.15);
}

.notif-bubble {
  background: rgba(255, 180, 0, 0.08) !important;
  border: 1px solid rgba(255, 180, 0, 0.25) !important;
  border-radius: 12px !important;
  position: relative;
}

.notif-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--accent, #ff4400);
  margin-bottom: 4px;
}

.notif-body {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  opacity: 0.85;
}

.notif-dismiss {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  opacity: 0.4;
  padding: 2px 6px;
  line-height: 1;
}

.notif-dismiss:hover {
  opacity: 1;
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-8px); opacity: 1; }
}

/* Input Area */
#input-area {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.input-buttons {
  display: flex;
  gap: 8px;
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.icon-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  transform: scale(1.05);
}

#message-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 14px 20px;
  color: var(--text);
  font-family: 'Quicksand', sans-serif;
  font-size: 15px;
  outline: none;
  transition: all 0.2s;
}

#message-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

#send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-glow) 100%);
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

#send-btn .send-icon { transition: transform 0.2s; }

#send-btn:hover {
  transform: scale(1.1);
}

#send-btn:active { transform: scale(0.95); }
#send-btn:active .send-icon { transform: translateX(3px); }

/* Loading */
#loading {
  display: none;
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

#loading.active { display: block; }

/* Ink-bleed streaming text */
.streaming-content {
  border-right: 2px solid var(--accent);
  padding-right: 2px;
  animation: cursorBlink 0.6s steps(2) infinite;
}

@keyframes cursorBlink {
  0%, 100% { border-color: var(--accent); }
  50% { border-color: transparent; }
}

/* Date separator */
.date-separator {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: 20px 0;
  position: relative;
}

.date-separator::before,
.date-separator::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: var(--border);
}

.date-separator::before { left: 0; }
.date-separator::after { right: 0; }

/* Voice message indicator */
.voice-message {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.voice-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
}

.voice-wave span {
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  animation: wave 1s infinite;
}

.voice-wave span:nth-child(1) { height: 8px; animation-delay: 0s; }
.voice-wave span:nth-child(2) { height: 16px; animation-delay: 0.1s; }
.voice-wave span:nth-child(3) { height: 12px; animation-delay: 0.2s; }
.voice-wave span:nth-child(4) { height: 20px; animation-delay: 0.3s; }
.voice-wave span:nth-child(5) { height: 10px; animation-delay: 0.4s; }

@keyframes wave {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}

/* Login screen */
#login-screen {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: var(--bg-dark);
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#login-screen.visible { display: flex; }

#app {
  display: none;
  flex-direction: column;
  height: 100vh;
}

#app.visible { display: flex; }

#signout-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: 'Quicksand', sans-serif;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

#signout-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
}

/* Pairing screen */
#pairing-screen {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-dark);
  justify-content: center;
  align-items: center;
  z-index: 100;
}
#pairing-screen.visible {
  display: flex;
}

/* ============================================
   TAB CONTENT
   ============================================ */
.tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================
   BOTTOM NAV
   ============================================ */
#bottom-nav {
  display: flex;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  padding: 0;
  flex-shrink: 0;
}

.nav-tab {
  flex: 1;
  padding: 12px 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.nav-tab.active {
  color: var(--accent);
  background: var(--bg-input);
}

/* ============================================
   OPS TAB
   ============================================ */
#ops-tab {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.ops-section {
  margin-bottom: 20px;
}

.ops-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Status bar */
.ops-status-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ops-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s;
}

.ops-pill:active {
  background: var(--accent);
  color: white;
}

.ops-pill.pace-full { border-color: #22c55e; }
.ops-pill.pace-slow { border-color: #eab308; }
.ops-pill.pace-pause { border-color: #f97316; }
.ops-pill.pace-stop { border-color: #ef4444; }
.ops-pill.mode-awake { border-color: #22c55e; }
.ops-pill.mode-sleep { border-color: #6366f1; }
.ops-pill.state-running { border-color: #22c55e; }
.ops-pill.state-quiet   { border-color: #6366f1; }
.ops-pill.state-paused  { border-color: #f97316; }
.ops-pill.state-off     { border-color: #ef4444; }

/* Budget bar */
.ops-budget {
  height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}

.ops-budget-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s;
}

.ops-budget-label {
  font-size: 11px;
  color: var(--text-muted);
}

/* Proposal cards */
.ops-proposal {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
}

.ops-proposal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.ops-proposal-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.ops-proposal-body {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
  display: none;
}

.ops-proposal-body.expanded {
  display: block;
}

.ops-proposal-actions {
  display: flex;
  gap: 8px;
}

.ops-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ops-btn.approve {
  background: #166534;
  border-color: #22c55e;
  color: #bbf7d0;
}

.ops-btn.reject {
  background: #7f1d1d;
  border-color: #ef4444;
  color: #fecaca;
}

.ops-btn.shelve {
  background: #374151;
  border-color: #6b7280;
  color: #d1d5db;
}

.ops-btn.expand {
  background: none;
  border: none;
  color: var(--accent);
  padding: 0;
  font-size: 12px;
}

/* Proposals Sidebar */
.proposals-sidebar {
  position: relative;
}

.proposals-toggle {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.proposals-toggle:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.proposals-toggle.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.proposals-list {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  min-width: 400px;
  max-width: 500px;
  max-height: 500px;
  overflow-y: auto;
  z-index: 1000;
}

.proposals-spinner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  justify-content: center;
}

.spinner-dot {
  display: inline-block;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.proposals-empty {
  padding: 16px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.proposals-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s, opacity 0.3s;
}

.proposals-row:last-child {
  border-bottom: none;
}

.proposals-row:hover {
  background: var(--bg-input);
}

.proposals-row.proposals-row-removing {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.proposals-row-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.proposals-domain-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  flex-shrink: 0;
}

.proposals-title {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proposals-effort {
  display: inline-flex;
  padding: 3px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: capitalize;
  flex-shrink: 0;
}

.proposals-age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  flex-shrink: 0;
}

.proposals-age-fresh {
  background: rgba(107, 114, 128, 0.1);
  color: var(--text-muted);
}

.proposals-age-aging {
  background: rgba(251, 146, 60, 0.15);
  color: #fb923c;
  font-weight: 700;
}

.proposals-age-stale {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  font-weight: 700;
}

.proposals-greenlight-btn {
  margin-left: 8px;
  padding: 6px 10px;
  background: #166534;
  border: 1px solid #22c55e;
  border-radius: 6px;
  color: #bbf7d0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.proposals-greenlight-btn:hover:not(:disabled) {
  background: #15803d;
  border-color: #16a34a;
}

.proposals-greenlight-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Checkpoints Sidebar */
.checkpoints-sidebar {
  position: relative;
}

.checkpoints-toggle {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.checkpoints-toggle:hover {
  background: #92400e;
  color: #fde68a;
  border-color: #f59e0b;
}

.checkpoints-toggle.active {
  background: #92400e;
  color: #fde68a;
  border-color: #f59e0b;
}

.checkpoints-toggle.has-checkpoints {
  background: #78350f;
  color: #fcd34d;
  border-color: #f59e0b;
  font-weight: 700;
}

.checkpoints-list {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  min-width: 420px;
  max-width: 520px;
  max-height: 500px;
  overflow-y: auto;
  z-index: 1000;
}

.checkpoints-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s, opacity 0.3s;
}

.checkpoints-row:last-child {
  border-bottom: none;
}

.checkpoints-row:hover {
  background: var(--bg-input);
}

.checkpoints-row-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.checkpoint-cause-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #fde68a;
  background: #78350f;
  border: 1px solid #f59e0b;
  text-transform: uppercase;
  flex-shrink: 0;
  cursor: default;
}

.checkpoint-elapsed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  flex-shrink: 0;
}

.checkpoint-resume-btn {
  margin-left: 8px;
  padding: 6px 10px;
  background: #78350f;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  color: #fde68a;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.checkpoint-resume-btn:hover:not(:disabled) {
  background: #92400e;
  border-color: #fbbf24;
}

.checkpoint-resume-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Brief section */
.ops-brief {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Brief card layout */
.brief-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.brief-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.brief-tldr {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  padding: 2px 0;
}
.brief-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.brief-item:last-child { border-bottom: none; }
.brief-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.brief-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.brief-item-body {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 80px;
  overflow: hidden;
}
.brief-activity {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 3px 0;
  font-size: 11px;
  line-height: 1.4;
}
.brief-activity-time {
  color: var(--text-muted);
  flex-shrink: 0;
  width: 44px;
  font-variant-numeric: tabular-nums;
}
.brief-activity-agent {
  color: var(--accent, #D4943A);
  flex-shrink: 0;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brief-activity-detail {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* Deadline items */
.ops-deadline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.ops-deadline:last-child {
  border-bottom: none;
}

.ops-deadline-title {
  color: var(--text);
  font-weight: 600;
}

.ops-deadline-date {
  color: var(--text-muted);
  font-size: 12px;
}

/* Empty state */
.ops-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 14px;
}

/* Refresh button */
.ops-refresh {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* Toast notifications */
.ops-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 20px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.ops-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ops-toast-success {
  background: #166534;
  color: #bbf7d0;
  border: 1px solid #22c55e;
}
.ops-toast-error {
  background: #7f1d1d;
  color: #fecaca;
  border: 1px solid #ef4444;
}

/* Executing proposal pulse */
.ops-executing {
  border-color: rgba(99, 102, 241, 0.5) !important;
  animation: ops-card-pulse 2s ease-in-out infinite;
}
@keyframes ops-card-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
  50% { box-shadow: 0 0 12px 2px rgba(99, 102, 241, 0.3); }
}
.ops-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #818cf8;
  margin-left: 6px;
  vertical-align: middle;
  animation: ops-dot-pulse 1.5s ease-in-out infinite;
}
@keyframes ops-dot-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Branch badge for shipped proposals */
.ops-branch-badge {
  display: inline-block;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.3);
  margin-left: 8px;
  vertical-align: middle;
}

/* ============================================
   DX DASHBOARD — Stats, Timeline, Diagnostics
   ============================================ */

/* Proposal Stats Grid */
.dx-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.dx-stat-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.dx-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.dx-stat-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.dx-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Domain chips */
.dx-domain-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.dx-domain-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.dx-chip-count {
  color: var(--accent);
  font-weight: 700;
}

/* Activity Timeline */
.dx-timeline-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

.dx-timeline-svg {
  width: 100%;
  height: auto;
  max-height: 140px;
}

.dx-timeline-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text);
}

.dx-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}

.dx-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* System Diagnostics */
.dx-diag-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.dx-diag-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.dx-diag-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 6px;
}

.dx-diag-subtitle {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.dx-diag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text);
  padding: 2px 0;
}

.dx-diag-row span:first-child {
  color: var(--text-muted);
}

.dx-diag-nodes {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
}

.dx-diag-anomalies {
  background: var(--bg-input);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
}

.dx-diag-anomaly {
  font-size: 12px;
  color: #f87171;
  padding: 2px 0;
}

/* Proposal search/filter styles (were unstyled) */
.proposal-search-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.proposal-search-input {
  flex: 1;
  min-width: 140px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.proposal-search-input:focus {
  border-color: var(--accent);
}

.proposal-select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

.proposal-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.proposal-filter-btn {
  padding: 5px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.proposal-filter-btn:hover {
  border-color: var(--accent);
}

.proposal-filter-btn.filter-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.proposal-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ops-proposal-header {
  cursor: pointer;
}

/* Paper theme overrides for ops tab */
.theme-jrpg-paper #bottom-nav,
.theme-jrpg-paper-full #bottom-nav,
.theme-jrpg-paper-bleed #bottom-nav {
  background: #f5f0e8;
  border-top-color: #d4c5a9;
}

.theme-jrpg-paper .nav-tab,
.theme-jrpg-paper-full .nav-tab,
.theme-jrpg-paper-bleed .nav-tab {
  color: #8b7355;
}

.theme-jrpg-paper .nav-tab.active,
.theme-jrpg-paper-full .nav-tab.active,
.theme-jrpg-paper-bleed .nav-tab.active {
  color: #2c1810;
  background: #ebe3d3;
}

.theme-jrpg-paper .ops-pill,
.theme-jrpg-paper-full .ops-pill,
.theme-jrpg-paper-bleed .ops-pill {
  background: #ebe3d3;
  border-color: #d4c5a9;
  color: #2c1810;
}

.theme-jrpg-paper .ops-proposal,
.theme-jrpg-paper .ops-brief,
.theme-jrpg-paper-full .ops-proposal,
.theme-jrpg-paper-full .ops-brief,
.theme-jrpg-paper-bleed .ops-proposal,
.theme-jrpg-paper-bleed .ops-brief {
  background: #ebe3d3;
  border-color: #d4c5a9;
  color: #2c1810;
}

.theme-jrpg-paper .dx-stat-card,
.theme-jrpg-paper .dx-diag-card,
.theme-jrpg-paper .dx-timeline-card,
.theme-jrpg-paper .dx-domain-chip,
.theme-jrpg-paper .dx-diag-nodes,
.theme-jrpg-paper .proposal-search-input,
.theme-jrpg-paper .proposal-select,
.theme-jrpg-paper .proposal-filter-btn,
.theme-jrpg-paper-full .dx-stat-card,
.theme-jrpg-paper-full .dx-diag-card,
.theme-jrpg-paper-full .dx-timeline-card,
.theme-jrpg-paper-full .dx-domain-chip,
.theme-jrpg-paper-full .dx-diag-nodes,
.theme-jrpg-paper-full .proposal-search-input,
.theme-jrpg-paper-full .proposal-select,
.theme-jrpg-paper-full .proposal-filter-btn,
.theme-jrpg-paper-bleed .dx-stat-card,
.theme-jrpg-paper-bleed .dx-diag-card,
.theme-jrpg-paper-bleed .dx-timeline-card,
.theme-jrpg-paper-bleed .dx-domain-chip,
.theme-jrpg-paper-bleed .dx-diag-nodes,
.theme-jrpg-paper-bleed .proposal-search-input,
.theme-jrpg-paper-bleed .proposal-select,
.theme-jrpg-paper-bleed .proposal-filter-btn {
  background: #ebe3d3;
  border-color: #d4c5a9;
  color: #2c1810;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 600px) {
  /* --- Header: compact single row --- */
  header {
    padding: 8px 12px;
    gap: 8px;
  }
  header h1 { font-size: 16px; }
  .header-info { gap: 6px; }
  #status-text { display: none; }
  .theme-select {
    padding: 4px 6px;
    font-size: 11px;
    max-width: 80px;
  }
  #signout-btn {
    padding: 4px 8px;
    font-size: 11px;
  }

  /* --- Chat area --- */
  #chat {
    padding: 10px 10px;
    gap: 8px;
  }

  /* --- Messages: avatar + bubble side by side --- */
  .message {
    max-width: 92%;
    gap: 8px;
    align-items: flex-start;
  }

  /* Round, compact avatars — clear speaker identity */
  .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    margin-top: 2px;
  }
  .avatar::after { display: none; }
  .avatar img { border-radius: 50% !important; }

  /* Bubbles: only touch font-size — leave padding/line-height to themes */
  .bubble .time {
    font-size: 10px;
    margin-top: 4px;
    opacity: 0.5;
  }

  /* Accent borders to identify speakers */
  .message.assistant .bubble {
    border-left: 3px solid var(--accent);
  }
  .message.user .bubble {
    border-right: 3px solid var(--accent-secondary);
  }

  /* --- Input area: clean row --- */
  #input-area {
    padding: 8px 10px;
    gap: 6px;
  }
  .input-buttons { gap: 4px; }
  .icon-btn {
    width: 36px;
    height: 36px;
    font-size: 15px;
    border-radius: 50%;
  }
  #message-input {
    padding: 10px 14px;
    font-size: 15px;
    border-radius: 20px;
  }
  #send-btn {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  /* --- Bottom nav --- */
  .nav-tab {
    padding: 10px 0;
    font-size: 13px;
  }

  /* --- Ops tab --- */
  #ops-tab { padding: 10px; }
  .ops-pill {
    padding: 5px 10px;
    font-size: 12px;
  }
  .ops-proposal {
    padding: 10px;
    border-radius: 10px;
  }
  .ops-proposal-title { font-size: 14px; }
  .brief-card { padding: 10px; }
  .brief-activity { font-size: 10px; }
  .brief-activity-time { width: 36px; }
  .brief-activity-agent { max-width: 60px; font-size: 10px; }

  /* --- DX Dashboard mobile --- */
  .dx-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .dx-stat-value { font-size: 18px; }
  .dx-stat-card { padding: 10px 8px; }
  .dx-diag-grid { grid-template-columns: 1fr; }
  .dx-diag-card { padding: 8px 10px; }
  .dx-timeline-svg { max-height: 110px; }
  .proposal-search-row { flex-direction: column; }
  .proposal-search-input { min-width: auto; }

  /* --- Login / Pairing screens --- */
  #login-screen > div { padding: 0 16px; }
  #login-screen img {
    width: 80px !important;
    height: 80px !important;
  }
  #pairing-screen > div {
    padding: 0 16px;
    max-width: 100% !important;
  }
  #pairing-screen pre {
    font-size: 11px !important;
    padding: 8px !important;
  }
}

/* Extra small screens (iPhone SE etc) */
@media (max-width: 380px) {
  header h1 { font-size: 14px; }
  .theme-select { display: none; }
  .avatar { width: 28px; height: 28px; border-radius: 50% !important; }
  #message-input { padding: 8px 12px; font-size: 14px; }
}

/* ============================================
   HISTORY TAB
   ============================================ */
#history-tab {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.history-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-card);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.history-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.history-search-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.history-search-input:focus {
  border-color: var(--accent);
}

.history-search-input::placeholder {
  color: var(--text-muted);
}

.history-export-btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}

.history-export-btn:hover {
  border-color: var(--accent);
  background: var(--bg-card);
}

.history-export-btn:active {
  background: var(--accent);
  color: white;
}

.history-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.history-filter-btn {
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.history-filter-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.history-filter-btn.filter-active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

#history-list {
  flex: 1;
  padding: 0 16px 16px;
}

.history-date-group {
  margin-bottom: 20px;
}

.history-date-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  position: sticky;
  top: 0;
  background: var(--bg-dark);
  z-index: 5;
}

.history-message {
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 6px;
  border: 1px solid transparent;
  transition: border-color 0.2s;
}

.history-message:hover {
  border-color: var(--border);
}

.history-msg-user {
  background: var(--user-bubble);
}

.history-msg-assistant {
  background: var(--assistant-bubble);
}

.history-msg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.history-msg-role {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

.history-msg-assistant .history-msg-role {
  color: var(--accent-secondary);
}

.history-msg-time {
  font-size: 11px;
  color: var(--text-muted);
}

.history-msg-content {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  word-break: break-word;
  white-space: pre-wrap;
}

.history-highlight {
  background: rgba(124, 58, 237, 0.35);
  color: var(--text);
  border-radius: 2px;
  padding: 0 2px;
}

/* Theme-specific highlight overrides */
.theme-jrpg .history-highlight {
  background: rgba(232, 168, 32, 0.35);
}

.theme-jrpg-paper .history-highlight,
.theme-jrpg-paper-full .history-highlight,
.theme-jrpg-paper-bleed .history-highlight {
  background: rgba(139, 0, 0, 0.2);
}

/* ============================================
   TERMINAL TAB
   ============================================ */
#term-tab {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

#term-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.term-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 2px solid var(--accent);
}

.term-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.term-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.term-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-main, 'Quicksand', sans-serif);
}

.term-connection {
  font-size: 11px;
  color: var(--text-muted);
  transition: color 0.3s;
}

#term-container {
  flex: 1;
  padding: 4px;
  background: var(--bg-dark);
  overflow: hidden;
}

/* Make xterm fill the container */
#term-container .xterm {
  height: 100%;
}

/* --- JRPG/Golden Sun terminal --- */
.theme-jrpg #term-header {
  background: linear-gradient(180deg, #1a1e48 0%, #121638 100%);
  border-bottom: 2px solid #c8a028;
  box-shadow: inset 0 -1px 0 rgba(200, 160, 40, 0.2);
}

.theme-jrpg .term-avatar {
  border: 2px solid #c8a028;
  box-shadow: 0 0 8px rgba(200, 160, 40, 0.2), 2px 2px 0 rgba(0,0,0,0.4);
  border-radius: 4px;
}

.theme-jrpg .term-title {
  background: linear-gradient(180deg, #f0d060 0%, #e8a820 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.theme-jrpg #term-container {
  background: #0c0e24;
  border: 2px solid rgba(200, 160, 40, 0.3);
  border-top: none;
}

/* --- Paper theme terminal --- */
.theme-jrpg-paper #term-header,
.theme-jrpg-paper-full #term-header,
.theme-jrpg-paper-bleed #term-header {
  background: linear-gradient(180deg, #a0845c 0%, #8b7042 50%, #6b5530 100%);
  border-bottom: 3px solid #4a3520;
}

.theme-jrpg-paper .term-avatar,
.theme-jrpg-paper-full .term-avatar,
.theme-jrpg-paper-bleed .term-avatar {
  border: 2px solid #4a3520;
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}

.theme-jrpg-paper .term-title,
.theme-jrpg-paper-full .term-title,
.theme-jrpg-paper-bleed .term-title {
  background: linear-gradient(180deg, #fff8dc 0%, #f0e6c0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.theme-jrpg-paper .term-connection,
.theme-jrpg-paper-full .term-connection,
.theme-jrpg-paper-bleed .term-connection {
  color: #fff8dc;
  opacity: 0.7;
}

.theme-jrpg-paper #term-container,
.theme-jrpg-paper-full #term-container,
.theme-jrpg-paper-bleed #term-container {
  background: #f5ecd8;
  border: 2px solid #8b7355;
  border-top: none;
}

/* --- Terminal input bar --- */
#term-input-bar {
  padding: 6px 8px;
  background: var(--bg-dark);
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}

#term-quick-keys {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  overflow-x: auto;
}

.term-key {
  background: rgba(255,255,255,0.1);
  color: var(--text-secondary, #ccc);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.term-key:active {
  background: rgba(255,255,255,0.25);
}

#term-input-row {
  display: flex;
  gap: 6px;
}

#term-input {
  flex: 1;
  background: rgba(0,0,0,0.4);
  color: var(--text-primary, #fff);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 15px;
  font-family: 'Courier New', monospace;
  outline: none;
}

#term-input:focus {
  border-color: var(--accent, #7c3aed);
  box-shadow: 0 0 6px rgba(124, 58, 237, 0.3);
}

#term-send-btn {
  background: var(--accent, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  flex-shrink: 0;
}

#term-send-btn:active {
  opacity: 0.8;
}

/* JRPG theme input bar */
.theme-jrpg #term-input-bar {
  background: #0c0e24;
  border-top-color: rgba(200, 160, 40, 0.3);
}
.theme-jrpg .term-key {
  background: rgba(200, 160, 40, 0.15);
  border-color: rgba(200, 160, 40, 0.3);
  color: #f0d060;
}
.theme-jrpg #term-input {
  background: rgba(0,0,0,0.5);
  border-color: rgba(200, 160, 40, 0.3);
  color: #e8e0c8;
}
.theme-jrpg #term-input:focus {
  border-color: #c8a028;
  box-shadow: 0 0 6px rgba(200, 160, 40, 0.3);
}
.theme-jrpg #term-send-btn {
  background: linear-gradient(180deg, #e8a820 0%, #c8a028 100%);
  color: #0c0e24;
}

/* Paper theme input bar */
.theme-jrpg-paper #term-input-bar,
.theme-jrpg-paper-full #term-input-bar,
.theme-jrpg-paper-bleed #term-input-bar {
  background: #e8dcc4;
  border-top: 2px solid #8b7355;
}
.theme-jrpg-paper .term-key,
.theme-jrpg-paper-full .term-key,
.theme-jrpg-paper-bleed .term-key {
  background: rgba(74, 53, 32, 0.15);
  border-color: #8b7355;
  color: #4a3520;
}
.theme-jrpg-paper #term-input,
.theme-jrpg-paper-full #term-input,
.theme-jrpg-paper-bleed #term-input {
  background: #f5ecd8;
  border-color: #8b7355;
  color: #2a1810;
}
.theme-jrpg-paper #term-input:focus,
.theme-jrpg-paper-full #term-input:focus,
.theme-jrpg-paper-bleed #term-input:focus {
  border-color: #4a3520;
  box-shadow: 0 0 6px rgba(74, 53, 32, 0.3);
}
.theme-jrpg-paper #term-send-btn,
.theme-jrpg-paper-full #term-send-btn,
.theme-jrpg-paper-bleed #term-send-btn {
  background: linear-gradient(180deg, #6b5530 0%, #4a3520 100%);
  color: #fff8dc;
}

/* --- Mobile terminal --- */
@media (max-width: 600px) {
  #term-header {
    padding: 8px 12px;
    gap: 10px;
  }
  .term-avatar {
    width: 32px;
    height: 32px;
  }
  .term-title { font-size: 13px; }
  #term-container { padding: 2px; }
}

/* ============================================
   GLACEON THEME (Ice Blue)
   ============================================ */
.theme-glaceon {
  --bg-dark: #0a1628;
  --bg-card: #0f1f38;
  --bg-input: #152a48;
  --accent: #7dd3fc;
  --accent-glow: #bae6fd;
  --accent-secondary: #38bdf8;
  --text: #e0f2fe;
  --text-muted: #7dd3fc;
  --user-bubble: #1e3a5f;
  --assistant-bubble: #0c2340;
  --border: #1e4976;
  --online: #67e8f9;
  --font-main: 'Quicksand', sans-serif;
}

body.theme-glaceon::before {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(125, 211, 252, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(186, 230, 253, 0.04) 0%, transparent 60%),
    linear-gradient(180deg, #0a1628 0%, #061020 100%);
  opacity: 1;
}

/* Glaceon ice crystal pattern on chat */
.theme-glaceon #chat {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(125, 211, 252, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(56, 189, 248, 0.03) 0%, transparent 40%);
}

.theme-glaceon header {
  background: linear-gradient(135deg, #0f1f38 0%, #0a1628 100%);
  border-bottom: 2px solid #1e4976;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(125, 211, 252, 0.1);
}

.theme-glaceon header h1 {
  background: linear-gradient(135deg, #bae6fd 0%, #7dd3fc 50%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.theme-glaceon .avatar {
  border: 2px solid #38bdf8;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2), 2px 2px 0 rgba(0,0,0,0.3);
}

.theme-glaceon .bubble {
  background: linear-gradient(180deg, #0f2240 0%, #0c1d38 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(186, 230, 253, 0.05);
}

.theme-glaceon .message.user .bubble {
  background: linear-gradient(180deg, #1e3a5f 0%, #1a3355 100%);
  border-color: rgba(103, 232, 249, 0.3);
}

.theme-glaceon #input-area {
  background: linear-gradient(180deg, #0c1d38 0%, #0f1f38 100%);
  border-top: 2px solid #1e4976;
}

.theme-glaceon #message-input {
  background: #0a1628;
  border: 1px solid #1e4976;
  border-radius: 20px;
}

.theme-glaceon #message-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.theme-glaceon #send-btn {
  background: linear-gradient(135deg, #38bdf8 0%, #7dd3fc 100%);
  color: #0a1628;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}

.theme-glaceon .typing-indicator span { background: #7dd3fc; }
.theme-glaceon .status-dot.connected { background: #67e8f9; box-shadow: 0 0 10px rgba(103, 232, 249, 0.5); }
.theme-glaceon .icon-btn { background: #152a48; border-color: #1e4976; color: #7dd3fc; }
.theme-glaceon .icon-btn:hover { background: #1e3a5f; border-color: #38bdf8; }

/* ============================================
   LEAFEON THEME (Forest Green)
   ============================================ */
.theme-leafeon {
  --bg-dark: #0a1a0a;
  --bg-card: #122012;
  --bg-input: #1a2e1a;
  --accent: #4ade80;
  --accent-glow: #86efac;
  --accent-secondary: #a3e635;
  --text: #ecfdf5;
  --text-muted: #6ee7b7;
  --user-bubble: #1a3a20;
  --assistant-bubble: #0f2812;
  --border: #2d5a2d;
  --online: #4ade80;
  --font-main: 'Quicksand', sans-serif;
}

body.theme-leafeon::before {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(74, 222, 128, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(163, 230, 53, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, #0a1a0a 0%, #061006 100%);
  opacity: 1;
}

.theme-leafeon #chat {
  background-image:
    radial-gradient(circle at 15% 40%, rgba(74, 222, 128, 0.03) 0%, transparent 35%),
    radial-gradient(circle at 85% 60%, rgba(163, 230, 53, 0.02) 0%, transparent 35%);
}

.theme-leafeon header {
  background: linear-gradient(135deg, #122012 0%, #0a1a0a 100%);
  border-bottom: 2px solid #2d5a2d;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(74, 222, 128, 0.1);
}

.theme-leafeon header h1 {
  background: linear-gradient(135deg, #86efac 0%, #4ade80 50%, #a3e635 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.theme-leafeon .avatar {
  border: 2px solid #4ade80;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.15), 2px 2px 0 rgba(0,0,0,0.3);
}

.theme-leafeon .bubble {
  background: linear-gradient(180deg, #122812 0%, #0f2210 100%);
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.theme-leafeon .message.user .bubble {
  background: linear-gradient(180deg, #1a3a20 0%, #15321a 100%);
  border-color: rgba(163, 230, 53, 0.3);
}

.theme-leafeon #input-area {
  background: linear-gradient(180deg, #0f2210 0%, #122012 100%);
  border-top: 2px solid #2d5a2d;
}

.theme-leafeon #message-input {
  background: #0a1a0a;
  border: 1px solid #2d5a2d;
  border-radius: 20px;
}

.theme-leafeon #message-input:focus {
  border-color: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
}

.theme-leafeon #send-btn {
  background: linear-gradient(135deg, #4ade80 0%, #86efac 100%);
  color: #0a1a0a;
  box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
}

.theme-leafeon .typing-indicator span { background: #4ade80; }
.theme-leafeon .status-dot.connected { background: #4ade80; box-shadow: 0 0 10px rgba(74, 222, 128, 0.5); }
.theme-leafeon .icon-btn { background: #1a2e1a; border-color: #2d5a2d; color: #6ee7b7; }
.theme-leafeon .icon-btn:hover { background: #1a3a20; border-color: #4ade80; }

/* ============================================
   ESPEON THEME (Psychic Purple)
   ============================================ */
.theme-espeon {
  --bg-dark: #1a0a2e;
  --bg-card: #22103a;
  --bg-input: #2e1a4a;
  --accent: #c084fc;
  --accent-glow: #e9d5ff;
  --accent-secondary: #f0abfc;
  --text: #faf5ff;
  --text-muted: #c4b5fd;
  --user-bubble: #3b1f5e;
  --assistant-bubble: #1e0f38;
  --border: #5b21b6;
  --online: #d946ef;
  --font-main: 'Quicksand', sans-serif;
}

body.theme-espeon::before {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(192, 132, 252, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(240, 171, 252, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 60%, rgba(217, 70, 239, 0.06) 0%, transparent 40%),
    linear-gradient(180deg, #1a0a2e 0%, #120822 100%);
  opacity: 1;
}

.theme-espeon #chat {
  background-image:
    radial-gradient(circle at 50% 30%, rgba(192, 132, 252, 0.04) 0%, transparent 50%);
}

.theme-espeon header {
  background: linear-gradient(135deg, #22103a 0%, #1a0a2e 100%);
  border-bottom: 2px solid #5b21b6;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(192, 132, 252, 0.15);
}

.theme-espeon header h1 {
  background: linear-gradient(135deg, #e9d5ff 0%, #c084fc 50%, #f0abfc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.theme-espeon .avatar {
  border: 2px solid #c084fc;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.25), 2px 2px 0 rgba(0,0,0,0.3);
}

.theme-espeon .bubble {
  background: linear-gradient(180deg, #221040 0%, #1e0f38 100%);
  border: 1px solid rgba(192, 132, 252, 0.2);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(233, 213, 255, 0.05);
}

.theme-espeon .message.user .bubble {
  background: linear-gradient(180deg, #3b1f5e 0%, #331a55 100%);
  border-color: rgba(240, 171, 252, 0.3);
}

.theme-espeon #input-area {
  background: linear-gradient(180deg, #1e0f38 0%, #22103a 100%);
  border-top: 2px solid #5b21b6;
}

.theme-espeon #message-input {
  background: #1a0a2e;
  border: 1px solid #5b21b6;
  border-radius: 20px;
}

.theme-espeon #message-input:focus {
  border-color: #c084fc;
  box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.2);
}

.theme-espeon #send-btn {
  background: linear-gradient(135deg, #c084fc 0%, #e9d5ff 100%);
  color: #1a0a2e;
  box-shadow: 0 4px 12px rgba(192, 132, 252, 0.35);
}

.theme-espeon .typing-indicator span { background: #c084fc; }
.theme-espeon .status-dot.connected { background: #d946ef; box-shadow: 0 0 10px rgba(217, 70, 239, 0.5); }
.theme-espeon .icon-btn { background: #2e1a4a; border-color: #5b21b6; color: #c4b5fd; }
.theme-espeon .icon-btn:hover { background: #3b1f5e; border-color: #c084fc; }

/* ============================================
   UMBREON THEME (Dark Gold / Rings)
   ============================================ */
.theme-umbreon {
  --bg-dark: #0a0a0a;
  --bg-card: #141414;
  --bg-input: #1e1e1e;
  --accent: #fbbf24;
  --accent-glow: #fde68a;
  --accent-secondary: #f59e0b;
  --text: #fefce8;
  --text-muted: #a8a29e;
  --user-bubble: #292524;
  --assistant-bubble: #1c1917;
  --border: #44403c;
  --online: #fbbf24;
  --font-main: 'Quicksand', sans-serif;
}

body.theme-umbreon::before {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(251, 191, 36, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 30% 70%, rgba(245, 158, 11, 0.04) 0%, transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(245, 158, 11, 0.04) 0%, transparent 30%),
    linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
  opacity: 1;
}

.theme-umbreon #chat {
  background-image:
    radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.02) 0%, transparent 60%);
}

.theme-umbreon header {
  background: linear-gradient(135deg, #141414 0%, #0a0a0a 100%);
  border-bottom: 2px solid #44403c;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(251, 191, 36, 0.1);
}

.theme-umbreon header h1 {
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 50%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.theme-umbreon .avatar {
  border: 2px solid #fbbf24;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.2), 2px 2px 0 rgba(0,0,0,0.5);
}

.theme-umbreon .bubble {
  background: linear-gradient(180deg, #1c1917 0%, #171412 100%);
  border: 1px solid rgba(68, 64, 60, 0.6);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Umbreon ring glow on assistant bubble */
.theme-umbreon .message.assistant .bubble {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 20px rgba(251, 191, 36, 0.04);
}

.theme-umbreon .message.user .bubble {
  background: linear-gradient(180deg, #292524 0%, #231f1c 100%);
  border-color: rgba(251, 191, 36, 0.2);
}

.theme-umbreon #input-area {
  background: linear-gradient(180deg, #171412 0%, #141414 100%);
  border-top: 2px solid #44403c;
}

.theme-umbreon #message-input {
  background: #0a0a0a;
  border: 1px solid #44403c;
  border-radius: 20px;
}

.theme-umbreon #message-input:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

.theme-umbreon #send-btn {
  background: linear-gradient(135deg, #fbbf24 0%, #fde68a 100%);
  color: #0a0a0a;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.theme-umbreon .typing-indicator span { background: #fbbf24; }
.theme-umbreon .status-dot.connected { background: #fbbf24; box-shadow: 0 0 10px rgba(251, 191, 36, 0.5); }
.theme-umbreon .icon-btn { background: #1e1e1e; border-color: #44403c; color: #a8a29e; }
.theme-umbreon .icon-btn:hover { background: #292524; border-color: #fbbf24; color: #fde68a; }

/* ============================================
   THEME TRANSITION ANIMATION
   ============================================ */
body {
  transition: background-color 0.4s ease;
}
body::before {
  transition: background 0.6s ease, opacity 0.4s ease;
}
header, #input-area, #bottom-nav, .bubble, .avatar, #message-input, #send-btn, .icon-btn {
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

/* ============================================
   THEME PREVIEW CARDS (Settings)
   ============================================ */
#settings-tab {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.settings-section {
  margin-bottom: 24px;
}

.settings-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.theme-preview-card {
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  border: 2px solid var(--border);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.theme-preview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.theme-preview-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.theme-preview-card.active::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
}

.theme-preview-name {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  margin-top: 6px;
}

.theme-preview-colors {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-top: 6px;
}

.theme-preview-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Settings controls */
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-label {
  font-size: 14px;
  color: var(--text);
}

.settings-sublabel {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.settings-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-input);
  outline: none;
}

.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.settings-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--bg-input);
  border-radius: 12px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.2s;
}

.settings-toggle.active {
  background: var(--accent);
  border-color: var(--accent);
}

.settings-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  transition: left 0.2s;
}

.settings-toggle.active::after {
  left: 22px;
}

.settings-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.settings-btn:hover {
  border-color: var(--accent);
  background: var(--bg-card);
}

/* Personality slider labels */
.personality-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  width: 120px;
}

/* Theme schedule */
.schedule-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
}

.schedule-time {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  width: 80px;
}

.schedule-theme-select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  flex: 1;
}

/* ============================================
   MESSAGE REACTIONS
   ============================================ */
.message-reactions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.reaction-btn:hover {
  border-color: var(--accent);
  transform: scale(1.1);
}

.reaction-btn.active {
  background: var(--accent);
  border-color: var(--accent);
}

.reaction-picker {
  display: none;
  position: absolute;
  bottom: -36px;
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4px 8px;
  gap: 4px;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.reaction-picker.visible {
  display: flex;
}

.reaction-picker-btn {
  font-size: 18px;
  padding: 4px;
  cursor: pointer;
  border: none;
  background: none;
  border-radius: 6px;
  transition: transform 0.15s, background 0.15s;
}

.reaction-picker-btn:hover {
  transform: scale(1.3);
  background: var(--bg-input);
}

/* ============================================
   REPLY / QUOTE SUPPORT
   ============================================ */
.reply-preview {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-input);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  margin: 0 20px;
  font-size: 12px;
  color: var(--text-muted);
}

.reply-preview.visible {
  display: flex;
}

.reply-preview-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reply-preview-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
}

.reply-preview-close:hover {
  color: var(--text);
}

.quoted-message {
  background: var(--bg-input);
  border-left: 2px solid var(--accent);
  padding: 4px 8px;
  margin-bottom: 6px;
  border-radius: 0 6px 6px 0;
  font-size: 11px;
  color: var(--text-muted);
  max-height: 40px;
  overflow: hidden;
}

.quoted-message-role {
  font-weight: 700;
  color: var(--accent);
  font-size: 10px;
}

/* ============================================
   MARKDOWN & CODE BLOCKS IN MESSAGES
   ============================================ */
.bubble .md-bold { font-weight: 700; }
.bubble .md-italic { font-style: italic; }
.bubble .md-code {
  background: var(--bg-input);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  border: 1px solid var(--border);
}

.bubble .md-link {
  color: var(--accent-secondary);
  text-decoration: underline;
  text-decoration-color: rgba(6, 182, 212, 0.4);
}

.bubble .md-link:hover {
  color: var(--accent);
}

.bubble .md-list {
  margin: 4px 0;
  padding-left: 20px;
}

.bubble .md-list li {
  margin: 2px 0;
  line-height: 1.4;
}

.bubble .md-codeblock {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre;
}

.bubble .md-codeblock-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'Quicksand', sans-serif;
}

.bubble .md-codeblock-header + .md-codeblock {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.md-copy-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.md-copy-btn:hover {
  background: var(--bg-card);
  color: var(--text);
}

/* Syntax highlighting (lightweight) */
.syn-keyword { color: #c084fc; }
.syn-string { color: #4ade80; }
.syn-number { color: #fb923c; }
.syn-comment { color: var(--text-muted); font-style: italic; }
.syn-function { color: #60a5fa; }
.syn-operator { color: #f472b6; }

/* ============================================
   IMAGE PASTE PREVIEW
   ============================================ */
.paste-preview {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 20px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.paste-preview.visible {
  display: flex;
}

.paste-preview img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.paste-preview-info {
  flex: 1;
  font-size: 12px;
  color: var(--text-muted);
}

.paste-preview-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
}

/* ============================================
   OPS REAL-TIME FEED
   ============================================ */
.ops-feed-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.ops-feed-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--online);
  animation: feedPulse 2s infinite;
}

@keyframes feedPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.ops-executor-list {
  margin-top: 8px;
}

.ops-executor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}

.ops-executor-item-title {
  font-weight: 600;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-executor-item-status {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: 8px;
}

/* Proposal note input */
.proposal-note-input {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.proposal-note-input input {
  flex: 1;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  outline: none;
}

.proposal-note-input button {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

/* Budget burn chart */
.burn-chart-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
}

.burn-chart-svg {
  width: 100%;
  height: auto;
  max-height: 100px;
}

/* ============================================
   OFFLINE INDICATOR
   ============================================ */
.offline-banner {
  display: none;
  text-align: center;
  padding: 6px;
  background: #92400e;
  color: #fef3c7;
  font-size: 12px;
  font-weight: 600;
}

.offline-banner.visible {
  display: block;
}

.offline-queue-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
  font-size: 11px;
  margin-left: 6px;
}

/* ============================================
   TOOL CALL INDICATORS (chat)
   ============================================ */
.tool-indicator {
  font-size: 12px;
  padding: 4px 12px;
  margin: 2px 8px;
  border-radius: 8px;
  font-family: 'Quicksand', sans-serif;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.tool-calling { color: var(--text-muted); font-style: italic; }
.tool-ok { color: #22c55e; }
.tool-error { color: #ef4444; }

/* ============================================
   MOBILE: Theme grid & settings
   ============================================ */
@media (max-width: 600px) {
  .theme-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .theme-preview-card { padding: 8px; }
  .theme-preview-name { font-size: 10px; }
  .settings-slider { width: 100px; }
  .schedule-row { flex-wrap: wrap; }
  .reaction-picker { bottom: -32px; }
}

/* === RELAY MESSAGE STYLES (all themes) === */
.message.relay-claude .message-row,
.message.relay-system .message-row { justify-content: flex-start; }
.relay-avatar { width: 36px; height: 36px; flex-shrink: 0; margin-right: 8px; }
.relay-header { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.relay-from { font-weight: 700; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.relay-title { font-size: 0.75em; color: var(--text-muted); }
.relay-body { font-size: 0.9em; line-height: 1.4; }
.message.relay-system .bubble { background: transparent; border: 1px solid var(--border); font-size: 0.8em; padding: 6px 10px; color: var(--text-muted); }