/*
 * Private AI Workspace — UI stylesheet
 *
 * Design system adapted from pewdiepie-archdaemon/odysseus (MIT).
 * CSS custom-property names, default colour palette, and typographic
 * scale are reused with attribution per NOTICE.  This file is an
 * independent implementation, not a copy of odysseus/static/style.css.
 *
 * Provenance: pewdiepie-archdaemon/odysseus — MIT licence.
 * Recorded in NOTICE under "M9 UI adaptation — frontend design system".
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. Design tokens (same custom-property names as the Odysseus source so
      any per-user theme that stored its palette under these names continues
      to work if users are migrated from Odysseus).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Base palette — dark-mode defaults (mirrors Odysseus default dark theme) */
  --bg:            #282c34;
  --fg:            #9cdef2;
  --panel:         #1a1d24;
  --border:        #355a66;
  --red:           #e06c75;
  --green:         #50fa7b;
  --yellow:        #e5c07b;
  --muted:         #5c7a85;

  /* Sidebar */
  --sidebar-bg:    #1e2228;

  /* Input / send-button */
  --input-bg:      #1a1d24;
  --input-border:  #355a66;
  --send-btn-bg:   #355a66;
  --send-btn-hover:#4a7d92;

  /* Chat bubbles */
  --user-bubble-bg:  #1e3a4a;
  --ai-bubble-bg:    #1a1d24;
  --bubble-border:   #355a66;

  /* Code blocks */
  --code-bg:  #11141a;
  --code-fg:  #abb2bf;

  /* Brand / accent */
  --brand-color: #61afef;

  /* Toggle / active state */
  --toggle-active: #61afef;

  /* Effect overlay */
  --bg-effect-intensity: 1;

  /* Typography */
  --font-mono: 'Fira Code', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 14px;
  --radius: 8px;
  --radius-sm: 4px;

  /* Z-index layers */
  --z-sidebar:   100;
  --z-modal:     200;
  --z-toast:     300;
  --z-notif:     150;

  /* Transitions */
  --t-fast:  0.15s ease;
  --t-base:  0.25s ease;
}

/* Light theme class */
.theme-light {
  --bg:           #f5f5f5;
  --fg:           #1a2030;
  --panel:        #ffffff;
  --border:       #c8d0dc;
  --muted:        #7a8899;
  --sidebar-bg:   #e8eaee;
  --input-bg:     #ffffff;
  --input-border: #c8d0dc;
  --user-bubble-bg: #ddeeff;
  --ai-bubble-bg:   #f5f5f5;
  --bubble-border:  #c8d0dc;
  --code-bg:      #f0f0f0;
  --code-fg:      #2c3e50;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. Reset
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-size: var(--font-size-base);
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-color); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

input, textarea, select {
  font: inherit;
  color: inherit;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  outline: none;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--brand-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-color) 25%, transparent);
}

pre, code { font-family: var(--font-mono); }

/* ═══════════════════════════════════════════════════════════════════════════
   3. Layout — three-column shell (sidebar | main | [drawer])
   ═══════════════════════════════════════════════════════════════════════════ */

#app-shell {
  display: flex;
  height: 100dvh;
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#sidebar {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  z-index: var(--z-sidebar);
  transition: transform var(--t-base);
}

#sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

#sidebar-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-color);
  letter-spacing: 0.04em;
}

#new-chat-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--send-btn-bg);
  color: var(--fg);
  border-radius: var(--radius-sm);
  font-size: 12px;
  transition: background var(--t-fast);
}
#new-chat-btn:hover { background: var(--send-btn-hover); }

#conversation-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.conv-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin: 0 4px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.conv-item:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); }
.conv-item.active { background: color-mix(in srgb, var(--brand-color) 15%, transparent); color: var(--fg); }
.conv-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; }

#sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

#user-email { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* ── Main area ────────────────────────────────────────────────────────────── */
#main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}

#topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

#model-label { font-size: 12px; color: var(--muted); }

#model-select {
  font-size: 13px;
  padding: 4px 8px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--fg);
}

#topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Notification bell ───────────────────────────────────────────────────── */
#notif-btn {
  position: relative;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color var(--t-fast), background var(--t-fast);
}
#notif-btn:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
#notif-btn svg { display: block; }

#notif-badge {
  position: absolute;
  top: 0; right: 0;
  width: 16px; height: 16px;
  background: var(--red);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: translate(30%, -30%);
  opacity: 0;
  transition: opacity var(--t-fast);
  pointer-events: none;
}
#notif-badge.visible { opacity: 1; }

/* ── Sign-out button ─────────────────────────────────────────────────────── */
#signout-btn {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color var(--t-fast), border-color var(--t-fast);
}
#signout-btn:hover { color: var(--red); border-color: var(--red); }

/* ── Chat message list ───────────────────────────────────────────────────── */
#message-list {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.msg {
  display: flex;
  gap: 10px;
  max-width: 780px;
  width: 100%;
  align-self: flex-start;
}
.msg.user { align-self: flex-end; flex-direction: row-reverse; }

.msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--muted);
}
.msg.user .msg-avatar { background: color-mix(in srgb, var(--brand-color) 25%, transparent); color: var(--brand-color); }

.msg-bubble {
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--bubble-border);
  background: var(--ai-bubble-bg);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: calc(100% - 44px);
}
.msg.user .msg-bubble {
  background: var(--user-bubble-bg);
  border-color: color-mix(in srgb, var(--brand-color) 30%, transparent);
}

/* Code within bubbles */
.msg-bubble pre {
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  overflow-x: auto;
  margin: 8px 0;
  font-size: 13px;
}
.msg-bubble code:not(pre code) {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 13px;
}

/* Typing indicator */
.msg-typing .msg-bubble {
  color: var(--muted);
  font-style: italic;
}
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots span {
  width: 5px; height: 5px;
  background: var(--muted);
  border-radius: 50%;
  animation: bounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.6; }
  40%           { transform: translateY(-4px); opacity: 1; }
}

/* Empty state */
#empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 40px;
}
#empty-state h2 {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--fg);
  margin-bottom: 4px;
}

/* ── Input area ──────────────────────────────────────────────────────────── */
#input-area {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}

#input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 820px;
  margin: 0 auto;
}

#chat-input {
  flex: 1;
  padding: 10px 14px;
  min-height: 44px;
  max-height: 200px;
  resize: none;
  border-radius: var(--radius);
  line-height: 1.5;
  overflow-y: auto;
}

#send-btn {
  padding: 10px 18px;
  background: var(--send-btn-bg);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: 14px;
  transition: background var(--t-fast), opacity var(--t-fast);
  white-space: nowrap;
  height: 44px;
}
#send-btn:hover:not(:disabled) { background: var(--send-btn-hover); }
#send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

#input-hint {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 6px;
}

/* ── Error banner ────────────────────────────────────────────────────────── */
#error-banner {
  display: none;
  background: color-mix(in srgb, var(--red) 12%, var(--panel));
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  margin: 0 20px 10px;
  font-size: 13px;
  color: var(--red);
}
#error-banner.visible { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. Notification drawer (slides in from right)
   ═══════════════════════════════════════════════════════════════════════════ */

#notif-drawer {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--border);
  z-index: var(--z-notif);
  transform: translateX(100%);
  transition: transform var(--t-base);
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}
#notif-drawer.open {
  transform: translateX(0);
  position: relative;
}

#notif-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
}

#notif-close-btn {
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transition: color var(--t-fast);
}
#notif-close-btn:hover { color: var(--fg); }

#notif-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.notif-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  cursor: pointer;
  transition: background var(--t-fast);
}
.notif-item:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.notif-item.unread { border-left: 3px solid var(--brand-color); }
.notif-item.read { opacity: 0.65; }

.notif-class {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brand-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.notif-resource {
  font-size: 13px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-time { font-size: 11px; color: var(--muted); }
.notif-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}
.notif-mark-read, .notif-dismiss {
  font-size: 11px;
  color: var(--muted);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
}
.notif-mark-read:hover {
  background: color-mix(in srgb, var(--brand-color) 15%, transparent);
  color: var(--brand-color);
}
.notif-dismiss:hover {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  color: var(--red);
}

#notif-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. Login page
   ═══════════════════════════════════════════════════════════════════════════ */

#login-shell {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

#login-card {
  width: 360px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#login-logo {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--brand-color);
  text-align: center;
}

#login-subtitle {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: -12px;
}

#login-btn {
  width: 100%;
  padding: 12px;
  background: var(--brand-color);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  transition: opacity var(--t-fast);
}
#login-btn:hover:not(:disabled) { opacity: 0.85; }
#login-btn:disabled { opacity: 0.5; cursor: not-allowed; }

#login-error {
  display: none;
  font-size: 13px;
  color: var(--red);
  text-align: center;
}
#login-error.visible { display: block; }

#login-notice {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. Utility helpers
   ═══════════════════════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.hidden { display: none !important; }

.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--brand-color);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   7. Responsive — collapse sidebar on small screens
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  #sidebar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
  }
  #sidebar.open { transform: translateX(0); }
  #notif-drawer { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. Scrollbar styling (Webkit)
   ═══════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }