/* Local Hermes wallpaper override. App logic and theme selection unchanged. */
:root {
  --bg-main-surface: rgba(250,250,250,.60) !important;
  --bg-card: rgba(250,250,250,.60) !important;
  --bg-primary: #1a1d23 !important;
}
html.dark {
  --bg-main-surface: rgba(25,27,34,.60) !important;
  --bg-card: rgba(25,27,34,.60) !important;
  --bg-primary: #1a1d23 !important;
}

html body { background: #e8e9ed !important; }
html body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(rgba(247,247,244,.52),rgba(247,247,244,.64)), url('/hermes-theme/background.webp') center / cover no-repeat; }
html.dark body::before { background: linear-gradient(rgba(12,16,25,.58),rgba(12,16,25,.70)), url('/hermes-theme/background.webp') center / cover no-repeat; }
html body #app { position: relative; z-index: 1; }

html body #app .app-shell,
html body #app .app-layout,
html body #app .app-main { background: transparent !important; }

/* Sidebar 60% */
html body #app .sidebar { background: rgba(250,250,250,.60) !important; backdrop-filter: blur(12px); }
html.dark body #app .sidebar { background: rgba(25,27,34,.60) !important; }

/* Login view */
html body #app .login-view { background: transparent !important; }
html body #app .login-card { background: rgba(250,250,250,.80) !important; backdrop-filter: blur(8px); }
html.dark body #app .login-card { background: rgba(25,27,34,.80) !important; }

/* Chat main area: 30% overlay */
html body #app .chat-main {
  background: linear-gradient(rgba(250,250,250,.30),rgba(250,250,250,.30)), url('/hermes-theme/background.webp') center / cover no-repeat !important;
}
html.dark body #app .chat-main {
  background: linear-gradient(rgba(18,22,30,.30),rgba(18,22,30,.30)), url('/hermes-theme/background.webp') center / cover no-repeat !important;
}

html body #app .chat-main-content,
html body #app .chat-content-wrapper,
html body #app .message-list,
html body #app .messages-container,
html body #app .chat-panel { background: transparent !important; }

/* Input area 70% */
html body #app .chat-input-area,
html body #app .chat-main .input-wrapper { background: rgba(250,250,250,.70) !important; }
html.dark body #app .chat-input-area,
html.dark body #app .chat-main .input-wrapper { background: rgba(24,27,35,.70) !important; }

/* Message bubbles 60% */
html body #app .message.user .message-bubble,
html body #app .message.assistant .message-bubble:not(.agent-error) {
  background-color: rgba(250,250,250,.60) !important;
}
html.dark body #app .message.user .message-bubble,
html.dark body #app .message.assistant .message-bubble:not(.agent-error) {
  background-color: rgba(30,33,40,.60) !important;
}

html body #app .app-main--card { background: rgba(250,250,250,.60) !important; }
html.dark body #app .app-main--card { background: rgba(20,23,30,.60) !important; }

@media (max-width: 720px) { html body #app .sidebar { backdrop-filter: none; } }