/* ===== SmartDentalDesk — style.css ===== */
:root{
  --color-bg:#f7f6f2;
  --color-surface:#ffffff;
  --color-surface-2:#fbfbf9;
  --color-surface-offset:#f1f0eb;
  --color-divider:#e2e0da;
  --color-border:#d9d6cf;
  --color-text:#1f2320;
  --color-text-muted:#5c6560;
  --color-text-faint:#9aa19c;
  --color-text-inverse:#f9f8f4;
  --color-primary:#2563eb;
  --color-primary-hover:#1d4ed8;
  --color-primary-active:#1e40af;
  --color-primary-highlight:#dbeafe;
  --color-success:#16a34a;
  --color-error:#dc2626;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;
  --space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;
  --text-xs:clamp(.75rem,.7rem+.2vw,.875rem);
  --text-sm:clamp(.875rem,.82rem+.25vw,1rem);
  --text-base:clamp(1rem,.96rem+.2vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem+.6vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem+1vw,2.1rem);
  --text-2xl:clamp(2rem,1.3rem+2vw,3rem);
  --font-display:'Fraunces','Georgia',serif;
  --font-body:'General Sans','Inter',sans-serif;
  --shadow-sm:0 1px 2px rgba(20,30,25,.06);
  --shadow-md:0 6px 20px rgba(20,30,25,.08);
  --shadow-lg:0 16px 40px rgba(20,30,25,.12);
  --content-narrow:640px;--content-default:960px;--content-wide:1200px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:none;scroll-behavior:smooth}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);line-height:1.6}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;text-wrap:balance;font-weight:600}
p,li{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--color-primary-highlight)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

.container{max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-6)}
.container-narrow{max-width:var(--content-narrow);margin-inline:auto;padding-inline:var(--space-6)}
.container-default{max-width:var(--content-default);margin-inline:auto;padding-inline:var(--space-6)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in oklab, var(--color-surface) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-divider)}
.nav{display:flex;align-items:center;justify-content:space-between;padding-block:var(--space-4)}
.brand{display:flex;align-items:center;gap:var(--space-2)}
.brand-name{font-family:var(--font-display);font-weight:600;font-size:var(--text-base);line-height:1.1}
.brand-tag{font-size:var(--text-xs);color:var(--color-text-muted)}
.nav-links{display:flex;gap:var(--space-6);align-items:center}
.nav-links a{font-size:var(--text-sm);color:var(--color-text-muted);transition:color .18s ease}
.nav-links a[aria-current="page"],.nav-links a:hover{color:var(--color-primary)}
.nav-actions{display:flex;gap:var(--space-3);align-items:center}
.nav-toggle{display:none}
.mobile-actions{display:none}
@media (max-width:860px){
  .nav-links{position:fixed;inset:64px 0 0 0;background:var(--color-surface);flex-direction:column;align-items:flex-start;padding:var(--space-8) var(--space-6);gap:var(--space-5);transform:translateX(100%);transition:transform .28s cubic-bezier(.16,1,.3,1);border-top:1px solid var(--color-divider)}
  .nav-links.open{transform:translateX(0)}
  .nav-toggle{display:inline-flex;padding:var(--space-2)}
  .nav-actions{display:none}
  .nav-links.open ~ .nav-actions,.nav-links.open .mobile-actions{display:flex}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;padding:.7em 1.3em;transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease}
.btn-primary{background:var(--color-primary);color:var(--color-text-inverse)}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}
.btn-secondary:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn-block{width:100%}
.btn-sm{font-size:var(--text-xs);padding:.5em 1em}

/* Badge */
.badge{display:inline-flex;align-items:center;gap:.4em;font-size:var(--text-xs);font-weight:600;padding:.3em .8em;border-radius:var(--radius-full);background:var(--color-primary-highlight);color:var(--color-primary-hover)}
.badge-muted{background:var(--color-surface-offset);color:var(--color-text-muted)}

/* Card */
.card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.card-pad{padding:var(--space-6)}

/* Sections */
.section{padding-block:clamp(var(--space-12),6vw,var(--space-24))}
.section-tight{padding-block:clamp(var(--space-8),4vw,var(--space-16))}
.section-dark{background:var(--color-surface);color:var(--color-text)}
.section-dark .text-muted{color:var(--color-text-muted)}

.eyebrow{font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--color-primary);font-weight:700}
.text-muted{color:var(--color-text-muted)}
.text-faint{color:var(--color-text-faint)}

/* Hero */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:800px;margin:0 auto}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:center;margin:0 auto;text-align:left}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:var(--space-8)}}
.hero h1{font-size:var(--text-2xl);margin-block:var(--space-4)}
.stat-row{display:flex;gap:var(--space-8);margin-top:var(--space-8);flex-wrap:wrap;justify-content:center}
.stat-num{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-text)}
.stat-label{font-size:var(--text-xs);color:var(--color-text-muted)}

/* Feature grid (asymmetric, avoid repetitive 3-col) */
.feature-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--space-6)}
@media (max-width:860px){.feature-layout{grid-template-columns:1fr}}
.feature-main{padding:var(--space-8);border-radius:var(--radius-xl);background:var(--color-surface);border:1px solid var(--color-divider)}
.feature-stack{display:flex;flex-direction:column;gap:var(--space-4)}
.feature-item{padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-surface-2);border:1px solid var(--color-divider)}
.feature-item h3{font-size:var(--text-base);font-family:var(--font-body);font-weight:700;margin-bottom:var(--space-1)}
.feature-item p{font-size:var(--text-sm);color:var(--color-text-muted)}

/* Steps */
.step-card{background:var(--color-primary-highlight);border:1px solid color-mix(in oklab, var(--color-primary) 20%, var(--color-divider));border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.step-number{font-family:var(--font-display);font-size:2.5rem;font-weight:700;color:var(--color-primary);line-height:1}
.step-card h3{font-size:var(--text-base);font-family:var(--font-body);font-weight:700;color:var(--color-text);margin-bottom:.2em}
.step-card p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6}

/* Divider */
.divider{height:1px;background:var(--color-divider);border:0;margin-block:var(--space-8)}

/* Forms */
.field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}
.field label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted)}
.field input,.field textarea,.field select{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.7em .9em;background:var(--color-surface);font-size:var(--text-sm)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--color-primary)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}

/* Table-ish list */
.list-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);border:1px solid var(--color-divider);border-radius:var(--radius-md);background:var(--color-surface-2)}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
@media (max-width:800px){.pricing-grid{grid-template-columns:1fr}}
.pricing-card{padding:var(--space-8);border-radius:var(--radius-xl);border:1px solid var(--color-divider);background:var(--color-surface);display:flex;flex-direction:column}
.pricing-card.featured{border-color:var(--color-primary);box-shadow:var(--shadow-md)}
.price-amount{font-family:var(--font-display);font-size:var(--text-2xl);margin-top:var(--space-2)}
.pricing-list{margin-top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.pricing-list li{display:flex;gap:.6em;font-size:var(--text-sm);color:var(--color-text-muted);list-style:none}
.pricing-list li::before{content:"—";color:var(--color-primary);font-weight:700}

/* Footer */
.site-footer{background:#0f172a;color:#cbd5e1;padding-block:var(--space-16) var(--space-8);margin-top:var(--space-24)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-8)}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer-grid h4{font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);color:#f8fafc;margin-bottom:var(--space-3)}
.footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-xs);color:#94a3b8}
.footer-bottom{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;font-size:var(--text-xs);color:#64748b;flex-wrap:wrap;gap:var(--space-2)}

/* Utility */
.flex{display:flex}
.gap-3{gap:var(--space-3)}
.mt-6{margin-top:var(--space-6)}
.mt-8{margin-top:var(--space-8)}
.text-center{text-align:center}
.avatar{width:40px;height:40px;border-radius:var(--radius-full);background:var(--color-primary-highlight);color:var(--color-primary-hover);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-xs)}
.empty-state{text-align:center;padding:var(--space-16) var(--space-6);color:var(--color-text-muted)}
.empty-state svg{width:40px;height:40px;color:var(--color-text-faint);margin-inline:auto;margin-bottom:var(--space-4)}


/* Removed duplicate SCROLL REVEAL */

/* ================= MICRO-INTERACTIONS ================= */
.card{transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease}
.card.hoverable:hover{box-shadow:var(--shadow-md);border-color:color-mix(in oklab, var(--color-primary) 30%, var(--color-divider))}
.btn{position:relative;overflow:hidden}
.btn-primary:active{}
.feature-item{transition:transform .2s ease, box-shadow .2s ease}
.feature-item:hover{box-shadow:var(--shadow-sm)}
.list-row{transition:background .2s ease}
.list-row:hover{background:var(--color-surface-offset)}

/* ================= HERO VISUAL ================= */
.hero-visual-wrap{position:relative}
.hero-glow{position:absolute;inset:-40px;background:radial-gradient(circle at 30% 20%, color-mix(in oklab, var(--color-primary) 18%, transparent), transparent 60%);filter:blur(20px);z-index:0;pointer-events:none}
.hero-visual-wrap > .card{position:relative;z-index:1}
.float-chip{position:absolute;background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:var(--space-3) var(--space-4);font-size:var(--text-xs);z-index:2;}

/* ================= TESTIMONIALS ================= */
.testimonial-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
@media (max-width:860px){.testimonial-strip{grid-template-columns:1fr}}
.testimonial{padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-divider)}
.testimonial p{font-size:var(--text-sm);color:var(--color-text-muted)}
.testimonial .quote-mark{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-primary-highlight);line-height:0;display:block;margin-bottom:var(--space-2)}
.testimonial-author{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4)}
.testimonial-author .avatar{width:34px;height:34px;font-size:11px}
.testimonial-author strong{font-size:var(--text-xs);display:block}
.testimonial-author span{font-size:var(--text-xs);color:var(--color-text-faint)}

/* ================= TRUST STRIP ================= */
.trust-strip{display:flex;gap:var(--space-10);align-items:center;flex-wrap:wrap;justify-content:center;padding-block:var(--space-8);opacity:.75}
.trust-strip span{font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-faint);font-weight:600}

/* ================= COUNTER ================= */
.stat-num[data-count]{display:inline-block}

/* ================= SKELETON ================= */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,var(--color-surface-offset) 25%,var(--color-divider) 50%,var(--color-surface-offset) 75%);background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite;border-radius:var(--radius-sm)}

/* ================= SCROLL REVEAL ================= */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Zigzag specific scroll animations */
.zigzag-row .zigzag-content {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.1s;
}
.zigzag-row .zigzag-visual {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.2s;
}
.zigzag-row:nth-child(even) .zigzag-content {
  transform: translateX(40px);
}
.zigzag-row:nth-child(even) .zigzag-visual {
  transform: translateX(-40px);
}
.zigzag-row.is-visible .zigzag-content,
.zigzag-row.is-visible .zigzag-visual {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 860px) {
  .zigzag-row .zigzag-content,
  .zigzag-row .zigzag-visual,
  .zigzag-row:nth-child(even) .zigzag-content,
  .zigzag-row:nth-child(even) .zigzag-visual {
    transform: translateY(30px);
  }
}

/* Scrolled header state */
.site-header.scrolled{box-shadow:var(--shadow-sm)}

/* ================= WAVY HERO BACKGROUND ================= */
.hero-wavy-bg {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 450px;
  background: url('./wavy-bg.png') center/cover no-repeat;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-divider);
}
.hero-wavy-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  z-index: 10;
}
.hero-wavy-content h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text);
  text-shadow: 0 4px 30px rgba(255,255,255,0.9);
  line-height: 1.2;
}

/* ================= ZIGZAG LAYOUT ================= */
.zigzag-section {
  background-color: var(--color-surface);
  color: var(--color-text);
  padding-block: clamp(4rem, 8vw, 8rem);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.zigzag-section .section-header h2 { color: var(--color-text); }
.zigzag-section .section-header p { color: var(--color-text-muted); }

.zigzag-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding-block: var(--space-8);
}
.zigzag-container::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--color-divider);
  transform: translateX(-50%);
}

.zigzag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(4rem, 8vw, 8rem);
  position: relative;
  width: 100%;
}
.zigzag-row:last-child {
  margin-bottom: 0;
}
.zigzag-row:nth-child(even) {
  flex-direction: row-reverse;
}

.zigzag-node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  background: var(--color-primary);
  border: 3px solid var(--color-primary-highlight);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0 0 0 4px var(--color-primary-highlight);
}

.zigzag-content, .zigzag-visual {
  width: 45%;
}

.zigzag-content {
  padding: var(--space-4);
}
.zigzag-content h3 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}
.zigzag-content p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}
.zigzag-content .btn {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 13px;
  padding: 1em 1.5em;
}
.zigzag-content .btn:hover {
  background: var(--color-primary);
  color: white;
}

.zigzag-visual {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}

@media (max-width: 860px) {
  .zigzag-container::before { left: 24px; }
  .zigzag-node { left: 24px; }
  .zigzag-row, .zigzag-row:nth-child(even) {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 60px;
    margin-bottom: var(--space-12);
  }
  .zigzag-content, .zigzag-visual { width: 100%; }
  .zigzag-visual { margin-top: var(--space-4); }
}

/* ================= STORYTELLING ANIMATION ================= */
.storytelling-section {
  padding-block: clamp(5rem, 10vw, 10rem);
  position: relative;
}
.story-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 860px) {
  .story-container {
    grid-template-columns: 1fr;
  }
}
.story-sticky {
  position: sticky;
  top: 120px;
  height: max-content;
}
@media (max-width: 860px) {
  .story-sticky {
    position: relative;
    top: 0;
    margin-bottom: var(--space-8);
  }
}
.story-scroll {
  display: flex;
  flex-direction: column;
  gap: 30vh;
  padding-bottom: 20vh;
}
@media (max-width: 860px) {
  .story-scroll {
    gap: var(--space-12);
    padding-bottom: 0;
  }
}
.story-step {
  opacity: 0.2;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translateY(20px);
}
.story-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.story-step .step-number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-4);
}
.story-step h3 {
  font-size: var(--text-xl);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.story-step p {
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ==========================================================================
   SPA Sections (Dashboard)
   ========================================================================== */
.dashboard-section {
  display: none;
  animation: fadeIn 0.3s ease;
}
.dashboard-section.active {
  display: block;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Patients Table Tabs
   ========================================================================== */
.tabs-nav {
  display: flex;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-6);
}
.tab-btn {
  background: none;
  border: none;
  padding: var(--space-3) var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}
.tab-btn:hover {
  color: var(--color-text);
}
.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th, .data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-divider);
}
.data-table th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}
.data-table td {
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* ==========================================================================
   AI Assistant UI (Claude Style)
   ========================================================================== */
/* ==========================================================================
   AI Mode Dropdown (Perplexity-style)
   ========================================================================== */
.mode-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: var(--space-4);
  min-width: 280px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
  padding: var(--space-2);
  z-index: 100;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.mode-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.mode-dropdown-header {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3) var(--space-1);
}
.mode-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s;
}
.mode-option:hover {
  background: var(--color-bg);
}
.mode-option.active {
  background: var(--color-primary-highlight);
}
.mode-option-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
}
.mode-option.active .mode-option-icon {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.mode-option-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mode-option-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}
.mode-option-sub {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}
.mode-check {
  color: var(--color-primary);
  opacity: 0;
  flex-shrink: 0;
}
.mode-option.active .mode-check {
  opacity: 1;
}

/* Mode toggle button (in input bar) */
.mode-toggle-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.mode-toggle-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ==========================================================================
   Chat UI
   ========================================================================== */
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
  overflow: hidden;
}
.chat-history {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.chat-msg {
  display: flex;
  gap: var(--space-4);
  max-width: 85%;
}
.chat-msg.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 600;
  font-size: var(--text-sm);
}
.chat-msg.user .chat-avatar {
  background: var(--color-border);
  color: var(--color-text);
}
.chat-bubble {
  padding: var(--space-2) 0;
  background: transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
  border: none;
}
.chat-msg.assistant {
  max-width: 100%;
}
.chat-msg.assistant .chat-bubble table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-4) 0;
}
.chat-msg.assistant .chat-bubble th,
.chat-msg.assistant .chat-bubble td {
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}
.chat-msg.assistant .chat-bubble th {
  background: var(--color-surface-offset);
  font-weight: 600;
}
.chat-msg.assistant .chat-bubble p {
  margin-bottom: var(--space-4);
}
.chat-msg.assistant .chat-bubble p:last-child {
  margin-bottom: 0;
}
.chat-msg.assistant .chat-bubble pre {
  background: var(--color-bg);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  border: 1px solid var(--color-divider);
  margin-bottom: var(--space-4);
}
.chat-msg.assistant .chat-bubble code {
  background: var(--color-bg);
  padding: 2px 4px;
  border-radius: 4px;
  font-family: monospace;
}
.chat-input-area {
  padding: var(--space-4);
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
  position: relative;
  z-index: 10;
}
.chat-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  width: 100%;
}
.chat-input-wrapper input {
  flex: 1;
  background: transparent;
  border: none;
  padding: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
  outline: none;
}
.chat-input-wrapper button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  background: var(--color-primary);
  color: #fff;
  border: 2.5px solid var(--color-primary);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.chat-input-wrapper button[type="submit"]:hover:not(:disabled) {
  background: var(--color-primary-dark, var(--color-primary));
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  transform: scale(1.08);
}
.chat-input-wrapper button[type="submit"]:active:not(:disabled) { transform: scale(0.96); }
.chat-input-wrapper button[type="submit"]:disabled { opacity: 0.55; cursor: default; }

/* Three-state icon visibility */
#chatSendBtn .icon-arrow-up,
#chatSendBtn .icon-arrow-right,
#chatSendBtn .icon-stop { display: none; }
#chatSendBtn[data-state="arrow-up"]    .icon-arrow-up    { display: block; }
#chatSendBtn[data-state="arrow-right"] .icon-arrow-right { display: block; }
#chatSendBtn[data-state="stop"]        .icon-stop        { display: block; }
#chatSendBtn[data-state="stop"] { cursor: pointer; opacity: 1; }

/* ==========================================================================
   Settings Form
   ========================================================================== */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 768px) {
  .settings-grid { grid-template-columns: 1fr; }
}
.settings-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.form-group {
  margin-bottom: var(--space-4);
}
.form-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.form-control {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color 0.2s;
}
.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}
.booking-link-display {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-bg);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
  font-family: monospace;
  font-size: var(--text-sm);
}

/* ── Accessibility: comprehensive reduced-motion support ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Performance: prevent layout shift for images ── */
img {
  height: auto;
  max-width: 100%;
}
img[loading="lazy"] {
  content-visibility: auto;
}

/* ── Accessibility: skip-to-content link ── */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 1rem;
  background: var(--color-primary, #2563eb);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 var(--radius-sm, 4px) var(--radius-sm, 4px);
  font-weight: 600;
  z-index: 10000;
  transition: top 0.15s;
  text-decoration: none;
}
.skip-to-content:focus {
  top: 0;
}