/*
Copyright 2026 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

:root {
  --bg-primary: #07090e;
  --bg-secondary: #0e131f;
  --bg-tertiary: #161d2d;
  --bg-elevated: #1e2638;
  --bg-header: rgba(14, 19, 31, 0.95);
  --bg-code: #040508;
  --border-subtle: #242f44;
  --border-bright: #3d4f70;
  
  --text-main: #f0f4fc;
  --text-muted: #8b99b5;
  --text-subtle: #57657e;
  --text-code: #d1d9e6;
  
  --neon-cyan: #00f0ff;
  --neon-blue: #0088ff;
  --neon-purple: #a855f7;
  --neon-green: #00ff88;
  --neon-amber: #ffb700;
  --neon-rose: #ff3366;
  
  --shadow-glow-cyan: 0 0 16px rgba(0, 240, 255, 0.25);
  --shadow-glow-amber: 0 0 16px rgba(255, 183, 0, 0.25);
  --shadow-glow-green: 0 0 16px rgba(0, 255, 136, 0.25);
  --shadow-glow-purple: 0 0 16px rgba(168, 85, 247, 0.25);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --bg-elevated: #e2e8f0;
  --bg-header: rgba(255, 255, 255, 0.95);
  --bg-code: #0f172a;
  --border-subtle: #cbd5e1;
  --border-bright: #94a3b8;

  --text-main: #0f172a;
  --text-muted: #334155;
  --text-subtle: #475569;
  --text-code: #e2e8f0;

  --neon-cyan: #0284c7;
  --neon-blue: #0284c7;
  --neon-purple: #7c3aed;
  --neon-green: #059669;
  --neon-amber: #d97706;
  --neon-rose: #db2777;

  --shadow-glow-cyan: 0 0 12px rgba(2, 132, 199, 0.18);
  --shadow-glow-amber: 0 0 12px rgba(217, 119, 6, 0.18);
  --shadow-glow-green: 0 0 12px rgba(5, 150, 105, 0.18);
  --shadow-glow-purple: 0 0 12px rgba(124, 58, 237, 0.18);
}

/* Projector Light Mode Segmented Toggle (Icon-only, zero layout shift) */
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  cursor: pointer;
  user-select: none;
  align-self: center;
  flex-shrink: 0;
}

.theme-toggle:hover {
  border-color: var(--neon-cyan);
}

.theme-seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: var(--text-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-seg.active {
  background: rgba(0, 240, 255, 0.16);
  color: var(--neon-cyan);
}

[data-theme="light"] .theme-seg.active {
  background: rgba(2, 132, 199, 0.15);
  color: var(--neon-cyan);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Rules below set display on elements toggled with the hidden attribute;
   keep hidden meaning hidden. */
[hidden] {
  display: none !important;
}

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
}

.app-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  height: 100dvh;
  max-width: 640px;
  margin: 0 auto;
  background-color: var(--bg-primary);
  position: relative;
  overflow: hidden;
}

/* Header */
.app-header {
  flex-shrink: 0;
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 16px;
  z-index: 10;
}

.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.brand-logo {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.brand-title {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--text-main);
}

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
  white-space: nowrap;
}

.model-badge {
  background: rgba(168, 85, 247, 0.15);
  color: var(--neon-purple);
  border: 1px solid rgba(168, 85, 247, 0.35);
}

.attendee-badge {
  background: rgba(0, 240, 255, 0.12);
  color: var(--neon-cyan);
  border: 1px solid rgba(0, 240, 255, 0.35);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* Status Pill */
.status-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-pill {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  transition: all 0.25s ease;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-text {
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.status-sub {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status Pill States */
.status-pill.suspended {
  background: rgba(87, 101, 126, 0.18);
  border-color: rgba(87, 101, 126, 0.4);
  color: var(--text-muted);
}
.status-pill.suspended .status-dot {
  background-color: #8b99b5;
  box-shadow: 0 0 6px rgba(139, 153, 181, 0.6);
}

.status-pill.running {
  background: rgba(0, 255, 136, 0.15);
  border-color: rgba(0, 255, 136, 0.5);
  color: var(--neon-green);
  box-shadow: var(--shadow-glow-green);
}
.status-pill.running .status-dot {
  background-color: var(--neon-green);
  box-shadow: 0 0 8px var(--neon-green);
  animation: pulse-dot 0.8s infinite ease-in-out;
}

.status-pill.never-started,
.status-pill.unknown {
  background: rgba(87, 101, 126, 0.1);
  border-color: rgba(87, 101, 126, 0.3);
  color: var(--text-muted);
}
.status-pill.never-started .status-dot,
.status-pill.unknown .status-dot {
  background-color: var(--text-subtle);
}

.status-pill.unavailable {
  background: rgba(87, 101, 126, 0.1);
  border-color: rgba(87, 101, 126, 0.5);
  border-style: dashed;
  color: var(--text-muted);
}
.status-pill.unavailable .status-dot {
  background-color: var(--text-subtle);
}

.status-pill.resuming,
.status-pill.suspending {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.4);
  color: var(--neon-cyan);
}
.status-pill.resuming .status-dot,
.status-pill.suspending .status-dot {
  background-color: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
  animation: pulse-dot 1s infinite ease-in-out;
}

.status-pill.paused {
  background: rgba(255, 183, 0, 0.15);
  border-color: rgba(255, 183, 0, 0.5);
  color: var(--neon-amber);
  box-shadow: var(--shadow-glow-amber);
}
.status-pill.paused .status-dot {
  background-color: var(--neon-amber);
}

.status-pill.crashed {
  background: rgba(255, 51, 102, 0.15);
  border-color: rgba(255, 51, 102, 0.5);
  color: var(--neon-rose);
}
.status-pill.crashed .status-dot {
  background-color: var(--neon-rose);
  box-shadow: 0 0 8px var(--neon-rose);
}

.status-pill.transition {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.5);
  color: var(--neon-purple);
  box-shadow: var(--shadow-glow-purple);
}
.status-pill.transition .status-dot {
  background-color: var(--neon-purple);
  box-shadow: 0 0 8px var(--neon-purple);
  animation: pulse-dot 1.5s infinite ease-in-out;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Activity Chip: what the actor is doing right now, separate from its
   substrate state. */
.activity-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  white-space: nowrap;
}

.activity-chip.thinking {
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.5);
  color: var(--neon-cyan);
}

.activity-chip.awaiting {
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: var(--neon-purple);
}

.activity-chip.executing {
  background: rgba(255, 183, 0, 0.15);
  border: 1px solid rgba(255, 183, 0, 0.5);
  color: var(--neon-amber);
}

/* Source Tag: marks a reply that did not come from Gemini. */
.source-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.source-tag.mock {
  background: rgba(87, 101, 126, 0.18);
  border: 1px solid rgba(87, 101, 126, 0.4);
  color: var(--text-muted);
}

.source-tag.mock-fallback {
  background: rgba(255, 183, 0, 0.15);
  border: 1px solid rgba(255, 183, 0, 0.5);
  color: var(--neon-amber);
}

/* Prompt Chips */
.chips-container {
  flex-shrink: 0;
  padding: 8px 12px;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.chips-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.chip:hover, .chip:active {
  background-color: var(--bg-elevated);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.chip-icon {
  font-size: 14px;
}

/* Chat Feed */
.chat-feed {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-message {
  display: flex;
  flex-direction: column;
  max-width: 90%;
  animation: fadeIn 0.25s ease-out;
}

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

.chat-message.user-message {
  align-self: flex-end;
}

.chat-message.assistant-message {
  align-self: flex-start;
  max-width: 96%;
}

.chat-message.system-message {
  align-self: stretch;
  max-width: 100%;
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.user-message .message-meta {
  justify-content: flex-end;
}

.sender-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.timestamp {
  font-family: var(--font-mono);
  color: var(--text-subtle);
}

.message-bubble {
  padding: 12px 14px;
  border-radius: 14px;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.5;
}

.user-message .message-bubble {
  background: linear-gradient(135deg, #0070f3 0%, #0050c8 100%);
  color: #ffffff;
  border-bottom-right-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 112, 243, 0.25);
}

.assistant-message .message-bubble {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-bottom-left-radius: 3px;
  color: var(--text-main);
}

.system-message .message-bubble {
  background-color: var(--bg-tertiary);
  border: 1px dashed var(--border-bright);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 13px;
}

.intro-message .message-bubble p + p {
  margin-top: 6px;
}

.intro-hint {
  color: var(--neon-cyan);
  font-size: 12px;
  font-weight: 500;
}

/* Typing / Progress Indicator */
.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  align-self: flex-start;
}

.typing-dot {
  width: 6px;
  height: 6px;
  background-color: var(--neon-cyan);
  border-radius: 50%;
  animation: typingBounce 1.2s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.3; }
  40% { transform: translateY(-5px); opacity: 1; }
}

/* Human-In-The-Loop Approval Card */
.approval-card {
  margin-top: 10px;
  background-color: var(--bg-tertiary);
  border: 1px solid rgba(255, 51, 102, 0.45);
  box-shadow: 0 0 20px rgba(255, 51, 102, 0.12);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.approval-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.risk-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.risk-indicator.risk-high {
  background: rgba(255, 51, 102, 0.15);
  color: var(--neon-rose);
  border: 1px solid rgba(255, 51, 102, 0.5);
}
.risk-indicator.risk-high .risk-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--neon-rose);
  box-shadow: 0 0 6px var(--neon-rose);
}

.risk-indicator.risk-medium {
  background: rgba(255, 183, 0, 0.15);
  color: var(--neon-amber);
  border: 1px solid rgba(255, 183, 0, 0.5);
}
.risk-indicator.risk-medium .risk-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--neon-amber);
  box-shadow: 0 0 6px var(--neon-amber);
}

.risk-indicator.risk-low {
  background: rgba(0, 255, 136, 0.15);
  color: var(--neon-green);
  border: 1px solid rgba(0, 255, 136, 0.5);
}
.risk-indicator.risk-low .risk-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green);
}

.approval-lang {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.summary-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.code-preview-container {
  border-radius: 8px;
  background-color: var(--bg-code);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.code-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  background-color: rgba(22, 29, 45, 0.8);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 10px;
  font-family: var(--font-mono);
}

.code-tag {
  color: var(--neon-amber);
  font-weight: 700;
}

.code-block {
  padding: 10px 12px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-code);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Syntax Highlighting */
.syn-kwd { color: #ff79c6; font-weight: 600; }
.syn-str { color: #f1fa8c; }
.syn-num { color: #bd93f9; }
.syn-com { color: #6272a4; font-style: italic; }
.syn-fn  { color: #50fa7b; }
.syn-mod { color: #8be9fd; }

/* Approval Actions Buttons */
.approval-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.action-btn {
  flex: 1;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  user-select: none;
}

.btn-reject {
  flex: 0 0 auto;
  padding: 0 18px;
  background: rgba(255, 51, 102, 0.15);
  color: var(--neon-rose);
  border: 1px solid rgba(255, 51, 102, 0.4);
}
.btn-reject:hover, .btn-reject:active {
  background: rgba(255, 51, 102, 0.28);
  border-color: var(--neon-rose);
  color: #ffffff;
}

.btn-approve {
  background: linear-gradient(135deg, #00c853 0%, #009624 100%);
  color: #ffffff;
  border: 1px solid rgba(0, 255, 136, 0.5);
  box-shadow: 0 2px 10px rgba(0, 200, 83, 0.3);
}
.btn-approve:hover, .btn-approve:active {
  background: linear-gradient(135deg, #00e676 0%, #00b248 100%);
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.45);
}

.action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

.approval-status-badge {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.approval-status-badge.approved {
  background: rgba(0, 255, 136, 0.12);
  color: var(--neon-green);
  border: 1px solid rgba(0, 255, 136, 0.3);
}

.approval-status-badge.rejected {
  background: rgba(255, 51, 102, 0.12);
  color: var(--neon-rose);
  border: 1px solid rgba(255, 51, 102, 0.3);
}

/* Footer & Input */
.app-footer {
  flex-shrink: 0;
  background-color: var(--bg-header);
  border-top: 1px solid var(--border-subtle);
  padding: 10px 14px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10;
}

.chat-form {
  width: 100%;
}

.input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 4px 6px 4px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-wrapper:focus-within {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
}

.prompt-input {
  flex: 1;
  min-height: 44px;
  background: transparent;
  border: none;
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
  width: 100%;
}

.prompt-input::placeholder {
  color: var(--text-subtle);
}

.send-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #00f0ff 0%, #0088ff 100%);
  color: #07090e;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.send-btn:hover, .send-btn:active {
  transform: scale(1.03);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.4);
}

.send-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* A failed run: a note, with its stderr collapsed */
.run-note {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--neon-amber);
}

.run-details {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.run-details summary {
  cursor: pointer;
}

.run-details pre {
  margin-top: 0.3rem;
  max-height: 12rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono);
}

/* A successful run's output, spaced exactly as printed so charts line up */
.run-output {
  margin-top: 0.5rem;
  padding: 10px 12px;
  max-height: 22rem;
  overflow: auto;
  background: var(--bg-code);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-code);
  white-space: pre;
}

@media (max-width: 380px) {
  .brand-title {
    font-size: 15px;
    letter-spacing: 0.04em;
  }
  .badge {
    font-size: 10px;
    padding: 3px 6px;
  }
  .attendee-badge {
    font-size: 11px;
  }
}