/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  ECHO6 — Open WebUI Theme (Togglable) v2                    ║
 * ║  Cyberpunk terminal aesthetic                                ║
 * ║  Cyan #28C0E8 · Yellow #F0D848 · JetBrains Mono             ║
 * ╚══════════════════════════════════════════════════════════════╝
 *
 *  Activates when <html> has class "echo6" — toggled by the
 *  companion script echo6-theme-toggle.js
 */

/* ── Import JetBrains Mono ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Palette Variables ────────────────────────────────────────── */
.echo6 {
  --e6-cyan: #28C0E8;
  --e6-cyan-dim: #1a8aa8;
  --e6-cyan-glow: #28c0e815;
  --e6-yellow: #F0D848;
  --e6-yellow-dim: #c4b03a;
  --e6-yellow-glow: #f0d84820;
  --e6-bg-primary: #0a0e14;
  --e6-bg-secondary: #0d1117;
  --e6-bg-tertiary: #131920;
  --e6-bg-elevated: #181f28;
  --e6-text-primary: #c8d0d8;
  --e6-text-secondary: #4a5568;
  --e6-text-bright: #e2e8f0;
  --e6-border: #1a2332;
  --e6-border-subtle: #141c26;
  --e6-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL
   ══════════════════════════════════════════════════════════════ */

.echo6 body {
  background-color: var(--e6-bg-primary) !important;
  color: var(--e6-text-primary) !important;
}

/* Font — target text elements, not * (breaks icon fonts) */
.echo6 body,
.echo6 p,
.echo6 span,
.echo6 div,
.echo6 a,
.echo6 button,
.echo6 input,
.echo6 textarea,
.echo6 select,
.echo6 label,
.echo6 h1, .echo6 h2, .echo6 h3, .echo6 h4, .echo6 h5, .echo6 h6,
.echo6 li,
.echo6 td, .echo6 th,
.echo6 pre, .echo6 code {
  font-family: var(--e6-font-mono) !important;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — clean, no glow pills
   ══════════════════════════════════════════════════════════════ */

/* Sidebar background */
.echo6 #sidebar,
.echo6 [class*="sidebar"],
.echo6 aside,
.echo6 nav {
  background-color: var(--e6-bg-secondary) !important;
}

/* All sidebar text — muted by default */
.echo6 #sidebar *,
.echo6 aside * {
  color: var(--e6-text-secondary) !important;
}

/* Kill all existing backgrounds/glows on sidebar items */
.echo6 #sidebar a,
.echo6 #sidebar button,
.echo6 aside a,
.echo6 aside button {
  background-color: transparent !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  transition: color 0.12s ease !important;
}

/* Sidebar hover — just brighten the text */
.echo6 #sidebar a:hover,
.echo6 #sidebar a:hover *,
.echo6 #sidebar button:hover,
.echo6 #sidebar button:hover *,
.echo6 aside a:hover,
.echo6 aside a:hover * {
  color: var(--e6-cyan) !important;
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Active/selected chat — no background, just brighter text */
.echo6 #sidebar [class*="bg-"],
.echo6 #sidebar [aria-selected="true"] {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.echo6 #sidebar [class*="bg-"] *,
.echo6 #sidebar [aria-selected="true"] * {
  color: var(--e6-text-bright) !important;
}

/* Section headers (Chats, Folders, Today, Yesterday) */
.echo6 #sidebar .text-xs,
.echo6 aside .text-xs {
  color: var(--e6-text-secondary) !important;
  letter-spacing: 0.08em !important;
}

/* ══════════════════════════════════════════════════════════════
   MAIN CONTENT AREA — aggressively override all backgrounds
   ══════════════════════════════════════════════════════════════ */

.echo6 main,
.echo6 div[class*="bg-white"],
.echo6 div[class*="bg-gray"] {
  background-color: var(--e6-bg-primary) !important;
}

/* Target OWUI's main wrapper and content divs */
.echo6 #app > div,
.echo6 #app > div > div,
.echo6 [class*="h-screen"],
.echo6 [class*="h-full"],
.echo6 [class*="min-h-screen"] {
  background-color: var(--e6-bg-primary) !important;
}

/* Model name display (center of page) */
.echo6 [class*="text-3xl"],
.echo6 [class*="text-2xl"] {
  color: var(--e6-text-bright) !important;
}

/* ── Suggested prompts ────────────────────────────────────────── */
/* Target the suggestion container buttons specifically */
.echo6 [class*="suggestion"],
.echo6 [class*="Suggestion"],
.echo6 button[class*="cursor-pointer"][class*="flex"][class*="rounded-xl"],
.echo6 button[class*="cursor-pointer"][class*="flex"][class*="rounded-lg"],
.echo6 [class*="bg-gray"][class*="cursor-pointer"][class*="rounded"] {
  background-color: var(--e6-bg-tertiary) !important;
  background: var(--e6-bg-tertiary) !important;
  border: 1px solid var(--e6-border) !important;
  color: var(--e6-text-primary) !important;
}

.echo6 [class*="suggestion"]:hover,
.echo6 [class*="Suggestion"]:hover,
.echo6 button[class*="cursor-pointer"][class*="flex"][class*="rounded-xl"]:hover,
.echo6 button[class*="cursor-pointer"][class*="flex"][class*="rounded-lg"]:hover,
.echo6 [class*="bg-gray"][class*="cursor-pointer"][class*="rounded"]:hover {
  border-color: var(--e6-cyan) !important;
  background-color: var(--e6-bg-elevated) !important;
  background: var(--e6-bg-elevated) !important;
}

/* ══════════════════════════════════════════════════════════════
   INPUT AREA
   ══════════════════════════════════════════════════════════════ */

.echo6 textarea,
.echo6 #chat-textarea,
.echo6 [contenteditable] {
  background-color: var(--e6-bg-tertiary) !important;
  border-color: var(--e6-border) !important;
  color: var(--e6-text-bright) !important;
  caret-color: var(--e6-cyan) !important;
}

.echo6 textarea:focus,
.echo6 #chat-textarea:focus,
.echo6 [contenteditable]:focus {
  border-color: var(--e6-cyan) !important;
  box-shadow: 0 0 0 1px var(--e6-cyan-glow) !important;
  outline: none !important;
}

/* Input wrapper bar */
.echo6 [class*="bottom-0"],
.echo6 [class*="sticky"][class*="bottom"] {
  background-color: var(--e6-bg-primary) !important;
}

/* Action icons in input row */
.echo6 textarea ~ div button,
.echo6 [class*="input"] button {
  color: var(--e6-text-secondary) !important;
}

.echo6 textarea ~ div button:hover,
.echo6 [class*="input"] button:hover {
  color: var(--e6-cyan) !important;
}

/* ══════════════════════════════════════════════════════════════
   MESSAGE BUBBLES
   ══════════════════════════════════════════════════════════════ */

.echo6 [data-role="user"] > div {
  background-color: var(--e6-bg-elevated) !important;
  border: 1px solid var(--e6-border) !important;
  border-radius: 8px !important;
}

.echo6 [data-role="assistant"] > div {
  background-color: transparent !important;
}

.echo6 [data-role] * {
  color: var(--e6-text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   TOP BAR / HEADER
   ══════════════════════════════════════════════════════════════ */

.echo6 header,
.echo6 [class*="top-0"][class*="sticky"],
.echo6 [class*="top-0"][class*="fixed"] {
  background-color: var(--e6-bg-secondary) !important;
  border-bottom: 1px solid var(--e6-border-subtle) !important;
}

.echo6 header button,
.echo6 header a,
.echo6 header span {
  color: var(--e6-text-primary) !important;
}

.echo6 header [class*="text-xs"],
.echo6 header [class*="text-gray"] {
  color: var(--e6-text-secondary) !important;
}

/* ══════════════════════════════════════════════════════════════
   CODE BLOCKS
   ══════════════════════════════════════════════════════════════ */

.echo6 pre {
  background-color: var(--e6-bg-secondary) !important;
  border: 1px solid var(--e6-border) !important;
  border-radius: 6px !important;
  color: var(--e6-text-primary) !important;
}

.echo6 pre code {
  background-color: transparent !important;
  border: none !important;
  color: inherit !important;
}

.echo6 :not(pre) > code {
  background-color: var(--e6-bg-elevated) !important;
  color: var(--e6-yellow) !important;
  padding: 0.15em 0.4em !important;
  border-radius: 3px !important;
  font-size: 0.9em !important;
  border: none !important;
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════ */

.echo6 button[type="submit"],
.echo6 button[class*="primary"] {
  background-color: var(--e6-cyan) !important;
  color: var(--e6-bg-primary) !important;
}

.echo6 button[type="submit"]:hover,
.echo6 button[class*="primary"]:hover {
  background-color: var(--e6-cyan-dim) !important;
}

/* ══════════════════════════════════════════════════════════════
   DROPDOWNS / MENUS / MODALS
   ══════════════════════════════════════════════════════════════ */

.echo6 [role="dialog"],
.echo6 [role="menu"],
.echo6 [role="listbox"],
.echo6 [class*="dropdown"],
.echo6 [class*="modal"],
.echo6 [class*="popover"] {
  background-color: var(--e6-bg-tertiary) !important;
  border: 1px solid var(--e6-border) !important;
}

.echo6 [role="option"]:hover,
.echo6 [role="menuitem"]:hover {
  background-color: var(--e6-bg-elevated) !important;
  color: var(--e6-cyan) !important;
}

.echo6 select {
  background-color: var(--e6-bg-tertiary) !important;
  border-color: var(--e6-border) !important;
  color: var(--e6-text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════════════════ */

.echo6 ::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

.echo6 ::-webkit-scrollbar-track {
  background: transparent !important;
}

.echo6 ::-webkit-scrollbar-thumb {
  background: var(--e6-border) !important;
  border-radius: 3px !important;
}

.echo6 ::-webkit-scrollbar-thumb:hover {
  background: var(--e6-cyan-dim) !important;
}

/* ══════════════════════════════════════════════════════════════
   LINKS
   ══════════════════════════════════════════════════════════════ */

.echo6 a:not(#sidebar a):not(aside a):not(nav a):not(#echo6-toggle) {
  color: var(--e6-cyan) !important;
}

.echo6 a:not(#sidebar a):not(aside a):not(nav a):not(#echo6-toggle):hover {
  color: var(--e6-yellow) !important;
}

/* ══════════════════════════════════════════════════════════════
   MISC
   ══════════════════════════════════════════════════════════════ */

.echo6 ::selection {
  background-color: var(--e6-cyan) !important;
  color: var(--e6-bg-primary) !important;
}

.echo6 ::placeholder {
  color: var(--e6-text-secondary) !important;
  opacity: 0.7 !important;
}

.echo6 [class*="badge"],
.echo6 [class*="tag"],
.echo6 [class*="chip"] {
  background-color: var(--e6-yellow-glow) !important;
  color: var(--e6-yellow) !important;
  border: 1px solid var(--e6-yellow-dim) !important;
}

.echo6 [class*="spinner"],
.echo6 [class*="loading"] {
  border-color: var(--e6-border) !important;
  border-top-color: var(--e6-cyan) !important;
}

.echo6 input[type="checkbox"]:checked + * {
  background-color: var(--e6-cyan) !important;
}

.echo6 [role="tooltip"] {
  background-color: var(--e6-bg-elevated) !important;
  color: var(--e6-text-primary) !important;
  border: 1px solid var(--e6-border) !important;
}

/* ══════════════════════════════════════════════════════════════
   TOGGLE BUTTON (injected by echo6-theme-toggle.js)
   ══════════════════════════════════════════════════════════════ */

#echo6-toggle {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 99999;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid #1e2a36;
  background-color: #0f1419;
  color: #6e7a88;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.2s ease;
  opacity: 0.4;
  user-select: none;
  line-height: 1;
  padding: 0;
}

#echo6-toggle:hover {
  opacity: 1;
  border-color: #28C0E8;
  color: #28C0E8;
  box-shadow: 0 0 12px #28c0e840;
}

#echo6-toggle.active {
  opacity: 0.7;
  background-color: #28C0E8;
  color: #0a0e14;
  border-color: #28C0E8;
}

#echo6-toggle.active:hover {
  opacity: 1;
  box-shadow: 0 0 16px #28c0e860;
}
