/* ===== Base + Theme (preserved look) ===== */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --background: 222 14% 8%;
  --foreground: 210 40% 98%;
  --card: 222 20% 11%;
  --card-foreground: 210 40% 98%;
  --primary: 220 91% 60%;
  --primary-foreground: 222 84% 4.9%;
  --secondary: 217 33% 17%;
  --secondary-foreground: 210 40% 98%;
  --muted: 215 28% 17%;
  --muted-foreground: 217 11% 65%;
  --accent: 262 83% 58%;
  --warning: 38 92% 50%;
  --success: 142 71% 45%;

  --gradient-primary: linear-gradient(135deg, hsl(220 91% 60%), hsl(262 83% 58%));
  --gradient-secondary: linear-gradient(135deg, hsl(217 33% 17%), hsl(215 28% 17%));

  --shadow-soft: 0 4px 20px hsl(220 91% 60% / 0.15);
  --transition-smooth: all .3s cubic-bezier(.4,0,.2,1);
}

body{
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Roboto',sans-serif;
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  line-height:1.5;
}

/* ===== Header ===== */
.dashboard-header{
  background:hsl(var(--card));
  border-bottom:1px solid hsl(var(--secondary));
  position:sticky; top:0; z-index:10;
}
.header-content{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; max-width:980px; margin:0 auto;
}
.logo-container{ display:flex; align-items:center; gap:.75rem; }
.logo-icon{ width:2rem; height:2rem; border-radius:50%; background:var(--gradient-primary);
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 30px hsl(262 83% 58% / .35); }
.logo-title{ font-weight:700; }
.logo-subtitle{ font-size:.875rem; color:hsl(var(--muted-foreground)); }

.header-right{ display:flex; align-items:center; gap:.5rem; }
.status-indicator{ display:flex; align-items:center; gap:.5rem; padding:.4rem .8rem; background:hsl(var(--secondary)); border-radius:2rem; font-size:.875rem; }
.status-dot{ width:.55rem; height:.55rem; border-radius:999px; }
.status-connected{ background:hsl(var(--success)); }
.status-warning{ background:hsl(var(--warning)); }

.gear-button{
  display:flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; border-radius:.5rem; border:1px solid hsl(var(--secondary));
  background:hsl(var(--secondary)); color:hsl(var(--foreground));
  transition:var(--transition-smooth); cursor:pointer;
}
.gear-button:hover{ transform:translateY(-1px); border-color:hsl(var(--primary) / .4); }

/* ===== Layout ===== */
.dashboard-container.chat-only{ min-height:100vh; background:linear-gradient(135deg, hsl(222 14% 8%), hsl(222 20% 11%)); }
.single-card{ max-width:980px; margin:1rem auto; padding:1rem; }

.dashboard-card{
  background:hsl(var(--card)); border:1px solid hsl(var(--secondary)); border-radius:1rem; padding:1rem;
  box-shadow:var(--shadow-soft); transition:var(--transition-smooth); backdrop-filter:blur(20px);
}
.dashboard-card:hover{ border-color:hsl(var(--primary) / .3); }
.card-header{ display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; padding-bottom:.75rem; border-bottom:1px solid hsl(var(--secondary)); }
.header-icon{ width:2rem; height:2rem; border-radius:50%; background:var(--gradient-primary); display:flex; align-items:center; justify-content:center; color:white; }
.card-title{ font-size:1rem; font-weight:600; }
.card-subtitle{ font-size:.875rem; color:hsl(var(--muted-foreground)); }

/* ===== Chat ===== */
.chat-section{ display:flex; flex-direction:column; min-height:65vh; }
.chat-messages{ flex:1; overflow-y:auto; padding:.25rem 0; margin-bottom:.75rem; max-height:70vh; }
.message-container{ display:flex; gap:.5rem; align-items:flex-start; margin-bottom:.75rem; }
.message-container.message-user{ flex-direction:row-reverse; }
.message-avatar{ width:1.65rem; height:1.65rem; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.message-avatar-ai{ background:hsl(var(--secondary)); color:hsl(var(--foreground)); }
.message-avatar-user{ background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); }

.message-bubble{ max-width:80%; padding:.75rem 1rem; border-radius:1rem; position:relative; word-wrap:anywhere; }
.message-bubble-ai{ background:hsl(var(--secondary)); color:hsl(var(--secondary-foreground)); border-bottom-left-radius:.25rem; }
.message-bubble-user{ background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); border-bottom-right-radius:.25rem; }
.message-time{ font-size:.75rem; opacity:.7; margin-top:.35rem; }

/* Markdown content inside bubbles */
.md h1,.md h2,.md h3{ margin:.2rem 0 .4rem; line-height:1.2; }
.md h1{ font-size:1.15rem; } .md h2{ font-size:1.05rem; } .md h3{ font-size:1rem; }
.md p{ margin:.35rem 0; }
.md ul,.md ol{ margin:.35rem 0 .35rem 1.2rem; }
.md li{ margin:.2rem 0; }
.md code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; padding:.1rem .3rem; border-radius:.3rem; background:rgba(255,255,255,.08); }
.md pre{ background:rgba(0,0,0,.35); padding:.75rem; border-radius:.5rem; overflow:auto; }
.md pre code{ background:transparent; padding:0; }
.md blockquote{ border-left:3px solid hsl(var(--primary)); padding:.25rem .75rem; margin:.35rem 0; color:hsl(var(--muted-foreground)); }
.md a{ color:#a5b4ff; text-decoration:underline; }
.md hr{ border:0; border-top:1px solid hsl(var(--secondary)); margin:.5rem 0; }
.md img{ max-width:100%; border-radius:.35rem; display:block; margin:.25rem 0; }

/* Input */
.chat-input-container{ display:flex; align-items:flex-end; gap:.5rem; }
.chat-textarea{
  width:100%; min-height:42px; max-height:180px; resize:none;
  padding:.75rem 1rem; background:hsl(var(--secondary)); border:1px solid hsl(var(--secondary));
  border-radius:.5rem; color:hsl(var(--foreground)); font-size:.95rem; line-height:1.3;
}
.chat-textarea:focus{ outline:none; border-color:hsl(var(--primary)); box-shadow:0 0 0 2px hsl(var(--primary) / .2); }
.send-button{
  padding:.75rem; background:hsl(var(--primary)); color:hsl(var(--primary-foreground));
  border:none; border-radius:.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:var(--transition-smooth);
}
.send-button:hover:not(:disabled){ transform:translateY(-1px); }
.send-button:disabled{ opacity:.5; cursor:not-allowed; }

/* Typing */
.typing-indicator{ display:flex; gap:.25rem; align-items:center; }
.typing-dot{ width:.5rem; height:.5rem; background:currentColor; border-radius:50%; animation:typingAnimation 1.4s infinite ease-in-out; }
.typing-dot:nth-child(1){ animation-delay:-.32s; } .typing-dot:nth-child(2){ animation-delay:-.16s; }
@keyframes typingAnimation{ 0%,80%,100%{opacity:.3;} 40%{opacity:1;} }

/* ===== Modal ===== */
.modal-backdrop{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.5); }
.modal{ width:min(560px, 92%); background:hsl(var(--card)); border:1px solid hsl(var(--secondary)); border-radius:1rem; padding:1rem; box-shadow:var(--shadow-soft); }
.modal-header{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid hsl(var(--secondary)); padding-bottom:.5rem; }
.modal-title{ font-size:1rem; font-weight:600; }
.modal-close{ background:transparent; border:0; color:hsl(var(--foreground)); cursor:pointer; padding:.25rem; border-radius:.35rem; }
.modal-close:hover{ background:hsl(var(--secondary)); }
.modal-body{ display:flex; flex-direction:column; gap:.75rem; padding:.75rem 0; }
.modal-footer{ display:flex; gap:.5rem; }
.modal-hint{ margin-top:.5rem; color:hsl(var(--muted-foreground)); font-size:.875rem; }

/* Inputs in modal (reuse existing styles) */
.input-group{ display:flex; flex-direction:column; gap:.35rem; }
.input-label{ font-size:.875rem; font-weight:500; }
.webhook-input{ padding:.65rem .8rem; background:hsl(var(--secondary)); border:1px solid hsl(var(--secondary)); border-radius:.5rem; color:hsl(var(--foreground)); }
.webhook-input:focus{ outline:none; border-color:hsl(var(--primary)); box-shadow:0 0 0 2px hsl(var(--primary) / .2); }
.webhook-button{ display:flex; align-items:center; gap:.5rem; padding:.6rem .9rem; border:none; border-radius:.5rem; font-weight:500; cursor:pointer; transition:var(--transition-smooth); }
.webhook-button-primary{ background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); }
.webhook-button-secondary{ background:hsl(var(--secondary)); color:hsl(var(--foreground)); border:1px solid hsl(var(--secondary)); }
.webhook-button-secondary:hover{ border-color:hsl(var(--primary) / .4); }

/* Scrollbars */
.chat-messages::-webkit-scrollbar{ width:6px; }
.chat-messages::-webkit-scrollbar-track{ background:hsl(var(--muted)); border-radius:3px; }
.chat-messages::-webkit-scrollbar-thumb{ background:hsl(var(--muted-foreground) / .3); border-radius:3px; }
.chat-messages::-webkit-scrollbar-thumb:hover{ background:hsl(var(--muted-foreground) / .5); }

@media (max-width: 640px){
  .single-card{ padding:.75rem; }
  .dashboard-card{ padding:.75rem; }
  .chat-messages{ max-height:60vh; }
}
/* ===== Footer ===== */
.site-footer {
  background: hsl(var(--card));
  border-top: 1px solid hsl(var(--secondary));
  padding: 2rem 1.25rem;
  margin-top: 2rem;
  color: hsl(var(--muted-foreground));
}

.foot-grid {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.brand.foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-bottom: .5rem;
}

.brand.foot img {
  display: block;
}

.site-footer p {
  margin: .35rem 0;
  font-size: .9rem;
  line-height: 1.4;
}

.foot-links {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.foot-links a {
  color: hsl(var(--foreground));
  font-size: .9rem;
  text-decoration: none;
  transition: color .2s ease;
}

.foot-links a:hover {
  color: hsl(var(--primary));
}

.foot-legal {
  flex-basis: 100%;
  margin-top: 1rem;
  font-size: .8rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
  border-top: 1px solid hsl(var(--secondary));
  padding-top: 1rem;
}

@media (max-width: 640px) {
  .foot-grid {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    text-align: center;
  }
  .foot-links {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 1.25rem;
  }
}