@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* Ported UI layer from TIMEShelper:
   - shared light/dark token palettes
   - subtle card elevation and starter card styling
   - typography alignment for chat + code blocks
*/
:root {
  --background: 145 30% 98%;
  --foreground: 220 28% 18%;

  --card: 0 0% 100%;
  --card-foreground: 220 28% 18%;

  --popover: 0 0% 100%;
  --popover-foreground: 220 28% 18%;

  /* Main Lubra green: #009A44 */
  --primary: 147 100% 30%;
  --primary-foreground: 0 0% 100%;

  /* Pale green secondary surfaces */
  --secondary: 145 30% 93%;
  --secondary-foreground: 147 70% 20%;

  --muted: 145 20% 94%;
  --muted-foreground: 150 12% 38%;

  --accent: 145 38% 90%;
  --accent-foreground: 147 70% 20%;

  --border: 145 22% 84%;
  --input: 145 22% 90%;

  /* Green focus borders */
  --ring: 147 100% 30%;

  /* Custom application surfaces */
  --app-bg: #f4faf7;
  --app-bg-elevated: #ffffff;
  --app-sidebar: #edf7f1;

  --app-card-border: rgba(0, 154, 68, 0.16);
  --app-card-shadow: 0 8px 22px rgba(0, 92, 41, 0.08);

  --app-text: #1f2f45;
}

.dark {
  --background: 150 25% 9%;
  --foreground: 145 20% 93%;

  --card: 150 22% 12%;
  --card-foreground: 145 20% 93%;

  --popover: 150 22% 12%;
  --popover-foreground: 145 20% 93%;

  /* Same Lubra green: #009A44 */
  --primary: 147 100% 30%;
  --primary-foreground: 0 0% 100%;

  --secondary: 148 20% 18%;
  --secondary-foreground: 145 20% 93%;

  --muted: 148 18% 17%;
  --muted-foreground: 145 12% 70%;

  --accent: 148 24% 22%;
  --accent-foreground: 145 20% 93%;

  --border: 148 17% 27%;
  --input: 148 17% 23%;

  --ring: 147 100% 30%;

  --app-bg: #101914;
  --app-bg-elevated: #16231b;
  --app-sidebar: #121f17;

  --app-card-border: rgba(0, 154, 68, 0.28);
  --app-card-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);

  --app-text: #e8f2ec;
}

html,
body,
#root {
  background: var(--app-bg) !important;
  color: var(--app-text);
}

* {
  font-family: "Source Sans 3", "Segoe UI", sans-serif !important;
}

code,
pre,
kbd,
samp {
  font-family: "IBM Plex Mono", "Consolas", monospace !important;
}

h1,
h2,
h3 {
  letter-spacing: 0;
  font-weight: 600;
}

button,
input,
textarea {
  border-radius: 10px !important;
}

button {
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

[data-testid="sidebar"],
.cl-sidebar {
  background: var(--app-sidebar) !important;
}

[data-testid="chat-message"],
.cl-chat-message {
  border: 1px solid var(--app-card-border);
  border-radius: 12px;
  background: var(--app-bg-elevated);
  box-shadow: var(--app-card-shadow);
  animation: message-fade-in 0.24s ease both;
}

[data-testid="message-composer"],
.cl-message-composer {
  border: 1px solid var(--app-card-border);
  border-radius: 12px;
  background: var(--app-bg-elevated);
  box-shadow: var(--app-card-shadow);
}

[data-testid="starter-card"],
.cl-starter-card {
  border-radius: 12px;
  border: 1px solid var(--app-card-border);
  background: var(--app-bg-elevated);
  box-shadow: var(--app-card-shadow);
}

[data-testid="starter-card"]:hover,
.cl-starter-card:hover {
  border-color: hsl(var(--primary));
}

a {
  color: hsl(var(--primary));
}

hr {
  border-color: var(--app-card-border);
}

@keyframes message-fade-in {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*/* Larger logo generally */
/*img[alt="logo"] {
/*  width: 400px !important;
/*  height: auto !important;
/*  max-height: none !important;
/*  object-fit: contain !important;
/*}

/* =====================================================
   LUBRA CUSTOM LOGO
   ===================================================== */

/* Light theme */
img[alt="logo"] {
/*  content: url("/public/logo_light.png") !important; */

  width: 400px !important;
  height: auto !important;
  max-width: 90% !important;
  max-height: none !important;

  object-fit: contain !important;
  object-position: left center !important;
}

/* Dark theme */
.dark img[alt="logo"] {
  content: url("/public/logo_dark.png") !important;
}

/* Send message button */
#chat-submit {
  background-color: #009A44 !important;
  color: #ffffff !important;
  border: 1px solid #009A44 !important;
}

/* Hover */
#chat-submit:hover {
  background-color: #007A35 !important;
  border-color: #007A35 !important;
}

/* Send icon */
#chat-submit svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Disabled state */
#chat-submit:disabled {
  background-color: #b7d8c5 !important;
  color: #ffffff !important;
  border-color: #b7d8c5 !important;
  opacity: 1 !important;
}

/* Button shown while the assistant answer is being generated */
#stop-button {
  background-color:  #007A35 !important;
  color: #007A35 !important;
  border: 1px solid #007A35 !important;
}

/* Hover state */
#stop-button:hover {
  background-color: #007A35 !important;
  border-color: #007A35 !important;
}

/* Icon inside the stop button */
#stop-button svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

#stop-button:focus-visible {
  outline: 2px solid #009A44 !important;
  outline-offset: 2px !important;
}

/* =====================================================
   LUBRA AUTHENTICATION PAGE
   ===================================================== */

/* Main login button */
form button[type="submit"] {
  background-color: #009A44 !important;
  border-color: #009A44 !important;
  color: #ffffff !important;
}

/* Main login button hover */
form button[type="submit"]:hover {
  background-color: #007A35 !important;
  border-color: #007A35 !important;
  color: #ffffff !important;
}

/* Main login button pressed */
form button[type="submit"]:active {
  background-color: #00662C !important;
  border-color: #00662C !important;
}

/* Input focus border */
form input:focus,
form input:focus-visible {
  border-color: #009A44 !important;

  outline: none !important;

  box-shadow:
    0 0 0 1px #009A44,
    0 0 0 4px rgba(0, 154, 68, 0.16) !important;
}

/* Keyboard focus on buttons */
form button:focus-visible {
  outline: 2px solid #009A44 !important;
  outline-offset: 2px !important;
}

/* Authentication links */
form a {
  color: #009A44 !important;
}

form a:hover {
  color: #007A35 !important;
}