/* =================================================================
   MeowPlanet — Design System v3
   Direction: "the Apple / Linear / Perplexity of cat knowledge" — a
   premium, editorial-but-modern SaaS product feel. Warm orange as the
   primary brand/action color (energetic, friendly — a cat platform
   shouldn't feel clinical-cold), soft teal as a secondary accent for
   trust/health-positive signals, on a near-white canvas with large
   soft-shadowed rounded cards. Inter carries every type role at
   different weights/scales rather than pairing it with a separate
   display face — the same move Linear/Vercel/Stripe make.

   Signature element: the "vitals ring" — a small radial gauge used
   wherever the product already surfaces a numeric health score
   (Symptom Checker Emergency Score 1-10). See render_vitals_ring() in
   functions.php.
   ================================================================= */

:root {
  /* Color */
  --color-canvas:       #FAFAFA;
  --color-surface:      #FFFFFF;
  --color-ink:          #111827;
  --color-ink-soft:     #6B7280;
  --color-primary:      #FF7A00;
  --color-primary-dark: #E36A00;
  --color-primary-soft: #FFF1E0;
  --color-accent:       #14B8A6;
  --color-accent-dark:  #0F9488;
  --color-accent-soft:  #E3F8F5;
  --color-danger:       #EF4444;
  --color-danger-soft:  #FDECEC;
  --color-success:      #10B981;
  --color-success-soft: #E6F8F1;
  --color-border:       #ECEEF1;
  --color-border-strong:#DDE1E6;
  --color-ai-panel:     #1B1533;
  --color-ai-panel-soft:#2A2350;

  /* Legacy token aliases — kept so nothing referencing earlier token
     names anywhere in this file breaks; new rules use the tokens above. */
  --color-paper:        var(--color-canvas);
  --color-paper-raised: var(--color-surface);
  --color-pine:         var(--color-accent);
  --color-pine-dark:    var(--color-accent-dark);
  --color-gold:         var(--color-primary);
  --color-gold-soft:    var(--color-primary-soft);
  --color-brick:        var(--color-danger);

  /* Category tab colors (index-card accent) */
  --tab-health:      #14B8A6;
  --tab-nutrition:   #FF7A00;
  --tab-behavior:    #8B5CF6;
  --tab-emergency:   #EF4444;
  --tab-preventive:  #0EA5E9;
  --tab-senior:      #A16207;
  --tab-kitten:      #EC4899;

  /* Type — one face, every role, set with weight and scale */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --shadow-card: 0 1px 2px rgba(17,24,39,0.03), 0 8px 24px rgba(17,24,39,0.06);
  --shadow-card-hover: 0 4px 10px rgba(17,24,39,0.05), 0 20px 40px rgba(17,24,39,0.10);
  --shadow-float: 0 20px 50px rgba(17,24,39,0.14);

  --container-max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 700; }
h3 { font-size: 1.18rem; font-weight: 700; }
p  { margin: 0 0 1em; }
a  { color: var(--color-accent-dark); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--color-primary); }
code { font-family: var(--font-mono); background: var(--color-primary-soft); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.88em; }

/* Visible keyboard focus everywhere — never suppressed */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--color-ink);
  color: #fff; padding: 0.75em 1.25em; z-index: 100; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }

/* ---------------- Header / nav ---------------- */
.site-header {
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 50;
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 20px; }
.site-header__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, #FFA640 100%); color: #fff;
  font-family: var(--font-display); font-size: 0.92rem; font-weight: 800; letter-spacing: -0.02em;
  box-shadow: 0 6px 14px rgba(255,122,0,0.28);
}
.brand-mark--img { object-fit: cover; background: var(--color-border); box-shadow: none; }
.site-header__brandtext { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.28rem; color: var(--color-ink); letter-spacing: -0.02em; }
.brand-tagline { font-size: 0.72rem; color: var(--color-ink-soft); font-weight: 500; }

.primary-nav { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.primary-nav a {
  color: var(--color-ink); text-decoration: none; font-weight: 600; font-size: 0.89rem;
  padding: 9px 13px; border-radius: 9px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
}
.primary-nav a.nav-account { margin-left: 6px; padding-left: 13px; border-left: 1px solid var(--color-border); border-radius: 0; }
.primary-nav a.nav-icon-btn {
  padding: 9px; border-radius: 50%; color: var(--color-ink-soft); position: relative;
}
.primary-nav a.nav-icon-btn:hover { background: var(--color-border); color: var(--color-ink); }
.primary-nav a.nav-account--cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, #FF9838 100%); color: #fff;
  padding: 10px 22px; border-radius: 24px; border-left: none; font-weight: 700;
  box-shadow: 0 6px 16px rgba(255,122,0,0.28); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.primary-nav a.nav-account--cta:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255,122,0,0.34); }
.primary-nav a:hover:not(.nav-account--cta):not(.nav-icon-btn) { color: var(--color-primary-dark); background: var(--color-primary-soft); }
.primary-nav a[aria-current="page"]:not(.nav-account--cta) { color: var(--color-primary-dark); background: var(--color-primary-soft); }

/* Dropdown submenus — hover on desktop, tap-to-toggle on touch via aria-expanded */
.nav-item { position: relative; }
.nav-item__chevron { font-size: 0.6rem; opacity: 0.6; transition: transform 0.15s ease; }
.nav-item:hover .nav-item__chevron, .nav-item.is-open .nav-item__chevron { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-float); padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(6px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 60;
}
.nav-item:hover .nav-dropdown, .nav-item.is-open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a { display: block; padding: 10px 12px; border-radius: 10px; font-size: 0.87rem; font-weight: 500; color: var(--color-ink); }
.nav-dropdown a:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); }

.nav-toggle {
  display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav-toggle__bar { width: 22px; height: 2px; background: var(--color-ink); border-radius: 2px; }

@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    position: absolute; top: 76px; left: 0; right: 0; background: var(--color-surface);
    flex-direction: column; flex-wrap: nowrap; gap: 0; border-bottom: 1px solid var(--color-border);
    max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
  }
  .primary-nav.is-open { max-height: 70vh; overflow-y: auto; }
  .primary-nav a { padding: 14px 20px; border-bottom: 1px solid var(--color-border); width: 100%; border-radius: 0; }
  .primary-nav a.nav-account { margin-left: 0; padding-left: 20px; border-left: none; border-top: 2px solid var(--color-border-strong); }
  .primary-nav a.nav-account--cta { border-radius: 0; justify-content: center; }
  .nav-dropdown { position: static; box-shadow: none; border: none; opacity: 1; visibility: visible; transform: none; display: none; background: var(--color-canvas); }
  .nav-item.is-open .nav-dropdown { display: block; }
}

/* ---------------- Hero / index-card search ---------------- */
.hero {
  padding: 44px 0 0;
  background: var(--color-surface);
  overflow: hidden;
}
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-primary-dark); margin-bottom: 18px;
  background: var(--color-primary-soft); padding: 5px 11px; border-radius: 20px;
}
.hero p.hero__lede { max-width: 520px; font-size: 1.1rem; color: var(--color-ink-soft); }

.catalog-search {
  margin-top: 26px; max-width: 560px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  display: flex; align-items: stretch;
}
.catalog-search input[type="search"] {
  flex: 1; border: 0; background: transparent; padding: 17px 6px 17px 22px; font-size: 1rem;
  font-family: var(--font-body); color: var(--color-ink);
}
.catalog-search button {
  border: 0; background: linear-gradient(135deg, var(--color-primary) 0%, #FF9838 100%); color: #fff; padding: 0 30px; margin: 6px;
  font-weight: 700; cursor: pointer; border-radius: 999px;
  font-family: var(--font-body); transition: box-shadow 0.15s ease;
}
.catalog-search button:hover { box-shadow: 0 6px 16px rgba(255,122,0,0.32); }

.hero__quicklinks { display: flex; gap: 9px; margin-top: 20px; flex-wrap: wrap; align-items: center; }
.hero__quicklinks-label { font-size: 0.86rem; font-weight: 700; color: var(--color-ink); margin-right: 2px; }
.hero__quicklinks a {
  font-weight: 600; font-size: 0.85rem; text-decoration: none;
  padding: 7px 14px; border: 1.5px solid var(--color-border); border-radius: 20px;
  color: var(--color-ink-soft); background: var(--color-surface);
}
.hero__quicklinks a:hover { border-color: var(--color-primary); color: var(--color-primary-dark); background: var(--color-primary-soft); }

/* ---------------- Hero photo + floating stat card ----------------
   No licensed photography is bundled with this codebase — see
   docs/09_STYLE_GUIDE.md's "photography" note. This renders a tasteful
   gradient-and-icon placeholder in the exact position/proportions a
   real photo should occupy; drop a real image in as a background-image
   on .hero__photo (or swap for an <img>) when you have one licensed. */
.hero__photo-wrap { position: relative; padding: 20px 0 40px; }
.hero__photo {
  height: 420px; border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem; color: rgba(255,255,255,0.85);
  box-shadow: var(--shadow-float);
}
.hero__stat-card {
  position: absolute; top: 8px; right: 0; width: 216px;
  background: var(--color-surface); border-radius: var(--radius-md);
  box-shadow: var(--shadow-float); padding: 18px;
}
.hero__stat-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.hero__stat-row + .hero__stat-row { border-top: 1px solid var(--color-border); }
.hero__stat-icon { font-size: 1.3rem; flex-shrink: 0; width: 30px; text-align: center; }
.hero__stat-value { font-weight: 800; font-size: 1.05rem; line-height: 1.1; font-family: var(--font-display); }
.hero__stat-label { font-size: 0.74rem; color: var(--color-ink-soft); }
@media (max-width: 640px) { .hero__stat-card { position: static; width: auto; margin-top: -30px; } }

/* ---------------- Category dashboard ---------------- */
.category-dashboard { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; margin-top: 40px; }
@media (max-width: 1100px) { .category-dashboard { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .category-dashboard { grid-template-columns: repeat(2, 1fr); } }
.category-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 22px 16px; text-align: left; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-card); transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.category-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.category-card__icon {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; margin-bottom: 14px; color: #fff;
}
.category-card h3 { font-size: 0.98rem; margin-bottom: 4px; }
.category-card p { font-size: 0.8rem; color: var(--color-ink-soft); margin-bottom: 0; line-height: 1.4; }

/* ---------------- Disease cards (photo + category badge) ---------------- */
.disease-card-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 980px) { .disease-card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .disease-card-grid { grid-template-columns: repeat(2, 1fr); } }
.disease-card-v2 {
  display: block; text-decoration: none; color: inherit; background: var(--color-surface);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card);
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.disease-card-v2:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.disease-card-v2:hover .disease-card-v2__photo { transform: scale(1.05); }
.disease-card-v2__photo-wrap { position: relative; height: 120px; overflow: hidden; }
.disease-card-v2__photo {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; color: rgba(255,255,255,0.9); transition: transform 0.3s ease;
}
.disease-card-v2__badge {
  position: absolute; top: 10px; left: 10px; font-size: 0.66rem; font-weight: 700; color: #fff;
  padding: 4px 10px; border-radius: 20px; text-transform: capitalize; letter-spacing: 0.01em;
}
.disease-card-v2__body { padding: 14px 14px 16px; }
.disease-card-v2__body h3 { font-size: 0.94rem; margin-bottom: 6px; line-height: 1.3; }
.disease-card-v2__meta { font-size: 0.76rem; color: var(--color-ink-soft); display: flex; justify-content: space-between; }

/* ---------------- Ask Meow AI dark panel ---------------- */
.ai-panel {
  background: linear-gradient(155deg, var(--color-ai-panel) 0%, var(--color-ai-panel-soft) 100%);
  border-radius: var(--radius-lg); padding: 26px; color: #fff; height: 100%;
  display: flex; flex-direction: column; box-shadow: var(--shadow-float);
}
.ai-panel h2 { color: #fff; font-size: 1.3rem; margin-bottom: 2px; }
.ai-panel__subtitle { color: rgba(255,255,255,0.7); font-size: 0.88rem; margin-bottom: 20px; }
.ai-panel__bubble {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md); padding: 13px 16px; font-size: 0.88rem;
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: auto;
}
.ai-panel__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  order: 2;
}
.ai-panel__bubble-text { order: 1; }
.ai-panel__input-row {
  display: flex; gap: 8px; margin-top: 20px; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 5px 5px 5px 16px; align-items: center;
}
.ai-panel__input-row input {
  flex: 1; background: none; border: 0; color: #fff; font-size: 0.88rem; font-family: var(--font-body);
}
.ai-panel__input-row input::placeholder { color: rgba(255,255,255,0.45); }
.ai-panel__send {
  width: 34px; height: 34px; border-radius: 50%; border: 0; flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-primary), #FF9838); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.ai-panel__disclaimer { font-size: 0.7rem; color: rgba(255,255,255,0.4); margin-top: 12px; text-align: center; }

/* ---------------- Breed cards (photo + favorite icon) ---------------- */
.breed-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .breed-card-grid { grid-template-columns: repeat(2, 1fr); } }
.breed-card-v2 { display: block; text-decoration: none; color: inherit; position: relative; }
.breed-card-v2__photo {
  height: 170px; border-radius: var(--radius-md); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: rgba(255,255,255,0.9);
  box-shadow: var(--shadow-card); transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.breed-card-v2:hover .breed-card-v2__photo { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.breed-card-v2__fav {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.breed-card-v2__name { font-weight: 700; margin-top: 10px; font-size: 0.95rem; }
.breed-card-v2__meta { font-size: 0.78rem; color: var(--color-ink-soft); }

/* ---------------- Explore Diseases + AI panel split ---------------- */
.explore-diseases-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .explore-diseases-grid { grid-template-columns: 1fr; } }

/* ---------------- Section headings ---------------- */
.section { padding: 44px 0; }

.trust-badges { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 18px 0; opacity: 0.85; }
.trust-badges__img { height: 32px; width: auto; filter: grayscale(1); opacity: 0.7; }
.trust-badges__img:hover { filter: none; opacity: 1; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.section__head a.section__viewall { font-weight: 600; font-size: 0.9rem; white-space: nowrap; }

/* ---------------- Content cards (signature card treatment) ---------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }

.index-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-ink-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 20px 20px 18px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.index-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.index-card:hover h3 { color: var(--color-primary-dark); }

.index-card__tab {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; padding: 4px 9px; border-radius: 20px; margin-bottom: 12px;
}
.index-card h3 { margin-bottom: 8px; font-size: 1.08rem; }
.index-card p { color: var(--color-ink-soft); font-size: 0.93rem; margin-bottom: 0; }
.index-card__meta { margin-top: auto; padding-top: 14px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-ink-soft); letter-spacing: 0.02em; }

/* Category tab color assignment via data attribute set in PHP */
.index-card[data-cat="health"], .index-card[data-cat="preventive_care"] { border-top-color: var(--tab-health); }
.index-card[data-cat="health"] .index-card__tab, .index-card[data-cat="preventive_care"] .index-card__tab { background: var(--tab-health); }
.index-card[data-cat="nutrition"] { border-top-color: var(--tab-nutrition); }
.index-card[data-cat="nutrition"] .index-card__tab { background: var(--tab-nutrition); }
.index-card[data-cat="emergency_care"] { border-top-color: var(--tab-emergency); }
.index-card[data-cat="emergency_care"] .index-card__tab { background: var(--tab-emergency); }
.index-card[data-cat="senior_care"] { border-top-color: var(--tab-senior); }
.index-card[data-cat="senior_care"] .index-card__tab { background: var(--tab-senior); }
.index-card[data-cat="kitten_care"] { border-top-color: var(--tab-kitten); }
.index-card[data-cat="kitten_care"] .index-card__tab { background: var(--tab-kitten); }
.index-card:not([data-cat="health"]):not([data-cat="preventive_care"]):not([data-cat="nutrition"]):not([data-cat="emergency_care"]):not([data-cat="senior_care"]):not([data-cat="kitten_care"]) .index-card__tab { background: var(--color-ink-soft); }

/* Poison/toxin severity indicators (used on both card tabs and detail category tag) */
.index-card__tab.severity-deadly, .detail-category-tag.severity-deadly { background: #921C1C; }
.index-card__tab.severity-high, .detail-category-tab.severity-high, .detail-category-tag.severity-high { background: var(--color-danger); }
.index-card__tab.severity-medium, .detail-category-tag.severity-medium { background: var(--color-accent); }
.index-card__tab.severity-mild, .detail-category-tag.severity-mild { background: var(--tab-preventive); }

/* ---------------- Filter bar ---------------- */
.filter-bar {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  padding: 16px 0 26px; border-bottom: 1px solid var(--color-border); margin-bottom: 26px;
}
.filter-bar select, .filter-bar input[type="search"] {
  padding: 10px 14px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.95rem; background: var(--color-surface); color: var(--color-ink);
}
.filter-bar button {
  padding: 10px 18px; border: 0; border-radius: var(--radius-sm); background: var(--color-primary); color: #fff;
  font-weight: 700; cursor: pointer;
}
.filter-bar button:hover { background: var(--color-primary-dark); }
.filter-bar__count { margin-left: auto; font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-ink-soft); }

/* ---------------- Detail pages ---------------- */
.detail-header { padding: 36px 0 26px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.detail-header .breadcrumb { font-size: 0.85rem; margin-bottom: 14px; color: var(--color-ink-soft); }
.detail-header .breadcrumb a { color: var(--color-ink-soft); }

/* Uploaded content photos (breed/disease/food/adoption/lost-found/pet
   detail pages). Deliberately NOT using object-fit:cover with a fixed
   box here — that was cropping whichever dimension didn't match the
   box's own ratio (chopping the top/bottom off tall photos, the sides
   off wide ones), regardless of what was actually in the photo. Instead
   the image is shown at its own natural aspect ratio, only ever scaled
   DOWN to fit within max-width/max-height — never stretched, never
   cropped, whatever shape the original upload happens to be. */
.detail-photo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 420px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin-bottom: 20px;
  cursor: zoom-in;
  position: relative;
  z-index: 1;
  transition: max-width 0.22s ease, max-height 0.22s ease, box-shadow 0.22s ease, border-radius 0.22s ease;
}
/* On hover, let the image grow well past its resting size — up to most
   of the viewport — while staying governed by width:auto/height:auto
   above, so it keeps enlarging along its own real aspect ratio rather
   than being stretched into a fixed shape. The higher z-index plus the
   shadow is what makes it read as "popped out" above the surrounding
   page content rather than just a bigger inline image. */
.detail-photo:hover {
  max-width: min(90vw, 900px);
  max-height: 85vh;
  z-index: 500;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}
/* The round profile-photo variant (pet.php) is a deliberate avatar
   crop — that one keeping its circular crop at rest is correct, same
   as any profile picture anywhere. But it's still someone's uploaded
   photo underneath, and they may have framed it as landscape or
   portrait not knowing it'd end up in a circle — so hovering reveals
   the real, uncropped photo at a large size, same as every other
   detail photo, rather than just a bigger circle of the same crop. */
.detail-photo--round {
  width: 96px; height: 96px; max-width: 96px; max-height: 96px;
  border-radius: 50%; margin-bottom: 14px; object-fit: cover;
}
.detail-photo--round:hover {
  width: auto; height: auto;
  max-width: min(90vw, 900px); max-height: 85vh;
  border-radius: var(--radius-md);
  object-fit: contain;
}
.image-credit {
  font-size: 0.76rem; color: var(--color-ink-soft);
  margin: -12px 0 20px; max-width: 320px;
}
.image-credit a { color: var(--color-ink-soft); text-decoration: underline; }
.image-credit a:hover { color: var(--color-primary); }
.detail-category-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--color-primary); padding: 4px 11px; border-radius: 20px; margin-bottom: 14px;
}
.detail-body { padding: 36px 0 60px; }
.detail-body__grid { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 44px; align-items: start; }
@media (max-width: 900px) { .detail-body__grid { grid-template-columns: 1fr; } }

.field-block { margin-bottom: 28px; }
.field-block h2 { font-size: 1.12rem; border-bottom: 1px solid var(--color-border); padding-bottom: 8px; margin-bottom: 12px; }
.field-block p, .field-block li { color: var(--color-ink-soft); }
.field-block ul { padding-left: 20px; }

.emergency-callout {
  background: var(--color-danger-soft); border: 1.5px solid var(--color-danger); border-radius: var(--radius-md);
  padding: 16px 18px; margin-bottom: 28px;
}
.emergency-callout h2 { color: var(--color-danger); font-size: 1.02rem; margin-bottom: 6px; }
.emergency-callout p { color: #8C2E2E; margin-bottom: 0; }

.detail-sidebar { position: sticky; top: 84px; }
.detail-sidebar .sidebar-box {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 18px; margin-bottom: 16px;
}
.detail-sidebar .sidebar-box h2 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-mono); font-weight: 500; margin-bottom: 10px; color: var(--color-ink-soft); }
.detail-sidebar dl { margin: 0; }
.detail-sidebar dt { font-weight: 700; font-size: 0.82rem; color: var(--color-ink-soft); margin-top: 10px; }
.detail-sidebar dd { margin: 2px 0 0; font-size: 0.92rem; }

.disclaimer-box {
  background: #FFF3EC; border-radius: var(--radius-md); padding: 14px 16px; font-size: 0.85rem; color: #7A3A1E;
}

/* ---------------- Country info table ---------------- */
.country-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.9rem; }
.country-table th, .country-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--color-border); }
.country-table th { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-soft); }

/* ---------------- FAQ ---------------- */
.faq-item { border-bottom: 1px solid var(--color-border); padding: 14px 0; }
.faq-item h3 { font-size: 1rem; margin-bottom: 6px; }
.faq-item p { color: var(--color-ink-soft); margin-bottom: 0; }

/* ---------------- Breed stat grid ---------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 20px 0; }
.stat-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px 14px; }
.stat-tile__label { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-soft); }
.stat-tile__value { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; margin-top: 4px; color: var(--color-primary-dark); }

/* ---------------- Pagination ---------------- */
.pagination { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 34px; }
.pagination__link {
  padding: 8px 13px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  text-decoration: none; font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-ink-soft);
}
.pagination__link:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.pagination__link--current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagination__ellipsis { padding: 8px 4px; color: var(--color-ink-soft); }

/* ---------------- Footer ---------------- */
.site-footer { background: #0B1B24; color: #C7D3D9; margin-top: 56px; position: relative; }
.site-footer__accent { height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary)); }
.site-footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 32px; padding: 48px 0 32px; }
@media (max-width: 980px) { .site-footer__inner { grid-template-columns: 1fr 1fr 1fr; } .site-footer__brand-col { grid-column: 1 / -1; } }
@media (max-width: 620px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } .site-footer__brand-col { grid-column: 1 / -1; } }
.site-footer h2 {
  color: #fff; font-size: 0.82rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 500; display: flex; align-items: center; gap: 7px; margin-bottom: 14px;
}
.site-footer h2 svg { color: var(--color-primary); flex-shrink: 0; }
.site-footer a { color: #A8BAC2; text-decoration: none; }
.site-footer a:hover { color: #FFB49B; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; font-size: 0.88rem; }
.site-footer__disclaimer { font-size: 0.84rem; color: #91A3AB; line-height: 1.6; }
.site-footer__bottom { border-top: 1px solid #1E323C; padding: 18px 0; font-size: 0.82rem; color: #6E828B; }

.site-footer__brand-col p { font-size: 0.9rem; color: #9DAFB8; line-height: 1.6; margin: 14px 0 20px; max-width: 260px; }
.site-footer__brand-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.site-footer__brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: #fff; letter-spacing: -0.01em; }
.site-footer__stats { display: flex; gap: 22px; }
.site-footer__stats div { display: flex; flex-direction: column; }
.site-footer__stats strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--color-accent); }
.site-footer__stats span { font-size: 0.68rem; color: #7D909A; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; }

/* ---------------- Forms (auth, account, forum, admin) ---------------- */
.auth-page { display: flex; justify-content: center; }
.auth-card {
  width: 100%; max-width: 420px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: 32px;
  border-top: 3px solid var(--color-primary);
}

.content-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: 32px;
}
.content-card h2 { margin-top: 0; }
.content-card ul { padding-left: 20px; }
.content-card ul li { margin-bottom: 8px; }
.auth-switch { margin-top: 18px; text-align: center; font-size: 0.92rem; }

/* Admin content-image manager thumbnails (admin/content-images.php).
   A management grid genuinely benefits from a uniform cell size at
   REST, so cards line up for scanning — that part is intentional and
   different from the public detail-photo treatment above. But the
   crop itself was hiding real content (the same complaint as the
   public pages, just in a smaller box), so hovering here reveals the
   full, uncropped upload at a large size, exactly like every other
   uploaded photo on the site — an admin checking what got uploaded
   shouldn't have to open the live page just to see the whole picture. */
.admin-thumb-wrap { position: relative; margin-bottom: 10px; }
.admin-thumb {
  width: 100%; height: 120px; object-fit: cover;
  border-radius: var(--radius-sm); display: block;
  cursor: zoom-in; position: relative; z-index: 1;
  transition: max-width 0.2s ease, max-height 0.2s ease, width 0.2s ease, height 0.2s ease, box-shadow 0.2s ease, object-fit 0s 0.2s;
}
.admin-thumb:hover {
  width: auto; height: auto; object-fit: contain;
  max-width: min(70vw, 640px); max-height: 70vh;
  z-index: 500; background: var(--color-surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
  transition: max-width 0.2s ease, max-height 0.2s ease, width 0.2s ease, height 0.2s ease, box-shadow 0.2s ease;
}
.admin-thumb-empty {
  width: 100%; height: 120px; border-radius: var(--radius-sm); margin-bottom: 10px;
  background: var(--color-border); display: flex; align-items: center; justify-content: center;
  color: var(--color-ink-soft); font-size: 0.8rem;
}
.admin-thumb-card { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.admin-thumb-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--color-ink-soft); font-size: 0.82rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 16px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-ink); font-weight: 600; font-size: 0.92rem; text-decoration: none;
  box-sizing: border-box; transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-google:hover { background: #F7F9FA; color: var(--color-ink); border-color: var(--color-ink-soft); }

.share-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

form label { display: block; font-weight: 600; font-size: 0.85rem; margin: 16px 0 6px; color: var(--color-ink); }
form label:first-of-type { margin-top: 0; }
form input[type="text"], form input[type="email"], form input[type="password"],
form input[type="date"], form input[type="number"], form input[type="url"],
form select, form textarea {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.95rem; background: var(--color-surface); color: var(--color-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
form input:focus, form select:focus, form textarea:focus {
  border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); outline: none;
}
form textarea { min-height: 110px; resize: vertical; }
form input[type="file"] { margin-top: 4px; font-size: 0.9rem; }
.field-hint { font-size: 0.8rem; color: var(--color-ink-soft); margin: 4px 0 0; }

.btn-primary {
  display: inline-block; margin-top: 22px; padding: 12px 22px; border: 0; border-radius: var(--radius-sm);
  background: var(--color-primary); color: #fff; font-weight: 700; font-size: 0.95rem; cursor: pointer;
  font-family: var(--font-body); text-decoration: none; transition: background 0.15s ease, transform 0.1s ease;
}
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary {
  display: inline-block; margin-top: 22px; margin-left: 10px; padding: 12px 22px; border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font-weight: 700;
  font-size: 0.95rem; cursor: pointer; font-family: var(--font-body); text-decoration: none;
}
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.btn-danger { background: var(--color-danger); color: #fff; border: 0; }
.btn-danger:hover { background: #A72F2F; color: #fff; }
.btn-small { padding: 6px 14px; font-size: 0.85rem; margin-top: 0; }
.btn-accent { background: var(--color-accent); color: #fff; }
.btn-accent:hover { background: var(--color-accent-dark); color: #fff; }

.form-errors {
  background: var(--color-danger-soft); border: 1.5px solid var(--color-danger); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 18px;
}
.form-errors ul { margin: 0; padding-left: 18px; color: #8C2E2E; }
.form-success {
  background: var(--color-primary-soft); border: 1.5px solid var(--color-primary); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 18px; color: var(--color-primary-dark);
}

/* ---------------- Dashboard / account pages ---------------- */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; }
.pet-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: 20px; text-decoration: none; color: inherit; display: block;
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.pet-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.pet-card h3 { margin-bottom: 6px; }
.pet-card p { color: var(--color-ink-soft); font-size: 0.9rem; margin-bottom: 0; }

.record-row, .reminder-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  margin-bottom: 10px; background: var(--color-surface);
}
.reminder-row.is-overdue { border-color: var(--color-danger); background: var(--color-danger-soft); }
.reminder-row.is-completed { opacity: 0.6; }
.record-row__meta, .reminder-row__meta { font-size: 0.82rem; color: var(--color-ink-soft); }

/* ---------------- Forum ---------------- */
.thread-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 16px; border-bottom: 1px solid var(--color-border); text-decoration: none; color: inherit;
}
.thread-row:hover { background: var(--color-surface); }
.thread-row__meta { font-size: 0.82rem; color: var(--color-ink-soft); white-space: nowrap; }
.forum-post {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px; margin-bottom: 16px;
  background: var(--color-surface);
}
.forum-post__author { font-weight: 700; font-size: 0.88rem; margin-bottom: 8px; }
.forum-post__body { white-space: pre-wrap; }
.forum-post__meta { font-size: 0.78rem; color: var(--color-ink-soft); margin-top: 10px; }

/* ---------------- AI assistant chat ---------------- */
.chat-window { max-width: 760px; margin: 0 auto; }
.chat-message { margin-bottom: 16px; padding: 14px 16px; border-radius: var(--radius-md); }
.chat-message--user { background: var(--color-primary-soft); margin-left: 15%; }
.chat-message--assistant { background: var(--color-surface); border: 1px solid var(--color-border); margin-right: 15%; }
.chat-message__role { font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-soft); margin-bottom: 6px; }
.chat-input-row { display: flex; gap: 10px; margin-top: 20px; }
.chat-input-row textarea { flex: 1; min-height: 50px; }

/* ---------------- Status badges ---------------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; }
.badge-available, .badge-open { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge-pending { background: #FFEBDD; color: #8A4413; }
.badge-adopted, .badge-resolved { background: #E7ECEF; color: var(--color-ink-soft); }

/* ---------------- Vitals ring (signature component) ----------------
   A small radial gauge for numeric health scores — used for the
   Symptom Checker's Emergency Score (1-10) and the growth tracker's
   Body Condition Score (1-9). Renders as an SVG circle with a
   stroke-dasharray "filled" arc proportional to the score, color-coded
   by severity. Markup generated by render_vitals_ring() in
   functions.php — see that function for exact usage. */
.vitals-ring { display: inline-flex; align-items: center; gap: 14px; }
.vitals-ring__svg { flex-shrink: 0; }
.vitals-ring__track { fill: none; stroke: var(--color-border); stroke-width: 8; }
.vitals-ring__fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.4s ease; }
.vitals-ring__number { font-family: var(--font-display); font-weight: 700; }
.vitals-ring__label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-soft); }
.vitals-ring__caption { font-size: 0.92rem; color: var(--color-ink-soft); max-width: 280px; }
.vitals-ring--low .vitals-ring__fill { stroke: var(--color-primary); }
.vitals-ring--low .vitals-ring__number { fill: var(--color-primary-dark); }
.vitals-ring--medium .vitals-ring__fill { stroke: var(--color-accent); }
.vitals-ring--medium .vitals-ring__number { fill: var(--color-accent-dark); }
.vitals-ring--high .vitals-ring__fill { stroke: var(--color-danger); }
.vitals-ring--high .vitals-ring__number { fill: var(--color-danger); }

/* ---------------- AI Assistant full page ---------------- */
.ai-page-grid { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 24px; align-items: start; }
@media (max-width: 800px) { .ai-page-grid { grid-template-columns: 1fr; } }
.ai-page-sidebar { position: sticky; top: 84px; }
.ai-page-convlist { display: flex; flex-direction: column; gap: 2px; }
.ai-page-convlist__item {
  padding: 9px 12px; border-radius: var(--radius-sm); font-size: 0.86rem; color: var(--color-ink-soft);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.ai-page-convlist__item:hover { background: var(--color-canvas); color: var(--color-ink); }
.ai-page-convlist__item.is-active { background: var(--color-primary-soft); color: var(--color-primary-dark); font-weight: 600; }

.ai-page-chat {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; height: 640px; overflow: hidden;
}
.ai-page-chat__header {
  padding: 16px 20px; background: linear-gradient(135deg, var(--color-ai-panel) 0%, var(--color-ai-panel-soft) 100%);
  color: #fff; display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.ai-page-chat__header-icon { color: #FFD79B; display: flex; }
.ai-page-chat__header h2 { color: #fff; font-size: 1rem; margin: 0; }
.ai-page-chat__header p { color: rgba(255,255,255,0.68); font-size: 0.78rem; margin: 1px 0 0; }
.ai-page-chat__messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.ai-page-msg-row { display: flex; align-items: flex-start; gap: 10px; }
.ai-page-msg-row--user { flex-direction: row-reverse; }
.ai-page-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.ai-page-avatar--assistant { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; }
.ai-page-chat__form { display: flex; gap: 10px; padding: 16px; border-top: 1px solid var(--color-border); flex-shrink: 0; }
.ai-page-chat__form textarea {
  flex: 1; resize: none; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm);
  padding: 11px 14px; font-family: var(--font-body); font-size: 0.95rem;
}
.ai-page-chat__form textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }

/* ---------------- Site-wide floating chat widget ----------------
   Logged-in users only (rendered conditionally in footer.php). A fixed
   bubble button in the bottom-right corner, on every page, that expands
   into a real chat panel — talks to ai-chat-send.php via fetch(), no
   page reload. Deliberately reuses the same conversation storage
   (ai_conversations/ai_messages) as the full cat-ai-vet-assistant.php page, so
   a conversation started here continues seamlessly there. */
.chat-widget { position: fixed; right: 20px; bottom: 20px; z-index: 90; }
.chat-widget__bubble {
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--color-primary) 0%, #FF9838 100%); color: #fff;
  box-shadow: 0 10px 28px rgba(255,122,0,0.36);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease;
}
.chat-widget__bubble:hover { transform: scale(1.06); }
.chat-widget__bubble .icon-close { display: none; }
.chat-widget.is-open .chat-widget__bubble .icon-chat { display: none; }
.chat-widget.is-open .chat-widget__bubble .icon-close { display: block; }
.chat-widget__unread {
  position: absolute; top: -2px; right: -2px; background: var(--color-danger); color: #fff;
  font-size: 0.66rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

.chat-widget__panel {
  position: absolute; bottom: 76px; right: 0; width: 380px; max-width: calc(100vw - 40px);
  height: 560px; max-height: calc(100vh - 140px);
  background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float); border: 1px solid var(--color-border);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.chat-widget.is-open .chat-widget__panel { opacity: 1; visibility: visible; transform: none; }

.chat-widget__header {
  padding: 16px 18px; background: linear-gradient(135deg, var(--color-ai-panel) 0%, var(--color-ai-panel-soft) 100%);
  color: #fff; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.chat-widget__header h2 { color: #fff; font-size: 1.02rem; margin: 0; }
.chat-widget__header p { color: rgba(255,255,255,0.68); font-size: 0.76rem; margin: 2px 0 0; }
.chat-widget__header-actions { display: flex; gap: 4px; align-items: center; }
.chat-widget__header-btn {
  background: rgba(255,255,255,0.12); border: 0; color: #fff; border-radius: 50%;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.chat-widget__header-btn:hover { background: rgba(255,255,255,0.22); }

.chat-widget__messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-widget__msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 0.88rem; line-height: 1.5; }
.chat-widget__msg p:last-child { margin-bottom: 0; }
.chat-widget__msg--user { align-self: flex-end; background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-widget__msg--assistant { align-self: flex-start; background: var(--color-canvas); color: var(--color-ink); border-bottom-left-radius: 4px; }
.chat-widget__msg--error { align-self: center; background: var(--color-danger-soft); color: #8C2E2E; font-size: 0.8rem; text-align: center; }
.chat-widget__typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; }
.chat-widget__typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink-soft); animation: chatTypingBounce 1.2s infinite ease-in-out; }
.chat-widget__typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-widget__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatTypingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.chat-widget__suggestions { padding: 0 16px 8px; display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; }
.chat-widget__suggestions button {
  font-size: 0.76rem; padding: 6px 11px; border-radius: 14px; border: 1px solid var(--color-border-strong);
  background: var(--color-surface); color: var(--color-ink-soft); cursor: pointer;
}
.chat-widget__suggestions button:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }

.chat-widget__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--color-border); flex-shrink: 0; }
.chat-widget__form textarea {
  flex: 1; resize: none; border: 1.5px solid var(--color-border-strong); border-radius: 18px;
  padding: 9px 14px; font-family: var(--font-body); font-size: 0.88rem; max-height: 90px; line-height: 1.4;
}
.chat-widget__form textarea:focus { outline: none; border-color: var(--color-primary); }
.chat-widget__send {
  width: 38px; height: 38px; border-radius: 50%; border: 0; flex-shrink: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--color-primary), #FF9838); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.chat-widget__send:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-widget__disclaimer { font-size: 0.66rem; color: var(--color-ink-soft); text-align: center; padding: 0 12px 10px; flex-shrink: 0; }

@media (max-width: 480px) {
  .chat-widget { right: 12px; bottom: 12px; }
  .chat-widget__panel { width: calc(100vw - 24px); height: calc(100vh - 100px); bottom: 72px; right: -6px; }
}

/* ---------------- Misc ---------------- */
.page-notfound { text-align: center; padding: 80px 0; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--color-ink-soft); }