/* ISCC-AI Theme - Custom styles for Chainlit */

/* ISCC Brand Colors - Light Theme (warm off-white #fdfcfa background) */
:root,
.light {
  --background: 40 23% 99% !important;
  --foreground: 213 69% 23% !important;
  --primary: 211 100% 35% !important;
  --primary-foreground: 0 0% 100% !important;
  --secondary: 210 30% 95% !important;
  --secondary-foreground: 213 69% 23% !important;
  --accent: 210 30% 95% !important;
  --accent-foreground: 213 69% 23% !important;
  --destructive: 356 89% 67% !important;
  --destructive-foreground: 0 0% 100% !important;
  --muted: 40 20% 96% !important;
  --muted-foreground: 213 40% 40% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 213 69% 23% !important;
  --popover: 0 0% 100% !important;
  --popover-foreground: 213 69% 23% !important;
  --border: 211 100% 35% !important;
  --input: 0 0% 100% !important;
  --ring: 211 100% 35% !important;
}

/* ISCC Brand Colors - Dark Theme (Deep Navy #123663 base) */
.dark {
  --background: 213 69% 23% !important;
  --foreground: 0 0% 100% !important;
  --primary: 211 100% 55% !important;
  --primary-foreground: 0 0% 100% !important;
  --secondary: 211 100% 35% !important;
  --secondary-foreground: 0 0% 100% !important;
  --accent: 211 100% 35% !important;
  --accent-foreground: 0 0% 100% !important;
  --destructive: 356 89% 67% !important;
  --destructive-foreground: 0 0% 100% !important;
  --muted: 213 60% 18% !important;
  --muted-foreground: 210 20% 75% !important;
  --card: 213 65% 28% !important;
  --card-foreground: 0 0% 100% !important;
  --popover: 213 65% 28% !important;
  --popover-foreground: 0 0% 100% !important;
  --border: 213 50% 35% !important;
  --input: 213 50% 35% !important;
  --ring: 211 100% 55% !important;
}

/* Inline code styling - Light grey background with default text color */
code:not(pre code):not(.hljs) {
  background-color: #e8ebef !important;
  color: inherit !important;
  padding: 0.15em 0.4em !important;
  border-radius: 4px !important;
  font-size: 0.9em !important;
  border: none !important;
}

/* Dark theme inline code - slightly lighter grey for visibility */
.dark code:not(pre code):not(.hljs) {
  background-color: #2a4a6b !important;
}

/* Additional ISCC color tokens for custom use */
:root {
  --iscc-blue: #0054b2;
  --iscc-navy: #123663;
  --iscc-yellow: #ffc300;
  --iscc-coral: #f56169;
  --iscc-green: #a6db50;
  --iscc-sky: #4596f5;
  --iscc-cyan: #7ac2f7;
}

/* Header - branded navigation bar */
#header {
  background-color: hsl(213 69% 15%) !important;
  border-bottom: 1px solid hsl(213 50% 25%) !important;
}

/* Light theme header - ISCC Blue for elegant branding */
.light #header {
  background-color: #0054b2 !important;
  border-bottom: 1px solid hsl(211 100% 28%) !important;
}

/* Ensure header text/icons are white in light mode */
.light #header,
.light #header * {
  color: white !important;
}

.light #header button {
  color: white !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.light #header button:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Hide icons in header links - show text only (except ISCC logo) */
#header a[target="_blank"]:not(#iscc-header-logo) img {
  display: none !important;
}

/* Chat Profile icons - ensure visibility in both themes */

/* Profile icon in header (navigation bar) - always white since header is dark/blue */
#header img[src*="lucide-static"],
#header img[src*="favicon"] {
  filter: brightness(0) invert(1) !important;
}

/* Profile dropdown menu icons - white in dark theme */
.dark [role="menu"] img[src*="lucide-static"],
.dark [role="listbox"] img[src*="lucide-static"],
.dark [data-radix-popper-content-wrapper] img[src*="lucide-static"] {
  filter: brightness(0) invert(1) !important;
}

/* Chat message avatar icons - white in dark theme */
.dark .ai-message img[src*="lucide-static"] {
  filter: brightness(0) invert(1) !important;
}

/* Profile dropdown menu icons - black (default) in light theme, no filter needed */
.light [role="menu"] img[src*="lucide-static"],
.light [role="listbox"] img[src*="lucide-static"],
.light [data-radix-popper-content-wrapper] img[src*="lucide-static"] {
  filter: none !important;
}

/* Welcome screen ISCC logo (injected by JS to replace profile icon) */
#iscc-welcome-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#iscc-welcome-logo-container img {
  height: 80px;
  width: auto;
}

/* Theme-aware welcome logo visibility */
.light #iscc-welcome-logo-light {
  display: block !important;
}

.light #iscc-welcome-logo-dark {
  display: none !important;
}

.dark #iscc-welcome-logo-light {
  display: none !important;
}

.dark #iscc-welcome-logo-dark {
  display: block !important;
}

/* Header logo container */
#iscc-header-logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
  margin-right: 8px;
}

#iscc-header-logo:hover {
  opacity: 0.8;
}

#iscc-header-logo img {
  height: 48px;
  width: auto;
  max-width: 200px;
}

/* Theme-aware logo visibility */
/* Both themes use white logo since header is always dark/blue */
#iscc-header-logo-light {
  display: none !important;
}

#iscc-header-logo-dark {
  display: block !important;
}

/* Code block styling - Dark blue background matching ISCC design */
pre,
.prose pre,
pre[class*="language-"],
div[class*="code-block"] pre {
  background-color: #0d2847 !important;
  border: 1px solid #1e4a7a !important;
  border-radius: 6px !important;
}

/* Override highlight.js background */
pre code,
pre code.hljs,
.hljs {
  background-color: #0d2847 !important;
  color: #e6edf5 !important;
}

/* Syntax highlighting colors for dark blue background */
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name {
  color: #7ac2f7 !important;
}

.hljs-string,
.hljs-attr {
  color: #a6db50 !important;
}

.hljs-number,
.hljs-literal {
  color: #ffc300 !important;
}

.hljs-comment,
.hljs-quote {
  color: #6a8faf !important;
  font-style: italic;
}

.hljs-function,
.hljs-title {
  color: #4596f5 !important;
}

.hljs-variable,
.hljs-params {
  color: #f56169 !important;
}

.hljs-type,
.hljs-class {
  color: #ffc300 !important;
}

.hljs-meta {
  color: #7ac2f7 !important;
}

.hljs-punctuation {
  color: #b8c9db !important;
}

/* Code block card styling - consistent dark theme for both light and dark modes */
/* Target the card wrapper that contains code blocks */
.prose .rounded-lg.border.bg-card:has(pre) {
  background-color: #0d2847 !important;
  border-color: #1e4a7a !important;
}

/* Code block header - lighter blue background like in dark theme */
.prose .rounded-lg.border.bg-card:has(pre) > div:first-child {
  background-color: #1a3d5c !important;
  border-bottom: 1px solid #1e4a7a !important;
  border-radius: 5px 5px 0 0 !important;
}

/* Code block header text (language label) */
.prose .rounded-lg.border.bg-card:has(pre) > div:first-child span {
  color: white !important;
}

/* Code block header copy button */
.prose .rounded-lg.border.bg-card:has(pre) > div:first-child button {
  color: white !important;
}

.prose .rounded-lg.border.bg-card:has(pre) > div:first-child button:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Loading shimmer animation - use ISCC green instead of dark blue for readability */
.loading-shimmer {
  --muted: 79 64% 59%; /* #a6db50 in HSL */
}

/* Message action buttons - ISCC Coral (#f56169) */
/* Target action buttons inside the message buttons container using attribute selector */
div[class*="-ml-1"][class*="flex"][class*="items-center"][class*="flex-wrap"] > button.h-auto,
div[class*="-ml-1"][class*="flex"][class*="items-center"][class*="flex-wrap"] > button.px-3:not(.w-9) {
  background-color: var(--iscc-coral) !important;
  color: white !important;
  margin-left: 8px !important;
}

div[class*="-ml-1"][class*="flex"][class*="items-center"][class*="flex-wrap"] > button.h-auto:hover,
div[class*="-ml-1"][class*="flex"][class*="items-center"][class*="flex-wrap"] > button.px-3:not(.w-9):hover {
  background-color: #e04550 !important;
  color: white !important;
}

/* Avatar sizing - make avatars more visible (default is 20px via h-5 w-5 Tailwind classes) */
/* Only target message avatars, not starter icons or other UI elements */

/* Target avatars within message containers specifically */
div[class*="message"] span.h-5.w-5,
div[class*="message"] img.h-5.w-5,
div[class*="Message"] span.h-5.w-5,
div[class*="Message"] img.h-5.w-5 {
  height: 2rem !important;
  width: 2rem !important;
}

/* Additional specific targeting for avatar components in messages only */
[data-testid="message-avatar"],
[data-testid="message-avatar"] *,
div[class*="message"] span[class*="avatar"] img,
div[class*="message"] span[class*="Avatar"] img,
div[class*="Message"] span[class*="avatar"] img,
div[class*="Message"] span[class*="Avatar"] img {
  height: 40px !important;
  width: 40px !important;
  min-height: 40px !important;
  min-width: 40px !important;
}

/* Ensure avatar containers expand to fit - only in messages */
[data-testid="message-avatar"],
div[class*="message"] span[class*="avatar"],
div[class*="message"] span[class*="Avatar"],
div[class*="Message"] span[class*="avatar"],
div[class*="Message"] span[class*="Avatar"] {
  height: 40px !important;
  width: 40px !important;
  min-height: 40px !important;
  min-width: 40px !important;
}

/* ===== MOBILE RESPONSIVE STYLES ===== */

/* Prevent horizontal overflow on mobile */
html,
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Mobile and tablet breakpoint (< 1024px) - compact header */
@media (max-width: 1023px) {
  /* Header logo - smaller on mobile */
  #iscc-header-logo img {
    height: 32px !important;
    max-width: 120px !important;
  }

  #iscc-header-logo {
    margin-right: 4px !important;
  }

  /* Welcome screen logo - smaller on mobile */
  #iscc-welcome-logo-container img {
    height: 60px !important;
  }

  /* Make header more compact on mobile */
  #header {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Reduce header button/link sizes on mobile */
  #header button,
  #header a {
    padding: 2px !important;
  }

  /* Hide header link icons completely on mobile to save space */
  #header a[target="_blank"]:not(#iscc-header-logo) {
    display: none !important;
  }

  /* Hide the "Anleitung" (guide) button on mobile - it's not essential */
  #header button:has(> [class*="Anleitung"]),
  #header button > div:contains("Anleitung") {
    display: none !important;
  }

  /* Target buttons with "Anleitung" text content directly */
  #header .flex.items-center > button:first-of-type {
    display: none !important;
  }

  /* Hide chat profile selector text on mobile, keep only icon */
  #header [role="combobox"] {
    min-width: auto !important;
    padding: 4px !important;
    gap: 2px !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  /* Keep the combobox images visible and sized */
  #header [role="combobox"] img {
    display: block !important;
    height: 24px !important;
    width: 24px !important;
  }

  /* Hide text labels in header buttons on mobile using font-size */
  #header button {
    font-size: 0 !important;
    line-height: 0 !important;
  }

  /* Ensure button icons remain visible */
  #header button img {
    display: block !important;
    height: 20px !important;
    width: 20px !important;
  }

  /* Restore font size for user avatar button (last button in header right section) */
  #header > div:last-child > button:last-child,
  #header > .flex.items-center.gap-1 > button:last-child {
    font-size: 14px !important;
    line-height: normal !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  #header > div:last-child > button:last-child > div,
  #header > .flex.items-center.gap-1 > button:last-child > div {
    font-size: 14px !important;
    line-height: normal !important;
  }

  /* Ensure main content doesn't overflow */
  main {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Message avatars - slightly smaller on mobile */
  [data-testid="message-avatar"],
  [data-testid="message-avatar"] *,
  div[class*="message"] span[class*="avatar"] img,
  div[class*="Message"] span[class*="avatar"] img {
    height: 32px !important;
    width: 32px !important;
    min-height: 32px !important;
    min-width: 32px !important;
  }

  [data-testid="message-avatar"],
  div[class*="message"] span[class*="avatar"],
  div[class*="Message"] span[class*="avatar"] {
    height: 32px !important;
    width: 32px !important;
    min-height: 32px !important;
    min-width: 32px !important;
  }
}

/* Small mobile breakpoint (< 480px) - extra compact */
@media (max-width: 479px) {
  /* Even smaller logo on very small screens */
  #iscc-header-logo img {
    height: 28px !important;
    max-width: 100px !important;
  }

  /* Smaller welcome logo */
  #iscc-welcome-logo-container img {
    height: 50px !important;
  }
}