/*
 * Heliamed — Global Custom Styles
 * Applied automatically on every page via <link> in app.html.
 *
 * Design: Clinical warmth for German medical professionals.
 * Brand teal (#0f4c5c) + warm copper accent (#B87333) on warm paper canvas.
 */

/* ─── Palette ─── */
:root {
  --hm-brand: #0f4c5c;
  --hm-brand-light: #1a6b80;
  --hm-brand-faint: rgba(15, 76, 92, 0.07);
  --hm-brand-wash: rgba(15, 76, 92, 0.12);
  --hm-copper: #B87333;
  --hm-copper-light: #D4956A;
  --hm-copper-faint: rgba(184, 115, 51, 0.08);
  --hm-canvas: #F5F3F0;
  --hm-card: #FFFFFF;
  --hm-sidebar-bg: #0f4c5c;
  --hm-text-heading: #1A2332;
  --hm-text-body: #3D4F5F;
  --hm-text-muted: #8596A5;
  --hm-border: #E3DED8;
  --hm-border-light: #EDE9E4;
  --hm-shadow-sm: 0 1px 3px rgba(26, 35, 50, 0.06);
  --hm-shadow-md: 0 4px 12px rgba(26, 35, 50, 0.08);
  --hm-shadow-lg: 0 12px 32px rgba(26, 35, 50, 0.10);
}

/* ─── Body / Canvas ─── */
html:not(.dark) body {
  background: var(--hm-canvas) !important;
  color: var(--hm-text-body) !important;
}

/* ─── Sidebar — Branded dark teal ─── */
html:not(.dark) #sidebar {
  background: var(--hm-sidebar-bg) !important;
  border-right: none !important;
}

html:not(.dark) #sidebar * {
  color: rgba(255, 255, 255, 0.80) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

html:not(.dark) #sidebar svg {
  stroke: rgba(255, 255, 255, 0.70) !important;
}

html:not(.dark) #sidebar button:hover,
html:not(.dark) #sidebar a:hover,
html:not(.dark) #sidebar [class*="hover:bg-"]:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Keep folder section headers with only the rounded container hover */
html:not(.dark) #sidebar #sidebar-folder-button > button:hover {
  background-color: transparent !important;
}

html:not(.dark) #sidebar .bg-gray-100,
html:not(.dark) #sidebar .bg-gray-50 {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

html:not(.dark) #sidebar .bg-gray-100 *,
html:not(.dark) #sidebar .bg-gray-50 * {
  color: #ffffff !important;
}

html:not(.dark) #sidebar .from-gray-50,
html:not(.dark) #sidebar .from-gray-950 {
  --tw-gradient-from: var(--hm-sidebar-bg) !important;
}

html:not(.dark) #sidebar input {
  background-color: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

html:not(.dark) #sidebar input::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

html:not(.dark) #sidebar .bg-green-400,
html:not(.dark) #sidebar .bg-green-500 {
  background-color: #34D399 !important;
}

html:not(.dark) #sidebar ::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* ─── Top Navigation ─── */
html:not(.dark) #nav {
  background-color: var(--hm-card) !important;
  border-bottom: 1px solid var(--hm-border-light) !important;
  box-shadow: var(--hm-shadow-sm) !important;
}

/* ─── Main Content ─── */
html:not(.dark) .bg-white {
  background-color: var(--hm-card) !important;
}

html:not(.dark) .bg-gray-50:not(#sidebar *) {
  background-color: var(--hm-canvas) !important;
}

html:not(.dark) .bg-gray-950:not(#sidebar *) {
  background-color: var(--hm-canvas) !important;
}

html:not(.dark) .bg-gray-900:not(#sidebar *) {
  background-color: var(--hm-card) !important;
}

html:not(.dark) .bg-gray-850:not(#sidebar *),
html:not(.dark) .bg-gray-800:not(#sidebar *) {
  background-color: #EDE9E4 !important;
}

/* ─── Chat Input (Production tuning) ─── */
/* Outer shell: the single visible border container */
html:not(.dark):not(.heliamed) #message-input-container {
  background: #ffffff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
  padding: 0.25rem 0.5rem !important;
}

/* Hover: gentle lift */
html:not(.dark):not(.heliamed) #message-input-container:hover {
  background-color: #ffffff !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 2px 6px rgba(26, 35, 50, 0.05) !important;
  transform: none !important;
}

/* Focus: subtle lift — no colored ring */
html:not(.dark):not(.heliamed) #message-input-container:focus-within {
  background-color: var(--hm-card) !important;
  border-color: var(--hm-brand, #0f4c5c) !important;
  box-shadow: 0 0 0 3px var(--hm-brand-ring, rgba(15, 76, 92, 0.18)), 0 4px 16px rgba(15, 76, 92, 0.08) !important;
  transform: translateY(-0.5px) !important;
}

/*
 * NUCLEAR: Force every element inside the input container to have
 * NO background in ANY state. Uses max specificity with double IDs.
 * The ONLY painted background is #message-input-container itself.
 */
html:not(.dark):not(.heliamed) #message-input-container #chat-input-container,
html:not(.dark):not(.heliamed) #message-input-container #chat-input-container:hover,
html:not(.dark):not(.heliamed) #message-input-container #chat-input-container:focus-within,
html:not(.dark):not(.heliamed) #message-input-container #chat-input,
html:not(.dark):not(.heliamed) #message-input-container #chat-input:hover,
html:not(.dark):not(.heliamed) #message-input-container #chat-input:focus,
html:not(.dark):not(.heliamed) #message-input-container #chat-input:focus-within,
html:not(.dark):not(.heliamed) #message-input-container div.input-prose,
html:not(.dark):not(.heliamed) #message-input-container div.input-prose:hover,
html:not(.dark):not(.heliamed) #message-input-container .ProseMirror,
html:not(.dark):not(.heliamed) #message-input-container .ProseMirror:hover,
html:not(.dark):not(.heliamed) #message-input-container .ProseMirror:focus,
html:not(.dark):not(.heliamed) #message-input-container div,
html:not(.dark):not(.heliamed) #message-input-container div:hover,
html:not(.dark):not(.heliamed) #message-input-container div:focus,
html:not(.dark):not(.heliamed) #message-input-container div:focus-within,
html:not(.dark):not(.heliamed) #message-input-container [contenteditable],
html:not(.dark):not(.heliamed) #message-input-container [contenteditable]:hover,
html:not(.dark):not(.heliamed) #message-input-container [contenteditable]:focus {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Inner editor: completely invisible — no border, no bg, no shadow */
html:not(.dark):not(.heliamed) #chat-input {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

html:not(.dark):not(.heliamed) #chat-input:focus-within {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Inner wrapper: generous padding for the typing area */
html:not(.dark):not(.heliamed) #chat-input-container {
  padding: 0.5rem 0.75rem 0.25rem !important;
}

/* ProseMirror text area: comfortable line-height & padding */
html:not(.dark):not(.heliamed) #chat-input .ProseMirror {
  padding: 0.35rem 0.25rem 0.4rem !important;
  line-height: 1.55 !important;
  font-size: 0.9375rem !important;
}

html:not(.dark):not(.heliamed) #chat-input .ProseMirror > p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html:not(.dark):not(.heliamed) #chat-input .ProseMirror p.is-editor-empty:first-child::before {
  left: 0 !important;
  color: var(--hm-text-muted) !important;
  font-size: 0.9375rem !important;
}

/* ─── Primary Buttons — Brand teal ─── */
html:not(.dark) .bg-black:not(#sidebar *) {
  background-color: var(--hm-brand) !important;
  color: #fff !important;
  border-radius: 10px !important;
  transition: background-color 0.15s;
}

html:not(.dark) .bg-black:not(#sidebar *):hover {
  background-color: var(--hm-brand-light) !important;
}

html:not(.dark) .bg-black:not(#sidebar *) > svg,
html:not(.dark) .bg-black:not(#sidebar *) > * > svg {
  stroke: #fff !important;
  fill: #fff !important;
}

html:not(.dark) .bg-emerald-600:not(#sidebar *),
html:not(.dark) .bg-emerald-500:not(#sidebar *),
html:not(.dark) .bg-blue-600:not(#sidebar *),
html:not(.dark) .bg-blue-500:not(#sidebar *) {
  background-color: var(--hm-brand) !important;
  color: #fff !important;
}

html:not(.dark) .bg-emerald-500 {
  background-color: var(--hm-brand) !important;
}

html:not(.dark) input[type='checkbox']:checked {
  background-color: var(--hm-brand) !important;
  border-color: var(--hm-brand) !important;
}

/* ─── Hover states ─── */
html:not(.dark) .hover\:bg-gray-100:not(#sidebar *):hover,
html:not(.dark) .hover\:bg-gray-50:not(#sidebar *):hover {
  background-color: var(--hm-brand-faint) !important;
}

html:not(.dark) .bg-gray-100:not(#sidebar *) {
  background-color: var(--hm-brand-faint) !important;
}

/* ─── Feature Badges — Copper accent ─── */
html:not(.dark) .text-sky-500 {
  color: var(--hm-copper) !important;
}

html:not(.dark) .bg-sky-50 {
  background-color: var(--hm-copper-faint) !important;
}

html:not(.dark) .border-sky-200\/40 {
  border-color: rgba(184, 115, 51, 0.20) !important;
}

html:not(.dark) .hover\:bg-sky-100:hover {
  background-color: rgba(184, 115, 51, 0.12) !important;
}

/* ─── Links — Copper warm accent ─── */
html:not(.dark) a:not(#sidebar a):not([class*="bg-"]):not([class*="text-gray"]):not([class*="text-white"]) {
  color: var(--hm-copper) !important;
}

html:not(.dark) a:not(#sidebar a):not([class*="bg-"]):not([class*="text-gray"]):not([class*="text-white"]):hover {
  color: var(--hm-copper-light) !important;
}

html:not(.dark) .text-blue-600:not(#sidebar *),
html:not(.dark) .text-blue-500:not(#sidebar *),
html:not(.dark) .text-emerald-500:not(#sidebar *),
html:not(.dark) .text-emerald-600:not(#sidebar *) {
  color: var(--hm-copper) !important;
}

/* ─── Text ─── */
html:not(.dark) .text-gray-900:not(#sidebar *) {
  color: var(--hm-text-heading) !important;
}

html:not(.dark) .text-gray-800:not(#sidebar *),
html:not(.dark) .text-gray-700:not(#sidebar *) {
  color: var(--hm-text-body) !important;
}

html:not(.dark) .text-gray-600:not(#sidebar *),
html:not(.dark) .text-gray-500:not(#sidebar *) {
  color: var(--hm-text-muted) !important;
}

html:not(.dark) .text-gray-400:not(#sidebar *),
html:not(.dark) .text-gray-300:not(#sidebar *) {
  color: #A8B5C1 !important;
}

/* ─── Borders ─── */
html:not(.dark) .border-gray-100:not(#sidebar *),
html:not(.dark) .border-gray-200:not(#sidebar *),
html:not(.dark) .border-gray-300:not(#sidebar *),
html:not(.dark) .border-gray-100\/30:not(#sidebar *) {
  border-color: var(--hm-border) !important;
}

/* ─── Inputs ─── */
html:not(.dark) input:not(#sidebar input):not([type="checkbox"]):not([type="radio"]),
html:not(.dark) textarea:not(#sidebar textarea),
html:not(.dark) select:not(#sidebar select) {
  background-color: var(--hm-card) !important;
  border-color: var(--hm-border) !important;
  color: var(--hm-text-body) !important;
  border-radius: 8px !important;
}

html:not(.dark) input:not(#sidebar input):focus,
html:not(.dark) textarea:not(#sidebar textarea):focus,
html:not(.dark) select:not(#sidebar select):focus {
  border-color: rgba(209, 213, 219, 0.7) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  outline: none !important;
}

html:not(.dark) .focus\:ring-blue-500:focus {
  --tw-ring-color: rgba(209, 213, 219, 0.5) !important;
}

/* ─── Modals ─── */
html:not(.dark) .bg-black\/30 {
  background-color: rgba(26, 35, 50, 0.40) !important;
}

html:not(.dark) .bg-white\/95 {
  background-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: var(--hm-shadow-lg) !important;
  border: 1px solid var(--hm-border-light) !important;
  border-radius: 16px !important;
}

html:not(.dark) .bg-gray-100\/80:not(#sidebar *) {
  background-color: #EDE9E4 !important;
  border-radius: 10px !important;
}

/* ─── Code Blocks ─── */
html:not(.dark) pre:not(#sidebar *),
html:not(.dark) .hljs:not(#sidebar *) {
  background-color: #FAF8F5 !important;
  border: 1px solid var(--hm-border) !important;
  border-radius: 10px !important;
}

/* ─── Tables ─── */
html:not(.dark) thead:not(#sidebar *),
html:not(.dark) th:not(#sidebar *) {
  background-color: #FAF8F5 !important;
  color: var(--hm-text-muted) !important;
}

html:not(.dark) tr:not(#sidebar *):hover {
  background-color: var(--hm-brand-faint) !important;
}

/* ─── Badges ─── */
html:not(.dark) .rounded-full.bg-gray-100:not(#sidebar *) {
  background-color: var(--hm-copper-faint) !important;
  color: var(--hm-copper) !important;
  border: 1px solid rgba(184, 115, 51, 0.18) !important;
}

/* ─── Status Colors ─── */
html:not(.dark) .bg-green-400:not(#sidebar *),
html:not(.dark) .bg-green-500:not(#sidebar *) {
  background-color: #10B981 !important;
}

html:not(.dark) .text-red-500:not(#sidebar *) {
  color: #EF4444 !important;
}

/* ─── Scrollbar ─── */
html:not(.dark) ::-webkit-scrollbar-thumb {
  background-color: rgba(61, 79, 95, 0.25) !important;
}

html:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(61, 79, 95, 0.40) !important;
}

/* ─── Tooltips ─── */
html:not(.dark) .tippy-box[data-theme~='dark'] {
  background-color: #1A2332 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
}

/* ─── Gradients ─── */
html:not(.dark) .bg-gradient-to-t.from-white {
  background: linear-gradient(to top, var(--hm-card), transparent) !important;
}

html:not(.dark) .from-white\/90 {
  --tw-gradient-from: rgba(255, 255, 255, 0.95) !important;
}

/* ─── Prose ─── */
html:not(.dark) .prose:not(#sidebar *) {
  color: var(--hm-text-body) !important;
}

/* ─── Placeholder text ─── */
html:not(.dark) .ProseMirror p.is-editor-empty:first-child::before {
  color: #8596A5 !important;
}

/* ─── Disabled state ─── */
html:not(.dark) .bg-gray-200:not(#sidebar *) {
  background-color: #DDD8D2 !important;
  color: #8596A5 !important;
}


/* ==========================================================
   LANDING PAGE — Clinical-Grade Polish
   For medical professionals: clean, spacious, trustworthy
   ========================================================== */

/* ─── Landing page heading ("Wie kann ich Ihnen heute helfen?") ─── */
html:not(.dark) .text-3xl.text-gray-800 {
  color: var(--hm-text-heading) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ─── Broken / loading model profile image on landing ─── */
html:not(.dark) .rounded-full.border-\[1px\] {
  background: linear-gradient(135deg, #0f4c5c 0%, #1a6b80 100%) !important;
  border-color: var(--hm-border) !important;
  object-fit: cover !important;
}

/* ─── Model description text ─── */
html:not(.dark) .text-sm.text-gray-500.line-clamp-2 {
  color: var(--hm-text-muted) !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* ─── Version footer — very subtle ─── */
html:not(.dark) .text-xs.text-gray-400.text-center,
html:not(.dark) .text-xs.text-gray-500.text-center {
  color: #BDC5CE !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.02em !important;
}

/* ─── Input toolbar buttons (+ button, mic, etc.) ─── */
html:not(.dark):not(.heliamed) #message-input-container .bg-transparent.rounded-full {
  color: var(--hm-text-muted) !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
}

html:not(.dark):not(.heliamed) #message-input-container .bg-transparent.rounded-full:hover {
  color: var(--hm-brand) !important;
  background-color: rgba(15, 76, 92, 0.06) !important;
}

/* ─── Send button — brand teal ─── */
html:not(.dark) #send-message-button.bg-black {
  background-color: var(--hm-brand) !important;
  color: #fff !important;
  border-radius: 50% !important;
  transition: background-color 0.15s ease, transform 0.1s ease !important;
}

html:not(.dark) #send-message-button.bg-black:hover {
  background-color: var(--hm-brand-light) !important;
  transform: scale(1.04) !important;
}

/* ─── Disabled send button ─── */
html:not(.dark) #send-message-button.bg-gray-200 {
  background-color: #E3DED8 !important;
  color: #BDC5CE !important;
}

/* ─── Voice mode button — brand teal ─── */
html:not(.dark) .bg-black.text-white.rounded-full:not(#sidebar *) {
  background-color: var(--hm-brand) !important;
  color: #fff !important;
}

html:not(.dark) .bg-black.text-white.rounded-full:not(#sidebar *):hover {
  background-color: var(--hm-brand-light) !important;
}

/* ─── Suggestion prompt cards (if shown) ─── */
html:not(.dark) [class*="hover:bg-gray-50"]:not(#sidebar *) {
  border-radius: 12px !important;
  transition: background-color 0.15s ease !important;
}

/* ─── Scroll-to-bottom button ─── */
html:not(.dark) .bg-white.border.border-gray-100.rounded-full {
  background-color: var(--hm-card) !important;
  border-color: var(--hm-border) !important;
  box-shadow: var(--hm-shadow-sm) !important;
}

/* ─── Overall body polish ─── */
html:not(.dark) body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}


/* ==========================================================
   HERO LANDING — Dark teal hero section (matches heliamed.de)
   ========================================================== */

/* Full-page dark teal gradient — matches website hero with ambient glow */
.hm-hero-landing {
  background: radial-gradient(circle at 50% 30%, #165f70 0%, #0f4c5c 40%, #0e7490 100%) !important;
  color: #ffffff !important;
}

/* Override all dark grays inside the hero to be transparent/dark-compatible */
.hm-hero-landing .bg-white {
  background-color: transparent !important;
}

.hm-hero-landing .bg-gray-50,
.hm-hero-landing .bg-gray-100,
.hm-hero-landing .bg-gray-900,
.hm-hero-landing .bg-gray-950 {
  background-color: transparent !important;
}

/* Text colors inside hero */
.hm-hero-landing .text-gray-800,
.hm-hero-landing .text-gray-700,
.hm-hero-landing .text-gray-900 {
  color: #ffffff !important;
}

.hm-hero-landing .text-gray-600,
.hm-hero-landing .text-gray-500 {
  color: rgba(255, 255, 255, 0.7) !important;
}

.hm-hero-landing .text-gray-400 {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Chat input on landing — clean white card, light border */
html:not(.heliamed) .hm-hero-landing #message-input-container {
  background: #ffffff !important;
  border: 1.5px solid #0f4c5c !important;
  border-radius: 24px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}

html:not(.heliamed) .hm-hero-landing #message-input-container:hover {
  background: #ffffff !important;
  border-color: #0d5a6e !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
  transform: none !important;
}

html:not(.heliamed) .hm-hero-landing #message-input-container:focus-within {
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transform: none !important;
}

/* Input text inside hero */
.hm-hero-landing #message-input-container .ProseMirror,
.hm-hero-landing #message-input-container #chat-input {
  color: #1E293B !important;
}

/* Placeholder text */
.hm-hero-landing .ProseMirror p.is-editor-empty:first-child::before {
  color: #94A3B8 !important;
}

/* Toolbar icons in hero — dark on white input */
.hm-hero-landing #message-input-container .bg-transparent.rounded-full {
  color: #64748B !important;
}

.hm-hero-landing #message-input-container .bg-transparent.rounded-full:hover {
  color: #0f4c5c !important;
  background-color: rgba(15, 76, 92, 0.08) !important;
}

/* Send / voice buttons on hero */
.hm-hero-landing .bg-black.text-white.rounded-full,
.hm-hero-landing #send-message-button.bg-black {
  background-color: #0f4c5c !important;
  color: #ffffff !important;
}

.hm-hero-landing #send-message-button.bg-gray-200 {
  background-color: #E2E8F0 !important;
  color: #94A3B8 !important;
}

/* Suggestion prompt cards on dark bg */
.hm-hero-landing .hover\:bg-black\/5:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Override gray borders in hero */
.hm-hero-landing .border-gray-200\/40,
.hm-hero-landing .border-gray-300,
.hm-hero-landing .border-gray-100 {
  border-color: rgba(255, 255, 255, 0.15) !important;
}