/* Custom styling for Chainlit application - Fortitude Group Design System */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&family=Montserrat:wght@500;600;700&family=Raleway:wght@500;600;700;800&display=swap');

:root,
.light {
  /* Brand colors from fortitudegroup.it */
  --coo-rgb-primary: 0, 165, 192;       /* #00a5c0 - Fortitude brand cyan / buttons */
  --coo-rgb-primary-hover: 7, 174, 193; /* #07aec1 - bright cyan accent */
  --coo-rgb-primary-active: 45, 130, 123; /* #2d827b - brand green/teal */
  --coo-rgb-primary-dark: 25, 73, 70;   /* #194946 - dark forest green */
  --coo-rgb-primary-glow: 0, 190, 220;
  --coo-rgb-on-primary: 255, 255, 255;

  /* Secondary & Accents */
  --coo-rgb-secondary: 81, 185, 163;   /* #51b9a3 - light seafoam green */
  --coo-rgb-secondary-dark: 45, 130, 123; /* #2d827b */
  --coo-rgb-accent-gold: 253, 200, 81; /* #fdc851 - warm gold accent */

  /* Neutrals matching fortitudegroup.it */
  --coo-rgb-neutral-00: 255, 255, 255;
  --coo-rgb-neutral-01: 239, 245, 245; /* #eff5f5 - alternative light background */
  --coo-rgb-neutral-02: 230, 238, 238;
  --coo-rgb-neutral-03: 215, 226, 226;
  --coo-rgb-neutral-08: 100, 115, 115;
  --coo-rgb-neutral-09: 64, 64, 64;    /* #404040 - copy color */
  --coo-rgb-neutral-10: 3, 3, 3;       /* #030303 - dark gray */

  --coo-primary: rgb(var(--coo-rgb-primary));
  --coo-primary-hover: rgb(var(--coo-rgb-primary-hover));
  --coo-on-primary: rgb(var(--coo-rgb-on-primary));
  --coo-secondary: rgb(var(--coo-rgb-secondary));

  /* Application accent bindings */
  --primary-accent: #00a5c0;
  --primary-accent-hover: #07aec1;

  /* Groundedness text and card colors */
  --groundedness-score-color: rgba(45, 55, 60, 0.75);
  --groundedness-content-color: #222e33;
  --groundedness-content-bg: rgba(0, 165, 192, 0.05);
  --groundedness-content-border: rgba(0, 165, 192, 0.2);
}

.dark {
  --coo-rgb-primary: 0, 165, 192;
  --coo-rgb-primary-hover: 7, 174, 193;
  --coo-primary: rgb(var(--coo-rgb-primary));
  --coo-on-primary: #ffffff;
  --primary-accent: #00a5c0;
  --primary-accent-hover: #07aec1;

  /* Groundedness text and card colors for dark mode */
  --groundedness-score-color: rgba(255, 255, 255, 0.68);
  --groundedness-content-color: rgba(255, 255, 255, 0.92);
  --groundedness-content-bg: rgba(0, 165, 192, 0.1);
  --groundedness-content-border: rgba(0, 165, 192, 0.25);
}

/* Typography matching fortitudegroup.it */
body, p, span, div, input, textarea, select {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: -0.01em;
}

button, .site-header_nav__link, [role="button"] {
  font-family: 'Montserrat', 'Lato', sans-serif;
}

/* Smooth fonts and layout resets */
* {
  box-sizing: border-box;
}

::selection {
  background: var(--coo-primary);
  color: var(--coo-on-primary);
}

/* Custom button and badge accents */
.watermark {
  opacity: 0.7;
  font-size: 0.85rem;
}

/* Chat input bar subtle enhancement */
#chat-input {
  border-radius: 10px;
  margin-bottom: 0.65rem !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

#chat-input:focus-within {
  border-color: var(--primary-accent);
  box-shadow: 0 0 0 2px rgba(0, 165, 192, 0.25);
}

#message-composer {
  min-height: auto !important;
  gap: 0.25rem;
}

#chat-submit,
#stop-button {
  margin-top: 0.15rem;
  background-color: #00a5c0 !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
}

#chat-submit:hover,
#stop-button:hover {
  background-color: #07aec1 !important;
}

/* Avatars in chat messages and profile: non-circular (square with subtle 4px rounded corners) */
.rounded-full:has(> img),
.rounded-full:has(> [class*="aspect-square"]),
div.rounded-full:has(img),
span.rounded-full:has(img),
div:has(> img[src*="/avatars/"]),
div:has(> img[src*="sanad.png"]),
img.rounded-full,
img[src*="/avatars/"],
img[src*="sanad.png"],
img[class*="aspect-square"],
span.bg-muted.rounded-full {
  border-radius: 4px !important;
}

/* Logo sizing - slightly enlarged for improved legibility */
img.logo,
img[alt="logo"] {
  width: 210px !important;
  max-width: 100% !important;
  height: auto !important;
}

#welcome-screen img.logo,
#welcome-screen img[alt="logo"] {
  width: 260px !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Seamless Readme logo: remove Radix aspect-ratio wrapper and card background */
[data-radix-aspect-ratio-wrapper]:has(img[src*="logo_"]) {
  padding-bottom: 0 !important;
  height: auto !important;
  width: max-content !important;
  background: transparent !important;
}

[data-radix-aspect-ratio-wrapper]:has(img[src*="logo_"]) > div {
  position: static !important;
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  height: auto !important;
  width: auto !important;
}

div:has(> [data-radix-aspect-ratio-wrapper]:has(img[src*="logo_"])) {
  max-width: 240px !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1.25rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

img[src*="logo_"] {
  max-width: 240px !important;
  width: 240px !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

.dark img[src*="logo_light.png"] {
  filter: invert(1) brightness(1.5);
}

:root:not(.dark) img[src*="logo_dark.png"],
.light img[src*="logo_dark.png"] {
  filter: invert(1) brightness(0.1);
}

.groundedness-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
}

.groundedness-line p.groundedness-score,
p.groundedness-score,
.groundedness-score,
p.groundedness-score *,
blockquote p.groundedness-score *,
.groundedness-score * {
  color: var(--groundedness-score-color) !important;
  font-size: 0.75rem !important;
  font-style: normal !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.groundedness-line details.groundedness-rationale,
details.groundedness-rationale {
  margin: 0 !important;
  display: block;
}

details.groundedness-rationale summary {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  color: var(--coo-primary);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  line-height: 1.3;
}

details.groundedness-rationale summary::-webkit-details-marker {
  display: none;
}

details.groundedness-rationale summary::before {
  content: "›";
  font-size: 1.05rem;
  line-height: 0.8;
  transition: transform 0.15s ease;
}

details.groundedness-rationale[open] summary::before {
  transform: rotate(90deg);
}

.groundedness-rationale__content {
  border: 1px solid var(--groundedness-content-border);
  background-color: var(--groundedness-content-bg);
  border-radius: 6px;
  color: var(--groundedness-content-color) !important;
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0.35rem 0 0;
  padding: 0.5rem 0.75rem;
  white-space: pre-wrap;
}

blockquote.groundedness-quote,
blockquote:has(> p.groundedness-score),
blockquote:has(> details.groundedness-rationale),
blockquote:has(> .groundedness-line) {
  border-left: none !important;
  padding-left: 0 !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0 !important;
}