/* ===== AGGConsult — App theme (dark) ===== */
:root {
  --bg: #0b1020;
  --card: #11172c;
  --muted: #9aa4b2;
  --text: #eaf0ff;
  --brand: #6aa5ff;
  --brand-2: #7bffcf;
  --accent: #ffcc6a;
  --ring: #294dff;

  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  color-scheme: dark;
}

html, body {
  height: 100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 10% -10%, rgba(106,165,255,.18), transparent 55%),
              radial-gradient(900px 700px at 110% 0%, rgba(123,255,207,.14), transparent 60%),
              var(--bg);
  color: var(--text);
  margin: 0;
}

/* ===== Navigation & layout ===== */
.layout { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.nav {
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  padding: 18px 22px; position: sticky; top:0; z-index:20;
  background: linear-gradient(180deg, rgba(11,16,32,.85), rgba(11,16,32,.65));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand {
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
  font-weight:700; letter-spacing:.2px;
}
.brand .logo {
  width: 28px; height: 28px; border-radius: 10px;
  background: conic-gradient(from 200deg, var(--brand), var(--brand-2), var(--brand));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
}
.nav a {
  color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 10px;
}
.nav a:hover, .nav a.active { color: var(--text); background: rgba(255,255,255,.06) }

.content { padding: 28px; max-width: 1100px; margin: 0 auto; }
.footer {
  padding: 18px 22px; border-top: 1px solid rgba(255,255,255,.06); color: var(--muted);
}

/* ===== Utilities ===== */
.container { max-width: 1100px; margin: 0 auto; }
.grid { display:grid; gap:16px }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 980px){ .grid-3 { grid-template-columns: 1fr 1fr } }
@media (max-width: 640px){ .grid-3 { grid-template-columns: 1fr } }

/* Cards: stronger contrast and spacing */
.card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  border-radius: 16px;
  padding: 16px;
}

.card:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-3px);
}
.badge {
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(106,165,255,.12); color: var(--brand);
  border:1px solid rgba(106,165,255,.25);
  border-radius: 999px; padding: 6px 10px; font-weight:600; font-size:.9rem;
}
h1,h2,h3 { margin: 10px 0 8px }
h1 { font-size: clamp(28px, 5vw, 42px) }
.muted { color: var(--muted) }
.btn {
  display:inline-flex; align-items:center; gap:8px; border-radius: 12px; padding: 10px 14px;
  text-decoration:none; border:1px solid rgba(255,255,255,.08); color: var(--text);
}
.btn-primary {
  color: #0b1020;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border: none; font-weight:700;
  box-shadow: 0 8px 24px rgba(106,165,255,.25);
}
.btn-ghost { background: rgba(255,255,255,.06); color: var(--text); }
.btn:focus { outline: 3px solid var(--ring); outline-offset: 2px }

/* ===== Hero ===== */
.hero {
  display:grid; gap:16px; align-items:center;
  grid-template-columns: 1.2fr .8fr; margin-top: 14px;
}
.hero .panel {
  border-radius: var(--radius);
  background: radial-gradient(600px 220px at 50% -30%, rgba(106,165,255,.2), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.07);
  padding: 18px;
}
@media (max-width: 980px){ .hero { grid-template-columns: 1fr } }

/* ===== Chat bubbles ===== */
.chat-log { display:flex; flex-direction:column; gap:10px; margin: 12px 0 10px }
.bubble {
  padding: 10px 12px; border-radius: 12px; max-width: 780px; white-space: pre-wrap;
  border:1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.04);
}
.bubble.user { background: rgba(106,165,255,.12); border-color: rgba(106,165,255,.3) }
.chat-form { display:flex; gap:8px; }
.chat-form input {
  flex:1; padding:12px; border:1px solid rgba(255,255,255,.12); border-radius: 12px;
  background: rgba(0,0,0,.25); color: var(--text);
}
.chat-form button { border:0 }

/* ===== Alerts ===== */
.alert { border-radius:12px; padding: 10px 12px }
.alert-info { background: rgba(106,165,255,.12); border: 1px solid rgba(106,165,255,.25) }
.alert-danger { background: rgba(255,127,127,.12); border: 1px solid rgba(255,127,127,.3) }

/* ===== Keep your original helpful rules ===== */
a, .btn-link { color: #6aa5ff; }
.btn-primary { /* overridden above for gradient */ }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content { padding-top: 1.1rem; }
h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.blazor-error-boundary {
  background: #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}
.blazor-error-boundary::after { content: "An error has occurred." }

.darker-border-checkbox.form-check-input { border-color: #929292; }
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder { color: #9aa4b2; text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }


/* === Contrast tweaks for dark theme === */
:root {
  --text: #f5f8ff;      /* brighter text */
  --muted: #c6cfdd;     /* lighter muted for readability */
  --brand: #7ab3ff;     /* slightly brighter brand */
  --brand-2: #7bffcf;
}

/* Cards: stronger contrast and spacing */
.card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  border-radius: 16px;
  padding: 16px;
}

/* Headings on dark */
.card h3 {
  color: #e8f1ff;
  font-weight: 700;
  margin-bottom: 6px;
}

/* Body copy */
.card p {
  color: #bfc8d8;
  line-height: 1.5;
}
.muted { color: var(--muted); }

/* Badge: more visible */
.badge {
  background: rgba(122, 179, 255, .22);
  border: 1px solid rgba(122, 179, 255, .45);
  color: var(--text);
}

/* Ghost button contrast */
.btn-ghost { background: rgba(255,255,255,.10); color: var(--text); }

/* === Responsive “features” grid that always fits === */
.features {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: stretch;
}

/* Slightly narrower content width so it fits on laptops without wrapping oddly */
.content, .container { max-width: 1000px; }

/* Hero: stack earlier to avoid squish on medium screens */
.hero { grid-template-columns: 1fr 1fr; }
/* make it a little tighter on medium screens */
@media (max-width: 1100px) {
  .features {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* Badge, text & hero consistency */
.badge {
  color: #eaf0ff;
  background: rgba(122, 179, 255, 0.22);
  border: 1px solid rgba(122, 179, 255, 0.45);
}@media (max-width: 1100px) { .hero { grid-template-columns: 1fr; } }
/* ===== Chat view improvements ===== */
.chat-log {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 18px 0;
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 6px;
}

.bubble {
  padding: 14px 18px;
  border-radius: 16px;
  max-width: 780px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
  font-size: 1rem;
  transition: background 0.2s ease;
}

/* user message bubble */
.bubble.user {
  align-self: flex-end;
  background: linear-gradient(90deg, rgba(106,165,255,0.15), rgba(123,255,207,0.1));
  border: 1px solid rgba(106,165,255,0.3);
  color: #dceaff;
}

/* AI response bubble */
.bubble:not(.user) {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #dceaff;
  box-shadow: 0 0 8px rgba(106,165,255,0.15);
}

/* make code in AI replies stand out */
.bubble:not(.user) code {
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  color: #7bffcf;
}

/* typing animation (optional) */
@keyframes blink {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}
.typing-indicator::after {
  content: "▍";
  display: inline-block;
  animation: blink 1s infinite;
  color: #6aa5ff;
  margin-left: 4px;
}