/* ============================================================
   AIEE.DEV BRAND — LIGHT THEME v13 (surgical, layout-safe)
   White-first enterprise light theme.
   Rules:
   - Theme tokens only (for component CSS vars) — completely safe.
   - Exact class hooks — never restyle generic HTML container tags
     with background/color/border-radius because the app shell uses
     section/article/main as layout flex containers, not panels.
   ============================================================ */

:root,
:root[data-theme=dark],
:root[data-theme=light],
:root[data-theme=nebula],
:root[data-theme=aurora],
:root[data-theme=aurora-light],
:root[data-theme=workbench],
:root[data-theme=workbench-light],
:root[data-theme-mode=light],
:root[data-theme-mode=dark],
:root[data-theme=openknot],
:root[data-theme=openknot-light],
:root[data-theme=dash],
:root[data-theme=dash-light],
:root[data-theme-resolved] {
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);

  /* surfaces — white-first */
  --bg: #ffffff;
  --bg-accent: #fafafa;
  --bg-elevated: #ffffff;
  --card: #ffffff;
  --panel: #ffffff;
  --panel-strong: #fafafa;
  --bg-hover: #f4f4f5;
  --bg-muted: #f4f4f5;

  /* typography */
  --text: #1f2937;
  --text-strong: #0a0a0a;
  --muted: #6b7280;

  /* borders */
  --border: #e5e7eb;
  --border-strong: #cbd5e1;
  --input: #ffffff;

  /* actions — black primary */
  --ring: #0a0a0a;
  --accent: #0a0a0a;
  --accent-hover: #171717;
  --accent-glow: rgba(10, 10, 10, 0.10);
  --accent-subtle: #f4f4f5;
  --accent-2: #0a0a0a;
  --primary: #0a0a0a;
  --primary-foreground: #ffffff;
  --focus: rgba(10, 10, 10, 0.14);
  --selection-bg: #0a0a0a;

  /* semantic colors stay sensible (not grayscaled) */
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --success: #047857;
  --success-foreground: #ffffff;
  --warning: #b45309;
  --warning-foreground: #ffffff;
  --info: #1d4ed8;
  --info-foreground: #ffffff;
  --danger: #b91c1c;
  --error: #b91c1c;
  --chat-sender-hue: 220;
  --chat-sender-sat: 0%;
}

html {
  color-scheme: light;
}

html,
body,
body.login-gate,
body.login-gate-root,
html[data-theme-mode=dark] body,
html[data-theme-mode=light] body {
  background: #ffffff !important;
  background-image: none !important;
  color: #1f2937;
}

body.openclaw-mount-fallback-active {
  background: #ffffff !important;
  background-image: none !important;
}

/* ============================================================
   LOGIN GATE
   ============================================================ */
.login-gate {
  background: #ffffff !important;
  color: #1f2937;
}

.login-gate__card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  color: #1f2937;
}

.login-gate__brand img.login-gate__logo {
  display: none !important;
}

.login-gate__brand span.login-gate__brand-name {
  font-size: 0 !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #0a0a0a !important;
}

.login-gate__brand span.login-gate__brand-name::before {
  content: "aitools.aiee.dev";
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0a0a0a;
}

.login-gate__status-text {
  color: #6b7280;
}

.login-gate__failure-title,
.login-gate__failure-title.login-gate__failure-title {
  color: #0a0a0a !important;
}

.login-gate__failure-summary {
  color: #4b5563;
}

.login-gate__failure-steps li,
.login-gate__failure-steps p {
  color: #4b5563;
}

.login-gate__failure-detail summary {
  color: #6b7280;
}

.login-gate__command {
  border: 1px solid #e5e7eb;
  background: #fafafa;
  border-radius: 8px;
  color: #111827;
}

.settings-secret {
  border-radius: 10px;
}

.settings-secret input,
.login-gate input[type="password"],
.login-gate input[type="text"] {
  background: #ffffff;
  color: #0a0a0a;
  border: 1px solid #d1d5db !important;
  border-radius: 10px;
}

.settings-secret input::placeholder,
.login-gate input::placeholder {
  color: #9ca3af;
}

.settings-secret__toggle {
  color: #6b7280;
}

button.login-gate__connect,
button.login-gate__connect.primary,
.login-gate button.primary,
.login-gate__connect {
  background: #0a0a0a !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid #0a0a0a !important;
  border-radius: 10px;
  box-shadow: none !important;
  transition: background 0.14s ease, transform 0.14s ease;
}

button.login-gate__connect:hover,
.login-gate button.primary:hover {
  background: #1f1f1f !important;
  border-color: #1f1f1f !important;
  transform: translateY(-0.5px);
}

.login-gate__failure a,
.login-gate a,
.login-gate__failure-docs,
.login-gate__foot a {
  color: #0a0a0a !important;
}

/* ============================================================
   MOUNT FALLBACK
   ============================================================ */
.mount-fallback__panel {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08) !important;
  color: #1f2937;
}

.mount-fallback__eyebrow {
  color: #6b7280;
}

.mount-fallback__panel p,
.mount-fallback__panel ul,
.mount-fallback__panel li {
  color: #4b5563 !important;
}

.mount-fallback__panel a {
  color: #0a0a0a !important;
  text-decoration: underline;
}

.mount-fallback__button--primary,
button.mount-fallback__button--primary {
  background: #0a0a0a !important;
  background-image: none !important;
  border-color: #0a0a0a !important;
  color: #ffffff !important;
  border-radius: 10px !important;
}

.mount-fallback__button {
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #0a0a0a !important;
  border: 1px solid #e5e7eb !important;
}

/* ============================================================
   BRAND MARK / LOGO SWEEPS (hide crab/claw)
   ============================================================ */
[class*="settings"] [class*="brand"] img,
[class*="settings-dialog"] [class*="logo"],
[aria-label="Ask OpenClaw"],
[aria-label*="OpenClaw"] {
  visibility: hidden;
  position: relative;
}

[class*="brand"] svg:not(.lucide),
[class*="logo"] svg:not(.lucide),
svg[aria-label*="crab" i],
svg[aria-label*="claw" i],
svg[title*="Claw" i] {
  display: none !important;
}

[class*="brand"] svg + *,
[class*="logo"] svg + * {
  color: #0a0a0a;
}

openclaw-mascot,
.custodian__mark,
[class*="mascot"],
[class*="custodian__mark"] {
  display: none !important;
}

/* ============================================================
   CHAT
   ============================================================ */
.chat-thread,
.chat-thread-inner,
.chat-thread-inner--virtual,
.chat-virtual-sizer,
.chat-virtual-block,
.chat-group,
.chat-group--sender-tint,
.chat-group--with-footer,
.chat-group-messages,
.chat-bubble {
  background: #ffffff !important;
  background-image: none !important;
}

.chat-group--sender-tint {
  --chat-sender-hue: 220 !important;
}

.chat-avatar--sender-initials,
.chat-avatar.user.chat-avatar--sender-initials {
  background: #0a0a0a !important;
  background-image: none !important;
  color: #ffffff !important;
}

img.chat-avatar,
img.chat-avatar.assistant,
img.chat-avatar.user {
  background: #ffffff !important;
  background-image: none !important;
}

.chat-reading-indicator svg,
.claw-icon__jaw,
[class*="claw-icon"] {
  display: none !important;
}

.chat-copy-btn {
  border-radius: 8px !important;
}

/* ============================================================
   NAV / LINKS (only real classes)
   ============================================================ */
.session-link,
.session-link:link,
.session-link:visited {
  border-radius: 10px !important;
  min-height: 40px;
  padding: 0 12px;
  color: #374151;
  border: 1px solid transparent;
  transition: background 0.14s ease, color 0.14s ease;
}

.session-link:hover {
  background: #f4f4f5;
  color: #0a0a0a;
}

.session-link[aria-current="page"],
.session-link[data-active="true"],
.session-link[data-state="active"] {
  background: #0a0a0a;
  color: #ffffff;
  border-color: #0a0a0a;
}

a,
a:link,
a:visited,
a:active {
  color: #0a0a0a;
}

a:hover {
  color: #1f1f1f;
}

/* ============================================================
   FOCUS / SELECTION
   ============================================================ */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable]:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #0a0a0a !important;
  outline-offset: 2px;
}

::selection {
  background: #0a0a0a;
  color: #ffffff;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #fafafa;
}

::-webkit-scrollbar-thumb {
  background: #d4d4d8;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1aa;
}