/* ═══════════════════════════════════════════════════════════════
   DAHLIA — Dahling Digital
   Design-studio grade skin for OpenClaw Control UI
   Inspired by dahlingdigital.com + Pixel Hive aesthetic
   Dark glassmorphism · Purple glow · Editorial typography
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Force Dark Mode ── */
:root,
html, html[data-theme], html[data-theme-mode],
html[data-theme="light"], html[data-theme-mode="light"] {
  /* Blacks — layered depth like dahlingdigital.com */
  --bg: #010101 !important;
  --bg-accent: #08080c !important;
  --bg-elevated: #0e0e14 !important;
  --bg-hover: #14141e !important;
  --bg-muted: #14141e !important;
  --card: #0a0a10 !important;
  --card-foreground: #ebebf0 !important;
  --card-highlight: rgba(255,255,255,0.03) !important;
  --popover: #0e0e14 !important;
  --popover-foreground: #ebebf0 !important;
  --panel: #010101 !important;
  --panel-strong: #0e0e14 !important;
  --panel-hover: #14141e !important;
  --chrome: rgba(1,1,1,0.95) !important;
  --chrome-strong: rgba(1,1,1,0.98) !important;
  /* Text — high contrast, Inter */
  --text: #c8c8d0 !important;
  --text-strong: #f0f0f5 !important;
  --chat-text: #c8c8d0 !important;
  --fg: #f0f0f5 !important;
  --muted: #606068 !important;
  --muted-strong: #505058 !important;
  --muted-foreground: #606068 !important;
  /* Borders — barely visible */
  --border: rgba(255,255,255,0.06) !important;
  --border-strong: rgba(255,255,255,0.10) !important;
  --border-hover: rgba(255,255,255,0.15) !important;
  --input: rgba(255,255,255,0.06) !important;
  --secondary: #0a0a10 !important;
  --secondary-foreground: #ebebf0 !important;
  /* Purple accent — Dahling Digital signature */
  --ring: #9333ea !important;
  --accent: #9333ea !important;
  --accent-hover: #a855f7 !important;
  --accent-muted: rgba(147,51,234,0.7) !important;
  --accent-subtle: rgba(147,51,234,0.08) !important;
  --accent-foreground: #ffffff !important;
  --accent-glow: rgba(147,51,234,0.25) !important;
  --primary: #9333ea !important;
  --primary-foreground: #ffffff !important;
  --accent-2: #7c3aed !important;
  --accent-2-muted: rgba(124,58,237,0.7) !important;
  --accent-2-subtle: rgba(124,58,237,0.08) !important;
  --focus: rgba(147,51,234,0.25) !important;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px rgba(147,51,234,0.6) !important;
  --focus-glow: 0 0 0 2px var(--bg), 0 0 0 3px #9333ea, 0 0 20px rgba(147,51,234,0.2) !important;
  --shadow-glow: 0 0 30px rgba(147,51,234,0.12) !important;
  /* Premium shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5) !important;
  --shadow-md: 0 4px 20px rgba(0,0,0,0.6) !important;
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.7) !important;
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.8) !important;
  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  --font-display: 'Inter', -apple-system, sans-serif !important;
  /* Radius — softer */
  --radius: 12px !important;
  --radius-sm: 8px !important;
  --radius-md: 12px !important;
  --radius-lg: 16px !important;
  --radius-xl: 24px !important;
  color-scheme: dark !important;
}

body {
  background: #010101 !important;
  color: #c8c8d0 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ── Login Gate — Premium ── */
.login-gate {
  background: #010101 !important;
}
.login-gate__card {
  background: rgba(10,10,16,0.8) !important;
  backdrop-filter: blur(40px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.5) !important;
  border: 1px solid rgba(147,51,234,0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 0 80px rgba(147,51,234,0.06), 0 32px 64px rgba(0,0,0,0.5) !important;
}
.login-gate__logo {
  content: url(/flower.webp) !important;
  width: 72px !important;
  height: 72px !important;
  filter: drop-shadow(0 0 24px rgba(147,51,234,0.4)) !important;
  border-radius: 16px;
}
.login-gate__logo svg { display: none !important; }
.login-gate__title {
  color: #f0f0f5 !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}
.login-gate__sub {
  color: #606068 !important;
  font-weight: 400 !important;
}
.login-gate__connect {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 50%, #6d28d9 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 24px rgba(147,51,234,0.3), inset 0 1px rgba(255,255,255,0.1) !important;
  transition: all 0.2s ease !important;
}
.login-gate__connect:hover {
  background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 50%, #7c3aed 100%) !important;
  box-shadow: 0 4px 32px rgba(147,51,234,0.5), inset 0 1px rgba(255,255,255,0.15) !important;
  transform: translateY(-1px) !important;
}

/* ── Sidebar — Glassmorphism ── */
.sidebar-brand__logo {
  content: url(/flower.webp) !important;
  width: 32px !important;
  height: 32px !important;
  filter: drop-shadow(0 0 12px rgba(147,51,234,0.35)) !important;
  border-radius: 10px;
  object-fit: contain;
}
.sidebar-brand__logo svg { display: none !important; }
.sidebar-brand__title {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
.sidebar-brand__eyebrow {
  color: #9333ea !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
}

/* ── Chat — Premium feel ── */
.chat-avatar--logo,
.agent-chat__avatar--logo {
  border: 1px solid rgba(147,51,234,0.15) !important;
  background: rgba(147,51,234,0.05) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.chat-avatar--logo img,
.agent-chat__avatar--logo img,
img.chat-avatar.assistant,
img.chat-avatar.chat-avatar--logo {
  content: url(/flower.webp) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  display: block !important;
  object-fit: cover !important;
}
.chat-avatar.assistant,
.chat-avatar.other,
.chat-avatar.tool {
  display: grid !important;
}
.chat-avatar.user {
  background: rgba(147,51,234,0.08) !important;
  color: #a855f7 !important;
  border-color: rgba(147,51,234,0.12) !important;
  border-radius: 12px !important;
}

/* ── Buttons — Gradient glow ── */
.btn--primary,
button[class*=primary] {
  background: linear-gradient(135deg, #9333ea, #7c3aed) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(147,51,234,0.2) !important;
}
.btn--primary:hover,
button[class*=primary]:hover {
  background: linear-gradient(135deg, #a855f7, #8b5cf6) !important;
  box-shadow: 0 2px 20px rgba(147,51,234,0.35) !important;
}

/* ── Cards & Panels — Glass effect ── */
[class*=card],
[class*=popover],
[class*=dialog],
[class*=modal] {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ── Input fields — subtle glow on focus ── */
input, textarea, select {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  color: #c8c8d0 !important;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(147,51,234,0.4) !important;
  box-shadow: 0 0 0 3px rgba(147,51,234,0.1), 0 0 20px rgba(147,51,234,0.08) !important;
}

/* ── Scrollbar — minimal ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(147,51,234,0.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(147,51,234,0.3); }

/* ── Selection ── */
::selection { background: rgba(147,51,234,0.3); color: #fff; }

/* ── Background Video ── */
#dahlia-bg-video {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  object-fit: cover; z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: screen;
}
openclaw-app { position: relative; z-index: 1; }

/* ── Watermark ── */
#dahlia-powered {
  position: fixed; bottom: 10px; right: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(147,51,234,0.18);
  z-index: 2; pointer-events: none;
}

/* ── Links ── */
a:not([class]) { color: #a855f7; }
a:not([class]):hover { color: #c084fc; }

/* ── Smooth transitions ── */
.sidebar, .content, openclaw-app {
  min-width: 0 !important;
}