/* premium-content — owned by one agent; layered on top of styles.css */

/* ============================================================================
   PREMIUM — CONTENT PAGES + SITE CHROME
   Scope: blog listing, blog posts, about, staff, contact, plus the frame that
   wraps every page (notice strip, header, footer, buttons, links, booking
   modal, assistant panel).

   Direction: "Soft UI Evolution". Depth comes from the shared --elev-* ramp,
   motion from --dur/--ease-out, rhythm from --space-*. Palette, fonts and
   layout structure are deliberately untouched.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. BUTTON FAMILY (global)
   The last sharp-cornered element on the site. Brought into the same 8px band
   as every card and panel so the button family reads as one system.
   --------------------------------------------------------------------------- */
.button,
.button-small,
.button-outline,
.article a.button,
.article a[href="#consult"]{
  border-radius:var(--r);
}
.button{
  padding:14px 24px;
  box-shadow:var(--elev-1);
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.button:hover{
  transform:translateY(-2px);
  box-shadow:var(--elev-3);
}
.button:active{
  transform:translateY(0);
  box-shadow:var(--elev-1);
  transition-duration:80ms;
}
.button-small{padding:11px 17px}
.header-compact .button-small{padding:10px 15px}
.button-outline{box-shadow:none}
.button-outline:hover{box-shadow:var(--elev-2)}

/* Arrow glyphs travel a little on hover — the only motion these need. */
.button span,
.text-link span{transition:transform var(--dur) var(--ease-out)}
.button:hover span,
.text-link:hover span{transform:translateX(4px)}

.text-link{
  padding-bottom:5px;
  border-bottom-color:rgb(7 82 143 / .34);
  transition:border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}
.text-link:hover{border-bottom-color:currentColor}

.crumb{transition:opacity var(--dur) var(--ease-out)}
.crumb:hover{opacity:.72}


/* ---------------------------------------------------------------------------
   2. TOP NOTICE STRIP
   Was a cramped 34px band. A little more height and tracking lets it read as
   a deliberate ribbon rather than a leftover utility bar.
   --------------------------------------------------------------------------- */
.notice{
  min-height:38px;
  gap:2.1rem;
  letter-spacing:.085em;
  box-shadow:inset 0 -1px 0 rgb(255 255 255 / .08);
}
.notice a{
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}
.notice a:hover{border-bottom-color:rgb(216 237 249 / .7)}
@media(max-width:800px){
  .notice{min-height:34px;gap:1.2rem;letter-spacing:.06em}
}


/* ---------------------------------------------------------------------------
   3. HEADER
   Structure, sticky behaviour and the scroll-compact state are unchanged —
   only the quality of the transition, the hairline and the nav hover.
   --------------------------------------------------------------------------- */
.site-header{
  border-bottom-color:rgb(183 210 229 / .62);
  transition:
    height var(--dur) var(--ease-in-out),
    background-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.header-compact .site-header{
  box-shadow:var(--elev-2);
  border-color:rgb(183 210 229 / .4);
}
.site-header__inner{padding:0 var(--space-4)}
@media(max-width:800px){
  .site-header__inner{padding:0 18px}
}

nav{gap:30px}
/* Understated underline that grows from the left; transform-only. */
nav > a:not(.button){
  position:relative;
  padding-bottom:3px;
  transition:color var(--dur) var(--ease-out);
}
nav > a:not(.button)::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  border-radius:2px;
  background:#1675bb;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--dur) var(--ease-out);
}
nav > a:not(.button):hover{color:#1675bb}
nav > a:not(.button):hover::after{transform:scaleX(1)}
@media(max-width:800px){
  nav{gap:6px;border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--elev-3)}
  nav > a:not(.button){padding:10px 2px}
}


/* ---------------------------------------------------------------------------
   4. FOOTER
   Previously bare text floating on the page background. Now a quiet tinted
   panel that closes the page, with a real column rhythm.
   --------------------------------------------------------------------------- */
footer{
  margin-top:var(--space-5);
  /* 28px inline padding lands the columns on the same rail as page content,
     leaving the tinted panel as a slim frame around it. */
  padding:var(--space-5) 28px var(--space-4);
  gap:var(--space-4) var(--space-3);
  align-items:start;
  background:#eef5fb;
  border-top:1px solid rgb(183 210 229 / .55);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  font-size:12.5px;
  line-height:1.6;
}
footer strong{
  font-size:10.5px;
  letter-spacing:.13em;
  color:#1a5f96;
}
footer p{margin-top:12px}
footer a{
  border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
footer a:hover{color:#1675bb;border-bottom-color:rgb(22 117 187 / .45)}
.footer-brand{padding-right:var(--space-3)}
.footer-brand p{max-width:34ch;color:var(--ink-soft)}
@media(max-width:800px){
  footer{
    margin-top:var(--space-4);
    padding:var(--space-4) 18px var(--space-3);
    gap:var(--space-3) 20px;
    /* Panel is edge-to-edge on phones, so rounded corners would only show
       slivers of page background. */
    border-radius:0;
  }
}


/* ---------------------------------------------------------------------------
   5. PAGE / ARTICLE HEROES
   --------------------------------------------------------------------------- */
.page-hero{padding:var(--space-6) var(--space-4) var(--space-5)}
.page-hero p{margin-top:var(--space-2);line-height:1.65}

.article-hero{
  padding-top:var(--space-6);
  padding-bottom:var(--space-6);
  border-bottom:1px solid rgb(183 210 229 / .5);
}
.article-hero .crumb{margin-top:var(--space-3);color:#1675bb}
@media(max-width:800px){
  .page-hero{padding:var(--space-5) 18px var(--space-4)}
  .article-hero{padding-top:var(--space-5);padding-bottom:var(--space-5)}
}


/* ---------------------------------------------------------------------------
   6. LONG-FORM TYPOGRAPHY — bare .article
   --------------------------------------------------------------------------- */
.article{
  max-width:72ch;
  margin:var(--space-6) auto;
  font-size:1.05rem;
  line-height:1.78;
}
.article p{margin:0 0 var(--space-3)}
.article h2{margin-top:var(--space-5);margin-bottom:var(--space-2)}
.article h3{margin-top:var(--space-4);margin-bottom:14px}
.article ul,
.article ol{margin:var(--space-3) 0}
.article li{margin:10px 0}
.article img{
  margin:var(--space-4) auto;
  border-radius:var(--r-lg);
  box-shadow:var(--elev-2);
}
.article a{
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color var(--dur) var(--ease-out);
}
.article blockquote{
  margin:var(--space-4) 0;
  padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background:#f2f8fd;
  border-left:3px solid #1675bb;
  border-radius:var(--r);
  box-shadow:var(--elev-1);
}
@media(max-width:800px){
  .article{margin:var(--space-5) auto}
}


/* ---------------------------------------------------------------------------
   7. LONG-FORM TYPOGRAPHY — .resource-article (blog posts)
   This is where a content site's quality is judged, so it carries the one
   piece of boldness in this pass: a lede paragraph and a small accent rule
   anchoring each section heading. Everything around it stays quiet.
   --------------------------------------------------------------------------- */
.resource-article{
  font-size:1.09rem;
  line-height:1.8;
  color:#2f5b7d;
}
.resource-article__body{max-width:68ch}

/* Lede — the opening paragraph carries a little more weight. */
.resource-article__body > p:first-of-type{
  margin-bottom:var(--space-3);
  color:#26567a;
  font-size:1.22rem;
  line-height:1.66;
}

.resource-article p{margin:0 0 var(--space-3)}

.resource-article h2{
  position:relative;
  margin:var(--space-5) 0 var(--space-2);
  padding-top:var(--space-3);
}
.resource-article h2::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:44px;height:3px;
  border-radius:2px;
  background:#1675bb;
}
.resource-article h3{margin:var(--space-4) 0 12px}

.resource-article strong,
.resource-article b{color:#0d4c7d}

/* Markers: smaller, brand blue, with a comfortable hanging indent. */
.resource-article ul{margin:var(--space-3) 0}
.resource-article li{margin:12px 0;padding-left:28px}
.resource-article li:before{
  top:.82em;
  width:6px;height:6px;
  background:#1675bb;
}
.resource-article li ul{margin:12px 0 4px}
.resource-article li li:before{
  background:transparent;
  box-shadow:inset 0 0 0 1.5px #7ab0d6;
}

.resource-article blockquote{
  margin:var(--space-4) 0;
  padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-left:3px solid #1675bb;
  border-radius:var(--r);
  box-shadow:var(--elev-1);
}

.resource-article img{
  display:block;
  margin:var(--space-4) auto;
  border-radius:var(--r-lg);
  box-shadow:var(--elev-2);
}

.resource-article a{
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color var(--dur) var(--ease-out),text-decoration-color var(--dur) var(--ease-out);
}
.resource-article a:hover{color:#1675bb;text-decoration-color:#1675bb}

@media(max-width:700px){
  .resource-article{font-size:1.02rem}
  .resource-article__body > p:first-of-type{font-size:1.12rem}
  .resource-article h2{margin-top:var(--space-4)}
}


/* ---------------------------------------------------------------------------
   8. BLOG POST HERO + TWO-COLUMN LAYOUT
   Structure preserved; the aside becomes a real card so "Here to help" reads
   as an object rather than stray text.
   --------------------------------------------------------------------------- */
.resource-article-hero__image{
  border-radius:var(--r-lg);
  box-shadow:20px 20px 0 #d9edf8,var(--elev-2);
}
@media(max-width:700px){
  .resource-article-hero__image{box-shadow:10px 10px 0 #d9edf8,var(--elev-1)}
}

/* The aside gains card padding, so the column widens just enough to keep the
   same text measure it had as bare text. */
.resource-article-layout{grid-template-columns:minmax(0,1fr) 316px}
.resource-article-aside{
  position:sticky;
  top:104px;
  padding:var(--space-3) var(--space-3) 10px;
  border:1px solid #d5e7f4;
  border-radius:var(--r-lg);
  background:#fff;
  box-shadow:var(--elev-2);
}
.resource-article-aside::before{
  content:"";
  display:block;
  width:40px;height:3px;
  margin-bottom:var(--space-3);
  border-radius:2px;
  background:#1675bb;
}
.resource-article-aside h2{margin:12px 0 10px}
.resource-article-aside > span{margin-bottom:var(--space-2)}
.resource-article-aside a,
.resource-article-aside button{
  align-items:center;
  padding:14px 0;
  border-top-color:#dfeaf3;
  transition:color var(--dur) var(--ease-out);
}
.resource-article-aside button{border-bottom-color:#dfeaf3}
.resource-article-aside a b,
.resource-article-aside button b{
  display:inline-block;
  transition:transform var(--dur) var(--ease-out);
}
.resource-article-aside a:hover b,
.resource-article-aside button:hover b{transform:translateX(4px)}
@media(max-width:760px){
  .resource-article-aside{position:static;padding:var(--space-3)}
}


/* ---------------------------------------------------------------------------
   9. RESOURCE LISTING — featured + cards
   --------------------------------------------------------------------------- */
.featured-resource{
  margin-bottom:var(--space-3);
  border-radius:var(--r-lg);
  box-shadow:var(--elev-3);
}
.featured-resource b{transition:transform var(--dur) var(--ease-out)}
.featured-resource:hover b{transform:translateX(4px)}

.resource-card{
  border-color:#d5e7f4;
  border-radius:var(--r-lg);
  box-shadow:var(--elev-1);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.resource-card:hover{
  transform:translateY(-6px);
  border-color:#9cc8e4;
  box-shadow:var(--elev-4);
}
.resource-card img{transition:transform var(--dur-slow) var(--ease-out)}
.resource-card:hover img{transform:scale(1.035)}
.resource-card__copy{padding:var(--space-3) var(--space-3) 26px}
.resource-card h3{margin:12px 0 var(--space-3)}
.resource-card b{transition:transform var(--dur) var(--ease-out)}
.resource-card:hover b{transform:translateX(4px)}
.resource-directory{gap:var(--space-3)}
@media(max-width:700px){
  .resource-directory{gap:var(--space-2)}
  .resource-card:hover{transform:none}
}


/* ---------------------------------------------------------------------------
   10. ABOUT / TEAM
   The hard offset block behind portraits is an established site motif — it
   stays, but gains a soft layer underneath so it sits on the page instead of
   being pasted onto it.
   --------------------------------------------------------------------------- */
.about-team-portrait{
  border-radius:var(--r-lg);
  box-shadow:18px 18px 0 #d9edf8,var(--elev-2);
}
.about-team-portrait figcaption{
  padding:20px 23px 21px;
  border-top-left-radius:var(--r);
}
.about-team-band{
  border-radius:var(--r-lg);
  box-shadow:var(--elev-3);
}
.about-team-band > div{padding:var(--space-4)}
.about-team-note > div:last-child p{margin-bottom:var(--space-3)}

.team-profile{gap:var(--space-6)}
.team-profile img{
  border-radius:var(--r-lg);
  box-shadow:18px 18px 0 #d9edf8,var(--elev-2);
}
.team-profile p{margin-bottom:var(--space-3);line-height:1.72}
@media(max-width:800px){
  .about-team-portrait{box-shadow:10px 10px 0 #d9edf8,var(--elev-1)}
  .team-profile{gap:var(--space-4)}
  .team-profile img{box-shadow:10px 10px 0 #d9edf8,var(--elev-1)}
}


/* ---------------------------------------------------------------------------
   11. CONTACT
   The three detail tiles were a hairline grid, which left doubled borders and
   a clipped hover lift. They become three separate soft cards.
   --------------------------------------------------------------------------- */
.contact-hero figure{
  border-radius:var(--r-lg);
  box-shadow:20px 20px 0 #d7ebf8,var(--elev-2);
}

.contact-details{
  gap:var(--space-2);
  border-top:0;
  border-left:0;
  border-radius:0;
  overflow:visible;
}
.contact-detail{
  padding:var(--space-3) var(--space-3) 28px;
  border:1px solid #d5e7f4;
  border-radius:var(--r-lg);
  box-shadow:var(--elev-1);
  transition:
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
.contact-detail:hover{
  transform:translateY(-5px);
  border-color:#07528f;
  box-shadow:var(--elev-4);
}
.contact-detail b{
  display:inline-block;
  transition:transform var(--dur) var(--ease-out);
}
.contact-detail:hover b{transform:translateX(4px)}

.contact-hours{
  padding:var(--space-5);
  border-radius:var(--r-lg);
  box-shadow:var(--elev-1);
}
.contact-hours dl > div{
  padding:20px 0;
  border-top-color:#c6dced;
}
@media(max-width:760px){
  .contact-hero figure{box-shadow:12px 12px 0 #d7ebf8,var(--elev-1)}
  .contact-detail:hover{transform:none}
  .contact-hours{padding:var(--space-4) var(--space-3)}
}


/* ---------------------------------------------------------------------------
   12. CONTENT LIST ROWS
   --------------------------------------------------------------------------- */
.content-list{border-top-color:rgb(183 210 229 / .6)}
.list-item{
  padding:var(--space-3) var(--space-2);
  border-bottom-color:rgb(183 210 229 / .6);
  border-radius:var(--r);
  transition:background-color var(--dur) var(--ease-out);
}
.list-item:hover{background:rgb(234 243 250 / .7)}


/* ---------------------------------------------------------------------------
   13. BOOKING MODAL
   High-intent surface: deeper elevation, calmer field rhythm, and a short
   entrance so it arrives rather than appears.
   --------------------------------------------------------------------------- */
.booking-modal__panel{
  gap:var(--space-2);
  padding:var(--space-4) var(--space-4) var(--space-3);
  border-radius:var(--r-lg);
  box-shadow:var(--elev-4),0 40px 90px rgb(2 35 63 / .22);
}
.booking-modal.open .booking-modal__panel{
  animation:booking-panel-in var(--dur-slow) var(--ease-out) both;
}
@keyframes booking-panel-in{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:none}
}
.booking-modal__panel h2{margin-bottom:2px}
.booking-modal__panel > span{margin-bottom:10px;color:#456d8c}
.booking-modal label{gap:9px;font-size:.72rem;letter-spacing:.08em}
.booking-modal input,
.booking-modal textarea{
  padding:13px 14px;
  border-color:#cfe2f0;
  border-radius:var(--r);
  box-shadow:var(--elev-1);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.booking-modal input:hover,
.booking-modal textarea:hover{border-color:#9cc8e4}
.booking-modal input:focus,
.booking-modal textarea:focus{
  border-color:#1675bb;
  box-shadow:0 0 0 4px rgb(22 117 187 / .14);
}
.booking-modal .button{margin-top:var(--space-2)}
.booking-modal small{
  grid-column:1/-1;
  margin-top:2px;
  padding-top:var(--space-2);
  border-top:1px solid #dfeaf3;
}
.booking-close{
  transition:background-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
}
.booking-close:hover{background:#cbe4f5;transform:scale(1.06)}
@media(max-width:760px){
  .booking-modal__panel{padding:var(--space-3)}
}


/* ---------------------------------------------------------------------------
   14. ASSISTANT (launcher + panel)
   The glass treatment is kept; only the entrance, the header alignment and
   the launcher's hover craft are refined.
   --------------------------------------------------------------------------- */
.assistant-launch{
  padding:13px 19px;
  box-shadow:var(--elev-3);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.assistant-launch:hover{
  transform:translateY(-2px);
  box-shadow:var(--elev-4);
}
.assistant-launch:active{transform:translateY(0);transition-duration:80ms}

.assistant.open{animation:assistant-in var(--dur) var(--ease-out) both}
@keyframes assistant-in{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}
}
/* Title and status line were mis-aligned: the status sat 17px further in. */
.assistant header > div{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
}
.assistant header small{margin-left:0}
.assistant header b{line-height:1.2}
.chat-note{padding:2px 20px 14px;line-height:1.5}


/* ---------------------------------------------------------------------------
   15. REDUCED MOTION
   The foundation collapses durations; kill the entrances outright.
   --------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .booking-modal.open .booking-modal__panel,
  .assistant.open{animation:none}
  .button:hover,
  .resource-card:hover,
  .contact-detail:hover,
  .assistant-launch:hover{transform:none}
}


/* ---------------------------------------------------------------------------
   16. SCROLL-IN COVERAGE
   Sections that previously had no entrance at all. These reuse the shared
   .reveal system (one-shot, IntersectionObserver + geometry fallback, and
   already neutralised under prefers-reduced-motion by styles.css), but with a
   lighter transform than the default: full-bleed bands and card grids read
   better with a short rise than with the blur-and-scale used for hero copy.
   Transform/opacity only — no horizontal movement, so nothing can widen the
   layout viewport.
   --------------------------------------------------------------------------- */
.doctor-consultation.reveal,
.contact-detail.reveal,
.contact-hours.reveal,
.directory-heading > .reveal,
.google-reviews__summary.reveal,
.google-review-card.reveal,
.resource-article.reveal,
.resource-article-aside.reveal{
  filter:none;
  transform:translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.doctor-consultation.reveal.reveal-in,
.contact-detail.reveal.reveal-in,
.contact-hours.reveal.reveal-in,
.directory-heading > .reveal.reveal-in,
.google-reviews__summary.reveal.reveal-in,
.google-review-card.reveal.reveal-in,
.resource-article.reveal.reveal-in,
.resource-article-aside.reveal.reveal-in{transform:none}

/* The hover lift must win once the card has settled. */
.contact-detail.reveal.reveal-in:hover{transform:translateY(-5px);transition-delay:0ms}
.google-review-card.reveal.reveal-in:hover{transform:translateY(-2px);transition-delay:0ms}


/* ---------------------------------------------------------------------------
   17. FIRST-PAINT ENTRANCE
   One orchestrated moment: the chrome settles in, the hero copy follows on its
   existing timeline, and the chat launcher arrives last. Gated on
   .page-entrance, which JS adds at first render — without it every element is
   simply visible, so nothing here can strand content off-screen.
   --------------------------------------------------------------------------- */
.page-entrance .notice{animation:chrome-drop var(--dur-slow) var(--ease-out) both}
.page-entrance .site-header__inner{
  animation:chrome-drop var(--dur-slow) var(--ease-out) both;
  animation-delay:70ms;
}
.page-entrance .assistant-launch{
  animation:chrome-rise var(--dur-slow) var(--ease-out) both;
  animation-delay:640ms;
}
@keyframes chrome-drop{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}
@keyframes chrome-rise{
  from{opacity:0;transform:translateY(10px) scale(.96)}
  to{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .page-entrance .notice,
  .page-entrance .site-header__inner,
  .page-entrance .assistant-launch{animation:none}
  .contact-detail.reveal.reveal-in:hover,
  .google-review-card.reveal.reveal-in:hover{transform:none}
}


/* ---------------------------------------------------------------------------
   18. SCROLL-LINKED REVEALS
   The entrance for every section is bound to --reveal-progress, which app.js
   recomputes from scroll position on each frame (see setupScrollReveal) — the
   same model as --feature-progress on the home feature bands. The motion
   therefore advances *and reverses* with the scrollbar instead of firing once
   and finishing off-screen.

   .reveal-in is applied at the same moment as .reveal, so every settled-state
   rule above (and every hover lift, which is more specific than this block)
   still applies; this block only re-binds the animated properties.

   Fallback: --reveal-progress defaults to 1 here, and .reveal-scroll is only
   ever added by the same JS statement that writes the first value. No JS, a
   thrown script, or a blocked app.js all leave sections fully visible.
   Transform is translateY + scale only — nothing horizontal, so the layout
   viewport can never widen.
   --------------------------------------------------------------------------- */
.reveal.reveal-in.reveal-scroll{
  opacity:var(--reveal-progress,1);
  transform:
    translateY(calc((1 - var(--reveal-progress,1)) * 30px))
    scale(calc(.988 + var(--reveal-progress,1) * .012));
  filter:none;
  /* Short linear smoothing between rAF samples, matching the feature bands.
     !important is needed only to beat the !important transition on .service-card. */
  transition:opacity .16s linear,transform .16s linear!important;
  transition-delay:0ms!important;
  will-change:opacity,transform;
}

@media(prefers-reduced-motion:reduce){
  .reveal.reveal-in.reveal-scroll{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
}


/* ---------------------------------------------------------------------------
   19. MESSAGING-APP CHAT FRAME
   The assistant panel borrows the conventions of a phone messaging app —
   a name with a live presence dot, incoming bubbles on the left with a tail,
   the visitor's on the right, a day divider, per-message timestamps, centred
   system lines ("waiting for someone to join…" / "X joined the chat") and
   typing dots — rendered in the clinic's blue palette rather than as a clone
   of any particular app. No photo avatars: presence is carried by the join
   line and the name, not by a portrait.

   Motion note: every entrance here is transform-only and self-terminating.
   Nothing animates opacity from 0, so a paused document timeline (background
   tab, no frames) can never leave a message invisible.
   --------------------------------------------------------------------------- */

/* --- Header: who you are talking to ------------------------------------- */
.assistant header{
  align-items:center;
  gap:12px;
}
.assistant header > .assistant-who{
  flex-direction:row;
  align-items:center;
  gap:11px;
  min-width:0;
}
.assistant-id{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  min-width:0;
}
.assistant header .assistant-id b{
  font-size:14px;
  line-height:1.2;
  letter-spacing:-.01em;
}
.assistant header .assistant-id small{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  letter-spacing:.01em;
  opacity:.92;
}
.presence-dot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#86e39a;
  box-shadow:0 0 0 3px rgb(134 227 154 / .2);
  flex:none;
}

/* --- Launcher ----------------------------------------------------------- */
.assistant-launch{
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.assistant-launch .presence-dot{
  width:8px;
  height:8px;
  margin:0;
}

/* --- Log surface: a soft, patterned "wallpaper" in clinic blue ---------- */
.chat-log{
  gap:4px;
  padding:14px 14px 16px;
  background-color:#eaf3fb;
  background-image:
    radial-gradient(circle at 1px 1px,rgb(7 82 143 / .07) 1px,transparent 0),
    linear-gradient(180deg,rgb(247 251 254 / .85),rgb(228 240 250 / .7));
  background-size:16px 16px,auto;
  /* No smooth scrolling: it is frame-driven, so in a backgrounded tab the log
     never actually reaches the bottom and new messages stay hidden. */
  scroll-behavior:auto;
}

/* --- Day divider + system lines ---------------------------------------- */
.chat-day,
.chat-system{
  display:flex;
  justify-content:center;
  margin:6px 0 8px;
}
.chat-system{margin:12px 0 10px}
.chat-day span,
.chat-system span{
  max-width:88%;
  padding:5px 12px;
  border-radius:999px;
  background:rgb(255 255 255 / .82);
  border:1px solid rgb(7 82 143 / .1);
  box-shadow:0 1px 2px rgb(7 82 143 / .06);
  color:#3d6684;
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  text-align:center;
}
.chat-system span{
  background:rgb(219 236 249 / .9);
  color:#1a5c8f;
  text-transform:none;
  letter-spacing:.01em;
  font-size:11px;
  font-weight:600;
  transition:background 260ms var(--ease-out),color 260ms var(--ease-out);
}
/* The queue state: deliberately quieter than the join it resolves into, so the
   swap reads as something actually happening rather than a label changing. */
.chat-system.is-waiting span{
  background:rgb(255 255 255 / .6);
  border-style:dashed;
  color:#5b7f9b;
  font-weight:500;
  font-style:italic;
  animation:chat-waiting 1.6s ease-in-out infinite;
}
.chat-system.is-joined span{
  background:rgb(206 231 248 / .95);
  color:#0f5188;
  font-weight:700;
}
@keyframes chat-waiting{
  0%,100%{opacity:.62}
  50%{opacity:1}
}
.chat-system{animation:chat-in 260ms var(--ease-out) both}

/* --- Rows: incoming left, own messages right --------------------------- */
.chat-row{
  display:flex;
  align-items:flex-end;
  max-width:100%;
  animation:chat-in 260ms var(--ease-out) both;
}
.chat-row.agent{justify-content:flex-start}
.chat-row.user{justify-content:flex-end}
@keyframes chat-in{
  from{transform:translateY(7px)}
  to{transform:none}
}

/* --- Bubbles ----------------------------------------------------------- */
.chat-message{
  position:relative;
  max-width:84%;
  padding:8px 11px 6px;
  border-radius:16px;
  font-size:13px;
  line-height:1.5;
}
.chat-message.agent{
  margin-left:5px;
  background:#fff;
  border:1px solid rgb(7 82 143 / .08);
  border-bottom-left-radius:5px;
  box-shadow:0 1px 2px rgb(7 82 143 / .1);
  backdrop-filter:none;
  color:var(--ink);
}
.chat-message.user{
  margin-right:5px;
  background:linear-gradient(180deg,#dcefff,#cfe6f8);
  border:1px solid rgb(7 82 143 / .1);
  border-bottom-right-radius:5px;
  box-shadow:0 1px 2px rgb(7 82 143 / .1);
  color:#0d3f68;
}
/* Bubble tails, drawn as small triangles that pick up the bubble's own fill. */
.chat-message.agent:not(.typing):after,
.chat-message.user:after{
  content:"";
  position:absolute;
  bottom:-1px;
  width:9px;
  height:11px;
  background:inherit;
  border:inherit;
  border-top:0;
}
.chat-message.agent:not(.typing):after{
  left:-4px;
  border-right:0;
  border-bottom-left-radius:12px 9px;
  clip-path:polygon(100% 0,100% 100%,0 100%);
}
.chat-message.user:after{
  right:-4px;
  border-left:0;
  border-bottom-right-radius:12px 9px;
  clip-path:polygon(0 0,100% 100%,0 100%);
}
.chat-message time{
  display:block;
  margin-top:2px;
  text-align:right;
  font-size:9.5px;
  font-variant-numeric:tabular-nums;
  color:#6f90a8;
  letter-spacing:.02em;
}
.chat-message.user time{color:#5a86a8}

/* --- Typing indicator -------------------------------------------------- */
.chat-message.typing{
  width:auto;
  min-height:0;
  padding:11px 13px;
  border-radius:16px;
  border-bottom-left-radius:5px;
  gap:4px;
  background:#fff;
  border:1px solid rgb(7 82 143 / .08);
  opacity:1;
}
.chat-message.typing span{
  width:6px;
  height:6px;
  background:#7fa8c6;
}
.chat-message.pending{opacity:1}

/* --- Composer ---------------------------------------------------------- */
.chat-form{align-items:flex-end}
.chat-form textarea::placeholder{color:#7d9db3}
.chat-form button:focus-visible,
.assistant-close:focus-visible,
.chat-form textarea:focus-visible{
  outline:2px solid #1675bb;
  outline-offset:2px;
}
.assistant-close:focus-visible{outline-color:#fff}

@media(prefers-reduced-motion:reduce){
  .chat-row,
  .chat-system{animation:none}
  /* Static, readable stand-ins for the pulsing queue line and bouncing dots. */
  .chat-system.is-waiting span{animation:none;opacity:1}
  .chat-message.typing span{
    animation:none;
    opacity:.5;
    transform:none;
  }
}