@charset "UTF-8";
/* =========================================================================

   VibeScan — Premium dark glassmorphic design system

   ========================================================================= */

/* --- Reset & base --- */

*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

:root, :root[data-theme="dark"] {

  /* Surface palette — Deep Supabase/Convex Dark Mode */

  --bg-base:       #0a0a0a;

  --bg-surface:    #111111;

  --bg-elevated:   #1A1A1A;

  --bg-glass:      hsla(0, 0%, 10%, 0.7);

  --border-subtle: #2A2A2A;

  --border-focus:  #3ECF8E;

  /* Text */

  --text-primary:   #EDEDED;

  --text-secondary: #A3A3A3;

  --text-muted:     #737373;

  /* Accent (Supabase Emerald) */

  --accent:        #3ECF8E;

  --accent-glow:   hsla(150, 60%, 53%, 0.25);

  --accent-hover:  #4FE5A1;

  /* Severity palette (Convex-inspired crispness) */

  --sev-critical:  #F26D21;

  --sev-critical-bg: hsla(22, 90%, 54%, 0.12);

  --sev-high:      #E54D2E;

  --sev-high-bg:   hsla(10, 80%, 54%, 0.12);

  --sev-medium:    #F1A10D;

  --sev-medium-bg: hsla(39, 90%, 50%, 0.12);

  --sev-low:       #5842C3;

  --sev-low-bg:    hsla(250, 52%, 51%, 0.12);

  --sev-info:      #4D5358;

  --sev-info-bg:   hsla(210, 7%, 32%, 0.12);

  /* Status */

  --status-running: #5842C3;

  --status-done:    #3ECF8E;

  --status-failed:  #E54D2E;

  /* Mesh */

  --mesh-1: hsla(210, 100%, 40%, 0.08);

  --mesh-2: hsla(280, 60%, 40%, 0.06);

  --mesh-3: hsla(160, 50%, 30%, 0.05);

  /* Misc */

  --radius:     8px;

  --radius-sm:  6px;

  --radius-xs:  4px;

  --shadow-lg:  0 12px 48px hsla(0, 0%, 0%, 0.5);

  --shadow-md:  0 4px 16px hsla(0, 0%, 0%, 0.4);

  --transition: 0.2s ease;

  --font:       'Inter', system-ui, -apple-system, sans-serif;

}

:root[data-theme="light"] {

  /* Surface palette — Premium Light Mode */

  --bg-base:       #FAFAFA;

  --bg-surface:    hsla(0, 0%, 100%, 0.85);

  --bg-elevated:   #FFFFFF;

  --bg-glass:      hsla(0, 0%, 100%, 0.85);

  --border-subtle: hsla(220, 20%, 50%, 0.15);

  --border-focus:  #10B981;

  /* Text */

  --text-primary:   #09090B;

  --text-secondary: #52525B;

  --text-muted:     #A1A1AA;

  /* Accent */

  --accent:        #10B981;

  --accent-glow:   hsla(160, 84%, 39%, 0.15);

  --accent-hover:  #059669;

  /* Severity palette (Darkened for contrast on white) */

  --sev-critical:  #C2410C;

  --sev-critical-bg: hsla(22, 90%, 54%, 0.12);

  --sev-high:      #B91C1C;

  --sev-high-bg:   hsla(10, 80%, 54%, 0.12);

  --sev-medium:    #B45309;

  --sev-medium-bg: hsla(39, 90%, 50%, 0.12);

  --sev-low:       #4338CA;

  --sev-low-bg:    hsla(250, 52%, 51%, 0.12);

  --sev-info:      #3F3F46;

  --sev-info-bg:   hsla(210, 7%, 32%, 0.12);

  /* Status */

  --status-running: #4338CA;

  --status-done:    #10B981;

  --status-failed:  #B91C1C;

  /* Mesh */

  --mesh-1: hsla(160, 80%, 60%, 0.08);

  --mesh-2: hsla(220, 80%, 60%, 0.06);

  --mesh-3: hsla(280, 60%, 60%, 0.05);

  /* Shadows - give a softer, deeper premium feel */

  --shadow-lg:  0 12px 32px hsla(220, 20%, 20%, 0.05);

  --shadow-md:  0 4px 12px hsla(220, 20%, 20%, 0.03);

}

html {

  font-size: 14px;

  scroll-behavior: smooth;

}


a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--accent-hover); }

/* ========== APP LAYOUT (Authenticated) ========== */
.app-layout {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.sidebar {
  width: 260px;
  background: var(--bg-surface);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  z-index: 10;
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar .logo {
  margin-bottom: 2rem;
  padding: 0 0.5rem;
}

body {

  font-family: var(--font);

  background: var(--bg-base);

  color: var(--text-primary);

  line-height: 1.6;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

/* Animated background mesh gradient */

body::before {

  content: '';

  position: fixed;

  inset: 0;

  z-index: -1;

  background:

    radial-gradient(ellipse 80% 60% at 10% 20%, var(--mesh-1), transparent),

    radial-gradient(ellipse 60% 50% at 90% 80%, var(--mesh-2), transparent),

    radial-gradient(ellipse 50% 40% at 50% 50%, var(--mesh-3), transparent);

  pointer-events: none;

}

a {

  color: var(--accent);

  gap: 0.75rem;

}

.logo-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 32px;

  height: 32px;

}

.sentry-logo-svg {

  width: 100%;

  height: 100%;

  color: var(--text-primary);

  filter: drop-shadow(0 0 8px var(--accent-glow));

}

.logo-text {

  font-size: 1.4rem;

  font-weight: 800;

  letter-spacing: -0.04em;

  background: linear-gradient(135deg, var(--text-primary), var(--text-muted));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}

.sidebar-nav {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

  flex: 1;

}

.sidebar-link {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  padding: 0.6rem 0.75rem;

  border-radius: var(--radius-sm);

  color: var(--text-secondary);

  font-size: 0.95rem;

  font-weight: 500;

  transition: all var(--transition);

  cursor: pointer;

}

.sidebar-link:hover, .sidebar-link.active {

  background: var(--bg-elevated);

  color: var(--text-primary);

}

.sidebar-link.active {

  color: var(--accent);

  background: hsla(150, 60%, 53%, 0.08);

}

.main-content {

  flex: 1;

  overflow-y: auto;

  background: var(--bg-base);

  position: relative;

}

.main-inner {

  max-width: 900px;

  margin: 0 auto;

}

/* ========== TOPBAR & PROFILE ========== */

.app-topbar {

  display: flex;

  justify-content: flex-end;

  align-items: center;

  padding: 1rem 0;

  margin-bottom: 1rem;

  gap: 1rem;

  position: relative;

}

.icon-btn {

  background: transparent;

  border: 1px solid var(--border-subtle);

  color: var(--text-secondary);

  border-radius: 50%;

  width: 36px;

  height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.2s;

  font-size: 1.1rem;

}

.icon-btn:hover {

  background: var(--bg-elevated);

  color: var(--text-primary);

  border-color: var(--text-muted);

}

.profile-avatar {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: var(--bg-elevated);

  border: 2px solid var(--border-subtle);

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 600;

  color: var(--accent);

  cursor: pointer;

  user-select: none;

  transition: border-color 0.2s;

}

.profile-avatar:hover {

  border-color: var(--accent);

}

.profile-dropdown {

  position: absolute;

  top: 60px;

  right: 0;

  width: 280px;

  background: var(--bg-surface);

  border: 1px solid var(--border-subtle);

  box-shadow: var(--shadow-lg);

  border-radius: 12px;

  padding: 1.25rem;

  z-index: 100;

  opacity: 0;

  transform: translateY(-10px);

  pointer-events: none;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}

.profile-dropdown.open {

  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;

}

.profile-header {

  border-bottom: 1px solid var(--border-subtle);

  padding-bottom: 1rem;

  margin-bottom: 1rem;

}

.profile-email {

  font-weight: 600;

  font-size: 0.95rem;

  color: var(--text-primary);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.profile-plan {

  font-size: 0.8rem;

  color: var(--accent);

  text-transform: uppercase;

  letter-spacing: 0.05em;

  font-weight: 700;

  margin-top: 0.25rem;

}

.limits-section {

  margin-bottom: 1rem;

}

.limits-label {

  display: flex;

  justify-content: space-between;

  font-size: 0.85rem;

  color: var(--text-secondary);

  margin-bottom: 0.5rem;

}

.limits-bar-bg {

  width: 100%;

  height: 8px;

  background: var(--bg-elevated);

  border-radius: 4px;

  overflow: hidden;

}

.limits-bar-fill {

  height: 100%;

  background: var(--accent);

  border-radius: 4px;

  transition: width 0.3s ease;

}

/* ========== APP SECTIONS ========== */

.main-inner-content {

  padding: 3rem 2rem;

}

/* ========== LANDING LAYOUT (Unauthenticated) ========== */

.landing-layout {

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}

.landing-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 1rem 2rem;

  border-bottom: 1px solid var(--border-subtle);

  background: var(--bg-surface);

}

.landing-header .logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.landing-main {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 4rem 2rem;

}

/* Dashboard Analytics Grid */

.analytics-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1rem;

  margin-bottom: 2rem;

}

.stat-card {

  background: var(--bg-surface);

  backdrop-filter: blur(12px) saturate(1.2);

  -webkit-backdrop-filter: blur(12px) saturate(1.2);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius);

  padding: 1.5rem;

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

  box-shadow: var(--shadow-md);

  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

  position: relative;

  overflow: hidden;

}

.stat-card::after {

  content: '';

  position: absolute;

  top: 0; left: -100%;

  width: 50%; height: 100%;

  background: linear-gradient(to right, transparent, hsla(0, 0%, 100%, 0.3), transparent);

  transform: skewX(-25deg);

  transition: none;

  pointer-events: none;

}

.stat-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-lg);

  border-color: var(--accent-glow);

}

.stat-card:hover::after {

  left: 200%;

  transition: all 0.7s ease;

}

.stat-title {

  color: var(--text-secondary);

  font-size: 0.85rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}

.stat-value {

  color: var(--text-primary);

  font-size: 2.5rem;

  font-weight: 800;

}

/* ========== GLASS PANEL ========== */

.glass-panel {

  background: var(--bg-glass);

  backdrop-filter: blur(16px) saturate(1.3);

  -webkit-backdrop-filter: blur(16px) saturate(1.3);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius);

  padding: 2rem;

  box-shadow: var(--shadow-lg);

  transition: box-shadow 0.3s ease;

}

/* ========== SCAN FORM ========== */

.section-header {

  margin-bottom: 1.5rem;

}

h1#main-heading {

  font-size: 1.6rem;

  font-weight: 800;

  letter-spacing: -0.03em;

  margin-bottom: 0.35rem;

  background: linear-gradient(135deg, var(--text-primary), var(--accent));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}

.subtitle {

  color: var(--text-secondary);

  font-size: 0.92rem;

}

.form-group {

  margin-bottom: 1rem;

}

.form-group label {

  display: block;

  font-size: 0.82rem;

  font-weight: 600;

  color: var(--text-secondary);

  margin-bottom: 0.35rem;

  text-transform: uppercase;

  letter-spacing: 0.04em;

}

.input-row {

  display: flex;

  gap: 0.75rem;

}

input[type="url"],

input[type="text"],

input[type="email"],

input[type="password"] {

  flex: 1;

  background: var(--bg-surface);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-sm);

  padding: 0.7rem 1rem;

  color: var(--text-primary);

  font-family: var(--font);

  font-size: 0.95rem;

  outline: none;

  transition: border-color var(--transition), box-shadow var(--transition);

}

input:focus {

  border-color: var(--border-focus);

  box-shadow: 0 0 0 3px var(--accent-glow);

}

input::placeholder {

  color: var(--text-muted);

}

.hint {

  font-size: 0.78rem;

  color: var(--text-muted);

  margin-top: 0.35rem;

}

/* Primary button */

.btn-primary {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  padding: 0.7rem 1.5rem;

  font-family: var(--font);

  font-size: 0.95rem;

  font-weight: 600;

  color: #000;

  background: var(--accent);

  border: 1px solid var(--accent);

  border-radius: var(--radius-sm);

  cursor: pointer;

  white-space: nowrap;

  transition: all var(--transition);

  box-shadow: 0 2px 8px var(--accent-glow);

}

.btn-primary:hover {

  background: var(--accent-hover);

  border-color: var(--accent-hover);

  box-shadow: 0 4px 16px var(--accent-glow);

  transform: translateY(-1px);

}

.btn-primary:active {

  transform: translateY(0);

}

.btn-primary:disabled {

  opacity: 0.5;

  cursor: not-allowed;

  transform: none;

}

.btn-icon {

  font-size: 1.1rem;

}

/* Secondary button */

.btn-secondary {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  padding: 0.5rem 1rem;

  font-family: var(--font);

  font-size: 0.82rem;

  font-weight: 600;

  color: var(--text-secondary);

  background: var(--bg-elevated);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-xs);

  cursor: pointer;

  transition: all var(--transition);

}

.btn-secondary:hover {

  color: var(--text-primary);

  border-color: var(--accent);

  background: hsla(210, 100%, 62%, 0.08);

}

/* Checkbox */

.checkbox-row {

  display: flex;

  align-items: flex-start;

  gap: 0.6rem;

}

.checkbox-row input[type="checkbox"] {

  appearance: none;

  -webkit-appearance: none;

  width: 18px;

  height: 18px;

  min-width: 18px;

  margin-top: 2px;

  border: 2px solid var(--border-subtle);

  border-radius: 4px;

  background: var(--bg-surface);

  cursor: pointer;

  transition: all var(--transition);

  position: relative;

}

.checkbox-row input[type="checkbox"]:checked {

  background: var(--accent);

  border-color: var(--accent);

}

.checkbox-row input[type="checkbox"]:checked::after {

  content: '✓';

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 12px;

  font-weight: 700;

  color: #fff;

}

.checkbox-label {

  font-size: 0.88rem !important;

  font-weight: 400 !important;

  color: var(--text-secondary) !important;

  text-transform: none !important;

  letter-spacing: normal !important;

  cursor: pointer;

}

/* Form inline error */

.form-error {

  font-size: 0.85rem;

  color: var(--sev-critical);

  background: var(--sev-critical-bg);

  border: 1px solid hsla(0, 72%, 50%, 0.25);

  border-radius: var(--radius-xs);

  padding: 0.6rem 1rem;

  margin-top: 0.75rem;

  animation: fadeSlideIn 0.3s ease;

}

/* ========== WHAT WE CHECK FOR (feature grid) ========== */

.what-we-check {

  margin-top: 1.5rem;

  padding-top: 1.5rem;

  border-top: 1px solid var(--border-subtle);

}

.check-heading {

  font-size: 1rem;

  font-weight: 700;

  color: var(--text-secondary);

  margin-bottom: 1rem;

}

.check-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 0.75rem;

}

.check-card {

  background: var(--bg-surface);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-sm);

  padding: 1rem;

  transition: all 0.25s ease;

}

.check-card:hover {

  border-color: hsla(210, 100%, 62%, 0.3);

  transform: translateY(-2px);

  box-shadow: var(--shadow-md);

}

.check-icon {

  font-size: 1.5rem;

  display: block;

  margin-bottom: 0.5rem;

}

.check-card h3 {

  font-size: 0.85rem;

  font-weight: 700;

  margin-bottom: 0.3rem;

  color: var(--text-primary);

}

.check-card p {

  font-size: 0.78rem;

  color: var(--text-muted);

  line-height: 1.5;

}

.check-footer {

  font-size: 0.78rem;

  color: var(--text-muted);

  margin-top: 1rem;

  text-align: center;

}

/* ========== PROGRESS ========== */

#progress-section {

  animation: fadeSlideIn 0.4s ease;

}

.progress-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 0.25rem;

}

.progress-header h2 {

  font-size: 1.15rem;

  font-weight: 700;

}

.progress-target {

  color: var(--text-muted);

  font-size: 0.85rem;

  margin-bottom: 1rem;

}

.progress-reassurance {

  font-size: 0.8rem;

  color: var(--text-muted);

  margin-top: 1rem;

  font-style: italic;

}

.status-badge {

  font-size: 0.72rem;

  font-weight: 700;

  padding: 0.2rem 0.7rem;

  border-radius: 99px;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}

.status-running {

  background: hsla(210, 100%, 62%, 0.15);

  color: var(--status-running);

  animation: pulse-glow 2s infinite;

}

.status-completed {

  background: hsla(145, 60%, 48%, 0.15);

  color: var(--status-done);

}

.status-failed {

  background: hsla(0, 72%, 50%, 0.15);

  color: var(--status-failed);

}

/* Progress bar */

.progress-bar-container {

  display: flex;

  align-items: center;

  gap: 0.8rem;

  margin-bottom: 0.75rem;

}

.progress-bar {

  flex: 1;

  height: 8px;

  background: var(--bg-surface);

  border-radius: 99px;

  overflow: hidden;

}

.progress-bar-fill {

  height: 100%;

  width: 0%;

  border-radius: 99px;

  background: linear-gradient(90deg, var(--accent), hsl(250, 80%, 60%));

  transition: width 0.5s ease;

  position: relative;

}

.progress-bar-fill::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, transparent, hsla(0,0%,100%,0.2), transparent);

  animation: shimmer 1.5s infinite;

}

.progress-percent {

  font-size: 0.82rem;

  font-weight: 700;

  color: var(--accent);

  min-width: 3ch;

  text-align: right;

}

.progress-msg {

  font-size: 0.85rem;

  color: var(--text-secondary);

  margin-bottom: 1rem;

  min-height: 1.4em;

}

/* ========== SEVERITY CHIPS ========== */

.severity-chips {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

}

.chip {

  font-size: 0.78rem;

  font-weight: 600;

  padding: 0.3rem 0.8rem;

  border-radius: 99px;

  display: inline-flex;

  align-items: center;

  gap: 0.3rem;

  transition: all var(--transition);

}

.chip strong {

  font-weight: 800;

}

.chip-critical { background: var(--sev-critical-bg); color: var(--sev-critical); border: 1px solid hsla(0, 72%, 50%, 0.25); }

.chip-high     { background: var(--sev-high-bg);     color: var(--sev-high);     border: 1px solid hsla(24, 85%, 52%, 0.25); }

.chip-medium   { background: var(--sev-medium-bg);   color: var(--sev-medium);   border: 1px solid hsla(42, 90%, 50%, 0.25); }

.chip-low      { background: var(--sev-low-bg);      color: var(--sev-low);      border: 1px solid hsla(160, 55%, 45%, 0.25); }

.chip-info     { background: var(--sev-info-bg);      color: var(--sev-info);     border: 1px solid hsla(220, 15%, 50%, 0.25); }

/* ========== RESULTS ========== */

.results-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 0.75rem;

  margin-bottom: 1rem;

}

.results-header h2 {

  font-size: 1.2rem;

  font-weight: 700;

}

.results-actions {

  display: flex;

  gap: 0.5rem;

}

.results-meta {

  font-size: 0.82rem;

  color: var(--text-muted);

  margin-bottom: 1rem;

  line-height: 1.7;

}

.results-meta strong {

  color: var(--text-secondary);

}

.results-executive {

  font-size: 1rem;

  font-weight: 600;

  color: var(--text-primary);

  margin: 0 0 0.5rem;

  line-height: 1.5;

}

.results-disclaimer {

  font-size: 0.78rem;

  color: var(--text-muted);

  margin-bottom: 1rem;

  line-height: 1.5;

}

/* Filter bar */

.filter-bar {

  display: flex;

  flex-wrap: wrap;

  gap: 0.4rem;

  margin: 1rem 0;

}

.filter-btn {

  font-family: var(--font);

  font-size: 0.78rem;

  font-weight: 600;

  padding: 0.35rem 0.9rem;

  border-radius: 99px;

  border: 1px solid var(--border-subtle);

  background: transparent;

  color: var(--text-muted);

  cursor: pointer;

  transition: all var(--transition);

}

.filter-btn:hover {

  color: var(--text-primary);

  border-color: var(--text-secondary);

}

.filter-btn.active {

  background: var(--accent);

  color: #fff;

  border-color: var(--accent);

}

/* ========== FINDING CARDS ========== */

.findings-list {

  display: flex;

  flex-direction: column;

  gap: 0.65rem;

}

.finding-card {

  background: var(--bg-surface);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-sm);

  overflow: hidden;

  transition: all 0.25s ease;

  animation: fadeSlideIn 0.35s ease;

}

.finding-card:hover {

  border-color: hsla(220, 20%, 40%, 0.5);

  box-shadow: var(--shadow-md);

}

.finding-card-header {

  display: flex;

  align-items: center;

  gap: 0.7rem;

  padding: 0.8rem 1rem;

  cursor: pointer;

  user-select: none;

}

.finding-sev {

  font-size: 0.68rem;

  font-weight: 700;

  padding: 0.2rem 0.55rem;

  border-radius: 4px;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  white-space: nowrap;

}

.sev-Critical { background: var(--sev-critical); color: #fff; }

.sev-High     { background: var(--sev-high);     color: #fff; }

.sev-Medium   { background: var(--sev-medium);   color: hsl(42, 30%, 15%); }

.sev-Low      { background: var(--sev-low);      color: hsl(160, 30%, 10%); }

.sev-Info     { background: var(--sev-info);      color: #fff; }

.finding-num {

  font-size: 0.78rem;

  font-weight: 700;

  color: var(--text-muted);

  min-width: 2ch;

}

.finding-title {

  flex: 1;

  font-size: 0.92rem;

  font-weight: 600;

  color: var(--text-primary);

}

.finding-toggle {

  font-size: 0.8rem;

  color: var(--text-muted);

  transition: transform 0.25s ease;

}

.finding-card.open .finding-toggle {

  transform: rotate(90deg);

}

.finding-card-body {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.35s ease, padding 0.25s ease;

  padding: 0 1rem;

}

.finding-card.open .finding-card-body {

  max-height: 600px;

  padding: 0 1rem 1rem;

}

.finding-detail {

  margin-bottom: 0.7rem;

}

.finding-detail-label {

  font-size: 0.72rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: var(--text-muted);

  margin-bottom: 0.2rem;

}

.finding-detail-text {

  font-size: 0.88rem;

  color: var(--text-secondary);

  line-height: 1.55;

}

.finding-evidence {

  background: var(--bg-elevated);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-xs);

  padding: 0.6rem 0.8rem;

  font-family: 'Courier New', Courier, monospace;

  font-size: 0.82rem;

  color: var(--text-secondary);

  word-break: break-all;

}

.finding-ref a {

  font-size: 0.82rem;

}

/* No findings */

.no-findings {

  text-align: center;

  padding: 2rem;

}

.no-findings-inner {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.5rem;

}

.no-findings-icon {

  font-size: 2.5rem;

}

.no-findings h3 {

  font-size: 1.1rem;

  font-weight: 700;

}

.no-findings p {

  color: var(--text-muted);

  font-size: 0.88rem;

  max-width: 480px;

}

/* Errors */

.errors-section {

  margin-top: 1.5rem;

  padding-top: 1rem;

  border-top: 1px solid var(--border-subtle);

}

.errors-section h3 {

  font-size: 0.9rem;

  font-weight: 700;

  color: var(--sev-medium);

  margin-bottom: 0.5rem;

}

.errors-list {

  list-style: none;

  font-size: 0.82rem;

  color: var(--text-muted);

}

.errors-list li {

  padding: 0.25rem 0;

  padding-left: 1rem;

  position: relative;

}

.errors-list li::before {

  content: '⚠';

  position: absolute;

  left: 0;

}

/* ========== FOOTER ========== */

#site-footer {

  text-align: center;

  padding: 1.5rem;

  font-size: 0.78rem;

  color: var(--text-muted);

  border-top: 1px solid var(--border-subtle);

  width: 100%;

}

/* ========== UTILITY ========== */

.hidden {

  display: none !important;

}

/* ========== ANIMATIONS ========== */

@keyframes fadeSlideIn {

  from {

    opacity: 0;

    transform: translateY(8px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

@keyframes fadeIn {

  from { opacity: 0; }

  to   { opacity: 1; }

}

@keyframes pulse-glow {

  0%, 100% { box-shadow: 0 0 0 0 hsla(250, 52%, 51%, 0.3); }

  50%      { box-shadow: 0 0 0 6px hsla(250, 52%, 51%, 0); }

}

/* ========== MODAL ========== */

.modal {

  position: fixed;

  inset: 0;

  z-index: 999;

  background: hsla(225, 20%, 5%, 0.8);

  backdrop-filter: blur(5px);

  display: flex;

  align-items: center;

  justify-content: center;

  animation: fadeIn 0.3s ease;

}

.modal.hidden {

  display: none !important;

}

.modal-content {

  position: relative;

  width: 100%;

  max-width: 400px;

  padding: 2.5rem;

}

.modal-close {

  position: absolute;

  top: 1rem;

  right: 1.5rem;

  font-size: 1.5rem;

  color: var(--text-muted);

  cursor: pointer;

  transition: color var(--transition);

}

.modal-close:hover {

  color: var(--text-primary);

}

#auth-modal-title {

  margin-bottom: 1.5rem;

  font-size: 1.4rem;

  text-align: center;

}

/* ========== PAYWALL BLUR ========== */

.blurred-finding {

  filter: blur(5px);

  user-select: none;

  pointer-events: none;

}

.paywall-overlay {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: hsla(225, 18%, 11%, 0.6);

  z-index: 10;

  border-radius: var(--radius-sm);

}

@keyframes shimmer {

  from { transform: translateX(-100%); }

  to   { transform: translateX(100%); }

}

/* Scan button loading state */

.btn-primary.loading .btn-label::after {

  content: '';

  display: inline-block;

  width: 14px;

  height: 14px;

  margin-left: 6px;

  border: 2px solid hsla(0,0%,100%,0.3);

  border-top-color: #fff;

  border-radius: 50%;

  animation: spin 0.6s linear infinite;

  vertical-align: middle;

}

@keyframes spin {

  to { transform: rotate(360deg); }

}

/* ========== RESPONSIVE ========== */

@media (max-width: 640px) {

  #app-main { padding: 1rem; }

  .glass-panel { padding: 1.2rem; }

  h1#main-heading { font-size: 1.25rem; }

  .input-row {

    flex-direction: column;

  }

  .check-grid {

    grid-template-columns: 1fr 1fr;

  }

  .results-header {

    flex-direction: column;

    align-items: flex-start;

  }

  .severity-chips {

    gap: 0.35rem;

  }

  .chip {

    font-size: 0.72rem;

    padding: 0.25rem 0.6rem;

  }

}

@media (max-width: 420px) {

  .check-grid {

    grid-template-columns: 1fr;

  }

}

/* ========== PREMIUM AUTH MODAL REDESIGN ========== */

.premium-modal {

  position: relative;

  overflow: hidden;

  padding: 2.5rem !important;

  border: 1px solid hsla(0, 0%, 100%, 0.1);

  box-shadow: var(--shadow-lg), 0 0 40px hsla(150, 60%, 53%, 0.1);

  border-radius: 16px;

  background: linear-gradient(145deg, hsla(0, 0%, 10%, 0.8), hsla(0, 0%, 5%, 0.95)) !important;

  color: #fff;

  color-scheme: dark;

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

}

.modal-glow {

  position: absolute;

  top: -50%;

  left: -50%;

  width: 200%;

  height: 200%;

  background: radial-gradient(circle at 50% 0%, hsla(150, 60%, 53%, 0.15), transparent 40%),

              radial-gradient(circle at 100% 100%, hsla(280, 60%, 40%, 0.1), transparent 30%);

  pointer-events: none;

  z-index: 0;

  animation: slowPulse 8s ease-in-out infinite alternate;

}

@keyframes slowPulse {

  0% { transform: scale(1); opacity: 0.8; }

  100% { transform: scale(1.1); opacity: 1; }

}

.premium-modal > * {

  position: relative;

  z-index: 1;

}

.modal-header {

  text-align: center;

  margin-bottom: 2rem;

}

@keyframes floatUp {

  0% { transform: translateY(20px) scale(0.8); opacity: 0; }

  100% { transform: translateY(0) scale(1); opacity: 1; }

}

.modal-subtitle {

  color: var(--text-secondary);

  font-size: 0.95rem;

  margin-top: 0.25rem;

}

/* ========== PREMIUM AUTH MODAL REDESIGN ========== */

.premium-modal {

  position: relative;

  overflow: hidden;

  padding: 2.5rem !important;

  border: 1px solid hsla(0, 0%, 100%, 0.08);

  box-shadow: 0 24px 80px hsla(0, 0%, 0%, 0.6), 0 0 40px hsla(150, 60%, 53%, 0.05);

  border-radius: 16px;

  background: #000 !important; /* True black background */

  width: 100%;

  max-width: 420px; /* Slightly wider */

}

/* Subtle glow at the top */

.premium-modal::before {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0; height: 1px;

  background: linear-gradient(90deg, transparent, hsla(150, 60%, 53%, 0.3), transparent);

}

.modal-header {

  text-align: center;

  margin-bottom: 2rem;

}

.modal-logo {

  width: 48px;

  height: 48px;

  margin: 0 auto 0.75rem auto;

  display: flex;

  align-items: center;

  justify-content: center;

  animation: floatUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

.modern-form {

  display: flex;

  flex-direction: column;

  gap: 1.25rem;

}

.modern {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

  text-align: left;

}

.modern-label {

  color: var(--text-secondary);

  font-size: 0.85rem;

  font-weight: 500;

}

input.modern-input {

  width: 100%;

  background-color: #111 !important;

  border: 1px solid hsla(0, 0%, 100%, 0.1);

  border-radius: 8px;

  color: #fff !important;

  padding: 0.75rem 1rem;

  font-size: 0.95rem;

  transition: all 0.2s ease;

}

input.modern-input:focus {

  outline: none;

  border-color: hsla(0, 0%, 100%, 0.25);

  background-color: #1a1a1a !important;

}

input.modern-input::placeholder {

  color: hsla(0, 0%, 100%, 0.2);

}

/* Fix Autofill Background for Dark Mode */

input.modern-input:-webkit-autofill,

input.modern-input:-webkit-autofill:hover, 

input.modern-input:-webkit-autofill:focus, 

input.modern-input:-webkit-autofill:active {

  -webkit-box-shadow: 0 0 0 1000px #111 inset !important;

  -webkit-text-fill-color: #fff !important;

  transition: background-color 5000s ease-in-out 0s;

}

.modern-submit {

  width: 100%;

  padding: 0.75rem;

  font-size: 0.95rem;

  font-weight: 500;

  border-radius: 8px;

  margin-top: 0.5rem;

  background: #fff;

  color: #000;

  border: none;

  cursor: pointer;

  transition: all 0.2s ease;

  display: flex;

  justify-content: center;

  align-items: center;

}

.modern-submit:hover {

  background: #e0e0e0;

}

.modern-submit:active {

  transform: scale(0.98);

}

.modern-link-btn {

  background: none;

  border: none;

  color: #fff;

  font-weight: 500;

  cursor: pointer;

  padding: 0 0.25rem;

  transition: color 0.2s;

  font-size: 0.85rem;

}

.modern-link-btn:hover {

  color: var(--text-secondary);

  text-decoration: underline;

}

/* Pricing Modal */

.pricing-content {

  max-width: 900px;

  width: 90%;

}

.pricing-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 1.5rem;

}

.pricing-card {

  background: var(--surface-hover);

  border: 1px solid var(--border-subtle);

  border-radius: 12px;

  padding: 1.5rem;

  display: flex;

  flex-direction: column;

  position: relative;

  transition: transform 0.2s;

}

.pricing-card:hover {

  transform: translateY(-4px);

}

.vanguard-tier {

  border-color: var(--accent);

  background: linear-gradient(180deg, hsla(150, 60%, 53%, 0.05), var(--surface-hover));

}

.tier-badge {

  position: absolute;

  top: -12px;

  left: 50%;

  transform: translateX(-50%);

  background: var(--accent);

  color: #000;

  font-size: 0.75rem;

  font-weight: 700;

  padding: 4px 12px;

  border-radius: 12px;

  text-transform: uppercase;

}

.pricing-card h3 {

  font-size: 1.25rem;

  margin-bottom: 0.5rem;

}

.pricing-price {

  font-size: 2.5rem;

  font-weight: 800;

  color: var(--text-primary);

  margin-bottom: 0.5rem;

}

.pricing-price span {

  font-size: 1rem;

  color: var(--text-secondary);

  font-weight: normal;

}

.pricing-desc {

  font-size: 0.88rem;

  color: var(--text-secondary);

  margin-bottom: 1.25rem;

  min-height: 40px;

  line-height: 1.5;

}

.pricing-features {

  list-style: none;

  padding: 0;

  margin: 0 0 1.25rem 0;

  flex: 1;

}

.pricing-features li {

  margin-bottom: 0.6rem;

  font-size: 0.88rem;

  color: var(--text-secondary);

  display: flex;

  align-items: center;

  gap: 0.4rem;

}

.pricing-features li.feat-highlight {

  color: var(--text-primary);

  font-weight: 600;

}

.pricing-features li.feat-inherit {

  color: var(--accent);

  font-weight: 600;

  margin-top: 0.75rem;

  padding-top: 0.75rem;

  border-top: 1px solid var(--border-subtle);

}

/* Sentinel card accent */

.sentinel-tier {

  border-color: hsl(250, 80%, 65%);

  background: linear-gradient(180deg, hsla(250, 60%, 60%, 0.07), var(--bg-elevated));

}

.sentinel-badge {

  background: linear-gradient(135deg, hsl(250, 80%, 60%), hsl(280, 70%, 60%)) !important;

  color: #fff !important;

}

.sentinel-btn {

  background: linear-gradient(135deg, hsl(250, 80%, 60%), hsl(280, 70%, 60%)) !important;

  border-color: transparent !important;

}

/* See Full Details button */

.btn-see-details {

  width: 100%;

  padding: 0.45rem 0;

  background: transparent;

  border: 1px solid var(--border-subtle);

  border-radius: 8px;

  color: var(--text-secondary);

  font-size: 0.8rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s;

  letter-spacing: 0.01em;

}

.btn-see-details:hover {

  border-color: var(--accent);

  color: var(--accent);

  background: var(--accent-glow);

}

/* ========== PRICING DETAILS MODAL ========== */

.pricing-details-content {

  max-width: 820px !important;

  width: 95% !important;

  padding: 2rem !important;

  background: var(--bg-surface) !important;

  max-height: 90vh;

  overflow-y: auto;

}

.pd-header {

  text-align: center;

  margin-bottom: 2rem;

  padding-bottom: 1.5rem;

  border-bottom: 1px solid var(--border-subtle);

}

.pd-header h2 {

  font-size: 1.6rem;

  font-weight: 800;

  letter-spacing: -0.03em;

}

.pd-header p {

  color: var(--text-secondary);

  font-size: 0.9rem;

  margin-top: 0.4rem;

}

.pd-table-wrap {

  overflow-x: auto;

  margin-bottom: 2rem;

}

.pd-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 0.88rem;

}

.pd-table thead tr {

  background: var(--bg-elevated);

}

.pd-table th {

  padding: 0.85rem 1rem;

  text-align: center;

  font-weight: 700;

  font-size: 0.85rem;

  border-bottom: 2px solid var(--border-subtle);

}

.pd-feat-col { text-align: left !important; color: var(--text-secondary); }

.pd-hobby-col  { color: var(--text-muted); }

.pd-vanguard-col { color: var(--accent); }

.pd-sentinel-col { color: hsl(250, 80%, 65%); }

.pd-table td {

  padding: 0.75rem 1rem;

  border-bottom: 1px solid var(--border-subtle);

  text-align: center;

  color: var(--text-secondary);

  vertical-align: middle;

}

.pd-table td:first-child {

  text-align: left;

  color: var(--text-primary);

  font-weight: 500;

}

.pd-table tr:hover td {

  background: hsla(0,0%,100%, 0.02);

}

/* Category row */

.pd-category td {

  background: var(--bg-elevated);

  color: var(--text-muted);

  font-size: 0.72rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  padding: 0.5rem 1rem;

  border-bottom: 1px solid var(--border-subtle);

}

.pd-v { color: var(--accent) !important; font-weight: 600; }

.pd-s { color: hsl(250, 80%, 65%) !important; font-weight: 600; }

.pd-cta {

  display: flex;

  gap: 1rem;

  justify-content: center;

  flex-wrap: wrap;

  padding-top: 1rem;

  border-top: 1px solid var(--border-subtle);

}

.spinner {

  width: 1.2rem;

  height: 1.2rem;

  border: 2px solid hsla(0, 0%, 0%, 0.1);

  border-top-color: #000;

  border-radius: 50%;

  animation: spin 0.8s linear infinite;

}

/* ========== ADMIN DASHBOARD ========== */

.admin-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 2rem;

}

.admin-table {

  width: 100%;

  border-collapse: collapse;

  text-align: left;

}

.admin-table th, .admin-table td {

  padding: 1rem;

  border-bottom: 1px solid var(--border-subtle);

}

.admin-table th {

  color: var(--text-secondary);

  font-weight: 600;

  text-transform: uppercase;

  font-size: 0.8rem;

  letter-spacing: 0.05em;

}

.admin-table tr:hover td {

  background: hsla(0, 0%, 100%, 0.03);

}

.limit-input {

  width: 60px;

  background: var(--bg-elevated);

  border: 1px solid var(--border-subtle);

  color: var(--text-primary);

  padding: 0.3rem 0.5rem;

  border-radius: var(--radius-xs);

  text-align: center;

}

.limit-input:focus {

  outline: none;

  border-color: var(--accent);

}

.btn-small {

  padding: 0.3rem 0.6rem;

  font-size: 0.8rem;

}

.dropdown-item:hover {

  background: hsla(0,0%,100%, 0.05) !important;

}

/* ========== FLOATING CHAT WIDGET ========== */

.chat-widget {

  position: fixed;

  bottom: 1.5rem;

  right: 1.5rem;

  z-index: 9999;

  /* No flex — FAB is the only in-flow child. Panel is absolutely positioned. */

}

.chat-widget.hidden { display: none; }

/* --- FAB button --- */

.chat-fab {

  width: 52px;

  height: 52px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--accent), var(--status-running));

  border: none;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  box-shadow: 0 8px 32px hsla(150, 60%, 40%, 0.4), 0 2px 8px hsla(0,0%,0%,0.2);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

  position: relative;

  flex-shrink: 0;

}

.chat-fab:hover {

  transform: scale(1.08);

  box-shadow: 0 12px 40px hsla(150, 60%, 40%, 0.55), 0 4px 16px hsla(0,0%,0%,0.25);

}

.chat-fab:active { transform: scale(0.96); }

.chat-fab-badge {

  position: absolute;

  top: -3px;

  right: -3px;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: #ef4444;

  color: #fff;

  font-size: 0.65rem;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 2px solid var(--bg-base);

  transition: transform 0.3s ease, opacity 0.3s ease;

}

.chat-fab-badge.hidden { transform: scale(0); opacity: 0; }

/* --- Chat popup panel --- */

.chat-panel {

  position: absolute;

  bottom: calc(100% + 0.75rem); /* pop up above FAB */

  right: 0;

  width: 420px;

  height: 620px;

  display: flex;

  flex-direction: column;

  background: var(--bg-surface);

  backdrop-filter: blur(20px) saturate(1.4);

  -webkit-backdrop-filter: blur(20px) saturate(1.4);

  border: 1px solid var(--border-subtle);

  border-radius: 16px;

  box-shadow: 0 24px 60px hsla(0,0%,0%,0.35), 0 0 0 1px hsla(0,0%,100%,0.04);

  overflow: hidden;

  transform-origin: bottom right;

  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s ease;

  transform: scale(0.85) translateY(20px);

  opacity: 0;

  pointer-events: none;

}

.chat-panel.open {

  transform: scale(1) translateY(0);

  opacity: 1;

  pointer-events: all;

}

/* Header */

.chat-panel-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.9rem 1rem;

  background: linear-gradient(135deg, var(--accent) 0%, var(--status-running) 100%);

  flex-shrink: 0;

}

.chat-panel-header-left {

  display: flex;

  align-items: center;

  gap: 0.65rem;

}

.chat-panel-avatar {

  width: 34px;

  height: 34px;

  border-radius: 50%;

  background: hsla(0,0%,100%,0.2);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  flex-shrink: 0;

}

.chat-panel-name {

  font-size: 0.88rem;

  font-weight: 700;

  color: #fff;

}

.chat-panel-status {

  font-size: 0.72rem;

  color: hsla(0,0%,100%,0.8);

  display: flex;

  align-items: center;

  gap: 0.3rem;

  margin-top: 0.05rem;

}

.chat-panel-dot {

  display: inline-block;

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #fff;

  animation: pulse-glow 2s infinite;

}

.chat-panel-close-btn {

  background: hsla(0,0%,100%,0.15);

  border: none;

  color: #fff;

  border-radius: 50%;

  width: 28px;

  height: 28px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: background 0.2s;

}

.chat-panel-close-btn:hover { background: hsla(0,0%,100%,0.28); }

/* Messages */

.chat-panel-messages {

  flex: 1;

  overflow-y: auto;

  padding: 1rem;

  display: flex;

  flex-direction: column;

  gap: 0.7rem;

  scroll-behavior: smooth;

}

.chat-panel-messages::-webkit-scrollbar { width: 3px; }

.chat-panel-messages::-webkit-scrollbar-track { background: transparent; }

.chat-panel-messages::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 99px; }

/* Bubbles */

.cpanel-msg {

  display: flex;

  gap: 0.5rem;

  animation: fadeSlideIn 0.22s ease;

}

.cpanel-msg--bot { align-items: flex-start; }

.cpanel-msg--user { align-items: flex-end; flex-direction: row-reverse; }

.cpanel-msg__bubble {

  max-width: 82%;

  padding: 0.55rem 0.85rem;

  border-radius: 12px;

  font-size: 0.83rem;

  line-height: 1.5;

}

.cpanel-msg--bot .cpanel-msg__bubble {

  background: var(--bg-elevated);

  border: 1px solid var(--border-subtle);

  color: var(--text-primary);

  border-top-left-radius: 3px;

}

.cpanel-msg--user .cpanel-msg__bubble {

  background: linear-gradient(135deg, var(--accent), var(--status-running));

  color: #fff;

  border-top-right-radius: 3px;

}

.cpanel-msg__av {

  width: 24px;

  height: 24px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--accent), var(--status-running));

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 0.6rem;

  font-weight: 700;

  flex-shrink: 0;

}

.cpanel-msg__av--user {

  background: var(--bg-elevated);

  border: 1px solid var(--border-subtle);

  color: var(--accent);

}

/* Typing dots */

.cpanel-typing {

  display: flex;

  align-items: center;

  gap: 3px;

  padding: 0.5rem 0.7rem;

  background: var(--bg-elevated);

  border: 1px solid var(--border-subtle);

  border-radius: 12px;

  border-top-left-radius: 3px;

  width: fit-content;

}

.cpanel-typing span {

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: var(--text-muted);

  animation: typing-bounce 1.2s infinite ease-in-out;

}

.cpanel-typing span:nth-child(2) { animation-delay: 0.2s; }

.cpanel-typing span:nth-child(3) { animation-delay: 0.4s; }

/* Quick reply chips */

.chat-panel-chips {

  padding: 0.6rem 0.75rem;

  border-top: 1px solid var(--border-subtle);

  display: flex;

  flex-wrap: wrap;

  gap: 0.4rem;

  background: var(--bg-elevated);

  flex-shrink: 0;

}

/* Clipboard toast notification */

.chat-copy-toast {

  position: fixed;

  bottom: 5.5rem;

  right: 1.5rem;

  z-index: 10000;

  background: var(--bg-elevated);

  border: 1px solid var(--accent);

  color: var(--text-primary);

  font-size: 0.82rem;

  font-weight: 600;

  padding: 0.5rem 1rem;

  border-radius: 99px;

  box-shadow: 0 4px 16px hsla(0,0%,0%,0.25);

  opacity: 0;

  transform: translateY(8px);

  transition: opacity 0.25s ease, transform 0.25s ease;

  pointer-events: none;

}

.chat-copy-toast.visible {

  opacity: 1;

  transform: translateY(0);

}

.cpanel-chip {

  padding: 0.3rem 0.75rem;

  border-radius: 99px;

  border: 1px solid var(--border-subtle);

  background: var(--bg-surface);

  color: var(--text-secondary);

  font-size: 0.73rem;

  font-weight: 500;

  cursor: pointer;

  transition: all 0.2s;

  white-space: nowrap;

}

.cpanel-chip:hover {

  border-color: var(--accent);

  color: var(--accent);

  background: var(--accent-glow);

}

/* Footer contact links */

.chat-panel-footer {

  padding: 0.65rem 0.9rem;

  border-top: 1px solid var(--border-subtle);

  background: var(--bg-elevated);

  flex-shrink: 0;

}

.chat-footer-label {

  font-size: 0.68rem;

  text-transform: uppercase;

  letter-spacing: 0.07em;

  color: var(--text-muted);

  font-weight: 600;

  margin-bottom: 0.45rem;

}

.chat-footer-links {

  display: flex;

  gap: 0.5rem;

}

.chat-footer-link {

  display: flex;

  align-items: center;

  gap: 0.3rem;

  padding: 0.3rem 0.65rem;

  border-radius: 99px;

  border: 1px solid var(--border-subtle);

  font-size: 0.72rem;

  font-weight: 500;

  text-decoration: none;

  color: var(--text-secondary);

  background: var(--bg-surface);

  transition: all 0.2s;

  white-space: nowrap;

}

.chat-footer-link:hover { color: var(--text-primary); border-color: var(--text-muted); }

.chat-footer-link--fb:hover { color: #1877F2; border-color: #1877F2; background: hsla(214,89%,52%,0.08); }

.chat-footer-link--email:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-glow); }

.chat-footer-link--web:hover { color: var(--status-running); border-color: var(--status-running); background: hsla(250,52%,51%,0.08); }

/* ========== CHATBOT / HELP SECTION ========== */

.chatbot-layout {

  display: grid;

  grid-template-columns: 1fr 300px;

  gap: 1.25rem;

  align-items: start;

}

@media (max-width: 860px) {

  .chatbot-layout { grid-template-columns: 1fr; }

}

/* ---- Chat Panel ---- */

.chatbot-panel {

  display: flex;

  flex-direction: column;

  height: 540px;

  padding: 0 !important;

  overflow: hidden;

}

.chatbot-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 1rem 1.25rem;

  border-bottom: 1px solid var(--border-subtle);

  background: var(--bg-elevated);

  border-radius: var(--radius) var(--radius) 0 0;

}

.chatbot-header-left {

  display: flex;

  align-items: center;

  gap: 0.75rem;

}

.chatbot-avatar {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--accent), var(--status-running));

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  flex-shrink: 0;

}

.chatbot-name {

  font-size: 0.92rem;

  font-weight: 700;

  color: var(--text-primary);

}

.chatbot-status {

  font-size: 0.75rem;

  color: var(--text-muted);

  display: flex;

  align-items: center;

  gap: 0.35rem;

}

.chatbot-dot {

  display: inline-block;

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--accent);

  animation: pulse-glow 2s infinite;

}

.chatbot-messages {

  flex: 1;

  overflow-y: auto;

  padding: 1.25rem;

  display: flex;

  flex-direction: column;

  gap: 0.85rem;

  scroll-behavior: smooth;

}

.chatbot-messages::-webkit-scrollbar { width: 4px; }

.chatbot-messages::-webkit-scrollbar-track { background: transparent; }

.chatbot-messages::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 99px; }

/* Message bubbles */

.chat-msg {

  display: flex;

  gap: 0.6rem;

  animation: fadeSlideIn 0.25s ease;

}

.chat-msg--bot { align-items: flex-start; }

.chat-msg--user { align-items: flex-end; flex-direction: row-reverse; }

.chat-msg__bubble {

  max-width: 80%;

  padding: 0.65rem 1rem;

  border-radius: 14px;

  font-size: 0.875rem;

  line-height: 1.55;

}

.chat-msg--bot .chat-msg__bubble {

  background: var(--bg-elevated);

  border: 1px solid var(--border-subtle);

  color: var(--text-primary);

  border-top-left-radius: 4px;

}

.chat-msg--user .chat-msg__bubble {

  background: linear-gradient(135deg, var(--accent), var(--status-running));

  color: #fff;

  border-top-right-radius: 4px;

}

.chat-msg__avatar {

  width: 28px;

  height: 28px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--accent), var(--status-running));

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 0.7rem;

  font-weight: 700;

  flex-shrink: 0;

}

.chat-msg__avatar--user {

  background: var(--bg-elevated);

  border: 1px solid var(--border-subtle);

  color: var(--accent);

}

/* Typing indicator */

.chat-typing {

  display: flex;

  align-items: center;

  gap: 4px;

  padding: 0.5rem 0.75rem;

  background: var(--bg-elevated);

  border: 1px solid var(--border-subtle);

  border-radius: 14px;

  border-top-left-radius: 4px;

  width: fit-content;

}

.chat-typing span {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--text-muted);

  animation: typing-bounce 1.2s infinite ease-in-out;

}

.chat-typing span:nth-child(2) { animation-delay: 0.2s; }

.chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {

  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }

  30% { transform: translateY(-5px); opacity: 1; }

}

/* Suggestion chips */

.chatbot-suggestions {

  padding: 0.75rem 1rem;

  border-top: 1px solid var(--border-subtle);

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  background: var(--bg-elevated);

  border-radius: 0 0 var(--radius) var(--radius);

}

.chat-chip {

  padding: 0.4rem 0.85rem;

  border-radius: 99px;

  border: 1px solid var(--border-subtle);

  background: var(--bg-surface);

  color: var(--text-secondary);

  font-size: 0.78rem;

  font-weight: 500;

  cursor: pointer;

  transition: all 0.2s ease;

  white-space: nowrap;

}

.chat-chip:hover {

  border-color: var(--accent);

  color: var(--accent);

  background: var(--accent-glow);

  transform: translateY(-1px);

}

/* ---- Contact Panel ---- */

.contact-panel {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}

.contact-card {

  padding: 1.5rem !important;

}

.contact-card-header {

  display: flex;

  align-items: center;

  gap: 1rem;

  margin-bottom: 1rem;

}

.contact-avatar-ring {

  width: 52px;

  height: 52px;

  border-radius: 50%;

  padding: 2px;

  background: linear-gradient(135deg, var(--accent), var(--status-running));

  flex-shrink: 0;

}

.contact-avatar-inner {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: var(--bg-elevated);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.25rem;

  font-weight: 800;

  color: var(--accent);

}

.contact-name {

  font-size: 1rem;

  font-weight: 700;

  color: var(--text-primary);

}

.contact-tagline {

  font-size: 0.78rem;

  color: var(--text-muted);

  margin-top: 0.1rem;

}

.contact-bio {

  font-size: 0.85rem;

  color: var(--text-secondary);

  line-height: 1.6;

  margin-bottom: 1.25rem;

}

.contact-links {

  display: flex;

  flex-direction: column;

  gap: 0.6rem;

}

.contact-link {

  display: flex;

  align-items: center;

  gap: 0.6rem;

  padding: 0.6rem 0.9rem;

  border-radius: var(--radius-sm);

  font-size: 0.83rem;

  font-weight: 500;

  text-decoration: none;

  border: 1px solid var(--border-subtle);

  transition: all 0.2s ease;

  color: var(--text-secondary);

  background: var(--bg-base);

}

.contact-link:hover {

  transform: translateX(3px);

  color: var(--text-primary);

}

.contact-link--fb:hover { border-color: #1877F2; color: #1877F2; background: hsla(214, 89%, 52%, 0.08); }

.contact-link--email:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }

.contact-link--web:hover { border-color: var(--status-running); color: var(--status-running); background: hsla(250, 52%, 51%, 0.08); }

/* Tip card */

.faq-tip-card {

  padding: 1rem 1.25rem !important;

}

.faq-tip-label {

  font-size: 0.78rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  color: var(--accent);

  margin-bottom: 0.5rem;

}

.faq-tip-card p {

  font-size: 0.82rem;

  color: var(--text-secondary);

  line-height: 1.55;

}

/* Confidence Badges */

.conf-badge {

  font-size: 0.65rem;

  padding: 0.15rem 0.4rem;

  border-radius: 12px;

  margin-left: 0.5rem;

  vertical-align: middle;

  font-weight: 600;

  text-transform: uppercase;

}

.conf-badge-confirmed {

  background-color: var(--success-bg);

  color: var(--success-text);

  border: 1px solid var(--success-text);

}

.conf-badge-potential {

  background-color: transparent;

  color: var(--text-muted);

  border: 1px dashed var(--border-default);

}

/* Sidebar icon: always visible, fixed size */

/* ============================================================
   SIDEBAR TOGGLE — clean, conflict-free
   ============================================================ */

/* --- Collapsed state --- */
.sidebar.collapsed {
  width: 68px;
  padding: 1.5rem 0.75rem;
}

/* --- Sidebar header row (logo + toggle button) --- */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  min-height: 36px;
  gap: 0.5rem;
}

/* Logo wrap: icon + text side by side */
.sidebar-logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, margin 0.3s ease;
  max-width: 200px;
  opacity: 1;
}

.sidebar.collapsed .sidebar-header {
  justify-content: center;
}

.sidebar.collapsed .sidebar-logo-wrap {
  max-width: 0;
  opacity: 0;
  margin: 0;
  gap: 0;
  pointer-events: none;
}

/* Logo text: fades & shrinks away when collapsed */
.sidebar-logo-text {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--text-primary), var(--text-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  overflow: hidden;
}

/* --- Hamburger toggle button --- */
.sidebar-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  outline: none;
}
.sidebar-toggle:focus-visible {
  box-shadow: 0 0 0 2px hsla(150, 60%, 53%, 0.4);
}
.sidebar-toggle:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.hamburger-icon {
  width: 16px;
  height: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hamburger-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: currentColor;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  transform-origin: center;
}

/* Sidebar OPEN -> Show 'X' */
.hamburger-icon span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.hamburger-icon span:nth-child(2) {
  opacity: 0;
}
.hamburger-icon span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* Sidebar COLLAPSED -> Show 'Hamburger' */
.sidebar.collapsed .hamburger-icon span {
  transform: none;
  opacity: 1;
}

/* --- Sidebar icon: always visible, fixed width --- */
.sidebar-icon {
  font-size: 1.1rem;
  min-width: 22px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

/* --- Nav link label: fades & shrinks away when collapsed --- */
.sidebar-link-label {
  white-space: nowrap;
  overflow: hidden;
  max-width: 160px;
  opacity: 1;
  transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease;
}
.sidebar.collapsed .sidebar-link-label {
  max-width: 0;
  opacity: 0;
}

/* Keep sidebar-link overflow visible so text doesn't pop */
.sidebar-link {
  overflow: hidden;
}

/* --- Footer: Cross-fade expanded vs collapsed --- */
.sidebar-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
  overflow: hidden;
}
.sidebar-footer-content {
  position: relative;
  min-height: 90px;
}
.footer-expanded {
  opacity: 1;
  transition: opacity 0.2s ease;
  pointer-events: auto;
}
.sidebar.collapsed .footer-expanded {
  opacity: 0;
  pointer-events: none;
}
.footer-collapsed {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.sidebar.collapsed .footer-collapsed {
  opacity: 1;
  pointer-events: auto;
}
/* --- Mobile Dropdown Menu --- */
@media (max-width: 860px) {
  .app-layout {
    flex-direction: column;
    position: relative; /* ensure absolute positioning works relative to this */
  }
  
  .main-content {
    margin-top: 68px; /* space for the fixed header */
    height: calc(100vh - 68px) !important;
    overflow-y: auto;
  }
  
  .sidebar {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100% !important;
    max-height: 100vh;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    padding: 1rem 1.25rem !important;
    overflow-y: auto;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
    background: var(--bg-surface); /* Ensure background is solid enough to hide content below */
  }
  
  .sidebar-header {
    margin-bottom: 1.5rem;
  }
  
  .sidebar.collapsed .sidebar-header {
    margin-bottom: 0;
    justify-content: space-between !important;
  }
  
  .sidebar.collapsed .sidebar-logo-wrap {
    max-width: 200px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin: 0 !important;
  }
  
  .sidebar.collapsed .sidebar-logo-text {
    max-width: 200px !important;
    opacity: 1 !important;
  }
  
  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  
  .sidebar.collapsed .sidebar-nav {
    opacity: 0;
    pointer-events: none;
    margin: 0;
  }
  
  .sidebar.collapsed {
    max-height: 68px; /* Precise Header height + padding */
    padding-bottom: 1rem !important;
    overflow: hidden;
  }
  
  .sidebar-footer {
    padding-top: 1rem;
    margin-top: 0;
  }
  
  .sidebar-footer-content {
    min-height: auto;
  }
  
  .sidebar.collapsed .footer-expanded,
  .sidebar.collapsed .footer-collapsed {
    display: none !important;
  }
  
  .sidebar .footer-expanded {
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative;
    display: block;
  }
  
  .sidebar .footer-collapsed {
    display: none !important;
  }
}

/* --- Mobile Chat Widget Fix --- */
@media (max-width: 480px) {
  .chat-panel {
    position: fixed !important;
    bottom: 85px !important; /* Above the FAB */
    right: 1rem !important;
    left: 1rem !important;
    width: auto !important; /* Override 420px */
    height: calc(100vh - 110px) !important;
    max-height: 600px !important;
    transform-origin: bottom right;
  }
  .chat-msg__bubble {
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
}