/* LEAFIO Atlas AI Assistant - Figma Design Implementation */
/* Modern 2-panel chat interface with purple theme and gradient accents */

/* Theme customization */
html, html.light, html.dark {
  --font-sans: 'Roboto', sans-serif;

  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 224 12% 37%;

  --sidebar-accent: 240 4% 95%;
  --sidebar-accent-foreground: 199 4% 10%;

  --background: 0 0% 100%;
  --foreground: 199 4% 10%;

  --primary: 244 63% 48%;
  --primary-foreground: 0 0% 100%;

  --ring: 244 63% 48%;

  --accent: 0 0% 100%;

  /*--muted: 0 0% 90%;*/
  --muted-foreground: 227 7% 73%;
}

/* ===== FOUNDATION & LAYOUT ===== */

/* Hide specific header controls when requested */
#readme-button,
#theme-toggle,
#user-nav-button {
  display: none !important;
}


.group\/sidebar-wrapper {
  --sidebar-width: 324px !important;
  --sidebar-width-icon: 3rem !important;
}
.group\/sidebar-wrapper>[data-state="expanded"] + main {
  box-shadow: inset 6px 0 20px 3px rgba(87, 117, 147, 0.08);
}
.group\/sidebar-wrapper>[data-variant="sidebar"] [data-sidebar="header"] button:hover {
  --accent: var(--sidebar-accent);
}

#thread-history [data-sidebar="group-label"] {
  height: auto;
  padding: 0;
  margin-bottom: 8px;

  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 19.6px */
  color: #858995;
}
#thread-history [data-sidebar="menu-button"] {
  height: auto;
  padding: 10px 8px;
  border-radius: 6px;

  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%; /* 20px */
}
#thread-history [data-sidebar="menu-button"] .bg-gradient-to-l {
  display: none;
}

#thread-history [data-sidebar="menu-button"] #thread-options {
  top: 2px;
}

main.bg-background:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("./bg-gradient.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.45;
}

#welcome-screen #message-composer {
  order: 1;
}

.logo {
  display: none;
}

[data-step-type="user_message"] .group .rounded-3xl {
  border-radius: 12px;
}

[data-step-type="assistant_message"] .dataframe:has(table) {
  margin-top: 20px;
}
[data-step-type="assistant_message"] .dataframe table th {
  color: #392EC9;
  background-color: #EBEAFE;
}
[data-step-type="assistant_message"] .dataframe table td {
  color: #545A6B;
  background-color: white;
}

[data-step-type="assistant_message"] .ai-message .shrink-0.h-5.w-5:has(img) {
  width: 40px;
  height: 40px;
}

#starters > button {
  padding: 8px 12px;
  font-variant-numeric: lining-nums proportional-nums;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;

  border-radius: 10px;
  --input: 240 7% 91%;
  --muted-foreground: 199 4% 10%;
  color: #191A1B;
}

#message-composer {
  flex-direction: row;
  gap: 20px;
  padding: 25px 20px;
  border-radius: 12px;
  min-height: auto;
  box-shadow: 0 6px 24px 3px rgba(87, 117, 147, 0.16);
}

/* textarea wrapper */
#message-composer > div:first-child {
  display: flex;
  align-items: center;
}
#message-composer > div:first-child > textarea {
  field-sizing: content;
  min-height: auto;
  height: auto !important;
}

/* buttons wrapper */
#message-composer > div:last-child {
  gap: 20px;
}
#message-composer > div:last-child > div:first-child button {
  --foreground: 227 7% 73%;
  --accent-foreground: 244 74% 65%;
  --muted: 243 91% 96%;
  border-radius: 50%;
  color: hsl(var(--foreground));
}
#message-composer > div:last-child > div:first-child button:hover {
  color: hsl(var(--accent-foreground));
}