/* ============================================
   betterweb — AI Website Intelligence
   Aesthetic: Liquid Precision
   Dark violet + Light mode toggle
   ============================================ */

:root {
  /* Backgrounds */
  --bg-deep: #09090B;
  --bg-surface: #111113;
  --bg-card: #18181B;
  --bg-card-hover: #1F1F23;
  --bg-input: #0C0C0E;
  --bg-input-focus: #111113;

  /* Violet palette */
  --violet-950: #1E103A;
  --violet-800: #3B1F8E;
  --violet-700: #5B21B6;
  --violet-600: #7C3AED;
  --violet-500: #8B5CF6;
  --violet-400: #A78BFA;
  --violet-300: #C4B5FD;
  --violet-glow: rgba(139, 92, 246, 0.12);
  --violet-glow-strong: rgba(139, 92, 246, 0.25);

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #FFFFFF;
  --text-muted: #E4E4E7;
  --text-accent: #A78BFA;

  /* Borders */
  --border-subtle: rgba(139, 92, 246, 0.06);
  --border-default: rgba(139, 92, 246, 0.12);
  --border-focus: rgba(139, 92, 246, 0.35);

  /* Effects */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 40px rgba(139, 92, 246, 0.06);

  /* Typography */
  --font-display: "Instrument Serif", "Playfair Display", "Georgia", "Times New Roman", serif;
  --font-body: "Outfit", "DM Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Berkeley Mono", "JetBrains Mono", "SF Mono", "Cascadia Code", "Fira Code", monospace;

  /* Sizing */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);

  /* Shorthand aliases (used by site-health page) */
  --accent: #7C3AED;
  --surface: var(--bg-card);
  --bg: var(--bg-deep);
  --text: var(--text-primary);
  --border: var(--border-default);

  color-scheme: dark;
}

/* ---- Light Mode ---- */
html.light {
  --bg-deep: #FAFAFA;
  --bg-surface: #FFFFFF;
  --bg-card: #F4F4F5;
  --bg-card-hover: #E4E4E7;
  --bg-input: #FFFFFF;
  --bg-input-focus: #FFFFFF;

  --text-primary: #0A0A0B;
  --text-secondary: #18181B;
  --text-muted: #27272A;
  --text-accent: #7C3AED;

  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.1);
  --border-focus: rgba(124, 58, 237, 0.4);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 40px rgba(139, 92, 246, 0.04);

  --violet-glow: rgba(124, 58, 237, 0.06);
  --violet-glow-strong: rgba(124, 58, 237, 0.12);

  /* Shorthand aliases (used by site-health page) */
  --accent: #7C3AED;
  --surface: var(--bg-card);
  --bg: var(--bg-deep);
  --text: var(--text-primary);
  --border: var(--border-default);

  color-scheme: light;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background 0.3s, color 0.3s;
}

a { color: var(--violet-400); text-decoration: none; }
a:hover { color: var(--violet-300); }
html.light a { color: var(--violet-600); }
html.light a:hover { color: var(--violet-700); }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--violet-950); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--violet-800); }
html.light ::-webkit-scrollbar-thumb { background: #D4D4D8; }
html.light ::-webkit-scrollbar-thumb:hover { background: #A1A1AA; }

/* ---- Theme Toggle ---- */
.btn-theme-toggle {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  cursor: pointer;
  padding: 7px 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s var(--ease-out);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-theme-toggle:hover {
  color: var(--violet-400);
  border-color: var(--border-focus);
  background: var(--violet-glow-strong);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.12);
}

html.light .btn-theme-toggle:hover {
  color: var(--violet-600);
}

.btn-theme-toggle .icon-sun,
.btn-theme-toggle .icon-moon { display: none; }
.btn-theme-toggle .icon-sun { display: flex; }
html.light .btn-theme-toggle .icon-sun { display: none; }
html.light .btn-theme-toggle .icon-moon { display: flex; }

.btn-theme-toggle .theme-label-dark { display: none; }
html.light .btn-theme-toggle .theme-label-light { display: none; }
html.light .btn-theme-toggle .theme-label-dark { display: inline; }

/* Animated border angle for CTA buttons */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --chip-angle {
  syntax: '<angle>';
  initial-value: 180deg;
  inherits: false;
}

@keyframes borderSweep {
  to { --border-angle: 360deg; }
}

@keyframes chipSweep {
  to { --chip-angle: 720deg; }
}

/* ---- Animated gleam border — upgrade CTA buttons ---- */
.pricing-cta.primary,
.stg-btn.stg-btn-primary {
  position: relative;
  isolation: isolate;
}

.pricing-cta.primary::before,
.stg-btn.stg-btn-primary::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 8px;
  padding: 1.5px;
  background: conic-gradient(
    from var(--border-angle) at 50% 50%,
    rgba(139, 92, 246, 0.08) 0%,
    rgba(139, 92, 246, 0.08) 76%,
    rgba(167, 139, 250, 0.28) 82%,
    rgba(200, 185, 255, 0.48) 86%,
    rgba(167, 139, 250, 0.28) 90%,
    rgba(139, 92, 246, 0.08) 96%,
    rgba(139, 92, 246, 0.08) 100%
  );
  z-index: -1;
  animation: borderSweep 4s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box exclude,
        linear-gradient(#fff 0 0);
}

html.light .pricing-cta.primary::before,
html.light .stg-btn.stg-btn-primary::before {
  background: conic-gradient(
    from var(--border-angle) at 50% 50%,
    rgba(124, 58, 237, 0.04) 0%,
    rgba(124, 58, 237, 0.04) 76%,
    rgba(147, 100, 255, 0.16) 82%,
    rgba(124, 58, 237, 0.32) 86%,
    rgba(147, 100, 255, 0.16) 90%,
    rgba(124, 58, 237, 0.04) 96%,
    rgba(124, 58, 237, 0.04) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .pricing-cta.primary::before,
  .stg-btn.stg-btn-primary::before {
    animation: none;
    background: rgba(139, 92, 246, 0.15);
  }
}

/* ---- Auto-fix chip — smooth shimmer sweep ---- */
.follow-up-chip.chip-autofix {
  position: relative;
  overflow: hidden;
}

.follow-up-chip.chip-autofix::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgba(196, 181, 253, 0.08) 44%,
    rgba(233, 213, 255, 0.12) 50%,
    rgba(196, 181, 253, 0.08) 56%,
    transparent 62%,
    transparent 100%
  );
  background-size: 250% 100%;
  animation: autofixSweep 3.5s ease-in-out infinite;
  pointer-events: none;
}

html.light .follow-up-chip.chip-autofix::before {
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgba(139, 92, 246, 0.06) 44%,
    rgba(124, 58, 237, 0.10) 50%,
    rgba(139, 92, 246, 0.06) 56%,
    transparent 62%,
    transparent 100%
  );
  background-size: 250% 100%;
}

@keyframes autofixSweep {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .follow-up-chip.chip-autofix::before {
    animation: none;
    opacity: 0;
  }
}

/* ============================================
   LANDING / LOGIN PAGE — Chat-style layout
   ============================================ */

.landing-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 0% 100%, rgba(139, 92, 246, 0.12) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 100% 0%, rgba(91, 33, 182, 0.09) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(139, 92, 246, 0.04) 0%, transparent 75%),
    var(--bg-deep);
  isolation: isolate;
}

html.light .landing-shell {
  background:
    radial-gradient(ellipse 70% 55% at 0% 100%, rgba(124, 58, 237, 0.08) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 100% 0%, rgba(91, 33, 182, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(124, 58, 237, 0.03) 0%, transparent 75%),
    var(--bg-deep);
}

/* Animated background orbs */
.landing-shell::before,
.landing-shell::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  pointer-events: none;
  z-index: -1;
}

.landing-shell::before {
  width: 750px;
  height: 750px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.60) 0%, rgba(139, 92, 246, 0.22) 40%, transparent 70%);
  filter: blur(70px);
  top: 50%;
  left: 50%;
  margin-top: -375px;
  margin-left: -375px;
  animation: landingOrb1 14s ease-in-out infinite;
}

.landing-shell::after {
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(91, 33, 182, 0.50) 0%, rgba(139, 92, 246, 0.18) 40%, transparent 70%);
  filter: blur(70px);
  top: 50%;
  left: 50%;
  margin-top: -325px;
  margin-left: -325px;
  animation: landingOrb2 18s ease-in-out infinite;
}

@keyframes landingOrb1 {
  0%, 100% { transform: translate(-20vw, 15vh) scale(1); }
  20% { transform: translate(12vw, -10vh) scale(1.2); }
  40% { transform: translate(5vw, 18vh) scale(0.85); }
  60% { transform: translate(-18vw, 5vh) scale(1.15); }
  80% { transform: translate(-5vw, -12vh) scale(0.95); }
}

@keyframes landingOrb2 {
  0%, 100% { transform: translate(18vw, -12vh) scale(1); }
  20% { transform: translate(-10vw, 8vh) scale(1.15); }
  40% { transform: translate(-5vw, -15vh) scale(1.25); }
  60% { transform: translate(15vw, 5vh) scale(0.88); }
  80% { transform: translate(8vw, 14vh) scale(1.1); }
}

html.light .landing-shell::before {
  background: radial-gradient(circle, rgba(124, 58, 237, 0.30) 0%, rgba(139, 92, 246, 0.10) 40%, transparent 70%);
}

html.light .landing-shell::after {
  background: radial-gradient(circle, rgba(91, 33, 182, 0.24) 0%, rgba(124, 58, 237, 0.08) 40%, transparent 70%);
}

/* Topbar */
.landing-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  flex-shrink: 0;
}

.landing-topbar-brand {
  display: flex;
  align-items: center;
}

.landing-topbar-brand .brand-logo {
  height: 30px;
  width: auto;
}

/* Center content */
.landing-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
  animation: landingEnter 0.8s var(--ease-out) both;
}

@keyframes landingEnter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero */
.landing-hero {
  text-align: center;
  margin-bottom: 32px;
}

.landing-hero h1 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 14px;
}

.landing-hero p {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto;
  text-wrap: balance;
}

/* Suggestion chips */
.landing-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}

.landing-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 0.76rem;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
}

html.light .landing-chip {
  color: var(--violet-700);
  background: rgba(124, 58, 237, 0.05);
  border-color: rgba(124, 58, 237, 0.15);
}

/* Landing Agent Tiles (login page) — matches chat agent-tile style */
.landing-agents {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 36px;
  max-width: 440px;
  width: 100%;
}

/* When odd number of tiles, last tile spans full width */
.landing-agents > .landing-agent-tile:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: 240px;
  justify-self: center;
}

.landing-agent-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  text-align: left;
  position: relative;
  overflow: hidden;
  animation: agentTileIn 0.5s var(--ease-out) both, tileBreath 4s ease-in-out 0.8s infinite;
}

.landing-agent-tile::before {
  display: none;
}

.landing-agent-tile:nth-child(1) { animation-delay: 0s, 0.8s; }
.landing-agent-tile:nth-child(2) { animation-delay: 0.08s, 1.5s; }
.landing-agent-tile:nth-child(3) { animation-delay: 0.16s, 2.2s; }
.landing-agent-tile:nth-child(4) { animation-delay: 0.24s, 2.9s; }
.landing-agent-tile:nth-child(5) { animation-delay: 0.32s, 3.6s; }
.landing-agent-tile:nth-child(6) { animation-delay: 0.40s, 4.3s; }
.landing-agent-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--agent-color);
  background: color-mix(in srgb, var(--agent-color) 10%, transparent);
  border-radius: 7px;
}

.landing-agent-avatar svg {
  width: 14px;
  height: 14px;
}

.landing-agent-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.landing-agent-desc {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 300;
  color: var(--text-muted);
  opacity: 0.75;
  margin-top: 1px;
}

html.light .landing-agent-tile {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

html.light .landing-agent-avatar {
  background: color-mix(in srgb, var(--agent-color) 8%, transparent);
}

html.light .landing-agent-name {
  color: #1a1a1a;
}

html.light .landing-agent-desc {
  color: #777;
}

/* Connects with */
.landing-platforms {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}

.landing-platforms-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.6;
}

.landing-platforms-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.landing-platforms-row img {
  width: 22px;
  height: 22px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  filter: grayscale(0.3);
}

.landing-platforms-row img:hover {
  opacity: 0.85;
  filter: grayscale(0);
}

/* Auth section */
.landing-auth {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

/* Google sign-in button */
.btn-google-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 24px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
}

.btn-google-signin:hover {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--violet-glow), 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

html.light .btn-google-signin {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

html.light .btn-google-signin:hover {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Welcome back card */
.welcome-back-card {
  width: 100%;
  padding: 16px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  animation: landingEnter 0.5s var(--ease-out) both;
}

.welcome-back-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.welcome-back-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.welcome-back-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-700), var(--violet-500));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.welcome-back-info {
  min-width: 0;
}

.welcome-back-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.welcome-back-email {
  font-size: 0.72rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.light .welcome-back-card {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

html.light .welcome-back-avatar {
  background: linear-gradient(135deg, var(--violet-600), var(--violet-500));
}

.btn-google-signin.welcome-back-btn {
  gap: 8px;
}

.btn-google-signin.welcome-back-btn .wb-arrow {
  margin-left: auto;
  opacity: 0.4;
  transition: opacity 0.2s, transform 0.2s;
}

.btn-google-signin.welcome-back-btn:hover .wb-arrow {
  opacity: 0.8;
  transform: translateX(2px);
}

/* Divider */
.landing-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0;
}

.landing-divider::before,
.landing-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.landing-divider span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Username sign-in button */
.btn-email-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
}

.btn-email-signin:hover,
.btn-email-signin.active {
  color: var(--violet-400);
  border-color: var(--border-focus);
  background: var(--violet-glow);
}

html.light .btn-email-signin:hover,
html.light .btn-email-signin.active {
  color: var(--violet-600);
  border-color: rgba(124, 58, 237, 0.3);
  background: rgba(124, 58, 237, 0.05);
}

/* Expandable form */
.landing-email-form {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s var(--ease-out), opacity 0.25s var(--ease-out), margin 0.35s var(--ease-out);
  margin-top: 0;
}

.landing-email-form.open {
  max-height: 300px;
  opacity: 1;
  margin-top: 8px;
}

.landing-email-form form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Decorative input area at bottom */
.landing-input-area {
  padding: 14px 24px 24px;
  flex-shrink: 0;
}

.landing-input-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.landing-input-placeholder {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
}

.landing-input-placeholder:hover {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--violet-glow);
}

.landing-input-placeholder span {
  font-size: 0.95rem;
  color: var(--text-muted);
  opacity: 0.5;
}

.landing-input-hint {
  max-width: 900px;
  margin: 8px auto 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  opacity: 0.5;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ---- Shared form styles (used by login + other forms) ---- */

.brand-logo {
  flex-shrink: 0;
}

/* Logo swapping: dark mode = white logo, light mode = black logo */
.brand-logo-light { display: none; }
html.light .brand-logo-dark { display: none; }
html.light .brand-logo-light { display: inline; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.form-input {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  outline: none;
  transition: all 0.25s var(--ease-out);
}

.form-input::placeholder {
  color: var(--text-muted);
  opacity: 0.5;
}

html.light .form-input::placeholder {
  color: #71717A;
  opacity: 0.7;
}

.form-input:focus {
  background: var(--bg-input-focus);
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--violet-glow);
}

select.form-input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}

/* Button */
.btn-login {
  width: 100%;
  padding: 12px 24px;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, var(--violet-600), #a78bfa);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.25s var(--ease-out);
  box-shadow: 0 2px 8px rgba(139,92,246,0.25);
}

.btn-login::before { display: none; }

.btn-login:hover {
  background: var(--violet-500);
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.2);
  transform: translateY(-1px);
}

.btn-login:active {
  transform: translateY(0);
}

.btn-login:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Error */
.login-error {
  display: none;
  padding: 10px 14px;
  font-size: 0.8rem;
  color: #FCA5A5;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.12);
  border-radius: var(--radius-sm);
  text-align: center;
  animation: errorShake 0.4s var(--ease-out);
}

html.light .login-error {
  color: #DC2626;
  background: rgba(239, 68, 68, 0.06);
}

.login-error.visible {
  display: block;
}

.login-success {
  display: none;
  padding: 10px 14px;
  font-size: 0.8rem;
  color: #86efac;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.12);
  border-radius: var(--radius-sm);
  text-align: center;
}
html.light .login-success {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.06);
}
.login-success.visible {
  display: block;
}

.forgot-password-link {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.forgot-password-link:hover {
  color: var(--accent-violet, #8b5cf6);
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes cardEnter {
  from { opacity: 0; transform: translateY(16px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================
   CHAT PAGE — Layout
   ============================================ */

.chat-shell {
  display: flex;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height for mobile browsers */
  overflow: hidden;
}

/* ---- Sidebar ---- */
.sidebar {
  width: 280px;
  min-width: 280px;
  background: linear-gradient(180deg, #0E0D15 0%, #0A0A0F 50%, #0C0B12 100%);
  border-right: 1px solid rgba(139, 92, 246, 0.08);
  display: flex;
  flex-direction: column;
  transition: width 0.25s var(--ease-out), min-width 0.25s var(--ease-out), transform 0.3s var(--ease-out);
  z-index: 10;
  overflow: hidden;
}

.sidebar.collapsed {
  width: 56px;
  min-width: 56px;
}

/* Brand icon (collapsed only) */
.sidebar-brand-icon {
  display: none;
}

.sidebar-brand-icon .brand-icon {
  height: 28px;
  width: 28px;
}

/* Dark mode: show dark icon, hide light */
.brand-icon-light { display: none; }
.brand-icon-dark { display: block; }
html.light .brand-icon-dark { display: none; }
html.light .brand-icon-light { display: block; }

/* Collapsed: hide expanded content, show icon */
.sidebar.collapsed .sidebar-brand,
.sidebar.collapsed .sidebar-search,
.sidebar.collapsed .conversation-list,
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .btn-new-chat-label,
.sidebar.collapsed #btnLogout {
  display: none;
}

.sidebar.collapsed .sidebar-brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Collapsed: icon bar visible */
.sidebar-collapsed-icons {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
}

.sidebar.collapsed .sidebar-collapsed-icons {
  display: flex;
}

.sidebar-icon-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all 0.15s;
}

.sidebar-icon-btn:hover {
  color: var(--text-primary);
  background: rgba(139, 92, 246, 0.08);
}

html.light .sidebar-icon-btn:hover {
  background: rgba(124, 58, 237, 0.06);
}

/* Collapsed: header layout */
.sidebar.collapsed .sidebar-header {
  padding: 12px 8px 8px;
  align-items: center;
}

.sidebar.collapsed .sidebar-header-top {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: static;
}

.sidebar.collapsed .btn-sidebar-collapse {
  position: static;
}

/* Collapsed: flip chevrons to indicate expand */
.sidebar.collapsed .btn-sidebar-collapse svg {
  transform: rotate(180deg);
}

/* Collapsed: new chat as icon-only */
.sidebar.collapsed .btn-new-chat {
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}

.sidebar.collapsed .btn-new-chat .btn-new-chat-icon {
  margin: 0;
}

/* Collapsed: footer centered */
.sidebar.collapsed .sidebar-footer {
  justify-content: center;
  padding: 12px 8px;
}

.sidebar.collapsed .sidebar-avatar {
  width: 32px;
  height: 32px;
  font-size: 0.6rem;
}

/* New chat icon spacing fix for expanded */
.btn-new-chat-icon {
  vertical-align: -2px;
  margin-right: 6px;
  flex-shrink: 0;
}

.btn-new-chat-label {
  white-space: nowrap;
}

html.light .sidebar {
  background: linear-gradient(180deg, #FBFBFD 0%, #F5F5F8 100%);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.sidebar-header {
  padding: 22px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}

.sidebar-header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.sidebar-brand {
  display: flex;
  align-items: center;
}

/* Mobile close button — hidden on desktop */
.btn-mobile-close {
  display: none;
}

.btn-sidebar-collapse {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: absolute;
  right: 0;
}

.btn-sidebar-collapse:hover {
  color: var(--text-primary);
  background: rgba(139, 92, 246, 0.08);
}

html.light .btn-sidebar-collapse:hover {
  background: rgba(124, 58, 237, 0.06);
}

.sidebar-brand .brand-logo {
  height: 32px;
}

.btn-new-chat {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  letter-spacing: -0.01em;
}

.btn-new-chat:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.2);
  color: var(--violet-400);
}

html.light .btn-new-chat {
  background: rgba(124, 58, 237, 0.04);
  border-color: rgba(124, 58, 237, 0.1);
  color: var(--text-secondary);
}

html.light .btn-new-chat:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.2);
  color: var(--violet-600);
}

/* Sidebar search */
.sidebar-search {
  padding: 0 14px 12px;
  position: relative;
  flex-shrink: 0;
}

.sidebar-search-icon {
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  margin-top: -6px;
  opacity: 0.6;
}

.sidebar-search-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-primary);
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: var(--radius-lg);
  outline: none;
  transition: all 0.2s;
}

.sidebar-search-input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.sidebar-search-input:focus {
  border-color: rgba(139, 92, 246, 0.25);
  background: rgba(139, 92, 246, 0.1);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.06);
}

.sidebar-search:focus-within .sidebar-search-icon {
  color: var(--violet-400);
  opacity: 1;
}

html.light .sidebar-search-input {
  background: rgba(124, 58, 237, 0.05);
  border-color: rgba(124, 58, 237, 0.1);
}

html.light .sidebar-search-input:focus {
  border-color: rgba(124, 58, 237, 0.2);
  background: rgba(124, 58, 237, 0.07);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.04);
}

html.light .sidebar-search:focus-within .sidebar-search-icon {
  color: var(--violet-600);
}

/* Site switcher */
.site-switcher {
  padding: 6px 12px 8px;
  border-bottom: 1px solid var(--border-default);
}
.site-switcher-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  font-weight: 600;
  padding: 0 4px;
}
.site-switcher-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-switcher-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background 0.15s;
}
.site-switcher-item:hover {
  background: var(--bg-hover);
}
.site-switcher-item.active {
  background: rgba(74,222,128,0.1);
  color: var(--text-primary);
}
.site-switcher-item.active .site-active-badge {
  font-size: 9px;
  font-weight: 600;
  color: #16a34a;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.site-switcher-item.active .site-active-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
}
.site-switcher-item .site-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.site-switcher-item .site-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-switcher-item .site-type {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.sidebar.collapsed .site-switcher { display: none !important; }

/* Conversation list */
.conversation-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px;
}

.conversation-list::-webkit-scrollbar {
  width: 3px;
}

.conversation-list::-webkit-scrollbar-track {
  background: transparent;
}

.conversation-list::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.12);
  border-radius: 4px;
}

.conversation-list::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.25);
}

.conv-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  margin-bottom: 1px;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s var(--ease-out);
}

.conv-item:hover {
  background: rgba(139, 92, 246, 0.06);
  color: var(--text-primary);
}

.conv-item.active {
  background: rgba(139, 92, 246, 0.08);
  color: var(--text-primary);
  box-shadow: inset 2px 0 0 var(--violet-500);
}

html.light .conv-item:hover {
  background: rgba(124, 58, 237, 0.04);
}

html.light .conv-item.active {
  background: rgba(124, 58, 237, 0.06);
  box-shadow: inset 2px 0 0 var(--violet-600);
}

.conv-item-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-inline-rename {
  flex: 1;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--violet-600, #7c3aed);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-family: inherit;
  padding: 1px 5px;
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--violet-600, #7c3aed) 20%, transparent);
}

.conv-item-delete {
  opacity: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 4px;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.conv-item:hover .conv-item-delete {
  opacity: 0.45;
}

.conv-item-delete:hover {
  opacity: 1 !important;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.1);
}

/* ---- Pinned / Projects sidebar ---- */
.conv-section-hdr {
  padding: 14px 14px 4px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  user-select: none;
}

/* Pin star button */

/* Project folders */
.conv-project-folder {
  margin: 1px 0;
}
.conv-project-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.conv-project-hdr:hover {
  background: rgba(139, 92, 246, 0.06);
  color: var(--text-primary);
}
.conv-project-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.conv-project-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.conv-project-count {
  font-size: 0.68rem;
  color: var(--text-muted);
  min-width: 14px;
  text-align: right;
}
.conv-project-chevron {
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.conv-project-body {
  overflow: hidden;
  max-height: 2000px;
  transition: max-height 0.25s ease;
}
.conv-project-collapsed {
  max-height: 0 !important;
}
.conv-project-body .conv-item {
  padding-left: 24px;
}

/* Project options button (⋯) */
.conv-project-opts-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 0 4px;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  line-height: 1;
  flex-shrink: 0;
}
.conv-project-hdr:hover .conv-project-opts-btn {
  opacity: 1;
}
.conv-project-opts-btn:hover {
  background: var(--border-subtle);
  color: var(--text-primary);
  opacity: 1;
}

/* New project button */
.conv-new-project-btn {
  display: block;
  width: calc(100% - 20px);
  margin: 10px 10px 6px;
  padding: 6px 10px;
  background: none;
  border: 1px dashed var(--border-default);
  border-radius: 6px;
  font-size: 0.74rem;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.conv-new-project-btn:hover {
  border-color: var(--violet-500, #8b5cf6);
  color: var(--violet-500, #8b5cf6);
}

/* Context menu */
.conv-ctx-menu {
  position: fixed;
  z-index: 9999;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 4px;
  min-width: 175px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.conv-ctx-item {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-radius: 5px;
  cursor: pointer;
  gap: 6px;
  transition: background 0.1s, color 0.1s;
}
.conv-ctx-item:hover {
  background: rgba(139, 92, 246, 0.08);
  color: var(--text-primary);
}
.conv-ctx-danger {
  color: #ef4444;
  font-weight: 500;
}
.conv-ctx-danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #fff;
  background: #ef4444;
}
.conv-ctx-sep {
  height: 1px;
  background: var(--border-default);
  margin: 3px 4px;
}

/* ---- New Project Modal ---- */
.pm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 16px;
}
.pm-overlay.pm-open {
  display: flex;
}
.pm-card {
  background: #111114;
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-top: 2px solid var(--violet-500, #8b5cf6);
  border-radius: 14px;
  width: 100%;
  max-width: 320px;
  padding: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.05);
  animation: pmIn 0.2s cubic-bezier(0.34, 1.46, 0.64, 1) forwards;
}
.pm-overlay.pm-open .pm-card {
  animation: pmIn 0.22s cubic-bezier(0.34, 1.46, 0.64, 1) forwards;
}
@keyframes pmIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.pm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.pm-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
}
.pm-title svg {
  color: var(--violet-400, #a78bfa);
  flex-shrink: 0;
}
.pm-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}
.pm-close-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}
.pm-label {
  display: block;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.pm-input-wrap {
  margin-bottom: 16px;
}
.pm-input {
  width: 100%;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: 'Outfit', sans-serif;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.pm-input:focus {
  border-color: var(--violet-500, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.pm-input::placeholder { color: var(--text-muted); }
.pm-input.pm-input-shake {
  animation: pmShake 0.35s ease;
  border-color: #ef4444;
}
@keyframes pmShake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  60%      { transform: translateX(5px); }
  80%      { transform: translateX(-3px); }
}
.pm-swatch-section {
  margin-bottom: 20px;
}
.pm-swatch-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.pm-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--sw-color, #7c3aed);
  cursor: pointer;
  outline: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  position: relative;
}
.pm-swatch:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}
.pm-swatch.pm-swatch-active {
  border-color: rgba(255, 255, 255, 0.9);
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
}
.pm-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.pm-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  border: none;
}
.pm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pm-btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}
.pm-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }
.pm-btn-create {
  background: linear-gradient(135deg, var(--violet-600, #7c3aed), #a78bfa);
  color: #fff;
  box-shadow: 0 2px 8px rgba(139,92,246,0.25);
}
.pm-btn-create:hover:not(:disabled) { background: linear-gradient(135deg, var(--violet-500, #8b5cf6), #c4b5fd); }

/* Light mode modal */
html.light .pm-card {
  background: #fefefe;
  border-color: rgba(124, 58, 237, 0.2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
html.light .pm-input {
  background: #f5f5f7;
  border-color: rgba(0, 0, 0, 0.12);
  color: #111;
}
html.light .pm-close-btn:hover { background: rgba(0,0,0,0.06); }

/* Sidebar footer */
.sidebar-footer {
  padding: 16px;
  border-top: 1px solid rgba(139, 92, 246, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  margin: -4px -6px;
  transition: background 0.2s ease;
}

.sidebar-user:hover {
  background: rgba(139, 92, 246, 0.08);
}

.sidebar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--violet-700), var(--violet-500));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

html.light .sidebar-avatar {
  background: linear-gradient(135deg, var(--violet-600), var(--violet-500));
  color: #fff;
}

.sidebar-username {
  font-size: 0.8rem;
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sidebar-plan-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  opacity: 0.5;
  transition: all 0.2s;
}

.sidebar-plan-badge:hover {
  opacity: 0.8;
  color: var(--violet-400) !important;
}

.sidebar-plan-badge.paid {
  color: var(--violet-400) !important;
  opacity: 0.8;
}

html.light .sidebar-plan-badge.paid {
  color: var(--violet-600) !important;
}

.btn-icon {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  transition: all 0.15s;
  display: flex;
  align-items: center;
}

.btn-icon:hover {
  color: var(--text-primary);
  background: var(--bg-card);
}

/* ---- Main Chat Area ---- */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 0% 100%, rgba(139, 92, 246, 0.12) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 100% 0%, rgba(91, 33, 182, 0.09) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(139, 92, 246, 0.04) 0%, transparent 75%),
    var(--bg-deep);
  position: relative;
}

html.light .chat-main {
  background:
    radial-gradient(ellipse 70% 55% at 0% 100%, rgba(124, 58, 237, 0.06) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 100% 0%, rgba(91, 33, 182, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(124, 58, 237, 0.025) 0%, transparent 75%),
    var(--bg-deep);
}

/* Top bar */
.chat-topbar {
  height: 54px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  flex-shrink: 0;
  gap: 12px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.chat-topbar-title {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.chat-topbar-model {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--violet-400);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  background: var(--violet-glow);
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
}

html.light .chat-topbar-model {
  color: var(--violet-700);
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.15);
}

/* Plan tier badge variants */
.chat-topbar-model.plan-pro {
  color: #a78bfa;
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.25);
}

html.light .chat-topbar-model.plan-pro {
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.2);
}

.chat-topbar-model.plan-business {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.25);
}

html.light .chat-topbar-model.plan-business {
  color: #b45309;
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.2);
}

/* Credit badge */
.credit-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  padding: 3px 10px;
  background: var(--bg-card);
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  cursor: default;
}

.credit-badge.low {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.2);
  background: rgba(245, 158, 11, 0.08);
}

.credit-badge.zero {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.08);
}

/* Upgrade banner */
.upgrade-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(239, 68, 68, 0.06));
  border: 1px solid rgba(139, 92, 246, 0.2);
  color: var(--text-secondary);
  font-size: 0.84rem;
  margin: 0 16px 8px;
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  flex-wrap: wrap;
}

html.light .upgrade-banner {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(239, 68, 68, 0.04));
  border-color: rgba(139, 92, 246, 0.15);
}

.upgrade-banner-icon {
  display: flex;
  align-items: center;
  color: var(--violet-400);
  flex-shrink: 0;
}

.upgrade-banner-text {
  color: var(--text-secondary);
  font-weight: 500;
}

html.light .upgrade-banner-text {
  color: #64748b;
}

.upgrade-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.upgrade-banner-link {
  color: var(--violet-400) !important;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}
.upgrade-banner-link:hover {
  color: var(--violet-300) !important;
  text-decoration: underline;
}

html.light .upgrade-banner-link {
  color: var(--violet-600) !important;
}
html.light .upgrade-banner-link:hover {
  color: var(--violet-500) !important;
}

.upgrade-banner-btn {
  background: var(--violet-500);
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.upgrade-banner-btn:hover {
  background: var(--violet-400);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.upgrade-banner-sep {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

@media (max-width: 480px) {
  .upgrade-banner {
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    text-align: center;
  }
  .upgrade-banner-icon { display: none; }
  .upgrade-banner-actions { gap: 8px; }
}

/* ---- Credit Top-Up Modal ---- */
.topup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: topup-fade-in 0.3s ease;
}
.topup-overlay.visible {
  display: flex;
}
@keyframes topup-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.topup-modal {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 40px 32px 28px;
  max-width: 520px;
  width: 100%;
  position: relative;
  animation: topup-slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
html.light .topup-modal {
  background: rgba(255,255,255,0.95);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 25px 50px rgba(0,0,0,0.12);
}
@keyframes topup-slide-up {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.topup-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.topup-close:hover {
  opacity: 1;
}

.topup-header {
  text-align: center;
  margin-bottom: 28px;
}
.topup-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--violet-500), #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: #fff;
}
.topup-header h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin: 0 0 6px;
  color: var(--text-primary);
}
.topup-header p {
  color: var(--text-secondary);
  font-size: 0.88rem;
  margin: 0;
}

.topup-packs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.topup-pack {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.topup-pack:hover {
  border-color: var(--violet-400);
  background: rgba(139, 92, 246, 0.06);
  transform: translateY(-1px);
}
html.light .topup-pack {
  background: rgba(0,0,0,0.015);
}
html.light .topup-pack:hover {
  background: rgba(139, 92, 246, 0.06);
}
.topup-pack.featured {
  border-color: var(--violet-400);
  background: rgba(139, 92, 246, 0.06);
}
.topup-pack.featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(168, 85, 247, 0.04));
  pointer-events: none;
}

.topup-pack-credits {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--violet-400);
  min-width: 60px;
  text-align: center;
  line-height: 1;
}
.topup-pack-credits small {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-secondary);
  display: block;
  margin-top: 3px;
}

.topup-pack-info {
  flex: 1;
}
.topup-pack-label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-primary);
}
.topup-pack-per {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.topup-pack-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.topup-pack-badge {
  position: absolute;
  top: -1px;
  right: 16px;
  background: linear-gradient(135deg, var(--violet-500), #a855f7);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 10px 4px;
  border-radius: 0 0 8px 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.topup-pack.loading {
  opacity: 0.6;
  pointer-events: none;
}

.topup-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.topup-footer a {
  color: var(--violet-400);
  text-decoration: underline;
}

@media (max-width: 480px) {
  .topup-modal {
    padding: 28px 20px 20px;
  }
  .topup-pack {
    padding: 14px 16px;
  }
}

/* Topbar actions */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.topbar-nav-link {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid transparent;
  transition: all 0.2s var(--ease-out);
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.topbar-nav-link:hover {
  color: var(--violet-400);
  background: var(--violet-glow);
  border-color: var(--border-subtle);
}

html.light .topbar-nav-link {
  color: var(--violet-700);
}

html.light .topbar-nav-link:hover {
  color: var(--violet-600);
  background: rgba(124, 58, 237, 0.06);
}

.topbar-nav-link svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.topbar-divider {
  width: 1px;
  height: 20px;
  background: var(--border-default);
  margin: 0 4px;
}

/* Sidebar toggle */
.btn-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  font-size: 1.1rem;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}

.btn-sidebar-toggle:hover {
  color: var(--text-primary);
  background: rgba(139, 92, 246, 0.06);
}

html.light .btn-sidebar-toggle:hover {
  background: rgba(124, 58, 237, 0.04);
}
.btn-sidebar-toggle--mobile-only {
  display: none;
}
@media (max-width: 768px) {
  .btn-sidebar-toggle--mobile-only { display: flex; }
}

/* Messages area */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 160px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  scroll-padding-bottom: 160px;
}

/* Removed noise texture — gradients on .chat-main handle the depth */

/* Welcome screen */
.chat-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}

.chat-welcome-icon {
  margin-bottom: 20px;
  opacity: 1;
  color: var(--violet-500);
  filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.4));
}

html.light .chat-welcome-icon {
  color: var(--violet-600);
  filter: drop-shadow(0 0 16px rgba(124, 58, 237, 0.25));
}

.chat-welcome h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.chat-welcome p {
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 500px;
  line-height: 1.6;
  text-wrap: balance;
}

.highlight-autofix {
  position: relative;
  font-weight: 600;
  font-style: italic;
  background: linear-gradient(
    90deg,
    var(--violet-400) 0%,
    #e0b3ff 30%,
    var(--violet-300) 60%,
    var(--violet-400) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: autofixShimmer 3s ease-in-out infinite;
}

.highlight-autofix::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--violet-500), transparent);
  border-radius: 2px;
  opacity: 0.5;
}

@keyframes autofixShimmer {
  0%   { background-position: 100% 50%; }
  50%  { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

html.light .highlight-autofix {
  background: linear-gradient(
    90deg,
    var(--violet-700) 0%,
    #9333ea 30%,
    var(--violet-600) 60%,
    var(--violet-700) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: autofixShimmer 3s ease-in-out infinite;
}

html.light .highlight-autofix::after {
  background: linear-gradient(90deg, transparent, var(--violet-600), transparent);
}

/* Welcome screen — animated gradient orbs */
.chat-welcome {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
}

.chat-welcome::before,
.chat-welcome::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  pointer-events: none;
  z-index: -1;
}

.chat-welcome::before {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.42) 0%, rgba(139, 92, 246, 0.14) 45%, transparent 72%);
  filter: blur(80px);
  bottom: -15%;
  left: -5%;
  animation: welcomeOrb1 18s ease-in-out infinite;
}

.chat-welcome::after {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(91, 33, 182, 0.35) 0%, rgba(124, 58, 237, 0.10) 45%, transparent 72%);
  filter: blur(80px);
  top: -10%;
  right: -5%;
  animation: welcomeOrb2 22s ease-in-out infinite;
}

@keyframes welcomeOrb1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(14vw, -10vh) scale(1.15); }
  50% { transform: translate(6vw, 12vh) scale(0.9); }
  75% { transform: translate(-10vw, 4vh) scale(1.1); }
}

@keyframes welcomeOrb2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-12vw, 8vh) scale(1.12); }
  50% { transform: translate(-5vw, -14vh) scale(1.18); }
  75% { transform: translate(10vw, -4vh) scale(0.92); }
}

html.light .chat-welcome::before {
  background: radial-gradient(circle, rgba(124, 58, 237, 0.22) 0%, rgba(139, 92, 246, 0.06) 45%, transparent 72%);
}

html.light .chat-welcome::after {
  background: radial-gradient(circle, rgba(91, 33, 182, 0.16) 0%, rgba(124, 58, 237, 0.04) 45%, transparent 72%);
}

.chat-welcome-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  justify-content: center;
  max-width: 680px;
}

/* ---- Agent Tiles — Editorial Compact ---- */
.agent-tiles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 28px;
  max-width: 660px;
  width: 100%;
}

/* When odd number of tiles, last tile spans full width */
.agent-tiles-grid > .agent-tile:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: 300px;
  justify-self: center;
}

.agent-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 11px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), transform 0.28s var(--ease-out);
  position: relative;
  text-align: left;
  animation: agentTileIn 0.5s var(--ease-out) both, tileBreath 4s ease-in-out 0.8s infinite;
  overflow: hidden;
}

/* No line — glow lives on the icon avatar */
.agent-tile::before {
  display: none;
}

/* Hover glow backdrop */
.agent-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: radial-gradient(circle at 28px 50%, color-mix(in srgb, var(--agent-color) 8%, transparent) 0%, transparent 55%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}

/* Stagger entrance + breathing per tile */
.agent-tile:nth-child(1) { animation-delay: 0s, 0.8s; }
.agent-tile:nth-child(2) { animation-delay: 0.08s, 1.5s; }
.agent-tile:nth-child(3) { animation-delay: 0.16s, 2.2s; }
.agent-tile:nth-child(4) { animation-delay: 0.24s, 2.9s; }
.agent-tile:nth-child(5) { animation-delay: 0.32s, 3.6s; }
.agent-tile:nth-child(6) { animation-delay: 0.40s, 4.3s; }

.agent-tile:hover {
  border-color: color-mix(in srgb, var(--agent-color) 28%, transparent);
  transform: translateY(-2px);
  animation-play-state: running, paused;
  box-shadow:
    0 6px 24px color-mix(in srgb, var(--agent-color) 10%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--agent-color) 5%, transparent);
}

.agent-tile:hover::before {
  display: none;
}

.agent-tile:hover::after {
  opacity: 1;
}

.agent-tile:active {
  transform: translateY(0);
  transition-duration: 0.08s;
}

@keyframes agentTileIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tileBreath {
  0%, 100% { box-shadow: 0 1px 3px color-mix(in srgb, var(--agent-color) 4%, transparent); }
  50% { box-shadow: 0 2px 10px color-mix(in srgb, var(--agent-color) 10%, transparent), 0 0 4px color-mix(in srgb, var(--agent-color) 6%, transparent); }
}

/* Icon with colored glow background */
.agent-tile-avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--agent-color);
  background: color-mix(in srgb, var(--agent-color) 10%, transparent);
  border-radius: 8px;
  transition: all 0.28s var(--ease-out);
  position: relative;
  z-index: 1;
}

.agent-tile-avatar svg {
  width: 15px;
  height: 15px;
}

.agent-tile:hover .agent-tile-avatar {
  background: color-mix(in srgb, var(--agent-color) 18%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--agent-color) 20%, transparent);
}

/* Text block */
.agent-tile-text {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.agent-tile-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-tile-desc {
  font-family: var(--font-body);
  font-size: 0.80rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.3;
  margin-top: 2px;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badges — refined micro-pills */
.agent-tile-badge {
  flex-shrink: 0;
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--violet-600), var(--violet-500));
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.3;
  white-space: nowrap;
  align-self: center;
}

.agent-tile-badge-included {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  font-weight: 600;
  font-size: 0.42rem;
}

html.light .agent-tile-badge-included {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}

.agent-tile-badge-connect {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: none;
  font-weight: 500;
  font-size: 0.48rem;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.agent-tile:hover .agent-tile-badge-connect {
  opacity: 0.8;
}

/* Active state (chip pre-fill selected) */
.agent-tile.chip-active {
  border-color: color-mix(in srgb, var(--agent-color) 40%, transparent);
  background: color-mix(in srgb, var(--agent-color) 6%, var(--bg-card));
  box-shadow: 0 0 20px color-mix(in srgb, var(--agent-color) 12%, transparent);
  transform: scale(0.98);
}

.agent-tile.chip-active::before {
  opacity: 1;
  height: 2px;
}

.agent-tile.chip-active .agent-tile-avatar {
  opacity: 1;
}

/* ---- Light theme ---- */
html.light .agent-tile {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

html.light .agent-tile:hover {
  background: #fff;
  border-color: color-mix(in srgb, var(--agent-color) 22%, transparent);
  animation-play-state: running, paused;
  box-shadow:
    0 6px 28px color-mix(in srgb, var(--agent-color) 8%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.03);
}

html.light .agent-tile-avatar {
  background: color-mix(in srgb, var(--agent-color) 8%, transparent);
}

html.light .agent-tile:hover .agent-tile-avatar {
  background: color-mix(in srgb, var(--agent-color) 14%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--agent-color) 12%, transparent);
}

html.light .agent-tile-name {
  color: #1a1a1a;
}

html.light .agent-tile-desc {
  color: #777;
}

html.light .agent-tile-badge {
  background: linear-gradient(135deg, var(--violet-700), var(--violet-600));
}

html.light .agent-tile-badge-connect {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-muted);
}

html.light .agent-tile.chip-active {
  background: color-mix(in srgb, var(--agent-color) 3%, #fff);
  border-color: color-mix(in srgb, var(--agent-color) 30%, transparent);
}

/* ---- Responsive ---- */
/* Tablet — agent tiles slightly narrower */
@media (max-width: 768px) {
  .agent-tiles-grid {
    max-width: 100%;
    gap: 8px;
  }

  .agent-tile {
    padding: 12px 14px;
    gap: 10px;
  }

  .agent-tile-avatar {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  .agent-tile-avatar svg {
    width: 14px;
    height: 14px;
  }

  .agent-tile-name {
    font-size: 0.92rem;
  }

  .agent-tile-desc {
    font-size: 0.76rem;
  }
}

/* Phone — compact tiles */
@media (max-width: 480px) {
  .agent-tiles-grid {
    gap: 6px;
    margin-top: 22px;
    max-width: 100%;
  }

  .agent-tile {
    padding: 11px 12px;
    gap: 10px;
    border-radius: 10px;
  }

  .agent-tile-avatar {
    width: 26px;
    height: 26px;
    border-radius: 7px;
  }

  .agent-tile-avatar svg {
    width: 13px;
    height: 13px;
  }

  .agent-tile-name {
    font-size: 0.86rem;
  }

  .agent-tile-desc {
    font-size: 0.72rem;
  }

  .agent-tile-badge {
    font-size: 0.44rem;
    padding: 1px 5px;
  }

  .agent-tile-badge-connect {
    font-size: 0.44rem;
    padding: 1px 5px;
  }
}

.suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}

.chip-icon {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.7;
}

.suggestion-chip:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-default);
  color: var(--text-primary);
}

html.light .suggestion-chip {
  color: var(--violet-700);
  background: rgba(124, 58, 237, 0.05);
  border-color: rgba(124, 58, 237, 0.15);
}

html.light .suggestion-chip:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.3);
  color: var(--violet-800);
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.08);
}

.suggestion-chip.gated {
  opacity: 0.65;
  position: relative;
}

.suggestion-chip.gated:hover {
  opacity: 0.85;
}

.chip-pro-badge {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--violet-500), var(--violet-600));
  color: #fff;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: 1px;
}

html.light .chip-pro-badge {
  background: linear-gradient(135deg, var(--violet-600), var(--violet-700));
}

/* ---- Chip Active State ---- */
.suggestion-chip.chip-active {
  background: var(--violet-glow-strong);
  border-color: var(--violet-500);
  color: var(--violet-300);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.2), inset 0 0 0 1px rgba(139, 92, 246, 0.1);
  transform: scale(0.97);
}

html.light .suggestion-chip.chip-active {
  background: rgba(124, 58, 237, 0.12);
  border-color: var(--violet-600);
  color: var(--violet-700);
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.12), inset 0 0 0 1px rgba(124, 58, 237, 0.08);
}

/* ---- Input Shimmer (on chip pre-fill) ---- */
@keyframes inputShimmer {
  0%   { box-shadow: 0 0 0 3px rgba(139, 92, 246, 0), border-color: var(--border-subtle); }
  30%  { box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.25); border-color: var(--violet-500); }
  100% { box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.08); }
}

.chat-input-wrapper.input-shimmer .chat-input {
  animation: inputShimmer 0.8s var(--ease-out) both;
  border-color: var(--border-focus);
}

/* ---- Input Shake (placeholder not replaced) ---- */
@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-6px); }
  30%      { transform: translateX(5px); }
  45%      { transform: translateX(-4px); }
  60%      { transform: translateX(3px); }
  75%      { transform: translateX(-2px); }
}

.chat-input-wrapper.input-shake {
  animation: inputShake 0.45s var(--ease-out);
}

.chat-input-wrapper.input-shake .chat-input {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* ---- Floating Hint Pill (above input on chip pre-fill) ---- */
.chip-hint-pill {
  max-width: 800px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--violet-300);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.06));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 20px;
  padding: 6px 16px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.chip-hint-pill.visible {
  opacity: 1;
  transform: translateY(0);
}

.chip-hint-pill.exiting {
  opacity: 0;
  transform: translateY(-4px);
}

.chip-hint-pill-arrow {
  font-size: 0.85rem;
  animation: hintArrowBounce 1.2s var(--ease-out) infinite;
  line-height: 1;
}

@keyframes hintArrowBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

html.light .chip-hint-pill {
  color: var(--violet-700);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(124, 58, 237, 0.03));
  border-color: rgba(124, 58, 237, 0.18);
}

/* ---- Connect Chip State ---- */
.suggestion-chip.chip-connect {
  border-style: dashed;
  opacity: 0.85;
}

.suggestion-chip.chip-connect::after {
  content: "+";
  font-size: 0.65rem;
  font-weight: 700;
  margin-left: 4px;
  opacity: 0.5;
}

.suggestion-chip.chip-connect:hover {
  opacity: 1;
  border-style: solid;
}

/* ---- Connect Card (inline integration prompt) ---- */
.connect-card {
  --connect-color: #4285f4;
  max-width: 580px;
  margin: 16px auto;
  display: flex;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--connect-color) 20%, transparent);
  background:
    radial-gradient(ellipse 100% 100% at 0% 50%, color-mix(in srgb, var(--connect-color) 6%, transparent) 0%, transparent 70%),
    var(--bg-card);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
  animation: connectCardIn 0.4s var(--ease-out) both;
}

@keyframes connectCardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.connect-card-accent {
  width: 4px;
  flex-shrink: 0;
  background: var(--connect-color);
}

.connect-card-body {
  padding: 22px 26px;
  flex: 1;
}

.connect-card-title {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.connect-card-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

.connect-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 8px 20px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: var(--connect-color);
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.connect-card-btn:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--connect-color) 35%, transparent);
}

.connect-card-btn-arrow {
  transition: transform 0.2s var(--ease-out);
}

.connect-card-btn:hover .connect-card-btn-arrow {
  transform: translateX(3px);
}

.connect-card-back {
  display: inline-block;
  margin-left: 14px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.connect-card-back:hover {
  opacity: 1;
}

/* Light mode */
html.light .connect-card {
  background:
    radial-gradient(ellipse 100% 100% at 0% 50%, color-mix(in srgb, var(--connect-color) 5%, transparent) 0%, transparent 70%),
    #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Mobile */
@media (max-width: 480px) {
  .connect-card {
    margin: 12px 8px;
  }

  .connect-card-body {
    padding: 16px 18px;
  }
}

/* Message bubbles */
.message {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 4px 0;
  animation: msgFadeIn 0.25s var(--ease-out) both;
}

@keyframes msgFadeIn {
  from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.message-user {
  display: flex;
  justify-content: flex-end;
}

.message-user .message-content {
  background: var(--violet-950);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-md);
  padding: 11px 16px;
  max-width: 75%;
  font-size: 0.95rem;
  line-height: 1.6;
}

html.light .message-user .message-content {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.1);
}

.message-assistant .message-content {
  padding: 16px 4px 16px 4px;
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

/* Smooth reveal animation for streaming text */
.message-assistant .message-content.streaming-cursor {
  animation: contentReveal 0.3s var(--ease-out) both;
}

@keyframes contentReveal {
  from { opacity: 0.5; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Markdown in assistant messages */
.message-assistant .message-content h1,
.message-assistant .message-content h2,
.message-assistant .message-content h3 {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 6px;
  margin: 20px 0 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.message-assistant .message-content h1 { font-size: 1.35rem; }
.message-assistant .message-content h2 { font-size: 1.2rem; }
.message-assistant .message-content h3 {
  font-size: 1.05rem;
  border-bottom: none;
  color: var(--violet-300);
}

html.light .message-assistant .message-content h3 {
  color: var(--violet-700);
}

.message-assistant .message-content p {
  margin: 10px 0;
}

.message-assistant .message-content ul,
.message-assistant .message-content ol {
  margin: 10px 0;
  padding-left: 22px;
}

.message-assistant .message-content li {
  margin: 6px 0;
  line-height: 1.7;
}

.message-assistant .message-content li::marker {
  color: var(--violet-500);
}

.message-assistant .message-content strong {
  color: var(--violet-300);
  font-weight: 600;
}

html.light .message-assistant .message-content strong {
  color: var(--violet-700);
}

.message-assistant .message-content em {
  color: var(--text-muted);
  font-style: italic;
}

.message-assistant .message-content code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 2px 7px;
  background: var(--bg-card);
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  color: var(--violet-300);
}

html.light .message-assistant .message-content code {
  color: var(--violet-700);
}

.message-assistant .message-content pre {
  margin: 14px 0;
  padding: 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow-x: auto;
  position: relative;
}

.message-assistant .message-content pre::before {
  content: "CODE";
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  opacity: 0.4;
}

.message-assistant .message-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.88rem;
  color: var(--text-primary);
}

/* Tables */
.message-assistant .message-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 0.88rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.message-assistant .message-content th {
  text-align: left;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet-400);
  background: var(--bg-surface);
  border-bottom: 2px solid var(--violet-600);
}

html.light .message-assistant .message-content th {
  color: var(--violet-700);
  border-bottom-color: var(--violet-500);
}

.message-assistant .message-content td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.message-assistant .message-content tr:hover td {
  background: var(--bg-card);
  color: var(--text-primary);
}

/* Links in messages */
.message-assistant .message-content a {
  color: var(--violet-400);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(167, 139, 250, 0.3);
  transition: all 0.15s;
}

.message-assistant .message-content a:hover {
  color: var(--violet-300);
  text-decoration-color: var(--violet-400);
}

html.light .message-assistant .message-content a {
  color: var(--violet-600);
  text-decoration-color: rgba(124, 58, 237, 0.3);
}

html.light .message-assistant .message-content a:hover {
  color: var(--violet-700);
}

/* Message action toolbar (copy) */
.msg-actions {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.message-assistant:hover .msg-actions {
  opacity: 1;
}

/* On mobile, always show actions (no hover) */
@media (hover: none) {
  .msg-actions { opacity: 1; }
  .msg-action-btn { padding: 6px 12px; }
}

.msg-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.msg-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.12);
}

html.light .msg-action-btn {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

html.light .msg-action-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

.msg-action-icon { display: flex; align-items: center; }
.msg-action-check { display: none; align-items: center; color: #22c55e; }
.msg-action-label { pointer-events: none; }

.msg-action-btn.copied .msg-action-icon { display: none; }
.msg-action-btn.copied .msg-action-check { display: flex; }
.msg-action-btn.copied {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.2);
  background: rgba(34, 197, 94, 0.06);
}

/* Topbar icon buttons (clear / export) */
.topbar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.topbar-icon-btn:hover {
  color: var(--text-secondary);
  background: var(--violet-glow);
  border-color: var(--border-subtle);
}

html.light .topbar-icon-btn:hover {
  background: rgba(124, 58, 237, 0.06);
  color: var(--violet-700);
}

.topbar-icon-btn.action-done {
  color: #22c55e;
}

/* Scroll padding so scrollIntoView has breathing room */
.chat-messages {
  scroll-padding-top: 16px;
}

/* Thinking indicator — animated cycling text */
.thinking-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 4px;
  animation: msgFadeIn 0.4s var(--ease-out) both;
}

.thinking-bars {
  display: flex;
  align-items: center;
  gap: 2.5px;
  flex-shrink: 0;
  height: 18px;
}

.thinking-bars span {
  width: 3px;
  border-radius: 2px;
  background: var(--violet-500);
  box-shadow: 0 0 6px rgba(139, 92, 246, 0.3);
  animation: thinkingBar 1.2s ease-in-out infinite;
}

.thinking-bars span:nth-child(1) { height: 8px; animation-delay: 0s; }
.thinking-bars span:nth-child(2) { height: 14px; animation-delay: 0.15s; }
.thinking-bars span:nth-child(3) { height: 8px; animation-delay: 0.3s; }

@keyframes thinkingBar {
  0%, 100% { transform: scaleY(0.5); opacity: 0.4; }
  50%      { transform: scaleY(1.4); opacity: 1; }
}

.thinking-label {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  background: linear-gradient(90deg, var(--violet-400), var(--violet-300), var(--violet-500), var(--violet-400));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: thinkingShimmer 3s ease-in-out infinite;
  transition: opacity 0.2s, transform 0.2s;
}

.thinking-label-exit {
  opacity: 0;
  transform: translateY(-6px);
}

.thinking-label-enter {
  animation: thinkingWordIn 0.3s var(--ease-out) both;
}

@keyframes thinkingShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@keyframes thinkingWordIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.thinking-ellipsis::after {
  content: "...";
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  background: linear-gradient(90deg, var(--violet-400), var(--violet-300));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ellipsisFlicker 1.5s step-end infinite;
}

@keyframes ellipsisFlicker {
  0%   { content: "."; }
  33%  { content: ".."; }
  66%  { content: "..."; }
}

html.light .thinking-label {
  background: linear-gradient(90deg, var(--violet-600), var(--violet-500), var(--violet-700), var(--violet-600));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html.light .thinking-bars span {
  background: var(--violet-600);
  box-shadow: 0 0 6px rgba(124, 58, 237, 0.2);
}

html.light .thinking-ellipsis::after {
  background: linear-gradient(90deg, var(--violet-600), var(--violet-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Tool / Agent activity log — lives inside .message-assistant wrapper */
.tool-activity {
  max-width: 480px;
  margin: 0 auto 10px;
  padding: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  opacity: 1;
  position: relative;
  z-index: 2;
}

/* Header bar with elapsed timer */
.ta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--violet-600) 6%, transparent), transparent);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

.ta-header-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ta-header-label svg {
  color: var(--violet-500);
}

.ta-header-timer {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.8;
  min-width: 28px;
  text-align: right;
}

html.light .ta-header {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.04), transparent);
}

/* Global progress bar at bottom of header — fills as steps complete */
.ta-header-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-subtle);
  overflow: hidden;
}
.ta-header-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--violet-600), #a78bfa);
  border-radius: 1px;
  transition: width 0.5s ease-out, background 0.4s;
  position: relative;
}
/* Shimmer sweep on fill */
.ta-header-progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: taProgressShimmer 1.8s ease-in-out infinite;
}
@keyframes taProgressShimmer {
  0% { left: -60%; }
  100% { left: 100%; }
}

.ta-steps {
  padding: 6px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

@keyframes taSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ta-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-secondary);
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 50%, transparent);
  animation: taStepIn 0.3s var(--ease-out) both;
  position: relative;
}

.ta-step:last-child {
  border-bottom: none;
}

@keyframes taStepIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Progress bar under active step */
.ta-step-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ta-color, #a78bfa), color-mix(in srgb, var(--ta-color, #a78bfa) 40%, transparent));
  border-radius: 1px;
  width: 0%;
  transition: width 0.6s ease-out;
}

.ta-step.done .ta-step-progress {
  width: 100% !important;
  background: #22c55e;
  opacity: 0.3;
  transition: width 0.3s ease-out, opacity 0.5s 0.3s;
}

.ta-step-num {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ta-color, #a78bfa);
  color: #fff;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}

.ta-step.active .ta-step-num {
  box-shadow: 0 0 10px color-mix(in srgb, var(--ta-color, #a78bfa) 30%, transparent);
  animation: taNumPulse 2s ease-in-out infinite;
}

@keyframes taNumPulse {
  0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--ta-color, #a78bfa) 20%, transparent); }
  50% { box-shadow: 0 0 14px color-mix(in srgb, var(--ta-color, #a78bfa) 40%, transparent); }
}

.ta-step.done .ta-step-num {
  background: #22c55e;
  transform: scale(0.9);
}

.ta-step-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--ta-color, #a78bfa);
  transition: opacity 0.3s;
}

.ta-step.done .ta-step-icon {
  opacity: 0.45;
}

.ta-step-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ta-step-text strong {
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s;
}

.ta-step-summary {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.ta-step-status {
  display: block;
  font-size: 0.72rem;
  color: var(--ta-color, var(--text-muted));
  opacity: 0.85;
  transition: opacity 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ta-step.done .ta-step-status {
  display: none;
}

/* Spinner */
.ta-step-spinner {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--ta-color, #a78bfa);
  border-radius: 50%;
  animation: taSpin 0.7s linear infinite;
}

@keyframes taSpin {
  to { transform: rotate(360deg); }
}

/* Checkmark (replaces spinner) */
.ta-step-check {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  animation: taCheckIn 0.35s var(--ease-out) both;
}

@keyframes taCheckIn {
  from { opacity: 0; transform: scale(0.3) rotate(-20deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

.ta-step.done .ta-step-text strong {
  color: var(--text-secondary);
}

/* Composing answer step — no number, pen icon, softer style */
.ta-composing {
  border-bottom: none;
  --ta-color: var(--violet-400);
}
.ta-composing .ta-step-icon {
  color: var(--violet-400);
}
.ta-composing .ta-step-text strong {
  color: var(--violet-400);
  font-weight: 500;
}
.ta-composing .ta-step-spinner {
  border-top-color: var(--violet-400);
}

/* Stop button mode */
.btn-send.btn-stop {
  background: #ef4444;
  opacity: 1 !important;
  cursor: pointer !important;
}

.btn-send.btn-stop:hover {
  background: #dc2626;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.25);
}

.btn-send.btn-stop svg {
  display: none;
}

.btn-send.btn-stop::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 2px;
}

/* ---- Queued steering message indicator ---- */
.chat-queued-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin: 0 16px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--violet-600) 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--violet-600) 20%, transparent);
  font-size: 0.78rem;
  color: var(--text-secondary);
  animation: queueSlideIn 0.22s var(--ease-out) both;
}
@keyframes queueSlideIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.queued-icon { font-size: 0.9rem; color: var(--violet-400); flex-shrink: 0; }
.queued-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queued-label em { font-style: normal; color: var(--text-primary); font-weight: 500; }
.queued-cancel {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 1rem; padding: 0 2px; line-height: 1;
  flex-shrink: 0; opacity: 0.6;
  transition: opacity 0.15s, color 0.15s;
}
.queued-cancel:hover { opacity: 1; color: #ef4444; }

/* ---- Feature 2: Tool activity breathing animation (sync with agent tiles) ---- */
@keyframes taBreath {
  0%, 100% { border-color: var(--border-subtle); }
  50% { border-color: color-mix(in srgb, var(--violet-600) 30%, var(--border-subtle)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--violet-600) 10%, transparent); }
}
.tool-activity {
  animation: taBreath 3s ease-in-out 1s infinite;
}

@keyframes taActiveGlow {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; filter: drop-shadow(0 0 3px var(--ta-color, #a78bfa)); }
}
.ta-step.active .ta-step-icon {
  animation: taActiveGlow 2s ease-in-out infinite;
}

/* ---- Feature 3: Long-wait composing step enhancement ---- */
@keyframes taComposingPulse {
  0%, 100% { background: transparent; }
  50% { background: color-mix(in srgb, var(--violet-600) 4%, transparent); }
}
.ta-composing {
  animation: taStepIn 0.3s var(--ease-out) both, taComposingPulse 2.5s ease-in-out infinite;
}
.ta-composing .ta-step-spinner {
  animation: taSpin 1.1s linear infinite;
}

/* Streaming cursor — smooth Cursor-style blink */
.streaming-cursor::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--violet-400);
  margin-left: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: cursorFade 1s ease-in-out infinite;
}

@keyframes cursorFade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}

/* Upgrade CTA card — editorial invitation style */
.upgrade-card {
  max-width: 520px;
  margin: 16px auto 32px;
  padding: 22px 24px 20px;
  border-radius: 14px;
  border: 1px solid rgba(139, 92, 246, 0.10);
  background:
    radial-gradient(ellipse 100% 70% at 15% 0%, rgba(139, 92, 246, 0.06) 0%, transparent 55%),
    linear-gradient(180deg, rgba(31, 41, 55, 0.85) 0%, rgba(17, 24, 39, 0.92) 100%);
  animation: upgradeCardReveal 0.5s var(--ease-out) 0.15s both;
  position: relative;
}

.upgrade-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(167, 139, 250, 0.10) 20%,
    rgba(139, 92, 246, 0.35) 50%,
    rgba(167, 139, 250, 0.10) 80%,
    transparent 100%
  );
}

.upgrade-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
  animation: upgradeShimmer 3s ease-in-out 1s infinite;
  opacity: 0;
}

@keyframes upgradeShimmer {
  0%, 100% { opacity: 0; transform: translateX(-100%); }
  50% { opacity: 1; }
  40%, 60% { transform: translateX(100%); }
}

@keyframes upgradeCardReveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.upgrade-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.upgrade-card-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.12);
  color: var(--violet-400);
}

.upgrade-card-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.upgrade-card-body {
  margin-bottom: 16px;
}

.upgrade-card-text {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.upgrade-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.upgrade-card-price {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.upgrade-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 20px;
  border-radius: 8px;
  background: transparent;
  color: var(--violet-400);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.76rem;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(139, 92, 246, 0.22);
  transition: all 0.25s var(--ease-out);
  letter-spacing: 0.01em;
}

.upgrade-card-btn:hover {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.4);
  color: var(--violet-300);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.08);
  transform: translateY(-1px);
}

.upgrade-card-btn-arrow {
  font-size: 0.78rem;
  transition: transform 0.25s var(--ease-out);
}

.upgrade-card-btn:hover .upgrade-card-btn-arrow {
  transform: translateX(3px);
}

/* Light theme */
html.light .upgrade-card {
  border-color: rgba(124, 58, 237, 0.08);
  background:
    radial-gradient(ellipse 100% 70% at 15% 0%, rgba(124, 58, 237, 0.03) 0%, transparent 55%),
    linear-gradient(180deg, #fdfcff 0%, #f9f8fc 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

html.light .upgrade-card::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(124, 58, 237, 0.06) 20%,
    rgba(124, 58, 237, 0.22) 50%,
    rgba(124, 58, 237, 0.06) 80%,
    transparent 100%
  );
}

html.light .upgrade-card::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(124, 58, 237, 0.3) 50%,
    transparent 100%
  );
}

html.light .upgrade-card-icon {
  background: rgba(124, 58, 237, 0.05);
  border-color: rgba(124, 58, 237, 0.10);
  color: var(--violet-600);
}

html.light .upgrade-card-title {
  color: var(--violet-800, #3b1d8e);
}

html.light .upgrade-card-price {
  color: var(--text-muted);
}

html.light .upgrade-card-btn {
  color: var(--violet-600);
  border-color: rgba(124, 58, 237, 0.18);
}

html.light .upgrade-card-btn:hover {
  background: rgba(124, 58, 237, 0.04);
  border-color: rgba(124, 58, 237, 0.3);
  color: var(--violet-700);
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.06);
}

/* Mobile responsive */
@media (max-width: 600px) {
  .upgrade-card {
    padding: 18px 16px 16px;
    margin: 12px 8px 10px;
  }

  .upgrade-card-footer {
    flex-direction: column;
    gap: 10px;
  }

  .upgrade-card-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 20px;
  }

  .upgrade-card-price {
    text-align: center;
  }
}

/* Follow-up suggestion chips after assistant messages */
.follow-up-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 900px;
  margin: 4px auto 8px;
  padding: 0 4px;
  animation: suggestionsReveal 0.4s var(--ease-out) 0.15s both;
}

@keyframes suggestionsReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.follow-up-chip {
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  line-height: 1.45;
}

html.light .follow-up-chip {
  color: var(--violet-700);
  background: rgba(124, 58, 237, 0.04);
  border-color: rgba(124, 58, 237, 0.12);
}

.follow-up-chip:hover {
  background: var(--violet-950);
  border-color: var(--violet-600);
  color: var(--violet-300);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.1);
}

html.light .follow-up-chip:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.3);
  color: var(--violet-800);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.08);
}

/* Auto-fix highlighted chip — gradient pill */
.follow-up-chip.chip-autofix {
  color: #e0d4fc;
  background: linear-gradient(135deg, #2e1065 0%, #1e1b4b 50%, #312e81 100%);
  border-color: rgba(139, 92, 246, 0.22);
  text-align: left;
  box-shadow: 0 1px 6px rgba(139, 92, 246, 0.08);
  padding: 10px 18px;
  transition: all 0.25s var(--ease-out);
}

.follow-up-chip.chip-autofix .chip-autofix-badge {
  margin-right: 4px;
}

html.light .follow-up-chip.chip-autofix {
  color: var(--violet-700);
  background: linear-gradient(135deg, #f0ecfe 0%, #f5f2ff 50%, #ece7fd 100%);
  border-color: rgba(124, 58, 237, 0.14);
  box-shadow: 0 1px 4px rgba(124, 58, 237, 0.05);
}

.follow-up-chip.chip-autofix:hover {
  background: linear-gradient(135deg, #3b1d8e 0%, #2e1065 50%, #3b2d8e 100%);
  border-color: rgba(167, 139, 250, 0.4);
  color: #f0ecfe;
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.15);
  transform: translateY(-1px);
}

html.light .follow-up-chip.chip-autofix:hover {
  background: linear-gradient(135deg, #e8e0fc 0%, #ede9fe 50%, #e0d4fc 100%);
  border-color: rgba(124, 58, 237, 0.25);
  color: var(--violet-900);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08);
}

/* Auto-fix badge */
.chip-autofix-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: linear-gradient(
    90deg,
    #c4b5fd 0%,
    #e9d5ff 45%,
    #c4b5fd 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: autofixShimmer 3s ease-in-out infinite;
}

html.light .chip-autofix-badge {
  background: linear-gradient(
    90deg,
    #6d28d9 0%,
    #7c3aed 45%,
    #6d28d9 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: autofixShimmer 3s ease-in-out infinite;
}

/* Connect integration chip (inline in follow-up suggestions) */
.follow-up-chip.chip-connect {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--connect-accent, var(--text-secondary));
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--connect-accent, var(--border-default)) 35%, transparent);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 8px 16px;
  transition: all 0.2s var(--ease-out);
}

.follow-up-chip.chip-connect:hover {
  border-style: solid;
  border-color: color-mix(in srgb, var(--connect-accent, var(--violet-500)) 55%, transparent);
  background: color-mix(in srgb, var(--connect-accent, var(--violet-500)) 6%, transparent);
  color: var(--connect-accent, var(--text-primary));
}

.chip-connect-icon {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1;
  opacity: 0.7;
}

.follow-up-chip.chip-connect:hover .chip-connect-icon {
  opacity: 1;
}

html.light .follow-up-chip.chip-connect {
  border-color: color-mix(in srgb, var(--connect-accent, var(--border-default)) 25%, transparent);
}

html.light .follow-up-chip.chip-connect:hover {
  border-color: color-mix(in srgb, var(--connect-accent, var(--violet-500)) 45%, transparent);
  background: color-mix(in srgb, var(--connect-accent, var(--violet-500)) 4%, transparent);
}

/* ---- Input area ---- */
.chat-input-area {
  padding: 14px 24px 18px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.chat-input-wrapper {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.chat-input {
  flex: 1;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  outline: none;
  resize: none;
  min-height: 44px;
  max-height: 180px;
  line-height: 1.5;
  transition: all 0.2s var(--ease-out);
}

.chat-input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.chat-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--violet-glow);
  background: var(--bg-input-focus);
}

.btn-send {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--violet-600), #a78bfa);
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(139,92,246,0.25);
  transition: all 0.2s var(--ease-out);
}

.btn-send:hover {
  background: var(--violet-500);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
  transform: translateY(-1px);
}

.btn-send:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.btn-send svg {
  width: 18px;
  height: 18px;
}

.chat-input-hint {
  max-width: 900px;
  margin: 6px auto 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  opacity: 0.5;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ============================================
   FILE UPLOAD UI
   ============================================ */

.btn-attach {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s var(--ease-out);
  opacity: 0.6;
}

.btn-attach:hover {
  opacity: 1;
  border-color: var(--border-focus);
  color: var(--violet-400);
  background: var(--violet-glow);
}

.btn-attach svg {
  width: 17px;
  height: 17px;
}

/* Upload preview strip */
.upload-preview {
  max-width: 800px;
  margin: 0 auto;
  display: none;
  gap: 8px;
  padding: 0 0 8px;
  flex-wrap: wrap;
}

.upload-preview.has-files {
  display: flex;
}

.upload-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-default);
  flex-shrink: 0;
  animation: thumbFadeIn 0.2s ease-out;
}

@keyframes thumbFadeIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

.upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.upload-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.upload-thumb:hover .upload-thumb-remove {
  opacity: 1;
}

.upload-thumb-uploading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-thumb-uploading img {
  opacity: 0.4;
}

/* File-type card (non-image uploads) */
.upload-thumb-file {
  width: auto;
  min-width: 56px;
  max-width: 140px;
  height: 56px;
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
}

.file-type-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  width: 100%;
  height: 100%;
}

.file-type-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  line-height: 1.2;
}

.file-type-name {
  font-size: 0.68rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

/* File-type card in message attachments */
.message-attachment-file {
  width: auto;
  min-width: 80px;
  max-width: 180px;
  height: 60px;
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  cursor: default;
}

.message-attachment-file .file-type-card {
  padding: 0 10px;
}

.message-attachment-file .file-type-badge {
  font-size: 0.65rem;
  padding: 3px 6px;
}

.message-attachment-file .file-type-name {
  font-size: 0.72rem;
}

/* Drag-over highlight */
.chat-input-wrapper.drag-over {
  outline: 2px dashed var(--violet-500);
  outline-offset: -2px;
  border-radius: var(--radius-md);
  background: var(--violet-glow);
}

/* Message attachment display — ChatGPT/Claude style thumbnails */
.message-attachments {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 4px;
}

.message-attachment-thumb {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}

.message-attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.message-attachment-thumb:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Lightbox overlay */
.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: lbFadeIn 0.2s ease-out;
}

@keyframes lbFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.img-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Light mode overrides */
html.light .btn-attach {
  border-color: rgba(124, 58, 237, 0.1);
}

html.light .btn-attach:hover {
  border-color: rgba(124, 58, 237, 0.3);
  color: var(--violet-600);
}

html.light .upload-thumb {
  border-color: rgba(124, 58, 237, 0.12);
}

html.light .message-attachment-thumb {
  border-color: rgba(124, 58, 237, 0.1);
}

html.light .upload-thumb-file,
html.light .message-attachment-file {
  background: #f8f7ff;
}

html.light .file-type-name {
  color: var(--text-secondary);
}

html.light .img-lightbox {
  background: rgba(255, 255, 255, 0.9);
}

/* ============================================
   MOBILE RESPONSIVE — All Pages
   ============================================ */

/* ---- Tablet (≤ 768px) ---- */
@media (max-width: 768px) {
  /* -- Chat sidebar — mobile drawer -- */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 82vw;
    min-width: 260px;
    max-width: 320px;
    transform: translateX(-100%);
    z-index: 100;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.3), 2px 0 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    border-right: 1px solid rgba(139, 92, 246, 0.1);
  }

  html.light .sidebar {
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.1), 2px 0 8px rgba(0, 0, 0, 0.06);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 99;
    pointer-events: none;
    transition: background 0.32s cubic-bezier(0.32, 0.72, 0, 1),
                backdrop-filter 0.32s cubic-bezier(0.32, 0.72, 0, 1),
                -webkit-backdrop-filter 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .sidebar-overlay.visible {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: auto;
  }

  html.light .sidebar-overlay.visible {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* Mobile: close button replaces collapse chevron */
  .btn-sidebar-collapse {
    display: none;
  }

  .btn-mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(139, 92, 246, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.1);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    position: absolute;
    right: 0;
  }

  .btn-mobile-close:active {
    background: rgba(139, 92, 246, 0.12);
    color: var(--text-primary);
    transform: scale(0.92);
  }

  html.light .btn-mobile-close {
    background: rgba(124, 58, 237, 0.04);
    border-color: rgba(124, 58, 237, 0.08);
  }

  html.light .btn-mobile-close:active {
    background: rgba(124, 58, 237, 0.1);
  }

  .sidebar-collapsed-icons {
    display: none !important;
  }

  .sidebar-brand-icon {
    display: none !important;
  }

  .sidebar-brand .brand-logo {
    height: 28px;
  }

  /* Override collapsed state on mobile — always show full sidebar */
  .sidebar.collapsed {
    width: 82vw;
    min-width: 260px;
    max-width: 320px;
    border-right: 1px solid rgba(139, 92, 246, 0.1);
    transform: translateX(-100%);
  }

  .sidebar.collapsed .sidebar-brand,
  .sidebar.collapsed .sidebar-search,
  .sidebar.collapsed .conversation-list,
  .sidebar.collapsed .sidebar-user-info,
  .sidebar.collapsed .btn-new-chat-label,
  .sidebar.collapsed #btnLogout {
    display: revert;
  }

  /* Mobile: bigger tap targets for conversation items */
  .conv-item {
    padding: 12px 14px;
    font-size: 0.82rem;
    margin-bottom: 2px;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
  }

  .conv-item:active {
    background: rgba(139, 92, 246, 0.1);
    transform: scale(0.98);
    transition: transform 0.1s;
  }

  html.light .conv-item:active {
    background: rgba(124, 58, 237, 0.08);
  }

  /* Mobile: touch-friendly sidebar elements */
  .sidebar-header {
    padding: 18px 16px 14px;
  }

  .btn-new-chat {
    padding: 12px 14px;
    font-size: 0.82rem;
  }

  .sidebar-search-input {
    padding: 11px 12px 11px 34px;
    font-size: 0.82rem;
  }

  .sidebar-footer {
    padding: 14px 16px;
  }

  .sidebar-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.68rem;
  }

  .sidebar-username {
    font-size: 0.82rem;
  }

  /* -- Chat topbar -- */
  .topbar-nav-link span {
    display: none;
  }

  .topbar-nav-link {
    padding: 6px 8px;
  }

  .topbar-divider {
    display: none;
  }

  .btn-theme-toggle .theme-label-dark,
  .btn-theme-toggle .theme-label-light {
    display: none !important;
  }

  .btn-theme-toggle {
    padding: 7px 10px;
  }

  /* -- Chat messages -- */
  .chat-messages {
    padding: 14px 12px 140px;
  }

  .chat-input-area {
    padding: 10px 12px 14px;
  }

  .chat-input {
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  .btn-attach {
    width: 40px;
    height: 40px;
  }

  .upload-thumb {
    width: 48px;
    height: 48px;
  }

  .message-attachment-thumb {
    width: 68px;
    height: 68px;
  }

  .upload-thumb-file {
    height: 48px;
    max-width: 120px;
  }

  .message-attachment-file {
    height: 52px;
    max-width: 150px;
  }

  .message-user .message-content {
    max-width: 88%;
  }

  .message-assistant .message-content {
    padding: 10px 8px;
    font-size: 0.94rem;
  }

  .chat-welcome {
    padding: 32px 16px;
  }

  .chat-welcome h2 {
    font-size: 1.3rem;
  }

  .chat-welcome p {
    font-size: 0.88rem;
    max-width: 100%;
  }

  .chat-welcome-suggestions {
    gap: 6px;
    margin-top: 20px;
  }

  .suggestion-chip {
    padding: 9px 14px;
    font-size: 0.84rem;
  }

  /* -- Topbar -- */
  .chat-topbar {
    height: 48px;
    padding: 0 10px;
    gap: 6px;
  }

  .topbar-left {
    gap: 8px;
  }

  .chat-topbar-title {
    font-size: 0.75rem;
  }

  .topbar-icon-btn {
    width: 26px;
    height: 26px;
  }

  .topbar-icon-btn svg {
    width: 13px;
    height: 13px;
  }

  /* Hide export on mobile — less important */
  #btnExportChat {
    display: none !important;
  }

  .chat-topbar-model {
    font-size: 0.58rem;
    padding: 2px 8px;
  }

  .topbar-actions {
    gap: 4px;
  }

  /* -- Follow-up chips -- */
  .follow-up-suggestions {
    gap: 6px;
    padding: 0 2px;
  }

  .follow-up-chip {
    padding: 9px 14px;
    font-size: 0.86rem;
  }

  .follow-up-chip.chip-autofix {
    padding: 9px 14px;
  }

  .chip-autofix-badge {
    font-size: 0.7rem;
  }

  /* -- Admin header — mobile -- */
  .admin-header {
    display: flex;
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 0;
    position: relative;
  }

  .admin-header > .admin-header-left {
    flex: 1;
    gap: 10px;
    min-width: 0;
  }

  .admin-header > div:last-child {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  /* Hamburger toggle button */
  .admin-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
  }

  .admin-menu-toggle:active {
    background: var(--bg-surface);
  }

  .admin-menu-toggle .hamburger-icon {
    display: block;
  }

  .admin-menu-toggle .close-icon {
    display: none;
  }

  .admin-menu-toggle.is-open .hamburger-icon {
    display: none;
  }

  .admin-menu-toggle.is-open .close-icon {
    display: block;
  }

  /* Nav: floating dropdown card on mobile */
  .admin-nav {
    display: none;
    position: fixed;
    top: 60px;
    left: 12px;
    right: 12px;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    background: var(--bg-card);
    -webkit-backdrop-filter: blur(32px);
    backdrop-filter: blur(32px);
    border: 1px solid rgba(167, 139, 250, 0.15);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 0 0 1px rgba(167, 139, 250, 0.08);
    z-index: 99;
    width: auto;
    order: unset;
    flex: unset;
  }

  html.light .admin-nav {
    background: rgba(255,255,255,0.95);
    box-shadow: 0 20px 60px rgba(0,0,0,0.1), 0 0 0 1px rgba(167, 139, 250, 0.12);
  }

  .admin-nav.is-open {
    display: flex;
    animation: adminMenuDrop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes adminMenuDrop {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .admin-nav-link {
    font-size: 0.88rem;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    border-bottom: none;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    letter-spacing: 0.02em;
    font-weight: 500;
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(8px);
  }

  .admin-nav.is-open .admin-nav-link {
    animation: adminMenuItemIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .admin-nav.is-open .admin-nav-link:nth-child(1) { animation-delay: 0.04s; }
  .admin-nav.is-open .admin-nav-link:nth-child(2) { animation-delay: 0.08s; }
  .admin-nav.is-open .admin-nav-link:nth-child(3) { animation-delay: 0.12s; }
  .admin-nav.is-open .admin-nav-link:nth-child(4) { animation-delay: 0.16s; }
  .admin-nav.is-open .admin-nav-link:nth-child(5) { animation-delay: 0.20s; }
  .admin-nav.is-open .admin-nav-link:nth-child(6) { animation-delay: 0.24s; }
  .admin-nav.is-open .admin-nav-link:nth-child(7) { animation-delay: 0.28s; }
  .admin-nav.is-open .admin-nav-link:nth-child(8) { animation-delay: 0.32s; }

  @keyframes adminMenuItemIn {
    to { opacity: 1; transform: translateY(0); }
  }

  .admin-nav-link:active {
    transform: scale(0.98);
  }

  .admin-nav-link.active {
    color: var(--violet-300);
    background: rgba(139, 92, 246, 0.1);
    border-color: transparent;
    border-bottom-color: transparent;
  }

  html.light .admin-nav-link.active {
    color: var(--violet-700);
    background: rgba(124, 58, 237, 0.08);
    border-color: transparent;
    border-bottom-color: transparent;
  }

  .admin-nav-link:hover {
    background: rgba(167, 139, 250, 0.08);
    border-bottom-color: transparent;
  }

  /* Overlay behind floating menu */
  .admin-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    z-index: 98;
    pointer-events: none;
    transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                backdrop-filter 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                -webkit-backdrop-filter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .admin-nav-overlay.visible {
    background: rgba(0,0,0,0.3);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    pointer-events: auto;
  }

  html.light .admin-nav-overlay.visible {
    background: rgba(0,0,0,0.15);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .admin-title {
    font-size: 1.05rem;
  }

  .admin-brand img {
    height: 24px;
  }

  .admin-page-label {
    font-size: 0.85rem;
  }

  /* -- Admin content -- */
  .admin-content {
    padding: 0 14px;
    margin: 20px auto;
  }

  /* -- Admin table: horizontal scroll -- */
  .admin-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 0.78rem;
  }

  .admin-table th,
  .admin-table td {
    padding: 10px 12px;
  }

  /* -- Modal -- */
  .modal {
    margin: 16px;
    max-width: calc(100vw - 32px);
    padding: 24px 20px;
  }

  /* -- Integrations -- */
  .integration-card {
    padding: 20px 16px;
  }

  .integration-card-header {
    gap: 12px;
  }

  .integration-icon {
    width: 40px;
    height: 40px;
  }

  .integration-card-header h3 {
    font-size: 0.92rem;
  }

  .integration-card-header p {
    font-size: 0.78rem;
  }

  /* -- Landing page — tablet -- */
  .landing-center {
    padding-top: 4vh;
  }

  .landing-hero h1 {
    font-size: 1.8rem;
  }

  .landing-hero p {
    font-size: 0.95rem;
    max-width: 420px;
  }

  .landing-shell::before {
    width: 400px;
    height: 400px;
    filter: blur(60px);
  }

  .landing-shell::after {
    width: 320px;
    height: 320px;
    filter: blur(60px);
  }

  /* -- Chat welcome orbs — tablet -- */
  .chat-welcome::before {
    width: 320px;
    height: 320px;
    filter: blur(70px);
  }

  .chat-welcome::after {
    width: 260px;
    height: 260px;
    filter: blur(70px);
  }
}

/* ---- Small phone (≤ 480px) ---- */
@media (max-width: 480px) {
  /* -- Chat topbar — phone -- */
  .chat-topbar {
    padding: 0 8px;
  }

  .topbar-left {
    gap: 6px;
  }

  .chat-topbar-title {
    font-size: 0.7rem;
  }

  .topbar-actions {
    gap: 2px;
  }

  .topbar-nav-link {
    padding: 5px 6px;
  }

  .topbar-nav-link svg {
    width: 13px;
    height: 13px;
  }

  .chat-topbar-model {
    display: none;
  }

  .credit-badge {
    font-size: 0.56rem;
    padding: 2px 7px;
  }

  /* -- Landing page — phone -- */
  .landing-topbar {
    padding: 12px 16px;
  }

  .landing-topbar-brand .brand-logo {
    height: 30px;
  }

  .landing-center {
    padding: 0 20px;
    justify-content: flex-start;
    padding-top: 6vh;
  }

  .landing-hero h1 {
    font-size: 1.5rem;
  }

  .landing-hero p {
    font-size: 0.9rem;
    max-width: 100%;
  }

  .landing-hero {
    margin-bottom: 24px;
  }

  .landing-suggestions {
    gap: 6px;
    margin-bottom: 20px;
  }

  .landing-chip {
    padding: 7px 12px;
    font-size: 0.72rem;
  }

  .landing-agents {
    gap: 6px;
    margin-bottom: 20px;
  }

  .landing-agent-tile {
    padding: 10px 12px;
    gap: 9px;
    border-radius: 9px;
  }

  .landing-agent-avatar {
    width: 24px;
    height: 24px;
    border-radius: 6px;
  }

  .landing-agent-avatar svg {
    width: 12px;
    height: 12px;
  }

  .landing-agent-name {
    font-size: 0.74rem;
  }

  .landing-agent-desc {
    font-size: 0.58rem;
  }

  .landing-platforms {
    margin-bottom: 24px;
    gap: 8px;
  }

  .landing-platforms-row {
    gap: 12px;
  }

  .landing-platforms-row img {
    width: 18px;
    height: 18px;
  }

  .landing-auth {
    max-width: 100%;
  }

  .btn-google-signin {
    padding: 14px 20px;
    font-size: 16px;
    border-radius: 10px;
  }

  .welcome-back-card {
    padding: 14px 16px;
    border-radius: 10px;
  }

  .welcome-back-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.82rem;
  }

  .welcome-back-name {
    font-size: 0.88rem;
  }

  .btn-email-signin {
    padding: 13px 20px;
    font-size: 16px;
    border-radius: 10px;
  }

  .landing-email-form .form-input {
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 10px;
  }

  .btn-login {
    padding: 14px 24px;
    font-size: 16px;
    border-radius: 10px;
  }

  .landing-input-area {
    padding: 10px 16px 18px;
  }

  .landing-input-placeholder {
    padding: 12px 16px;
    border-radius: 10px;
  }

  .landing-input-placeholder span {
    font-size: 16px;
  }

  .landing-shell::before {
    width: 280px;
    height: 280px;
    filter: blur(50px);
  }

  .landing-shell::after {
    width: 220px;
    height: 220px;
    filter: blur(50px);
  }

  /* -- Chat welcome orbs — phone -- */
  .chat-welcome::before {
    width: 220px;
    height: 220px;
    filter: blur(50px);
  }

  .chat-welcome::after {
    width: 180px;
    height: 180px;
    filter: blur(50px);
  }

  /* -- Chat -- */
  .sidebar {
    width: 88vw;
    min-width: 260px;
    max-width: 310px;
  }

  .chat-messages {
    padding: 10px 8px 120px;
    gap: 2px;
  }

  .chat-input-area {
    padding: 8px 10px 12px;
  }

  .chat-input-wrapper {
    gap: 6px;
  }

  .btn-attach {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
  }

  .btn-attach svg {
    width: 15px;
    height: 15px;
  }

  .upload-preview {
    gap: 6px;
    padding: 0 0 6px;
  }

  .upload-thumb {
    width: 44px;
    height: 44px;
  }

  .message-attachment-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
  }

  .upload-thumb-file {
    height: 44px;
    max-width: 110px;
  }

  .message-attachment-file {
    height: 48px;
    max-width: 130px;
  }

  .file-type-badge {
    font-size: 0.55rem;
    padding: 2px 4px;
  }

  .file-type-name {
    font-size: 0.62rem;
  }

  .chat-input {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
  }

  .btn-send {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
  }

  .chat-input-hint {
    font-size: 0.55rem;
    margin-top: 4px;
  }

  .message {
    padding: 2px 0;
  }

  .message-user .message-content {
    padding: 9px 13px;
    font-size: 0.92rem;
    max-width: 92%;
  }

  .message-assistant .message-content {
    font-size: 0.92rem;
    padding: 8px 6px;
  }

  /* Tables in messages: scroll */
  .message-assistant .message-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 0.82rem;
  }

  .message-assistant .message-content pre {
    padding: 12px;
    font-size: 0.84rem;
    margin: 8px 0;
  }

  /* -- Admin -- */
  .admin-content {
    padding: 0 10px;
    margin: 14px auto;
  }

  .admin-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .btn-admin {
    padding: 8px 14px;
    font-size: 0.74rem;
  }

  .admin-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .admin-stat-card {
    padding: 12px;
  }

  .admin-stat-value {
    font-size: 1.2rem;
  }

  /* -- Integrations -- */
  .integration-card {
    padding: 18px 14px;
  }

  .integration-card-header {
    flex-direction: column;
    gap: 10px;
  }

  .integration-form .form-input {
    font-size: 16px; /* prevents iOS zoom */
  }

  .connected-integration {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }

  .connected-integration-info {
    gap: 10px;
  }

  /* -- Thinking dots mobile -- */
  .thinking-indicator {
    padding: 12px 4px;
    gap: 10px;
  }

  /* -- Tool activity mobile -- */
  .tool-activity {
    max-width: 100%;
    padding: 0;
    border-radius: 10px;
  }
  .ta-header {
    padding: 8px 12px;
  }
  .ta-header-label {
    font-size: 0.72rem;
  }
  .ta-header-timer {
    font-size: 0.66rem;
  }
  .ta-steps {
    padding: 4px 10px 8px;
  }
  .ta-step {
    font-size: 0.76rem;
    padding: 7px 2px;
    gap: 8px;
  }
  .ta-step-num {
    width: 18px;
    height: 18px;
    font-size: 0.6rem;
  }
  .ta-step-text strong {
    font-size: 0.78rem;
  }
  .ta-step-summary {
    font-size: 0.66rem;
  }
  .ta-step-status {
    font-size: 0.66rem;
  }
}

/* ---- Safe area padding for notch devices ---- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .chat-input-area {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  @media (max-width: 480px) {
    .chat-input-area {
      padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
  }
}

/* ============================================
   APP SIDEBAR NAVIGATION
   ============================================ */

.app-layout {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-deep);
}

/* ── Sidebar ──────────────────────────────── */
.app-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #1e1235 0%, #170e2e 50%, #110a24 100%);
  border-right: none;
  border-radius: 0 20px 20px 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 8px;
  left: 0;
  bottom: 8px;
  z-index: 100;
  overflow: visible;
  transition: width 0.3s cubic-bezier(0.16,1,0.3,1), transform 0.25s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 4px 0 24px rgba(0,0,0,0.08), inset -1px 0 0 rgba(139,92,246,0.15);
}
/* Sidebar border — uses box-shadow inset to avoid overflow clipping issues */

/* Collapse toggle button — positioned as sibling of sidebar */
.app-sidebar-collapse {
  position: fixed;
  top: 50%;
  left: 208px; /* 220 - 12 */
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-card, #1e1235);
  border: 1px solid rgba(139,92,246,0.2);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;
  transition: all 0.25s;
  opacity: 0.5;
  padding: 0;
}
.app-sidebar:hover ~ .app-sidebar-collapse,
.app-sidebar-collapse:hover { opacity: 1; }
.app-sidebar-collapse:hover {
  background: #8b5cf6;
  color: #fff;
  border-color: #8b5cf6;
  box-shadow: 0 0 12px rgba(139,92,246,0.4);
  transform: translateY(-50%) scale(1.15);
}
.app-sidebar-collapse svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s;
}

/* Collapsed state */
.app-sidebar.is-collapsed {
  width: 64px;
  overflow: hidden;
}
.app-sidebar.is-collapsed .app-sidebar-brand {
  padding: 16px 6px 14px;
  justify-content: center;
}
.app-sidebar.is-collapsed .app-sidebar-brand img {
  height: 0;
  opacity: 0;
}
.app-sidebar.is-collapsed .app-sidebar-brand a::after {
  content: "b";
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: #c4b5fd;
}
html.light .app-sidebar.is-collapsed .app-sidebar-brand a::after {
  color: #7c3aed;
}
.app-sidebar.is-collapsed .app-sidebar-section-label {
  display: none;
}
.app-sidebar.is-collapsed .app-sidebar-nav {
  padding: 8px 8px;
  overflow: hidden;
}
.app-sidebar.is-collapsed .app-sidebar-link {
  justify-content: center;
  padding: 11px 0;
  font-size: 0;
  gap: 0;
  overflow: hidden;
  white-space: nowrap;
}
.app-sidebar.is-collapsed .app-sidebar-link svg {
  margin: 0;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.app-sidebar.is-collapsed .app-sidebar-footer {
  padding: 8px 8px 12px;
  overflow: hidden;
}
.app-sidebar.is-collapsed .app-sidebar-footer-link {
  justify-content: center;
  padding: 9px 0;
  font-size: 0;
  gap: 0;
  overflow: hidden;
}
.app-sidebar.is-collapsed .app-sidebar-footer-link svg {
  margin: 0;
  flex-shrink: 0;
}
.app-sidebar.is-collapsed .app-sidebar-usage {
  display: none;
}
.app-sidebar.is-collapsed .app-sidebar-dot {
  display: none;
}
/* Hide ALL text/content in collapsed sidebar — only icons visible */
.app-sidebar.is-collapsed .app-sidebar-nav * {
  font-size: 0 !important;
  line-height: 0 !important;
}
.app-sidebar.is-collapsed .app-sidebar-nav svg {
  font-size: initial !important;
  line-height: initial !important;
}
.app-sidebar.is-collapsed .app-sidebar-nav .app-sidebar-section {
  margin-bottom: 2px;
}
/* Collapsed footer — hide text labels, show only icons */
.app-sidebar.is-collapsed .app-sidebar-footer-link {
  font-size: 0;
  gap: 0;
}
.app-sidebar.is-collapsed .app-sidebar-footer-link svg {
  width: 18px;
  height: 18px;
}
.app-sidebar.is-collapsed .app-sidebar-theme {
  padding: 4px 6px;
}
.app-sidebar.is-collapsed .app-sidebar-theme-wrap {
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.app-sidebar.is-collapsed .app-sidebar-theme-btn {
  padding: 8px;
  gap: 0;
  font-size: 0;
  flex: none;
  width: 100%;
  min-height: 32px;
}
.app-sidebar.is-collapsed .app-sidebar-theme-btn svg {
  width: 16px;
  height: 16px;
}
.app-sidebar.is-collapsed .app-sidebar-user-info,
.app-sidebar.is-collapsed .app-sidebar-user-arrow {
  display: none;
}
.app-sidebar.is-collapsed .app-sidebar-user {
  justify-content: center;
  padding: 8px 0;
}
.app-sidebar.is-collapsed .app-sidebar-user-avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
.app-sidebar.is-collapsed .app-sidebar-dropdown {
  position: fixed;
  left: 72px;
  right: auto;
  bottom: 16px;
  top: auto;
  width: 200px;
  z-index: 200;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 0 0 1px rgba(139,92,246,0.1);
}
/* Hide any dynamic content blocks (setup progress, etc.) */
.app-sidebar.is-collapsed [class*="setup"],
.app-sidebar.is-collapsed [class*="progress"],
.app-sidebar.is-collapsed [class*="onboard"] {
  display: none !important;
}
.app-sidebar-collapse.is-flipped svg {
  transform: rotate(180deg);
}
.app-sidebar.is-collapsed ~ .app-main,
.app-sidebar.is-collapsed + .app-sidebar-overlay + .app-main {
  margin-left: 64px;
}
/* Tooltip on hover when collapsed */
.app-sidebar.is-collapsed .app-sidebar-link {
  position: relative;
}
.app-sidebar.is-collapsed .app-sidebar-link:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-card, #1e1235);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  border: 1px solid rgba(139,92,246,0.15);
  z-index: 200;
  pointer-events: none;
}
html.light .app-sidebar.is-collapsed .app-sidebar-link:hover::after {
  background: #fff;
  box-shadow: 0 4px 12px rgba(139,92,246,0.1);
}

.app-sidebar-brand {
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(139,92,246,0.12);
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.app-sidebar-brand a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.app-sidebar-brand img {
  height: 36px;
  width: auto;
}

/* Site switcher */
.app-sidebar-site {
  padding: 8px 12px 10px;
  border-bottom: 1px solid rgba(139,92,246,0.10);
  flex-shrink: 0;
  position: relative;
}
.app-sidebar-site-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(139,92,246,0.15);
  background: rgba(139,92,246,0.04);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  text-align: left;
  color: inherit;
}
.app-sidebar-site-btn:hover {
  background: rgba(139,92,246,0.08);
  border-color: rgba(139,92,246,0.25);
}
html.light .app-sidebar-site-btn {
  background: rgba(139,92,246,0.05);
  border-color: rgba(139,92,246,0.12);
}
html.light .app-sidebar-site-btn:hover {
  background: rgba(139,92,246,0.10);
}
.app-sidebar-site-favicon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(139,92,246,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #7c3aed;
  overflow: hidden;
}
.app-sidebar-site-favicon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.app-sidebar-site-domain {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary, #fff);
}
html.light .app-sidebar-site-domain { color: #1e293b; }
.app-sidebar-site-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform 0.2s;
}
.app-sidebar-site-btn.is-open .app-sidebar-site-arrow {
  transform: rotate(180deg);
}
.app-sidebar-site-dropdown {
  display: none;
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(100% - 2px);
  z-index: 100;
  background: var(--bg-card, #1a1f2e);
  border: 1px solid rgba(139,92,246,0.20);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
}
html.light .app-sidebar-site-dropdown {
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-color: rgba(139,92,246,0.15);
}
.app-sidebar-site-dropdown.is-open { display: block; }
.app-sidebar-site-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.app-sidebar-site-item:hover { background: rgba(139,92,246,0.08); }
.app-sidebar-site-item.is-active {
  background: rgba(139,92,246,0.10);
  border: 1px solid rgba(139,92,246,0.20);
}
.app-sidebar-site-item-domain {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-sidebar-site-item.is-active .app-sidebar-site-item-domain { font-weight: 700; }
.app-sidebar-site-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #7c3aed;
}
.app-sidebar-site-divider {
  height: 1px;
  background: rgba(139,92,246,0.10);
  margin: 4px 6px;
}
.app-sidebar-site-add {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: #7c3aed;
  font-size: 12px;
  font-weight: 600;
}
.app-sidebar-site-add:hover { background: rgba(139,92,246,0.08); }
.app-sidebar-site-add-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(139,92,246,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Nav sections */
.app-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 12px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-sidebar-nav::-webkit-scrollbar { display: none; }

.app-sidebar-section {
  margin-bottom: 4px;
}

.app-sidebar-section-label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 10px 2px;
  opacity: 0.7;
}

.app-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary, #4a4a5a);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  position: relative;
  letter-spacing: 0.01em;
}

.app-sidebar-link:hover {
  background: rgba(139,92,246,0.1);
  color: var(--text-primary);
}

.app-sidebar-link.active {
  background: linear-gradient(135deg, var(--violet-600), #a78bfa);
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(139,92,246,0.35), 0 0 20px rgba(139,92,246,0.12);
}

html.light .app-sidebar {
  background: linear-gradient(135deg, #ede9fe, #e0e7ff, #ede9fe);
  border-right: none;
  box-shadow: 4px 0 24px rgba(139,92,246,0.06), inset -1px 0 0 rgba(139,92,246,0.18);
}
html.light .app-sidebar-collapse {
  background: #fff;
  border-color: rgba(139,92,246,0.15);
  color: #7c3aed;
}
html.light .app-sidebar-collapse:hover {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}
html.light .app-sidebar-link.active {
  background: linear-gradient(135deg, var(--violet-600), #a78bfa);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(139,92,246,0.25);
}

html.light .app-sidebar-link:not(.active):hover {
  background: rgba(139, 92, 246, 0.1);
}

.app-sidebar-link svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  overflow: visible;
  opacity: 0.7;
  color: var(--violet-400);
  filter: drop-shadow(0 0 1px rgba(139,92,246,0.15));
}

.app-sidebar-link:hover svg {
  opacity: 1;
  color: var(--violet-300);
}

html.light .app-sidebar-link svg {
  color: var(--violet-500);
}

html.light .app-sidebar-link:hover svg {
  color: var(--violet-600);
}

.app-sidebar-link.active svg,
html.light .app-sidebar-link.active svg {
  opacity: 1 !important;
  color: #fff !important;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.3));
}
.app-sidebar-link.active svg path[opacity],
.app-sidebar-link.active svg rect[opacity],
.app-sidebar-link.active svg circle[opacity] {
  opacity: 0.5;
  fill: #fff;
}

.app-sidebar-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  background: var(--violet-600);
  color: #fff;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
  line-height: 1.3;
}

.app-sidebar-link.active .app-sidebar-badge {
  background: rgba(255,255,255,0.25);
}

/* AI Advisor shimmer — matches landing page autofix style */
@keyframes advisorShimmer {
  0% { background-position: 100% 50%; }
  50% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.app-sidebar-link--advisor {
  font-weight: 600;
  background: linear-gradient(90deg, var(--violet-400) 0%, #e0b3ff 30%, var(--violet-500) 60%, var(--violet-400) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: advisorShimmer 3s ease-in-out infinite;
}
.app-sidebar-link--advisor:hover {
  background: linear-gradient(90deg, var(--violet-300) 0%, #e0b3ff 30%, var(--violet-400) 60%, var(--violet-300) 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: advisorShimmer 3s ease-in-out infinite;
}
html.light .app-sidebar-link--advisor {
  background: linear-gradient(90deg, var(--violet-700) 0%, #9333ea 30%, var(--violet-600) 60%, var(--violet-700) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: advisorShimmer 3s ease-in-out infinite;
}
html.light .app-sidebar-link--advisor:hover {
  background: linear-gradient(90deg, var(--violet-600) 0%, #7c3aed 30%, var(--violet-500) 60%, var(--violet-600) 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: advisorShimmer 3s ease-in-out infinite;
}
.app-sidebar-link--advisor svg {
  -webkit-text-fill-color: initial;
  opacity: 0.85 !important;
  color: var(--violet-400);
}
html.light .app-sidebar-link--advisor svg {
  color: var(--violet-600);
}
.app-sidebar-link.active.app-sidebar-link--advisor {
  background: linear-gradient(135deg, var(--violet-600), #a78bfa) !important;
  -webkit-text-fill-color: #fff;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  animation: none;
}
.app-sidebar-link.active.app-sidebar-link--advisor svg {
  color: #fff;
  opacity: 1 !important;
}

/* Chat page nav rail */
.chat-nav-rail {
  width: 110px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  gap: 2px;
  overflow-y: auto;
}
html.light .chat-nav-rail {
  background: linear-gradient(180deg, #ede9fe, #e0e7ff);
  border-right: 1px solid rgba(139,92,246,0.1);
}
.chat-nav-rail-link {
  width: 98px;
  padding: 8px 6px 6px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.chat-nav-rail-link:hover {
  background: rgba(139,92,246,0.12);
  color: var(--text-primary);
}
.chat-nav-rail-link.active {
  background: linear-gradient(135deg, var(--violet-600), #a78bfa);
  color: #fff;
  box-shadow: 0 2px 8px rgba(139,92,246,0.3);
}
.chat-nav-rail-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.chat-nav-rail-link span {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}
.chat-nav-rail-sep {
  width: 32px;
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
}
@media (max-width: 768px) {
  .chat-nav-rail { display: none; }
}

/* Sidebar footer */
.app-sidebar-footer {
  padding: 8px 10px 12px;
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.app-sidebar-footer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.app-sidebar-footer-link:hover {
  background: rgba(139,92,246,0.08);
  color: var(--text-primary);
}

.app-sidebar-footer-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
}

/* ── Sidebar: Book a Demo button ─────────────────── */
.app-sidebar-demo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 4px 0 2px;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  color: #fff !important;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  text-decoration: none;
  transition: opacity 0.15s, transform 0.15s;
  border: none;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(139,92,246,0.25);
}
.app-sidebar-demo-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.app-sidebar-demo-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.app-sidebar-demo-btn span { white-space: nowrap; }
/* Collapsed: show only icon, square button */
.app-sidebar.is-collapsed .app-sidebar-demo-btn {
  padding: 9px;
  margin: 4px auto 2px;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  gap: 0;
}
.app-sidebar.is-collapsed .app-sidebar-demo-btn span { display: none; }
.app-sidebar.is-collapsed .app-sidebar-demo-btn svg { width: 16px; height: 16px; }

/* ── Sidebar: Plan / usage box ───────────────────── */
.app-sidebar-usage {
  margin: 0 10px 4px;
  padding: 12px 12px 10px;
  border-radius: 14px;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.app-sidebar-usage:empty { display: none; }

/* Plan-tier gradient backgrounds */
.app-sidebar-usage.plan-free {
  background: rgba(139,92,246,0.06);
  border: 1px solid rgba(139,92,246,0.14);
}
.app-sidebar-usage.plan-pro {
  background: linear-gradient(160deg, rgba(139,92,246,0.12) 0%, rgba(99,102,241,0.07) 100%);
  border: 1px solid rgba(139,92,246,0.22);
}
.app-sidebar-usage.plan-business,
.app-sidebar-usage.plan-agency {
  background: linear-gradient(160deg, rgba(16,185,129,0.1) 0%, rgba(5,150,105,0.05) 100%);
  border: 1px solid rgba(16,185,129,0.22);
}
.app-sidebar-usage.plan-trial {
  background: linear-gradient(160deg, rgba(245,158,11,0.1) 0%, rgba(139,92,246,0.06) 100%);
  border: 1px solid rgba(245,158,11,0.25);
}

/* Plan icon (large, centered) */
/* Plan pill (centered purple badge) */
.app-sidebar-plan-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 6px;
}
.app-sidebar-plan-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}
.app-sidebar-plan-pill svg { width: 13px; height: 13px; flex-shrink: 0; }
.plan-pill--free   { background: rgba(139,92,246,0.15); color: #a78bfa; border: 1px solid rgba(139,92,246,0.25); }
.plan-pill--pro    { background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(99,102,241,0.16)); color: #c4b5fd; border: 1px solid rgba(139,92,246,0.3); }
.plan-pill--business, .plan-pill--agency { background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(5,150,105,0.12)); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.3); }
.plan-pill--trial  { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(139,92,246,0.12)); color: #fcd34d; border: 1px solid rgba(245,158,11,0.3); }
html.light .plan-pill--free     { background: rgba(139,92,246,0.1); color: #7c3aed; border-color: rgba(139,92,246,0.2); }
html.light .plan-pill--pro      { background: rgba(139,92,246,0.12); color: #6d28d9; border-color: rgba(139,92,246,0.25); }
html.light .plan-pill--business,
html.light .plan-pill--agency   { background: rgba(16,185,129,0.1); color: #047857; border-color: rgba(16,185,129,0.22); }
html.light .plan-pill--trial    { background: rgba(245,158,11,0.1); color: #b45309; border-color: rgba(245,158,11,0.25); }

/* Upgrade link (centered below pill) */
.app-sidebar-usage-upgrade {
  font-size: 11px;
  font-weight: 600;
  color: #8b5cf6 !important;
  text-decoration: none;
  padding: 2px 10px;
  border-radius: 20px;
  background: rgba(139,92,246,0.1);
  transition: background 0.15s;
  border: 1px solid rgba(139,92,246,0.18);
}
.app-sidebar-usage-upgrade:hover { background: rgba(139,92,246,0.2); }

/* Upgrade link */
.app-sidebar-usage-upgrade {
  font-size: 11px;
  font-weight: 600;
  color: #8b5cf6 !important;
  text-decoration: none;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(139,92,246,0.1);
  transition: background 0.15s;
}
.app-sidebar-usage-upgrade:hover { background: rgba(139,92,246,0.2); }

/* Trial countdown */
.app-sidebar-trial-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #d97706;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.22);
  border-radius: 20px;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
}
.app-sidebar-trial-banner.trial-ended {
  color: #dc2626;
  background: rgba(220,38,38,0.08);
  border-color: rgba(220,38,38,0.2);
}
.app-sidebar-trial-banner svg { flex-shrink: 0; }
html.light .app-sidebar-trial-banner { color: #b45309; background: rgba(245,158,11,0.08); }
html.light .app-sidebar-trial-banner.trial-ended { color: #dc2626; background: rgba(220,38,38,0.06); }

/* Trial progress bar */
.app-sidebar-trial-bar-wrap {
  margin-bottom: 8px;
}
.app-sidebar-trial-bar-track {
  height: 4px;
  background: rgba(245,158,11,0.15);
  border-radius: 2px;
  overflow: hidden;
}
.app-sidebar-trial-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  transition: width 0.4s ease;
}

/* Upgrade CTA button */
.app-sidebar-usage-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff !important;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.1s;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(139,92,246,0.2);
  box-sizing: border-box;
}
.app-sidebar-usage-cta:hover { opacity: 0.88; transform: translateY(-1px); }
.app-sidebar-usage-cta svg { width: 12px; height: 12px; }

.app-sidebar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px 10px 8px;
  padding: 9px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--violet-600), var(--violet-500));
  color: #fff !important;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}

.app-sidebar-cta:hover {
  opacity: 0.9;
  color: #fff !important;
}

/* User profile row in sidebar footer */
.app-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
  cursor: pointer;
}

.app-sidebar-user:hover {
  background: rgba(139,92,246,0.08);
}
.app-sidebar-user.active {
  background: rgba(139,92,246,0.12);
}

.app-sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-600), var(--violet-400));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.app-sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.app-sidebar-user-name {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sidebar-user-plan {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 1px;
}

.app-sidebar-user-arrow {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform 0.2s;
}
.app-sidebar-user.is-open .app-sidebar-user-arrow {
  transform: rotate(90deg);
}

/* User dropdown wrapper */
.app-sidebar-user-wrap {
  position: relative;
}
button.app-sidebar-user {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

/* Dropdown menu */
.app-sidebar-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 8px;
  right: 8px;
  background: var(--bg-card, #fff);
  border: 1px solid rgba(139,92,246,0.12);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  z-index: 100;
}
.app-sidebar-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.app-sidebar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary) !important;
  text-decoration: none;
  border-radius: 6px;
  border: none;
  background: none;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
}
.app-sidebar-dropdown-item:hover {
  background: rgba(139, 92, 246, 0.08);
}
.app-sidebar-dropdown-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
}
.app-sidebar-dropdown-item--demo {
  color: #7c3aed !important;
  font-weight: 600;
}
.app-sidebar-dropdown-item--demo svg { opacity: 1; color: #7c3aed; }
.app-sidebar-dropdown-item--demo:hover { background: rgba(124, 58, 237, 0.1); }

.app-sidebar-dropdown-divider {
  height: 1px;
  background: var(--border-default, var(--border));
  margin: 4px 6px;
}

/* Theme toggle row in sidebar */
.app-sidebar-theme {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 4px 10px;
  margin: 2px 0;
}

.app-sidebar-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.2s;
  background: transparent;
  color: var(--text-muted);
}

.app-sidebar-theme-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.app-sidebar-theme-btn.is-active {
  background: rgba(139,92,246,0.25);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

html.light .app-sidebar-theme-btn.is-active {
  background: var(--violet-600);
  color: #fff;
  box-shadow: 0 1px 4px rgba(139,92,246,0.25);
}

.app-sidebar-theme-btn:not(.is-active):hover {
  color: var(--text-secondary);
}

.app-sidebar-theme-wrap {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(139,92,246,0.08);
  border: 1px solid rgba(139,92,246,0.1);
  width: 100%;
}

/* Hide old toggle button */
.app-sidebar-theme-toggle { display: none; }
.app-sidebar-theme .theme-label-light,
.app-sidebar-theme .theme-label-dark { display: none; }

/* Main content area next to sidebar */
.app-main {
  flex: 1;
  margin-left: 220px;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Global article generation banner (cross-page) */
.bw-gen-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(139,92,246,0.1);
  cursor: pointer;
  transition: all 0.2s;
  max-width: 340px;
  animation: bwGenBannerIn 0.4s ease both;
}
.bw-gen-banner:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 0 2px rgba(139,92,246,0.2);
}
@keyframes bwGenBannerIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.bw-gen-banner-pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: #8b5cf6;
  animation: bwGenPulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes bwGenPulse { 0%,100% { opacity: 0.4; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } }
.bw-gen-banner-info { flex: 1; min-width: 0; }
.bw-gen-banner-title {
  font-size: 12px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bw-gen-banner-sub {
  font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px;
}
.bw-gen-banner-bar {
  width: 100%; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.1); margin-top: 6px; overflow: hidden;
}
.bw-gen-banner-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #8b5cf6, #6366f1);
  animation: bwGenBarMove 2s ease-in-out infinite;
  width: 60%;
}
@keyframes bwGenBarMove { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
.bw-gen-banner.is-done { border-color: rgba(16,185,129,0.4); }
.bw-gen-banner.is-done .bw-gen-banner-pulse { background: #10b981; animation: none; }
.bw-gen-banner.is-done .bw-gen-banner-fill { animation: none; width: 100%; background: #10b981; }

/* ── Mobile sidebar (hamburger overlay) ───── */
.app-sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 101;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.app-sidebar-toggle svg { width: 20px; height: 20px; }

.app-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.25s;
}

.app-sidebar-overlay.visible {
  opacity: 1;
}

/* Mobile top bar (shows on mobile only) */
.app-mobile-header {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 50;
}

.app-mobile-header img {
  height: 22px;
  width: auto;
}

.app-mobile-header-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 400;
  font-style: italic;
  color: var(--violet-400);
  flex: 1;
}

html.light .app-mobile-header-title {
  color: var(--violet-600);
}

@media (max-width: 768px) {
  .app-sidebar {
    transform: translateX(-100%);
    top: 0;
    bottom: 0;
    border-radius: 0 16px 16px 0;
  }

  .app-sidebar.is-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  }

  .app-sidebar-collapse {
    display: none !important;
  }

  .app-sidebar-toggle {
    display: flex;
  }

  .app-mobile-header {
    display: flex;
  }

  .app-main {
    margin-left: 0;
  }
}


/* ============================================
   ADMIN PAGE
   ============================================ */

.admin-shell {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-deep);
  overflow-x: hidden;
}

.admin-header {
  padding: 18px 32px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Hamburger hidden on desktop, visible on mobile */
@media (min-width: 769px) {
  .admin-menu-toggle {
    display: none;
  }
}

.admin-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.admin-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text-primary);
}

.admin-title span {
  color: var(--violet-400);
}

html.light .admin-title span {
  color: var(--violet-600);
}

.admin-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.admin-brand img {
  height: 28px;
  width: auto;
}

.admin-page-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--violet-400);
  white-space: nowrap;
}

html.light .admin-page-label {
  color: var(--violet-600);
}

@media (min-width: 769px) {
  .admin-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
  }

  .admin-nav-link {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
  }

  .admin-nav-link.active {
    color: var(--violet-400);
    border-bottom-color: var(--violet-400);
  }

  html.light .admin-nav-link.active {
    color: var(--violet-600);
    border-bottom-color: var(--violet-600);
  }

  .admin-nav-link:hover {
    color: var(--violet-400);
    border-bottom-color: var(--violet-400);
  }

  html.light .admin-nav-link:hover {
    color: var(--violet-600);
    border-bottom-color: var(--violet-600);
  }

  .admin-nav-link--demo {
    background: linear-gradient(135deg, var(--violet-600) 0%, var(--violet-500) 100%);
    color: #fff !important;
    padding: 4px 12px !important;
    border-radius: 6px;
    border-bottom: none !important;
    font-weight: 600;
    transition: opacity 0.2s;
  }
  .admin-nav-link--demo:hover {
    opacity: 0.85;
    color: #fff !important;
    border-bottom: none !important;
  }
  html.light .admin-nav-link--demo { color: #fff !important; }
  html.light .admin-nav-link--demo:hover { color: #fff !important; border-bottom: none !important; }
}

.admin-content {
  max-width: 900px;
  margin: 32px auto;
  padding: 0 32px 64px;
}

.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.admin-section-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.admin-client-count {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Stats cards */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.admin-stat-card {
  padding: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-align: center;
}

.admin-stat-value {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.admin-stat-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Client info in table */
.client-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.client-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-700), var(--violet-500));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.client-name {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.84rem;
}

.client-email {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.badge-plan {
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
}

.badge-plan.plan-pro {
  color: var(--violet-300);
  background: var(--violet-glow);
  border-color: rgba(139, 92, 246, 0.15);
}

html.light .badge-plan.plan-pro {
  color: var(--violet-700);
}

.badge-plan.plan-business {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.15);
}

html.light .badge-plan.plan-business {
  color: #b45309;
}

.btn-admin {
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}

.btn-admin:hover {
  background: var(--violet-glow);
  border-color: var(--border-focus);
  color: var(--violet-400);
}

html.light .btn-admin:hover {
  color: var(--violet-600);
}

.btn-admin.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--violet-600), #a78bfa);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(139,92,246,0.25);
}

.btn-admin.primary:hover {
  background: linear-gradient(135deg, var(--violet-500), #c4b5fd);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.15);
}

.btn-admin.danger {
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.15);
}

html.light .btn-admin.danger {
  color: #DC2626;
}

.btn-admin.danger:hover {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.25);
}

.btn-admin.btn-activate {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.2);
}

html.light .btn-admin.btn-activate {
  color: #16a34a;
}

.btn-admin.btn-activate:hover {
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.3);
}

/* User table */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.admin-table th {
  text-align: left;
  padding: 11px 16px;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
}

.admin-table td {
  padding: 11px 16px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-table tr:hover td {
  background: var(--bg-card);
}

/* Usage breakdown */
.tool-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.12);
  font-size: 0.7rem;
  margin: 1px 2px;
  white-space: nowrap;
  color: var(--violet-400);
}

html.light .tool-pill {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.1);
  color: var(--violet-700);
}

.usage-totals td {
  border-top: 2px solid var(--violet-600);
  font-weight: 600;
  color: var(--text-primary);
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 20px;
  font-weight: 600;
}

.badge-admin {
  color: var(--violet-300);
  background: var(--violet-glow);
  border: 1px solid rgba(139, 92, 246, 0.15);
}

html.light .badge-admin {
  color: var(--violet-700);
}

.badge-employee {
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
}

.badge-active { color: var(--violet-400); }
html.light .badge-active { color: var(--violet-600); }

.badge-inactive { color: #FCA5A5; }
html.light .badge-inactive { color: #DC2626; }

/* Role badges */
.badge-role {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}
.badge-role-client { background: rgba(56,189,248,0.12); color: #38bdf8; }
.badge-role-admin { background: rgba(251,146,60,0.12); color: #fb923c; }
.badge-role-employee { background: rgba(156,163,175,0.12); color: #9ca3af; }
html.light .badge-role-client { background: rgba(14,165,233,0.12); color: #0ea5e9; }
html.light .badge-role-admin { background: rgba(234,88,12,0.12); color: #ea580c; }
html.light .badge-role-employee { background: rgba(107,114,128,0.12); color: #6b7280; }

/* Activity dot */
.activity-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot-green { background: #22c55e; box-shadow: 0 0 5px rgba(34,197,94,0.5); }
.dot-yellow { background: #eab308; }
.dot-grey { background: var(--text-muted, #6b7280); opacity: 0.5; }

/* Email action button */
.btn-email-action { background: rgba(56,189,248,0.08); color: #38bdf8; border: 1px solid rgba(56,189,248,0.2); }
.btn-email-action:hover { background: rgba(56,189,248,0.18); }
html.light .btn-email-action { background: rgba(14,165,233,0.08); color: #0ea5e9; border-color: rgba(14,165,233,0.2); }
html.light .btn-email-action:hover { background: rgba(14,165,233,0.15); }

/* CC view button */
.btn-cc-view { background: rgba(139,92,246,0.08); color: var(--violet-400); border: 1px solid rgba(139,92,246,0.2); font-weight: 600; }
.btn-cc-view:hover { background: rgba(139,92,246,0.18); }
html.light .btn-cc-view { color: var(--violet-600); }

/* Client meta line (domain + integrations) */
.client-meta-line { display: flex; align-items: center; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.client-domain { font-size: 0.7rem; color: var(--violet-400); font-weight: 500; }
html.light .client-domain { color: var(--violet-600); }
.client-integ-badge {
  display: inline-block; font-size: 0.58rem; font-weight: 600; padding: 1px 6px;
  border-radius: 4px; letter-spacing: 0.02em; text-transform: capitalize;
}
.integ-wordpress { background: rgba(33,117,155,0.12); color: #21759b; }
.integ-shopify { background: rgba(150,191,72,0.12); color: #96bf48; }
.integ-wix { background: rgba(12,110,252,0.12); color: #0C6EFC; }
.integ-webflow { background: rgba(67,83,255,0.12); color: #4353FF; }
.integ-google { background: rgba(66,133,244,0.12); color: #4285F4; }

/* Client competitors line */
.client-comp-line { display: flex; align-items: center; gap: 4px; margin-top: 2px; flex-wrap: wrap; }
.client-comp-icon { font-size: 0.58rem; font-weight: 700; color: var(--text-muted); background: rgba(245,158,11,0.1); padding: 0 4px; border-radius: 3px; }
.client-comp-chip { font-size: 0.62rem; color: var(--text-muted); background: var(--bg-card); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border-subtle); }

/* ---- Client Cards Grid ---- */
.client-filter-bar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.client-filter-tabs {
  display: flex; align-items: center; gap: 4px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.client-filter-tab {
  font-family: inherit; font-size: 0.72rem; font-weight: 600; padding: 5px 12px;
  border-radius: 6px; border: 1px solid var(--border-subtle);
  background: transparent; color: var(--text-muted);
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.client-filter-tab:hover { background: var(--bg-hover); color: var(--text-secondary); }
.client-filter-tab.active {
  background: rgba(139,92,246,0.1); color: var(--violet-400);
  border-color: rgba(139,92,246,0.25);
}
html.light .client-filter-tab.active { color: var(--violet-600); border-color: rgba(139,92,246,0.35); }
.client-search-input {
  flex: 1; min-width: 180px; max-width: 320px; padding: 7px 14px; font-size: 0.78rem;
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border-subtle); border-radius: 8px;
  outline: none; transition: border-color 0.15s;
}
.client-search-input:focus { border-color: var(--violet-400); }
html.light .client-search-input { background: #fff; border-color: #e2e8f0; }
html.light .client-search-input:focus { border-color: var(--violet-500); }

.client-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.client-card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 10px; overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.client-card:hover { border-color: rgba(139,92,246,0.25); box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
html.light .client-card { background: #fff; border-color: #e2e8f0; }
html.light .client-card:hover { border-color: rgba(139,92,246,0.35); box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.client-card-inactive { opacity: 0.5; }
.client-card-inactive:hover { opacity: 0.75; }

/* Card header */
.cc-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; }
.cc-identity { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cc-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #64748b, #475569);
}
.cc-avatar-pro { background: linear-gradient(135deg, var(--violet-500), var(--violet-600)); }
.cc-avatar-biz { background: linear-gradient(135deg, #f59e0b, #d97706); }
.cc-name { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-email { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Badges */
.cc-badges { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.cc-plan-badge {
  font-size: 0.58rem; font-weight: 700; padding: 2px 8px;
  border-radius: 4px; text-transform: uppercase; letter-spacing: 0.06em;
}
.cc-plan-free { background: rgba(100,116,139,0.12); color: #94a3b8; }
.cc-plan-pro { background: rgba(139,92,246,0.12); color: var(--violet-400); }
html.light .cc-plan-pro { color: var(--violet-600); }
.cc-plan-business { background: rgba(245,158,11,0.12); color: #f59e0b; }
.cc-role-tag {
  font-size: 0.55rem; font-weight: 600; padding: 1px 5px;
  border-radius: 3px; background: rgba(239,68,68,0.12); color: #ef4444;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* Card body */
.cc-body { padding: 10px 16px 0; display: flex; flex-direction: column; gap: 6px; }
.cc-domain-row { display: flex; align-items: center; gap: 8px; }
.cc-domain {
  font-size: 0.75rem; font-weight: 600; color: var(--violet-400);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-domain:hover { text-decoration: underline; }
html.light .cc-domain { color: var(--violet-600); }
.cc-score-badge {
  font-size: 0.62rem; font-weight: 700; padding: 2px 7px;
  border-radius: 4px; flex-shrink: 0;
}
.cc-score-good { background: rgba(34,197,94,0.12); color: #22c55e; }
.cc-score-ok { background: rgba(245,158,11,0.12); color: #f59e0b; }
.cc-score-low { background: rgba(239,68,68,0.12); color: #ef4444; }
.cc-integ-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cc-comp-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* Card footer */
.cc-footer {
  display: flex; align-items: center; gap: 0; padding: 8px 16px;
  margin-top: 8px; border-top: 1px solid var(--border-subtle);
}
.cc-footer-item {
  flex: 1; font-size: 0.65rem; color: var(--text-muted); text-align: center;
  padding: 2px 4px; line-height: 1.4;
}
.cc-footer-item:not(:last-child) { border-right: 1px solid var(--border-subtle); }
.cc-footer-clickable { cursor: pointer; }
.cc-footer-clickable:hover { color: var(--violet-400); }

/* Card actions */
.cc-actions {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px 12px;
  flex-wrap: wrap;
}
.cc-action-btn {
  font-size: 0.68rem; font-weight: 600; padding: 6px 10px;
  border-radius: 6px; border: 1px solid var(--border-subtle);
  background: var(--bg-card); color: var(--text-secondary);
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.cc-action-btn svg { flex-shrink: 0; }
.cc-action-btn:hover { background: var(--bg-hover); }
.cc-action-violet { background: rgba(139,92,246,0.08); color: var(--violet-400); border-color: rgba(139,92,246,0.2); }
.cc-action-violet:hover { background: rgba(139,92,246,0.18); }
html.light .cc-action-violet { color: var(--violet-600); }
.cc-action-indigo { background: rgba(99,102,241,0.08); color: #818cf8; border-color: rgba(99,102,241,0.2); }
.cc-action-indigo:hover { background: rgba(99,102,241,0.18); }
html.light .cc-action-indigo { color: #6366f1; }
.cc-action-green { background: rgba(34,197,94,0.08); color: #4ade80; border-color: rgba(34,197,94,0.2); }
.cc-action-green:hover { background: rgba(34,197,94,0.18); }
.cc-action-red { background: rgba(239,68,68,0.08); color: #f87171; border-color: rgba(239,68,68,0.2); }
.cc-action-red:hover { background: rgba(239,68,68,0.18); }

/* Email merge tag hints */
.email-merge-hints {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 8px; padding: 6px 0;
}
.email-merge-label { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; }
.email-merge-tag {
  font-size: 0.65rem; font-weight: 600; padding: 2px 8px;
  border-radius: 4px; border: 1px dashed rgba(139,92,246,0.3);
  background: rgba(139,92,246,0.06); color: var(--violet-400);
  cursor: pointer; transition: background 0.15s;
}
.email-merge-tag:hover { background: rgba(139,92,246,0.15); }
html.light .email-merge-tag { color: var(--violet-600); border-color: rgba(139,92,246,0.4); }

@media (max-width: 768px) {
  .client-cards { grid-template-columns: 1fr; }
  .cc-header { flex-wrap: wrap; }
  .cc-actions { gap: 4px; }
  .cc-action-btn { padding: 4px 8px; font-size: 0.62rem; }
}

/* Email history in modal */
.email-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
}
.email-history-subject { font-size: 0.78rem; color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-history-meta { font-size: 0.72rem; white-space: nowrap; flex-shrink: 0; }
.email-opened { color: #22c55e; }
.email-not-opened { color: var(--text-muted); }

/* ---- Email Activity: KPI strip ---- */
.email-kpi-strip {
  display: flex;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 14px;
}

.email-kpi-item {
  flex: 1;
  padding: 18px 20px 16px;
  border-right: 1px solid var(--border-subtle);
  position: relative;
  transition: background 0.15s;
}

.email-kpi-item:last-child { border-right: none; }
.email-kpi-item:hover { background: rgba(255,255,255,0.02); }

.email-kpi-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  width: 20px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--kpi-accent, transparent);
}

.email-kpi-item.kpi-violet { --kpi-accent: var(--violet-500); }
.email-kpi-item.kpi-green  { --kpi-accent: #4ade80; }
.email-kpi-item.kpi-sky    { --kpi-accent: #38bdf8; }
.email-kpi-item.kpi-amber  { --kpi-accent: #fbbf24; }

.email-kpi-val {
  font-family: var(--font-body);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 5px;
}

.email-kpi-item.kpi-green .email-kpi-val  { color: #4ade80; }
.email-kpi-item.kpi-sky .email-kpi-val    { color: #38bdf8; }
.email-kpi-item.kpi-amber .email-kpi-val  { color: #fbbf24; }

.email-kpi-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Email section card — wraps header + KPI strip + table in one box */
.admin-email-section {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.admin-email-section .admin-section-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
  margin: 0 !important;
}
.admin-email-section .email-section-desc {
  padding: 10px 20px 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.admin-email-section .email-kpi-strip {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0;
}
.admin-email-section .email-log-wrap {
  border: none;
  border-radius: 0;
}
.email-tab-btn {
  padding: 6px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-right: 4px;
}
.email-tab-btn:hover { color: var(--text-primary); }
.email-tab-active {
  color: var(--violet-600) !important;
  border-bottom-color: var(--violet-600) !important;
}
html.light .email-tab-active { color: #7c3aed !important; border-bottom-color: #7c3aed !important; }

/* Email log table */
.email-log-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.email-log-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.email-log-table colgroup col:nth-child(1) { width: 22%; }
.email-log-table colgroup col:nth-child(2) { width: 32%; }
.email-log-table colgroup col:nth-child(3) { width: 13%; }
.email-log-table colgroup col:nth-child(4) { width: 18%; }
.email-log-table colgroup col:nth-child(5) { width: 15%; }

.email-log-table th {
  text-align: left;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 0.59rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
  overflow: hidden;
}

.email-log-table td {
  padding: 10px 14px;
  font-size: 0.81rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  overflow: hidden;
}

.email-log-table tr:last-child td { border-bottom: none; }
.email-log-table tr:hover td { background: rgba(139,92,246,0.03); }

.email-log-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.email-log-avatar {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-700), var(--violet-500));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.email-log-name {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.81rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-log-subject {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: 0.81rem;
}

/* Email type badges */
.email-type-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.57rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
}

.email-type-pill.type-checkin { background: rgba(56,189,248,0.1);  color: #38bdf8; }
.email-type-pill.type-welcome { background: rgba(74,222,128,0.1);  color: #4ade80; }
.email-type-pill.type-upgrade { background: rgba(251,191,36,0.1);  color: #fbbf24; }
.email-type-pill.type-custom  { background: rgba(156,163,175,0.09); color: #9ca3af; }

.email-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.email-status-badge.opened { color: #4ade80; }
.email-status-badge.not-opened { color: var(--text-muted); }

.email-status-dot {
  width: 6px;
  height: 6px;
  min-width: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.email-status-badge.opened .email-status-dot { background: #4ade80; box-shadow: 0 0 5px rgba(74,222,128,0.5); }
.email-status-badge.not-opened .email-status-dot { background: rgba(156,163,175,0.35); }

.email-sent-time { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; }

/* Meta cell: hidden on desktop, visible on mobile */
.td-email-meta { display: none; }

/* Light mode */
html.light .admin-email-section { background: #fff; border-color: rgba(0,0,0,0.07); }
html.light .admin-email-section .admin-section-header { border-bottom-color: rgba(0,0,0,0.07); }
html.light .admin-email-section .email-kpi-strip { border-bottom-color: rgba(0,0,0,0.07); }
html.light .email-kpi-strip  { background: #fff; border-color: rgba(0,0,0,0.07); }
html.light .email-kpi-item:hover { background: rgba(0,0,0,0.015); }
html.light .email-kpi-item   { border-right-color: rgba(0,0,0,0.07); }
html.light .email-log-wrap   { background: #fff; border-color: rgba(0,0,0,0.07); }
html.light .email-log-table th { background: #f9f9fb; border-bottom-color: rgba(0,0,0,0.07); }
html.light .email-log-table td { border-bottom-color: rgba(0,0,0,0.05); }
html.light .email-log-table tr:hover td { background: rgba(124,58,237,0.03); }

@media (max-width: 768px) {
  .email-kpi-strip { flex-wrap: wrap; }
  .email-kpi-item { flex: 1 1 50%; border-right: none; border-bottom: 1px solid var(--border-subtle); }
  .email-kpi-item:nth-child(odd) { border-right: 1px solid var(--border-subtle); }
  .email-kpi-item:nth-last-child(-n+2) { border-bottom: none; }

  /* ── Users table → card layout ── */
  .admin-table,
  .admin-table thead,
  .admin-table tbody,
  .admin-table th,
  .admin-table td,
  .admin-table tr {
    display: block;
  }
  .admin-table { overflow-x: visible; white-space: normal; }
  .admin-table thead { display: none; }
  .admin-table tr {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    padding: 14px 16px;
    background: var(--bg-surface);
    position: relative;
  }
  .admin-table td {
    border-bottom: none;
    padding: 3px 0;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .admin-table td::before {
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    min-width: 70px;
    flex-shrink: 0;
  }
  /* Client cell: full width, no label */
  .admin-table td.td-client { display: block; margin-bottom: 6px; }
  .admin-table td.td-client::before { display: none; }
  /* Actions cell: full width, wrap */
  .admin-table td.td-actions { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
  .admin-table td.td-actions::before { display: none; }
  .admin-table td.td-actions .action-group { flex-wrap: wrap; gap: 6px; }
  /* Deactivated row visual */
  .admin-table tr.user-inactive { opacity: 0.55; }

  /* ── Email log table → card layout ── */
  .email-log-table,
  .email-log-table thead,
  .email-log-table tbody,
  .email-log-table th,
  .email-log-table td,
  .email-log-table tr {
    display: block;
  }
  .email-log-table colgroup { display: none; }
  .email-log-table thead { display: none; }
  .email-log-table tr {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    padding: 12px 14px;
    background: var(--bg-surface);
  }
  .email-log-table td {
    border-bottom: none;
    padding: 2px 0;
    font-size: 0.82rem;
  }
  /* Email card layout: user + status on first row, subject below */
  .email-log-table td.td-email-to {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
  }
  .email-log-table td.td-email-subject {
    font-weight: 500;
    color: var(--text-primary);
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    margin-bottom: 6px;
  }
  .email-log-table td.td-email-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .email-log-table td.td-email-type-only,
  .email-log-table td.td-email-sent-only,
  .email-log-table td.td-email-status-only { display: none; }
  .email-log-table td.td-email-meta { display: flex; }
}

/* ---- Clients table: row polish ---- */
.admin-table tr { transition: background 0.12s; }
.admin-table tr:hover td { background: rgba(139,92,246,0.04); }

.user-cell { display: flex; align-items: center; gap: 10px; }

.user-avatar-ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--violet-700) 0%, var(--violet-500) 100%);
  flex-shrink: 0;
}

.user-info-name { font-weight: 500; color: var(--text-primary); font-size: 0.84rem; }
.user-info-email { font-size: 0.72rem; color: var(--text-muted); }

.action-group { display: flex; align-items: center; gap: 6px; }

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-overlay.visible {
  display: flex;
}

.modal {
  width: 100%;
  max-width: 440px;
  padding: 32px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: cardEnter 0.25s var(--ease-out) both;
}

.modal h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--text-primary);
}

.modal .form-group {
  margin-bottom: 16px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
}

/* Admin responsive — see consolidated mobile section below */

/* ============================================
   INTEGRATIONS PAGE
   ============================================ */

.integration-status {
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  margin-bottom: 24px;
  animation: msgFadeIn 0.25s var(--ease-out) both;
}

.integration-status.success {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.2);
  color: #6EE7B7;
}

html.light .integration-status.success {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
}

.integration-status.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #FCA5A5;
}

html.light .integration-status.error {
  background: rgba(239, 68, 68, 0.06);
  color: #DC2626;
}

.integrations-grid {
  margin-bottom: 24px;
}

.connected-integration {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  transition: all 0.2s var(--ease-out);
}

.connected-integration:hover {
  border-color: var(--border-default);
}

.connected-integration-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.connected-integration-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.connected-integration-icon.wordpress {
  background: rgba(33, 150, 243, 0.12);
  color: #64B5F6;
}

.connected-integration-icon.google {
  background: rgba(234, 67, 53, 0.12);
  color: #EF9A9A;
}

.connected-integration-name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
}

.connected-integration-type {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.integration-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 16px;
}

.integration-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.integration-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: none;
  overflow: hidden;
}

.integration-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.integration-card-header h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.integration-card-header p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.integration-form {
  display: grid;
  gap: 16px;
}

.integration-form .form-group {
  margin: 0;
}

.form-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 6px;
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

/* Integration connected state */
.integration-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.integration-badge.connected {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.integration-badge.disconnected {
  color: #8b5cf6;
  background: rgba(139,92,246,0.08);
  border: 1px solid rgba(139,92,246,0.18);
}

html.light .integration-badge.disconnected {
  color: #7c3aed;
  background: rgba(139,92,246,0.06);
  border-color: rgba(139,92,246,0.15);
}

.integration-connected-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 12px;
}

.integration-connected-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
}

.integration-connected-status svg {
  flex-shrink: 0;
}

.intg-connected-sites {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.intg-connected-sites:empty {
  display: none;
}

.intg-connected-sites .integration-connected-info {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.intg-connected-sites .integration-connected-info:last-child {
  border-bottom: none;
}

.intg-active-badge {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--violet-600);
  background: color-mix(in srgb, var(--violet-600) 12%, transparent);
  padding: 1px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}

.intg-limit-msg {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 8px 0;
  margin: 0;
}

.intg-limit-msg a {
  color: var(--violet-600);
  text-decoration: none;
  font-weight: 500;
}

.intg-limit-msg a:hover {
  text-decoration: underline;
}

.integration-icon.google img {
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  border-radius: 10px;
}

/* ============================================
   Integrations Page — Redesign
   ============================================ */

.integrations-page-header {
  margin-bottom: 32px;
}

.integrations-page-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.integ-count-badge {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  color: var(--text-tertiary);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  padding: 2px 10px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 8px;
}

.integrations-page-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Grid for integration cards */
.intg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: stretch;
}

.intg-card {
  background: linear-gradient(135deg, #ede9fe, #e0e7ff, #ede9fe);
  border: none;
  border-radius: 16px;
  padding: 24px;
  transition: border-color 0.25s, box-shadow 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Rainbow border matching CC score box */
.intg-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  padding: 2px;
  background: conic-gradient(from 0deg, #f472b6, #c084fc, #818cf8, #38bdf8, #34d399, #fbbf24, #f472b6);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.2;
}

html.light .intg-card {
  background: linear-gradient(135deg, #ede9fe, #e0e7ff, #ede9fe);
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.intg-card:hover {
  box-shadow: 0 4px 16px rgba(139,92,246,0.12);
}
.intg-card:hover::before {
  opacity: 0.35;
}

.intg-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.intg-card-identity {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.intg-card-identity h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.intg-card-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 480px;
}

.intg-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.intg-cap-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--violet-400);
  background: var(--violet-glow);
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

html.light .intg-cap-tag {
  color: var(--violet-600);
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.12);
}

/* Google Search Console connect (onboarding-style) */
.intg-gsc-connect {
  margin-top: 4px;
}

.intg-gsc-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.intg-gsc-benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.intg-gsc-benefit svg { flex-shrink: 0; }

.intg-gsc-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 24px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
}

.intg-gsc-google-btn:hover {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--violet-glow), 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

html.light .intg-gsc-google-btn {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

html.light .intg-gsc-google-btn:hover {
  border-color: rgba(66, 133, 244, 0.4);
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08);
}

.intg-gsc-google-btn svg { flex-shrink: 0; }

.intg-gsc-note {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 10px;
  opacity: 0.7;
}

.intg-accordion {
  border-top: 1px solid var(--border-subtle);
  margin-top: auto;
  padding-top: 8px;
}

.intg-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.intg-accordion-trigger::-webkit-details-marker {
  display: none;
}

.intg-accordion-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.intg-accordion-chevron {
  transition: transform 0.3s;
  color: var(--text-muted);
  flex-shrink: 0;
}

.intg-accordion[open] .intg-accordion-chevron {
  transform: rotate(180deg);
}

.intg-accordion-content {
  padding: 20px 0 4px;
}

.intg-setup-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 16px;
}

.intg-setup-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.intg-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--violet-glow-strong);
  color: var(--violet-400);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(139, 92, 246, 0.15);
}

html.light .intg-step-num {
  color: var(--violet-600);
}

.intg-setup-steps li strong {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 2px;
}

.intg-setup-steps li p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .intg-grid { grid-template-columns: 1fr; }
  .intg-card-header {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .intg-card { padding: 18px 14px; }
  .integrations-page-title { font-size: 1.4rem; }
  .intg-card-identity { gap: 12px; }
  .intg-cap-tag { font-size: 0.58rem; padding: 3px 8px; }
  .intg-step-num { width: 24px; height: 24px; font-size: 0.65rem; }
}


/* ============================================
   Agents Page
   ============================================ */

/* Agents page — wider content */
.agents-content {
  max-width: 1060px;
}

.agents-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.agents-hero-left { flex: 1; min-width: 0; }
.agents-hero-right { flex-shrink: 0; }

.agents-page-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.agents-page-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 440px;
}

/* Search bar */
.ag-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 8px 12px;
  width: 220px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ag-search-wrap:focus-within {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}

.ag-search-icon { color: var(--text-muted); opacity: 0.5; flex-shrink: 0; }

.ag-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 0.8rem;
  color: var(--text-primary);
  font-family: var(--font-body);
}

.ag-search-input::placeholder { color: var(--text-muted); opacity: 0.5; }

.ag-empty-msg {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  padding: 40px 0;
  opacity: 0.6;
}

/* Section headers */
.ag-section {
  margin-bottom: 40px;
}

.ag-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ag-section-title {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ag-section-count {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--violet-400);
  background: var(--violet-glow);
  border: 1px solid rgba(139, 92, 246, 0.1);
  padding: 2px 10px;
  border-radius: 20px;
}

html.light .ag-section-count {
  color: var(--violet-600);
}

/* Grid */
.ag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ag-grid-integ {
  grid-template-columns: repeat(3, 1fr);
}

/* Card base */
.ag-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  animation: agCardIn 0.45s var(--ease-out) both;
}

/* Top accent line */
.ag-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--ag-color), color-mix(in srgb, var(--ag-color) 30%, transparent));
  border-radius: 0 0 2px 2px;
  opacity: 0.4;
  transition: opacity 0.3s var(--ease-out);
}

/* Hover glow */
.ag-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: radial-gradient(ellipse 140% 100% at 0% 0%, color-mix(in srgb, var(--ag-color) 6%, transparent) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}

.ag-card:hover {
  border-color: color-mix(in srgb, var(--ag-color) 25%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--ag-color) 8%, transparent);
}

.ag-card:hover::before { opacity: 1; }
.ag-card:hover::after { opacity: 1; }

@keyframes agCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card header */
.ag-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  z-index: 1;
}

/* Icon */
.ag-card-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ag-color);
  background: color-mix(in srgb, var(--ag-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ag-color) 12%, transparent);
  transition: background 0.3s;
}

.ag-card:hover .ag-card-icon {
  background: color-mix(in srgb, var(--ag-color) 16%, transparent);
}

.ag-card-icon-img {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  overflow: hidden;
}

.ag-card-icon-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* Info */
.ag-card-info {
  flex: 1;
  min-width: 0;
}

.ag-card-info h3 {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 3px;
}

.ag-card-info p {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  opacity: 0.8;
}

/* Card capability pills */
.ag-card-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}

.ag-card-cap {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}

.ag-card-cap-more {
  color: var(--ag-color);
  border-color: color-mix(in srgb, var(--ag-color) 20%, transparent);
  background: color-mix(in srgb, var(--ag-color) 5%, transparent);
  font-weight: 600;
}

/* Badges */
.ag-badge {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}

.ag-badge-free {
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}

.ag-badge-pro {
  color: #fff;
  background: linear-gradient(135deg, var(--violet-600), var(--violet-500));
  border: none;
}

.ag-badge-active {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.ag-badge-connect {
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.ag-badge-connect:hover {
  color: var(--violet-400);
  border-color: var(--violet-400);
}

/* Try it row */
.ag-try {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
  position: relative;
  z-index: 1;
}

.ag-try:hover {
  border-color: color-mix(in srgb, var(--ag-color) 30%, transparent);
  background: color-mix(in srgb, var(--ag-color) 4%, var(--bg-input));
}

.ag-try-icon {
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0.5;
  display: flex;
  align-items: center;
}

.ag-try-text {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 300;
  color: var(--text-muted);
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.ag-try-btn {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ag-color);
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.ag-try:hover .ag-try-btn {
  opacity: 1;
}

/* Card grid: wider spacing for richer cards */
.ag-grid {
  gap: 16px;
}

/* Name row (name + badge inline) */
.ag-card-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.ag-card-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Capability row: dot + text */
.ag-card-caps {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.ag-card-cap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
}

.ag-cap-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.7;
}

/* "Ask it:" label */
.ag-prompts-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.5;
  margin-top: 16px;
  margin-bottom: 6px;
}

/* Prompts column */
.ag-prompts {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  z-index: 2;
}

/* Each prompt button */
.ag-prompt-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  position: relative;
  overflow: hidden;
}

.ag-prompt-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ag-color) 8%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.ag-prompt-btn:hover {
  border-color: color-mix(in srgb, var(--ag-color) 35%, transparent);
  transform: translateX(2px);
}

.ag-prompt-btn:hover::before { opacity: 1; }

.ag-prompt-btn:active { transform: translateX(1px) scale(0.99); }

.ag-prompt-icon {
  flex-shrink: 0;
  color: var(--ag-color);
  display: flex;
  align-items: center;
  opacity: 0.7;
}

.ag-prompt-btn:hover .ag-prompt-icon { opacity: 1; }

.ag-prompt-text {
  flex: 1;
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ag-prompt-btn:hover .ag-prompt-text { color: var(--text-primary); }

.ag-prompt-arrow {
  flex-shrink: 0;
  color: var(--ag-color);
  opacity: 0;
  display: flex;
  align-items: center;
  transform: translateX(-4px);
  transition: opacity 0.2s, transform 0.2s;
}

.ag-prompt-btn:hover .ag-prompt-arrow {
  opacity: 0.8;
  transform: translateX(0);
}

/* Integration-specific */
.ag-card-integ {
  padding: 20px;
}

.ag-card-integ:not(.ag-integ-active) {
  opacity: 0.6;
}

.ag-card-integ:not(.ag-integ-active):hover {
  opacity: 0.85;
}

.ag-integ-active {
  border-color: rgba(34, 197, 94, 0.1);
}

.ag-integ-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ag-integ-connected-name {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  opacity: 0.8;
}

.ag-integ-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
  position: relative;
  z-index: 1;
}

.ag-integ-cap {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--violet-400);
  background: var(--violet-glow);
  border: 1px solid rgba(139, 92, 246, 0.1);
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

html.light .ag-integ-cap {
  color: var(--violet-600);
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.1);
}

/* Responsive */
@media (max-width: 900px) {
  .ag-grid { grid-template-columns: repeat(2, 1fr); }
  .ag-grid-integ { grid-template-columns: repeat(2, 1fr); }
  .agents-content { max-width: 700px; }
}

@media (max-width: 600px) {
  .ag-grid { grid-template-columns: 1fr; }
  .ag-grid-integ { grid-template-columns: 1fr; }
  .agents-content { padding: 0 16px; }
  .agents-page-title { font-size: 1.4rem; }
  .ag-card { padding: 16px; }
  .ag-card-icon { width: 34px; height: 34px; }
  .ag-card-info h3 { font-size: 0.85rem; }
}

/* ---- Agent Detail Modal ---- */
.agm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 0.3s, backdrop-filter 0.3s, -webkit-backdrop-filter 0.3s;
  padding: 20px;
}

.agm-overlay.agm-visible {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.agm {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 28px;
  position: relative;
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}

.agm-overlay.agm-visible .agm {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Top accent bar */
.agm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--ag-color), color-mix(in srgb, var(--ag-color) 20%, transparent));
  border-radius: 0 0 2px 2px;
}

.agm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
}

.agm-close:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
}

.agm-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.agm-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ag-color);
  background: color-mix(in srgb, var(--ag-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ag-color) 15%, transparent);
}

.agm-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

.agm-title-area {
  flex: 1;
  min-width: 0;
}

.agm-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.agm-name {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.agm-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.agm-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.agm-section-title {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}

/* Capabilities list */
.agm-caps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agm-caps-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.agm-cap-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Example prompts */
.agm-examples {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agm-example {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}

.agm-example:hover {
  border-color: color-mix(in srgb, var(--ag-color) 30%, transparent);
  background: color-mix(in srgb, var(--ag-color) 4%, var(--bg-input));
}

.agm-ex-icon {
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0.5;
  display: flex;
  align-items: center;
}

.agm-ex-text {
  flex: 1;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agm-ex-go {
  flex-shrink: 0;
  color: var(--ag-color);
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
}

.agm-example:hover .agm-ex-go {
  opacity: 1;
}

/* Integration connect button in modal */
.agm-action-section {
  text-align: center;
}

.agm-connect-btn {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 8px;
  background: var(--ag-color);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}

.agm-connect-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Modal responsive */
@media (max-width: 600px) {
  .agm {
    padding: 20px;
    max-height: 85vh;
    border-radius: 12px;
  }
  .agm-header { gap: 10px; }
  .agm-icon { width: 40px; height: 40px; }
  .agm-name { font-size: 1rem; }
  .agm-desc { font-size: 0.78rem; }
  .agm-overlay { padding: 12px; }
}


/* ============================================
   Automations Page
   ============================================ */

.automation-intro {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: -8px 0 24px;
  max-width: 600px;
}

.automation-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 16px;
}

.automation-card-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.automation-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}

.automation-card-info {
  flex: 1;
  min-width: 0;
}

.automation-card-info h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.automation-card-info p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Toggle switch */
.automation-toggle {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  cursor: pointer;
  margin-top: 2px;
}

.toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 24px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.toggle-slider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.25s ease, background 0.25s ease;
}

.toggle-input:checked + .toggle-slider {
  background: var(--violet-600);
  border-color: var(--violet-600);
}

.toggle-input:checked + .toggle-slider::after {
  transform: translateX(20px);
  background: #fff;
}

.toggle-input:focus-visible + .toggle-slider {
  box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 4px var(--violet-600);
}

/* Settings section */
.automation-card-settings {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 14px;
}

.automation-row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}

.automation-card-settings select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* Footer */
.automation-card-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.automation-footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.automation-footer-right {
  display: flex;
  gap: 8px;
}

.automation-status-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.automation-status-badge.status-ok {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.automation-status-badge.status-warning {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.automation-status-badge.status-error {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.automation-last-run {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.btn-logs {
  font-size: 0.75rem !important;
  padding: 6px 12px !important;
}

/* Logs modal — overrides only z-index and padding for automation modals */
.modal-overlay.visible {
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-header h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

/* Log entries */
.logs-list {
  display: grid;
  gap: 16px;
}

.log-entry {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
}

.log-entry-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.log-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.log-email-sent {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--violet-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.log-summary {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}

.log-details {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.log-detail-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.78rem;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.log-detail-item.severity-ok {
  border-left: 3px solid #22c55e;
}

.log-detail-item.severity-warning {
  border-left: 3px solid #f59e0b;
}

.log-detail-item.severity-error {
  border-left: 3px solid #ef4444;
}

.log-detail-check {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.72rem;
  white-space: nowrap;
  min-width: 120px;
}

.log-detail-msg {
  color: var(--text-muted);
  line-height: 1.4;
}

/* Integration status (shared with integrations page) */
.integration-status {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.integration-status.success {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.integration-status.error, .integration-status.warning {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.integration-status.warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Automations mobile */
@media (max-width: 768px) {
  .automation-row {
    flex-direction: column;
    gap: 12px;
  }

  .automation-row .form-group {
    width: 100% !important;
  }

  .automation-card-top {
    flex-wrap: wrap;
  }

  .automation-card-info {
    flex-basis: calc(100% - 108px);
  }

  .automation-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .automation-footer-right {
    width: 100%;
  }

  .automation-footer-right .btn-admin {
    flex: 1;
  }

  .modal {
    max-height: 90vh;
  }

  .log-detail-item {
    flex-direction: column;
    gap: 2px;
  }

  .log-detail-check {
    min-width: unset;
  }
}

@media (max-width: 480px) {
  .automation-card {
    padding: 18px;
  }

  .automation-card-icon {
    width: 40px;
    height: 40px;
  }

  .automation-card-info h3 {
    font-size: 0.9rem;
  }

  .modal-body {
    padding: 16px;
  }
}

/* ============================================
   PRICING PAGE
   ============================================ */

.pricing-shell {
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(139, 92, 246, 0.10) 0%, transparent 60%),
    var(--bg-deep);
}

html.light .pricing-shell {
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(124, 58, 237, 0.06) 0%, transparent 60%),
    var(--bg-deep);
}

.pricing-header {
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pricing-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.pricing-brand {
  display: flex;
  align-items: center;
}

.pricing-hero {
  text-align: center;
  padding: 48px 24px 0;
}

.pricing-hero h1 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.pricing-hero p {
  color: var(--text-muted);
  font-size: 1rem;
  margin-bottom: 28px;
}

/* Interval toggle */
.pricing-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 24px;
  padding: 4px;
}

.pricing-toggle-btn {
  padding: 8px 20px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pricing-toggle-btn:hover {
  color: var(--text-primary);
}

.pricing-toggle-btn.active {
  background: var(--violet-600);
  color: #fff;
}

.pricing-save-badge {
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  padding: 2px 7px;
  border-radius: 10px;
}

html.light .pricing-save-badge {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}

/* Plan cards */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1060px;
  margin: 40px auto 0;
  padding: 0 24px;
}

.pricing-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.pricing-card:hover {
  border-color: var(--border-focus);
}

.pricing-card.featured {
  border-color: var(--violet-600);
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.12);
}

html.light .pricing-card.featured {
  box-shadow: 0 0 40px rgba(124, 58, 237, 0.08);
}

.pricing-popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--violet-600);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 12px;
  white-space: nowrap;
}

.pricing-card-header {
  margin-bottom: 24px;
}

.pricing-card-header h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}

.pricing-amount {
  font-family: var(--font-body);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--text-primary);
}

.pricing-period {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.pricing-card-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Feature list */
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.pricing-features li.included svg {
  color: #22c55e;
  flex-shrink: 0;
}

html.light .pricing-features li.included svg {
  color: #16a34a;
}

.pricing-features li.excluded {
  color: var(--text-muted);
  opacity: 0.5;
}

.pricing-features li.excluded svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* CTA */
.pricing-card-footer {
  margin-top: auto;
}

.pricing-cta {
  width: 100%;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
}

.pricing-cta:hover:not(:disabled) {
  background: var(--violet-glow);
  border-color: var(--border-focus);
  color: var(--violet-400);
}

html.light .pricing-cta:hover:not(:disabled) {
  color: var(--violet-600);
}

.pricing-cta.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--violet-600), #a78bfa);
  border: none;
  box-shadow: 0 2px 8px rgba(139,92,246,0.25);
}

.pricing-cta.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--violet-500), #c4b5fd);
  color: #fff;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.15);
}

.pricing-cta.free,
.pricing-cta.current {
  opacity: 0.5;
  cursor: default;
}

.pricing-cta:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Footer */
.pricing-footer {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.pricing-footer p + p {
  margin-top: 8px;
}

/* Pricing responsive */
@media (max-width: 900px) {
  .pricing-cards {
    grid-template-columns: 1fr;
    max-width: 440px;
  }

  .pricing-hero h1 {
    font-size: 1.8rem;
  }

  .pricing-header {
    padding: 14px 16px;
  }

  .pricing-brand img {
    height: 24px;
  }
}


/* ============================================
   BILLING PAGE
   ============================================ */

.billing-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  margin-bottom: 24px;
}

.billing-banner.success {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

html.light .billing-banner.success {
  color: #16a34a;
}

/* Plan card */
.billing-plan-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.billing-plan-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.billing-plan-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet-400);
  background: var(--violet-glow-strong);
  padding: 3px 10px;
  border-radius: 10px;
  width: fit-content;
}

html.light .billing-plan-badge {
  color: var(--violet-600);
}

.billing-plan-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--text-primary);
}

.billing-plan-price {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.billing-plan-actions {
  display: flex;
  gap: 10px;
}

/* Credits card */
.billing-credits-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.billing-credits-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.billing-credits-row.total {
  font-weight: 600;
}

.billing-credits-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.billing-credits-row.total .billing-credits-label {
  color: var(--text-primary);
}

.billing-credits-value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-primary);
}

.billing-credits-divider {
  height: 1px;
  background: var(--border-default);
  margin: 8px 0;
}

.billing-credits-bar-container {
  width: 100%;
  height: 6px;
  background: var(--bg-card);
  border-radius: 3px;
  margin-top: 16px;
  overflow: hidden;
}

.billing-credits-bar {
  height: 100%;
  background: var(--violet-500);
  border-radius: 3px;
  transition: width 0.5s var(--ease-out);
}

.billing-credits-bar.low {
  background: #ef4444;
}

.billing-credits-reset {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Subscription card */
.billing-sub-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}

.billing-sub-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.billing-sub-row + .billing-sub-row {
  border-top: 1px solid var(--border-subtle);
}

.billing-sub-status {
  font-weight: 600;
}

.billing-sub-cancel {
  color: #ef4444;
  font-weight: 500;
}

/* Billing responsive */
@media (max-width: 768px) {
  .billing-plan-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .billing-plan-actions {
    width: 100%;
  }

  .billing-plan-actions .btn-admin {
    flex: 1;
    text-align: center;
  }
}


/* ========================================
   Settings Page
   ======================================== */

.settings-content {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

/* Reveal animations */
.stg-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
.stg-reveal.stg-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Settings tabs */
.stg-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 28px;
  background: rgba(139, 92, 246, 0.04);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: 12px;
  padding: 4px;
}
html.light .stg-tabs {
  background: rgba(139, 92, 246, 0.03);
  border-color: rgba(139, 92, 246, 0.1);
}
.stg-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s;
}
.stg-tab svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.45;
}
.stg-tab:hover {
  color: var(--text-primary);
  background: rgba(139, 92, 246, 0.06);
}
.stg-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--violet-600, #7c3aed), var(--violet-500, #8b5cf6));
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}
.stg-tab.is-active svg { opacity: 1; color: #fff; }
html.light .stg-tab.is-active { color: #fff; }
.stg-tab-panel { display: none; }
.stg-tab-panel.is-active { display: block; }

/* Account header */
.stg-account-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.stg-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--violet-glow-strong);
  color: var(--violet-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--border-default);
  flex-shrink: 0;
}

html.light .stg-avatar {
  color: var(--violet-600);
}

.stg-account-info {
  flex: 1;
  min-width: 0;
}

.stg-display-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.stg-email {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 2px 0 0;
  opacity: 0.7;
}

.stg-plan-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  flex-shrink: 0;
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--border-default);
}

.stg-plan-pill[data-plan="pro"] {
  background: var(--violet-glow-strong);
  color: var(--violet-400);
  border-color: rgba(139, 92, 246, 0.2);
}

html.light .stg-plan-pill[data-plan="pro"] {
  color: var(--violet-600);
}

.stg-plan-pill[data-plan="business"] {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.2);
}

html.light .stg-plan-pill[data-plan="business"] {
  color: #d97706;
}

.stg-plan-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: stgDotPulse 2.5s ease-in-out infinite;
}

@keyframes stgDotPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* Dashboard grid */
.stg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

/* Cards */
.stg-card {
  background: rgba(139, 92, 246, 0.03);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.stg-card:hover {
  border-color: rgba(139, 92, 246, 0.2);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.06);
}
html.light .stg-card {
  background: linear-gradient(135deg, #fdfdff, #f9f7ff);
  border-color: rgba(139, 92, 246, 0.1);
}
html.light .stg-card:hover {
  border-color: rgba(139, 92, 246, 0.2);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.06);
}

.stg-card-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet-400, #a78bfa);
  margin-bottom: 20px;
}

.stg-card-title {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.stg-card-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.5;
}

/* Settings inputs — violet focus */
.stg-tab-panel input[type="text"]:focus,
.stg-tab-panel input[type="email"]:focus,
.stg-tab-panel input[type="url"]:focus,
.stg-tab-panel input[type="tel"]:focus,
.stg-tab-panel input[type="password"]:focus,
.stg-tab-panel textarea:focus,
.stg-tab-panel select:focus {
  border-color: rgba(139, 92, 246, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
  outline: none !important;
}

/* Settings inputs — lavender white background */
.stg-tab-panel input[type="text"],
.stg-tab-panel input[type="email"],
.stg-tab-panel input[type="url"],
.stg-tab-panel input[type="tel"],
.stg-tab-panel input[type="password"],
.stg-tab-panel textarea,
.stg-tab-panel select {
  background: rgba(139, 92, 246, 0.04) !important;
  border-color: rgba(139, 92, 246, 0.25) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
html.light .stg-tab-panel input[type="text"],
html.light .stg-tab-panel input[type="email"],
html.light .stg-tab-panel input[type="url"],
html.light .stg-tab-panel input[type="tel"],
html.light .stg-tab-panel input[type="password"],
html.light .stg-tab-panel textarea,
html.light .stg-tab-panel select {
  background: #faf8ff !important;
  border-color: rgba(139, 92, 246, 0.22) !important;
}

/* Settings card + spacing between cards */
.stg-card + .stg-card {
  margin-top: 20px;
}

/* Gauge */
.stg-gauge-wrapper {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 20px;
}

.stg-gauge {
  width: 100%;
  height: 100%;
}

.stg-gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
}

.stg-gauge-number {
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

.stg-gauge-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
  opacity: 0.6;
}

/* Credits breakdown */
.stg-credits-breakdown {
  border-top: 1px solid var(--border-subtle);
  padding-top: 16px;
  margin-bottom: 20px;
}

.stg-credits-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.stg-credits-val {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-primary);
}

.stg-credits-sep {
  height: 1px;
  background: var(--border-subtle);
  margin: 6px 0;
}

.stg-credits-total {
  font-weight: 600;
}

.stg-credits-total span:first-child {
  color: var(--text-primary);
}

.stg-credits-reset {
  margin-top: 10px;
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Credit packs */
.stg-packs {
  border-top: 1px solid var(--border-subtle);
  padding-top: 18px;
}

.stg-pack-row {
  display: flex;
  gap: 8px;
}

.stg-pack {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  position: relative;
  color: var(--text-primary);
  font-family: var(--font-body);
}

.stg-pack:hover {
  border-color: var(--violet-500);
  background: var(--violet-glow);
  box-shadow: 0 0 20px var(--violet-glow);
  transform: translateY(-2px);
}

.stg-pack:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.stg-pack-credits {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.stg-pack-price {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--violet-400);
}

html.light .stg-pack-price {
  color: var(--violet-600);
}

.stg-pack-label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  opacity: 0.6;
}

.stg-pack-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--violet-600);
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
}

.stg-pack-popular {
  border-color: rgba(139, 92, 246, 0.15);
}

/* Plan card (right column) */
.stg-plan-hero {
  margin-bottom: 20px;
}

.stg-plan-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.2;
}

.stg-plan-price-big {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin-top: 4px;
}

.stg-plan-price-big span {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
}

.stg-annual-note {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--violet-400);
  margin-top: 2px;
}

html.light .stg-annual-note {
  color: var(--violet-600);
}

/* Plan features */
.stg-plan-features {
  margin-bottom: 24px;
}

.stg-feature-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.stg-feature-check {
  color: var(--violet-400);
  flex-shrink: 0;
  display: flex;
}

html.light .stg-feature-check {
  color: var(--violet-600);
}

/* Buttons */
.stg-plan-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.stg-btn {
  padding: 10px 22px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: all 0.2s var(--ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stg-btn-primary,
html.light .stg-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--violet-600), #a78bfa);
  box-shadow: 0 2px 8px rgba(139,92,246,0.25);
}

.stg-btn-primary:hover,
html.light .stg-btn-primary:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--violet-500), #c4b5fd);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
  transform: translateY(-1px);
}

.stg-btn-secondary {
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-default);
}

.stg-btn-secondary:hover {
  background: var(--violet-glow);
  border-color: rgba(139, 92, 246, 0.2);
}

html.light .stg-btn-secondary {
  background: var(--bg-card);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: var(--text-primary);
}

html.light .stg-btn-secondary:hover {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.3);
  color: var(--violet-600);
}

.stg-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Subscription details */
.stg-sub-details {
  border-top: 1px solid var(--border-subtle);
  padding-top: 16px;
}

.stg-sub-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.stg-sub-row + .stg-sub-row {
  border-top: 1px solid var(--border-subtle);
}

.stg-sub-status {
  font-weight: 600;
}

.stg-status-active { color: #22c55e; }
.stg-status-warning { color: #f59e0b; }
.stg-status-danger { color: #ef4444; }

.stg-sub-cancel {
  color: #ef4444;
  font-weight: 500;
}

/* Upgrade comparison section */
.stg-upgrade-section {
  margin-top: 4px;
}

.stg-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}

.stg-compare-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all 0.25s var(--ease-out);
}

.stg-compare-card:hover {
  border-color: rgba(139, 92, 246, 0.25);
  box-shadow: 0 4px 24px var(--violet-glow);
  transform: translateY(-2px);
}

.stg-compare-card[data-plan="pro"] {
  border-color: rgba(139, 92, 246, 0.15);
}

.stg-compare-header {
  margin-bottom: 16px;
}

.stg-compare-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet-400);
  background: var(--violet-glow-strong);
  padding: 3px 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}

html.light .stg-compare-badge {
  color: var(--violet-600);
}

.stg-compare-card[data-plan="business"] .stg-compare-badge {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

html.light .stg-compare-card[data-plan="business"] .stg-compare-badge {
  color: #d97706;
}

.stg-compare-price {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.stg-compare-price span {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
}

.stg-compare-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 6px 0 0;
  opacity: 0.7;
}

.stg-compare-features {
  margin-bottom: 20px;
}

.stg-compare-feature {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.stg-compare-feature svg {
  color: var(--violet-400);
  flex-shrink: 0;
}

html.light .stg-compare-feature svg {
  color: var(--violet-600);
}

.stg-compare-card[data-plan="business"] .stg-compare-feature svg {
  color: #f59e0b;
}

html.light .stg-compare-card[data-plan="business"] .stg-compare-feature svg {
  color: #d97706;
}

.stg-compare-cta {
  width: 100%;
}

/* Settings responsive */
@media (max-width: 768px) {
  .settings-content {
    padding: 20px 16px 60px;
  }

  .stg-grid {
    grid-template-columns: 1fr;
  }

  .stg-compare-grid {
    grid-template-columns: 1fr;
  }

  .stg-account-header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .stg-plan-pill {
    order: -1;
    margin-left: auto;
  }

  .stg-avatar {
    width: 44px;
    height: 44px;
    font-size: 0.75rem;
  }

  .stg-display-name {
    font-size: 1.2rem;
  }

  .stg-pack-row {
    flex-direction: column;
  }
}


/* ========================================
   SEO Reports Page
   ======================================== */

/* Top section */
.rpt-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.rpt-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}

.rpt-subtitle {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0;
}

/* === Scan Controls — prominent action strip === */
.rpt-scan-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(124,58,237,0.06) 0%, rgba(167,139,250,0.04) 100%);
  border: 1px solid rgba(124,58,237,0.25);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 0 0 4px rgba(124,58,237,0.04), inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
}

/* Subtle animated top-edge glow */
.rpt-scan-controls::before {
  content: "";
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167,139,250,0.7), transparent);
  animation: scanBarGlow 3s ease-in-out infinite;
}
@keyframes scanBarGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.rpt-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.rpt-select-icon {
  position: absolute;
  left: 11px;
  pointer-events: none;
  color: var(--violet-600, #7c3aed);
  opacity: 0.7;
}

.rpt-select-wrap select {
  padding: 10px 16px 10px 36px;
  border-radius: 10px;
  border: 1.5px solid rgba(124,58,237,0.3);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: inherit;
  min-width: 230px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rpt-select-wrap select:focus {
  outline: none;
  border-color: var(--violet-600, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
}
.rpt-select-wrap select:hover {
  border-color: rgba(124,58,237,0.55);
}

/* Run Scan button — vivid, with shimmer */
.rpt-scan-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #7c3aed 100%);
  background-size: 200% 100%;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(124,58,237,0.4), 0 1px 3px rgba(0,0,0,0.2);
  transition: background-position 0.4s ease, box-shadow 0.2s, transform 0.15s, opacity 0.2s;
  position: relative;
  overflow: hidden;
}
.rpt-scan-btn::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: scanBtnShimmer 2.4s ease-in-out infinite;
}
@keyframes scanBtnShimmer {
  0% { left: -100%; }
  60%, 100% { left: 160%; }
}
.rpt-scan-btn:hover:not(:disabled) {
  background-position: 100% 0;
  box-shadow: 0 6px 20px rgba(124,58,237,0.55), 0 2px 6px rgba(0,0,0,0.2);
  transform: translateY(-1px);
}
.rpt-scan-btn:active:not(:disabled) { transform: translateY(0); }
.rpt-scan-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: none;
}
.rpt-scan-btn:disabled::after { display: none; }

/* Score row */
.rpt-score-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.rpt-score-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 36px;
  text-align: center;
  min-width: 180px;
}

.rpt-score-ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 12px;
}

.rpt-score-ring svg {
  width: 120px;
  height: 120px;
}

.rpt-score-arc {
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s, filter 0.3s;
  /* filter set via JS to match arc stroke color */
}

.rpt-score-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
}

.rpt-score-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

.rpt-score-grade {
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rpt-score-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.rpt-scan-timestamp {
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.7;
}

.rpt-rescan-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-accent);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.rpt-rescan-btn:hover {
  background: var(--violet-glow);
  border-color: var(--violet-400);
}

.rpt-rescan-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rpt-rescan-btn svg {
  flex-shrink: 0;
}

.rpt-rescan-btn.scanning svg {
  animation: rescanSpin 1s linear infinite;
}

@keyframes rescanSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Stat cards */
.rpt-stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.rpt-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.rpt-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rpt-stat.critical .rpt-stat-icon { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.rpt-stat.warning .rpt-stat-icon  { background: rgba(234, 179, 8, 0.12); color: #eab308; }
.rpt-stat.pages .rpt-stat-icon    { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }

.rpt-stat-num {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.rpt-stat.critical .rpt-stat-num { color: #ef4444; }
.rpt-stat.warning .rpt-stat-num  { color: #eab308; }

.rpt-stat-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Settings bar */
.rpt-settings {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  gap: 0;
  transition: border-color 0.2s;
}

.rpt-settings:hover {
  border-color: var(--text-muted);
}

.rpt-settings-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.rpt-settings-title {
  font-weight: 600;
  font-size: 0.92rem;
}

.rpt-settings-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rpt-mode-select {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.82rem;
  font-family: inherit;
}

/* Filter tabs */
.rpt-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}

.rpt-filter {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}

.rpt-filter:hover {
  background: var(--surface);
  color: var(--text);
}

.rpt-filter.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.rpt-filter-count {
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 4px;
}

.rpt-filter.active .rpt-filter-count {
  opacity: 0.8;
}

/* Issue category groups */
.sh-issue-group {
  margin-bottom: 20px;
}

.sh-issue-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sh-issue-group-header:hover {
  border-color: var(--text-muted);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.sh-issue-group-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.sh-issue-group-label {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  letter-spacing: -0.02em;
}

.sh-issue-group-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-deep, #f4f4f5);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: -0.01em;
}

.sh-issue-group-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding-top: 8px;
  transition: max-height 0.35s var(--ease-out, ease-out);
}
.sh-issue-group-collapsed {
  max-height: 0 !important;
  padding-top: 0;
}
.sh-cat-chevron {
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Per-category mini progress bar */
.sh-cat-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  margin-top: 4px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
}
.sh-cat-progress-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 140px;
}
.sh-cat-progress-track {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.sh-cat-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violet-600, #7c3aed), #a78bfa);
  border-radius: 2px;
  width: 0%;
  transition: width 0.35s ease;
}
.sh-cat-progress-fill.done {
  background: linear-gradient(90deg, #16a34a, #22c55e);
}

/* Issue type tag chip */
.rpt-issue-type-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(124, 58, 237, 0.08);
  color: var(--violet-600, #7c3aed);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Per-category fix button */
.sh-cat-fix-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 7px;
  border: none;
  color: #fff;
  background: linear-gradient(135deg, var(--violet-600, #7c3aed), var(--violet-500, #8b5cf6));
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  box-shadow: 0 1px 4px rgba(124, 58, 237, 0.25);
}
.sh-cat-fix-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.3);
}
.sh-cat-fix-btn.sh-cat-fix-done {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 1px 4px rgba(22, 163, 74, 0.25);
}
.sh-cat-fix-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Issues list */
.rpt-issues {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rpt-issue {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  animation: sh-fadeIn 0.3s ease both;
}

.rpt-issue:hover {
  border-color: var(--text-muted);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

@keyframes sh-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Site switch overlay animations */
@keyframes shOverlayIn {
  from { opacity: 0; }
  to { opacity: 0.85; }
}
@keyframes shSpin {
  to { transform: rotate(360deg); }
}

.rpt-issue-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.rpt-issue-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.rpt-severity {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.rpt-severity.critical { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.rpt-severity.warning  { background: rgba(234, 179, 8, 0.12); color: #eab308; }
.rpt-severity.info     { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }

.rpt-issue-desc {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.rpt-issue-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.rpt-btn-fix {
  padding: 7px 18px;
  border-radius: 8px;
  border: none;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: var(--violet-600, #7C3AED);
  color: #fff;
  transition: opacity 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 4px rgba(124, 58, 237, 0.25);
}

.rpt-btn-fix:hover { opacity: 0.92; transform: translateY(-1px); }
.rpt-btn-fix:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.rpt-btn-ignore {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  transition: background 0.2s;
}

.rpt-btn-ignore:hover { background: var(--bg); }

.rpt-issue-resource {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.rpt-issue-resource a {
  color: var(--accent);
  text-decoration: none;
}

.rpt-issue-resource a:hover {
  text-decoration: underline;
}

/* Values preview — before/after with arrow */
.rpt-values {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 4px;
}

.rpt-val {
  font-size: 0.82rem;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  word-break: break-word;
  flex: 1;
  min-width: 0;
}

.rpt-val-label {
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 6px;
}

.rpt-val-text {
  display: block;
  line-height: 1.45;
  color: var(--text);
}

.rpt-val.current { border-left: 3px solid #ef4444; }
.rpt-val.current .rpt-val-label { color: #ef4444; }
.rpt-val.current .rpt-val-text { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(239,68,68,0.3); }

.rpt-val.fix { border-left: 3px solid #22c55e; }
.rpt-val.fix .rpt-val-label { color: #22c55e; }

.rpt-val-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  color: var(--text-muted);
  flex-shrink: 0;
  opacity: 0.5;
}

/* Fixed issue state */
.rpt-issue-fixed {
  border-color: rgba(34, 197, 94, 0.3);
  background: color-mix(in srgb, #22c55e 3%, var(--surface));
}

.rpt-issue-fixed .rpt-val.current .rpt-val-text {
  text-decoration: line-through;
  text-decoration-color: rgba(239,68,68,0.4);
}

.rpt-issue-fixed-badge {
  font-size: 0.8rem;
  font-weight: 600;
  color: #a78bfa;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(139, 92, 246, 0.1);
  flex-shrink: 0;
}
.rpt-issue-verified-badge {
  font-size: 0.8rem;
  font-weight: 600;
  color: #22c55e;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.1);
  flex-shrink: 0;
}
.rpt-dev-fix-label {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 2px 8px;
  margin-left: 8px;
  white-space: nowrap;
}

/* Fix Guide button + panel */
.rpt-fix-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--violet-400, #a78bfa);
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 6px;
  padding: 4px 10px;
  margin-left: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
.rpt-fix-guide-btn:hover {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.4);
}
html.light .rpt-fix-guide-btn {
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.2);
}
html.light .rpt-fix-guide-btn:hover {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.35);
}

.rpt-fix-guide {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  margin-top: 0;
}
.rpt-fix-guide.open {
  margin-top: 12px;
}

.rpt-fix-guide-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.rpt-fix-guide-why {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(139, 92, 246, 0.06);
  border-left: 3px solid var(--violet-400, #a78bfa);
  border-radius: 0 6px 6px 0;
}
html.light .rpt-fix-guide-why {
  background: rgba(124, 58, 237, 0.05);
}

.rpt-fix-guide-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.rpt-fix-guide-steps {
  margin: 0 0 14px 18px;
  padding: 0;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.7;
}
.rpt-fix-guide-steps li {
  margin-bottom: 4px;
}

.rpt-fix-guide-code-wrap {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}

.rpt-fix-guide-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--bg-elevated, var(--bg-card));
  border-bottom: 1px solid var(--border-default);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
html.light .rpt-fix-guide-code-header {
  background: #f4f4f5;
}

.rpt-fix-guide-copy {
  font-size: 10px;
  font-weight: 600;
  color: var(--violet-400, #a78bfa);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}
.rpt-fix-guide-copy:hover {
  background: rgba(139, 92, 246, 0.12);
}

.rpt-fix-guide-code {
  margin: 0;
  padding: 12px 14px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-deep, #09090b);
  overflow-x: auto;
  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
}
html.light .rpt-fix-guide-code {
  background: #fafafa;
  color: #18181b;
}

.rpt-fix-guide-wp-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
  padding: 10px 12px;
  background: rgba(33, 117, 155, 0.08);
  border-radius: 6px;
  margin-bottom: 12px;
}
html.light .rpt-fix-guide-wp-tip {
  background: rgba(33, 117, 155, 0.06);
}

.rpt-fix-guide-wp-icon {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  color: #21759b;
  background: rgba(33, 117, 155, 0.15);
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.03em;
}

.rpt-fix-guide-tool-link {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--violet-400, #a78bfa);
  text-decoration: none;
  padding: 4px 0;
}
.rpt-fix-guide-tool-link:hover {
  text-decoration: underline;
}

/* Fix guide gated (free plan) */
.rpt-fix-guide-gated {
  padding: 14px 16px;
  background: rgba(139, 92, 246, 0.05);
  border: 1px dashed rgba(139, 92, 246, 0.25);
  border-radius: 8px;
}
html.light .rpt-fix-guide-gated {
  background: rgba(124, 58, 237, 0.04);
  border-color: rgba(124, 58, 237, 0.2);
}

.rpt-fix-guide-lock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.rpt-fix-guide-lock-row svg {
  color: var(--violet-400, #a78bfa);
  flex-shrink: 0;
}

.rpt-fix-guide-lock-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 10px;
}

.rpt-fix-guide-upgrade {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--violet-600, #7c3aed);
  padding: 6px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s;
}
.rpt-fix-guide-upgrade:hover {
  background: var(--violet-500, #8b5cf6);
}

/* Auto-fix description */
.sh-autofix-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sh-autofix-desc {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  opacity: 0.8;
}

/* Issues empty state */
.sh-issues-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 48px 0;
  font-size: 0.92rem;
}

/* Fixed filter tab */
.rpt-filter[data-filter="fixed"].active {
  background: #22c55e;
  border-color: #22c55e;
}

/* ---- Scanning Progress UI ---- */
.sh-scan {
  padding: 40px 20px 60px;
  display: flex;
  justify-content: center;
}

.sh-scan-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px 32px;
  overflow: hidden;
}

.sh-scan-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
  pointer-events: none;
  animation: sh-scan-pulse 3s ease-in-out infinite;
}

@keyframes sh-scan-pulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.15); }
}

.sh-scan-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}

.sh-scan-ring-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.sh-scan-ring-svg {
  width: 80px;
  height: 80px;
}

.sh-scan-ring-arc {
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.4));
}

.sh-scan-ring-pct {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
}

.sh-scan-info h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
}

.sh-scan-info p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  transition: opacity 0.3s;
}

/* Progress bar */
.sh-scan-bar-wrap {
  margin-bottom: 24px;
}

.sh-scan-bar-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}

.sh-scan-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), #a78bfa);
  transition: width 0.4s ease;
  position: relative;
}

.sh-scan-bar-fill::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
  animation: sh-bar-shimmer 1.5s ease-in-out infinite;
}

@keyframes sh-bar-shimmer {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Scan steps */
.sh-scan-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sh-scan-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  opacity: 0.35;
  transition: opacity 0.4s, background 0.3s, transform 0.3s;
}

.sh-scan-step.active {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transform: translateX(4px);
}

.sh-scan-step.done {
  opacity: 0.65;
}

.sh-scan-step-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.3s, color 0.3s;
}

.sh-scan-step.active .sh-scan-step-icon {
  background: var(--accent);
  color: #fff;
}

.sh-scan-step.done .sh-scan-step-icon {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.sh-scan-step-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  flex: 1;
  transition: color 0.3s;
}

.sh-scan-step.active .sh-scan-step-label {
  color: var(--text);
  font-weight: 500;
}

.sh-scan-step-check {
  color: #22c55e;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s, transform 0.3s;
}

.sh-scan-step.done .sh-scan-step-check {
  opacity: 1;
  transform: scale(1);
}

/* Empty state */
.rpt-empty {
  display: flex;
  justify-content: center;
  padding: 60px 20px;
}

.rpt-empty-inner {
  text-align: center;
  max-width: 460px;
  background: rgba(139,92,246,0.06);
  border: 1px solid rgba(139,92,246,0.18);
  border-radius: 20px;
  padding: 48px 40px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

html.light .rpt-empty-inner {
  background: linear-gradient(135deg, #f5f0ff, #ede5ff);
  border-color: rgba(139,92,246,0.18);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(139,92,246,0.06);
}

.rpt-empty-icon {
  width: 72px; height: 72px; margin: 0 auto 20px;
  background: rgba(139,92,246,0.1);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  color: #8b5cf6;
}

html.light .rpt-empty-icon {
  background: rgba(139,92,246,0.08);
}

.rpt-empty h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}

.rpt-empty p {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0 0 24px;
  line-height: 1.6;
}

.rpt-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: 0 4px 14px rgba(139,92,246,0.3);
  transition: all 0.2s;
}

.rpt-empty-cta:hover {
  background: linear-gradient(135deg, #8b5cf6, #c4b5fd);
  box-shadow: 0 6px 20px rgba(139,92,246,0.4);
  transform: translateY(-1px);
  color: #fff !important;
}

/* Reports responsive */
@media (max-width: 900px) {
  .rpt-score-row {
    grid-template-columns: 1fr;
  }

  .rpt-score-card {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .rpt-top {
    flex-direction: column;
  }

  .rpt-scan-controls {
    width: 100%;
    flex-direction: column;
  }

  .rpt-select-wrap { width: 100%; }
  .rpt-select-wrap select { width: 100%; min-width: unset; }
  .rpt-scan-btn { width: 100%; justify-content: center; }

  .rpt-stat-cards {
    grid-template-columns: 1fr;
  }

  .rpt-values {
    flex-direction: column;
    gap: 0;
  }

  .rpt-val-arrow {
    transform: rotate(90deg);
    padding: 4px 0;
  }

  .rpt-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .rpt-issue-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .rpt-issue-actions {
    width: 100%;
  }

  .rpt-issue-actions button {
    flex: 1;
    text-align: center;
  }

  .rpt-settings {
    flex-direction: column;
    align-items: stretch;
  }

  .sh-autofix-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}


/* ========================================
   Site Health — Unified (Schedule, Health Checks, Trend, Bulk, History)
   ======================================== */

/* Settings row: side by side on desktop */
.sh-settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.sh-settings-row .rpt-settings {
  margin-bottom: 0;
}

/* Schedule card */
.sh-schedule-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  transition: border-color 0.2s;
}

.sh-schedule-card:hover {
  border-color: var(--text-muted);
}

.sh-schedule-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sh-schedule-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.sh-plan-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--violet-600);
  color: #fff;
}

.sh-schedule-body {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.sh-schedule-fields {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.sh-field {
  flex: 1;
}

.sh-field-narrow {
  flex: 0 0 140px;
}

.sh-field-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.sh-field-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
}

.sh-field-input:focus {
  outline: none;
  border-color: var(--accent);
}

.sh-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
}

.sh-checkbox-row input[type="checkbox"] {
  accent-color: var(--accent);
}

.sh-gated {
  opacity: 0.55;
  pointer-events: none;
  position: relative;
}

.sh-gated .sh-plan-badge {
  pointer-events: auto;
  opacity: 1;
}

/* AI Visibility section */
.sh-ai-visibility {
  margin-bottom: 28px;
}
.sh-ai-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.sh-ai-stat {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-default, #e4e4e7);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.sh-ai-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.sh-ai-stat-label {
  font-size: 0.72rem;
  color: var(--text-muted, #a1a1aa);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 6px;
}
.sh-ai-level {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.sh-ai-level-strong { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.sh-ai-level-growing { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.sh-ai-level-low { background: rgba(234, 179, 8, 0.12); color: #eab308; }
.sh-ai-level-none { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.sh-ai-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.sh-ai-table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted, #a1a1aa);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-default, #e4e4e7);
}
.sh-ai-table td {
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-default, #e4e4e7) 50%, transparent);
  color: var(--text-primary, #18181b);
}
.sh-ai-table tr:last-child td { border-bottom: none; }
.sh-ai-teaser {
  background: var(--bg-card, #ffffff);
  border: 1px dashed var(--border-default, #e4e4e7);
  border-radius: 10px;
  padding: 16px 20px;
  text-align: center;
  margin-top: 12px;
}
.sh-ai-teaser-text {
  font-size: 0.82rem;
  color: var(--text-muted, #a1a1aa);
  margin-bottom: 10px;
}
.sh-ai-teaser-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: #7c3aed;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.sh-ai-teaser-btn:hover { background: #6d28d9; }
.sh-ai-mentions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.sh-ai-mention-chip {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 16px;
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}
@media (max-width: 768px) {
  .sh-ai-stats { grid-template-columns: 1fr; gap: 8px; }
  .sh-ai-stat { padding: 12px; }
}

/* Health checks section */
.sh-health-checks {
  margin-bottom: 24px;
}

.sh-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 14px;
}

.sh-section-header.clickable {
  cursor: pointer;
  user-select: none;
}

.sh-chevron {
  margin-left: auto;
  transition: transform 0.2s;
  color: var(--text-muted);
}

/* Health Checks — Accordion Panels */
.sh-checks-accordion {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sh-accordion-panel {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color 0.2s, box-shadow 0.2s;
  animation: sh-fadeIn 0.3s ease both;
}

.sh-accordion-panel:hover {
  border-color: color-mix(in srgb, var(--text-muted) 30%, transparent);
}

.sh-accordion-panel.open {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.sh-accordion-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  position: relative;
}

.sh-accordion-trigger::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  transition: background 0.2s;
}

.sh-accordion-panel.status-ok .sh-accordion-trigger::before { background: #22c55e; }
.sh-accordion-panel.status-warning .sh-accordion-trigger::before { background: #eab308; }
.sh-accordion-panel.status-error .sh-accordion-trigger::before { background: #ef4444; }

.sh-accordion-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sh-accordion-panel.status-ok .sh-accordion-icon { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.sh-accordion-panel.status-warning .sh-accordion-icon { background: rgba(234, 179, 8, 0.1); color: #eab308; }
.sh-accordion-panel.status-error .sh-accordion-icon { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.sh-accordion-info {
  flex: 1;
  min-width: 0;
}

.sh-accordion-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 2px;
}

.sh-accordion-summary {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sh-accordion-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sh-accordion-badge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.sh-abadge-ok { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.sh-abadge-warning { background: rgba(234, 179, 8, 0.1); color: #eab308; }
.sh-abadge-error { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.sh-accordion-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.sh-accordion-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.25s var(--ease-out);
}

.sh-accordion-panel.open .sh-accordion-chevron {
  transform: rotate(180deg);
}

.sh-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease-out);
}

.sh-accordion-panel.open .sh-accordion-body {
  max-height: 600px;
}

.sh-accordion-content {
  padding: 0 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid var(--border);
  margin-top: 0;
  padding-top: 12px;
}

.sh-finding {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8rem;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg);
  border-left: 3px solid transparent;
}

.sh-finding-ok { border-left-color: #22c55e; }
.sh-finding-warning { border-left-color: #eab308; }
.sh-finding-error { border-left-color: #ef4444; }

.sh-finding-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 5px;
}

.sh-finding-ok .sh-finding-dot { background: #22c55e; }
.sh-finding-warning .sh-finding-dot { background: #eab308; }
.sh-finding-error .sh-finding-dot { background: #ef4444; }

.sh-finding-text {
  flex: 1;
  min-width: 0;
}

.sh-finding-check {
  font-weight: 600;
  color: var(--text);
  margin-right: 6px;
}

.sh-finding-msg {
  color: var(--text-muted);
  word-break: break-word;
}

/* Legacy grid class — keep for transition */
.sh-checks-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Bulk actions bar */
.sh-bulk-bar {
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

.sh-bulk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sh-bulk-left {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.sh-bulk-right {
  display: flex;
  gap: 8px;
}

/* Bulk fix progress */
.sh-bulk-progress {
  margin-top: 14px;
}

.sh-bulk-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.sh-bulk-progress-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.sh-bulk-progress-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.sh-bulk-progress-track {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
  position: relative;
}

.sh-bulk-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--violet-600), var(--violet-400));
  width: 0%;
  transition: width 0.4s var(--ease-out);
  position: relative;
}

.sh-bulk-progress-fill::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: sh-shimmer 1.5s infinite;
}

@keyframes sh-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.sh-bulk-progress.done .sh-bulk-progress-fill {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.sh-bulk-progress.done .sh-bulk-progress-fill::after {
  animation: none;
}

.sh-bulk-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s;
}

.sh-bulk-btn.primary {
  background: var(--violet-600, #7C3AED);
  color: #fff;
  box-shadow: 0 1px 4px rgba(124, 58, 237, 0.25);
}

.sh-bulk-btn.primary:hover { opacity: 0.9; }
.sh-bulk-btn.primary:disabled { opacity: 0.4; cursor: not-allowed; }

.sh-bulk-btn.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.sh-bulk-btn.secondary:hover { background: var(--bg); }
.sh-bulk-btn.secondary:disabled { opacity: 0.4; cursor: not-allowed; }

/* Trend chart */
.sh-trend {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 24px;
}

.sh-trend-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}

.sh-trend-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}

.sh-trend-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.sh-trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100px;
}

.sh-trend-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.sh-trend-bar {
  width: 100%;
  max-width: 40px;
  border-radius: 4px 4px 0 0;
  transition: height 0.6s ease;
  min-height: 4px;
}

.sh-bar-good { background: #22c55e; }
.sh-bar-warn { background: #eab308; }
.sh-bar-bad { background: #ef4444; }

.sh-trend-bar {
  position: relative;
  cursor: default;
}

.sh-trend-score {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.sh-trend-col:hover .sh-trend-score {
  opacity: 1;
}

.sh-trend-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Report history */
.sh-history {
  margin-top: 32px;
}

.sh-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-bottom: 40px;
}

/* New card-style history rows */
.sh-history-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.sh-history-card:hover {
  border-color: var(--violet-600, #7c3aed);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.08);
}

.sh-hcard-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}
.sh-hcard-latest {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--violet-600, #7c3aed);
  background: rgba(124, 58, 237, 0.08);
  border-radius: 4px;
  padding: 1px 6px;
  display: inline-block;
  margin-bottom: 4px;
}
.sh-hcard-date {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}
.sh-hcard-time {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.sh-hcard-stats {
  display: flex;
  gap: 12px;
  flex: 1;
}
.sh-hcard-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  min-width: 58px;
}
.sh-hcard-stat-num {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
}
.sh-hcard-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sh-hcard-stat.critical .sh-hcard-stat-num { color: #ef4444; }
.sh-hcard-stat.warning .sh-hcard-stat-num { color: #f59e0b; }

.sh-hcard-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.sh-hcard-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--bg-deep);
  border: 2px solid var(--border);
}
.sh-hcard-score.good { border-color: #22c55e; }
.sh-hcard-score.warn { border-color: #f59e0b; }
.sh-hcard-score.bad { border-color: #ef4444; }
.sh-hcard-score-num {
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
  color: var(--text-primary);
}
.sh-hcard-score.good .sh-hcard-score-num { color: #22c55e; }
.sh-hcard-score.warn .sh-hcard-score-num { color: #f59e0b; }
.sh-hcard-score.bad .sh-hcard-score-num { color: #ef4444; }
.sh-hcard-score-lbl {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.sh-hcard-pdf-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sh-hcard-pdf-btn:hover {
  background: var(--violet-600, #7c3aed);
  color: #fff;
  border-color: var(--violet-600, #7c3aed);
}

/* PDF button on score card */
.rpt-pdf-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rpt-pdf-btn:hover {
  background: var(--violet-600, #7c3aed);
  color: #fff;
  border-color: var(--violet-600, #7c3aed);
}

.sh-score-good { color: #22c55e; }
.sh-score-warn { color: #eab308; }
.sh-score-bad { color: #ef4444; }

/* Responsive — site health unified */
@media (max-width: 900px) {
  .sh-settings-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sh-accordion-trigger {
    padding: 12px 14px;
    gap: 10px;
  }
  .sh-accordion-summary {
    display: none;
  }
  .sh-accordion-content {
    padding: 0 14px 14px;
  }
  .sh-schedule-fields {
    flex-direction: column;
  }
  .sh-field-narrow {
    flex: 1;
  }
  .sh-bulk-top {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .sh-bulk-right {
    justify-content: center;
  }
  .sh-history-card {
    flex-wrap: wrap;
    gap: 12px;
  }
  .sh-trend-chart {
    height: 80px;
  }
  .sh-issue-group-header {
    padding: 0 0 8px;
  }
}


/* ============================================================
   SITE HEALTH v2 — Hero Layout & Section Redesign
   ============================================================ */

/* Hero: score left, actions right */
.sh-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  margin-bottom: 28px;
  align-items: start;
}

.sh-hero-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* Stats: 3 columns in hero */
.sh-hero .rpt-stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 0;
}

/* Score card: tighter in hero */
.sh-hero .rpt-score-card {
  padding: 24px 20px;
  min-width: unset;
}

/* Bulk bar: no extra margin when inside hero */
.sh-hero .sh-bulk-bar {
  margin-bottom: 0;
}

/* Auto-fix strip: compact horizontal bar */
.sh-autofix-strip {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 12px 16px !important;
  gap: 0 !important;
}

.sh-autofix-strip-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.sh-autofix-strip-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.sh-autofix-strip-desc {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sh-autofix-strip-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Trend section: standalone full-width below health checks */
.sh-trend {
  margin-top: 24px;
  margin-bottom: 0;
}

/* Health checks section: below issues, above bottom row */
.sh-health-checks {
  margin-top: 28px;
}

/* ---- Responsive hero ---- */
@media (max-width: 960px) {
  .sh-hero {
    grid-template-columns: 1fr;
  }
  .sh-hero .rpt-score-card {
    display: grid;
    grid-template-columns: auto 1fr;
    text-align: left;
    gap: 16px;
    align-items: center;
  }
  .sh-hero .rpt-score-ring {
    margin: 0;
  }
  .sh-hero .rpt-score-meta {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .sh-autofix-strip-desc {
    display: none;
  }
  .sh-hcard-stats {
    display: none;
  }
  .sh-hero .rpt-score-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .sh-hero .rpt-score-ring {
    margin: 0 auto;
  }
  .sh-hero .rpt-score-meta {
    justify-content: center;
  }
}

/* Dark/light theme transition animation */
html {
  transition: none;
}

html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background 0.5s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease !important;
}

/* ==============================================
   Admin Billing Dashboard
   ============================================== */
.billing-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.billing-cards-secondary {
  grid-template-columns: repeat(3, 1fr);
}
.billing-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 20px;
  text-align: center;
}
.billing-card-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.billing-card-value {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
}
.billing-card.accent-red .billing-card-value {
  color: var(--error-color, #ef4444);
}
.billing-card.accent-green .billing-card-value {
  color: var(--success-color, #22c55e);
}

/* API Pricing Reference Strip */
.api-pricing-strip {
  display: flex;
  gap: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}
.api-pricing-item {
  flex: 1;
  padding: 14px 16px;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.api-pricing-item:last-child { border-right: none; }
.api-pricing-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.api-pricing-rate {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--violet-500, #8b5cf6);
}
.api-pricing-unit {
  font-size: 0.64rem;
  color: var(--text-muted);
}
html.light .api-pricing-strip { background: #fff; border-color: rgba(0,0,0,0.07); }
html.light .api-pricing-item { border-right-color: rgba(0,0,0,0.07); }

@media (max-width: 768px) {
  .api-pricing-strip { flex-wrap: wrap; }
  .api-pricing-item {
    flex: 1 1 50%;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
  .api-pricing-item:nth-child(odd) { border-right: 1px solid var(--border-color); }
  .api-pricing-item:nth-last-child(-n+1) { border-bottom: none; }
  html.light .api-pricing-item:nth-child(odd) { border-right-color: rgba(0,0,0,0.07); }
}

.plan-distribution {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.plan-dist-label {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-weight: 500;
}
.plan-dist-bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg-secondary, #1a1a2e);
}
.plan-dist-segment {
  transition: width 0.5s ease;
  min-width: 0;
}
.plan-dist-free { background: var(--text-muted, #6b7280); }
.plan-dist-pro { background: var(--accent-violet, #8b5cf6); }
.plan-dist-biz { background: var(--accent-gold, #f59e0b); }
.plan-dist-legend {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.plan-dist-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.plan-dist-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.plan-dist-dot.plan-dist-free { background: var(--text-muted, #6b7280); }
.plan-dist-dot.plan-dist-pro { background: var(--accent-violet, #8b5cf6); }
.plan-dist-dot.plan-dist-biz { background: var(--accent-gold, #f59e0b); }

.billing-trend {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.billing-trend-label {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-weight: 500;
}
.billing-trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
}
.trend-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.trend-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: 100%;
}
.trend-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: height 0.4s ease;
  cursor: default;
}
.trend-bar-revenue { background: var(--accent-violet, #8b5cf6); }
.trend-bar-cost { background: var(--error-color, #ef4444); opacity: 0.7; }
.trend-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: center;
}

.admin-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 8px 0 16px;
}

@media (max-width: 768px) {
  .billing-cards { grid-template-columns: repeat(2, 1fr); }
  .billing-cards-secondary { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .billing-cards, .billing-cards-secondary { grid-template-columns: 1fr 1fr; }
  .billing-card-value { font-size: 1.1rem; }
  .billing-trend-chart { height: 80px; }
}

/* ── Geogrid Rankings ─────────────────────────────────── */
.geo-grid-wrap {
  display: inline-block;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 14px;
  margin: 8px 0;
  max-width: 280px;
}
.geo-grid-header { margin-bottom: 10px; }
.geo-grid-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.geo-grid-kw {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.geo-grid {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}
.geo-grid-cell {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  cursor: default;
  transition: transform 0.1s;
}
.geo-grid-cell:hover { transform: scale(1.15); }
.geo-grid-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.67rem;
  color: var(--text-muted);
}
.geo-grid-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.geo-grid-date {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.7;
}

/* ── Sidebar Setup Progress ── */
.sidebar-setup {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.sidebar-setup-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.sidebar-setup-title {
  font-size: 0.72rem; font-weight: 600; color: var(--text-primary);
}
.sidebar-setup-count {
  font-size: 0.68rem; font-weight: 500; color: var(--violet-400, #a78bfa);
}
.sidebar-setup-bar {
  width: 100%; height: 4px; border-radius: 2px;
  background: var(--border, #333); overflow: hidden; margin-bottom: 8px;
}
.sidebar-setup-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--violet-500, #8b5cf6), var(--violet-400, #a78bfa));
  transition: width 0.4s ease;
}
.sidebar-setup-steps {
  display: flex; flex-direction: column; gap: 4px;
}
.sidebar-setup-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.72rem; color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}
.sidebar-setup-step:hover { color: var(--text-primary); }
html.light .sidebar-setup-step:hover { color: var(--text-primary) !important; }
.sidebar-setup-step.is-done { color: var(--text-muted); }
.sidebar-setup-step.is-done .sidebar-setup-check {
  background: var(--violet-500, #8b5cf6); border-color: var(--violet-500, #8b5cf6);
}
.sidebar-setup-check {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--border, #555);
  display: flex; align-items: center; justify-content: center;
}
.sidebar-setup-check svg {
  width: 8px; height: 8px; stroke: #fff; fill: none;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.sidebar-setup-dismiss {
  font-size: 0.68rem; color: var(--text-muted); cursor: pointer;
  background: none; border: none; padding: 4px 0; margin-top: 4px;
  transition: color 0.15s;
}
.sidebar-setup-dismiss:hover { color: var(--text-secondary); }