/* app/src/overlay.css — Call the Nose overlay, skinned to DESIGN.md (real Rituals tokens). */

@font-face{font-family:"ClassGarmnd BT";src:url("../assets/fonts/ClassGarmndBTW05-Roman.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"ClassGarmnd BT";src:url("../assets/fonts/ClassGarmndBTW05-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Scala Sans Pro";src:url("../assets/fonts/ScalaSansW05-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Scala Sans Pro";src:url("../assets/fonts/ScalaSansW05-Regular.woff2") format("woff2");font-weight:400;font-display:swap}

.ctn{
  --ink:#1a1919;--copper:#816356;--beige:#c2ae99;--cream:#f6f4f2;--white:#fff;
  --border:#d8d8d8;--grey:#626262;--placeholder:#7f7f7f;--error:#ad4141;
  --serif:"ClassGarmnd BT","Times New Roman",serif;
  --sans:"Scala Sans Pro","Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:400;color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.ctn[hidden]{display:none}
*,*::before,*::after{box-sizing:border-box}

/* scrim — our own dimmed/blurred layer (blurs the real microsite behind once embedded) */
.ctn-scrim{position:absolute;inset:0;background:rgba(26,25,25,.5);backdrop-filter:blur(3px);
  z-index:999;opacity:0;transition:opacity .35s var(--ease)}
.ctn.is-open .ctn-scrim{opacity:1}

/* panel — centred bordered on desktop, full-bleed on mobile */
.ctn-panel{position:relative;z-index:1000;display:flex;flex-direction:column;
  width:min(560px,92vw);height:min(620px,84vh);background:var(--cream);border-radius:6px;
  box-shadow:0 26px 64px rgba(0,0,0,.42);overflow:hidden;
  opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}

/* visually-hidden screen-reader status region (announces completed turns, not token spam) */
.ctn-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* cold-start in-voice waiting line (shown after a long wait) */
.ctn-wait{align-self:flex-start;font-family:var(--serif);font-size:18px;line-height:1.5;color:#453f3f}

/* scroll-to-latest pill (only when the user has scrolled up) */
.ctn-jump{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:1001;
  appearance:none;border:none;background:var(--copper);color:#fff;font-family:var(--sans);
  font-size:12px;letter-spacing:1.4px;text-transform:uppercase;padding:8px 16px;border-radius:999px;
  cursor:pointer;box-shadow:0 6px 18px rgba(26,25,25,.28)}
.ctn-jump[hidden]{display:none}
.ctn-jump:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ctn.is-open .ctn-panel{opacity:1;transform:none}

/* header */
.ctn-header{display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;border-bottom:1px solid var(--border);flex:0 0 auto}
/* identity: avatar + title (photo when supplied, brand initials fallback otherwise) */
.ctn-who{display:flex;align-items:center;gap:13px;min-width:0}
.ctn-avatar{flex:0 0 auto;width:42px;height:42px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.ctn-avatar-img{width:100%;height:100%;object-fit:cover;display:block}
/* initials fallback: soft beige disc with ink monogram (8.2:1 — legible; copper stays
   reserved for interactivity, so identity doesn't borrow the accent signal) */
.ctn-avatar--initials{background:rgba(194,174,153,.32);color:var(--ink);
  border:1px solid var(--beige);font-family:var(--serif);font-size:19px;line-height:1;letter-spacing:.5px}
.ctn-who-text{min-width:0}
.ctn-pretitle{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--copper);margin-bottom:3px}
.ctn-name{font-family:var(--serif);font-size:23px;line-height:1;color:var(--ink)}
.ctn-close{appearance:none;border:none;background:none;color:var(--grey);font-size:18px;line-height:1;
  cursor:pointer;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:flex-end}
.ctn-close:focus-visible{outline:2px solid var(--copper);outline-offset:2px}

/* press-release strip — persistent, under the header; unfolds IN PLACE (no second overlay). */
.ctn-pr-strip{flex:0 0 auto;background:#efe9e4;border-bottom:1px solid #e4d9d1}
.ctn-pr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 22px}
.ctn-pr-txt{margin:0;font-size:12px;line-height:1.35;color:#5a4a40}
.ctn-pr-toggle{flex:none;appearance:none;border:1px solid var(--copper);background:transparent;cursor:pointer;
  font-family:var(--sans);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap;
  color:var(--copper);padding:7px 14px;border-radius:2px;transition:background .2s var(--ease),color .2s var(--ease)}
.ctn-pr-toggle:hover{background:var(--copper);color:#fff}
.ctn-pr-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ctn-pr-strip.is-open .ctn-pr-toggle{background:var(--copper);color:#fff}

/* the unfold: height-clipped reveal of the staggered language grid */
.ctn-pr-body{max-height:0;overflow:hidden;transition:max-height .42s cubic-bezier(.16,1,.3,1)}
.ctn-pr-body-inner{padding:2px 22px 16px}
.ctn-pr-langs{display:flex;flex-wrap:wrap;gap:6px 20px;padding:4px 0 12px}
.ctn-pr-lang{appearance:none;border:none;background:none;cursor:pointer;padding:3px 0;
  font-family:var(--serif);font-size:16px;line-height:1.1;color:var(--ink);
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease),color .2s var(--ease);
  border-bottom:1px solid transparent}
.ctn-pr-strip.is-open .ctn-pr-lang{opacity:1;transform:none}
.ctn-pr-lang:hover{color:var(--copper)}
.ctn-pr-lang:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.ctn-pr-lang.is-on{color:var(--copper);border-bottom-color:var(--copper)}
.ctn-pr-lang.is-soon{color:#a99;cursor:default;font-style:italic}
.ctn-pr-soon{font-family:var(--sans);font-style:normal;font-size:8.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:#b3a499;margin-left:6px;vertical-align:2px}

/* the chosen language's downloads (two collections) */
.ctn-pr-files{border-top:1px solid #e0d5cd;padding-top:12px}
.ctn-pr-files-intro{margin:0 0 8px;font-size:11px;letter-spacing:.4px;color:var(--grey)}
.ctn-pr-file{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;
  padding:9px 12px;margin:0 0 6px;border:1px solid #ddcec4;border-radius:3px;background:#faf6f2;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.ctn-pr-file:hover{border-color:var(--copper);background:#fff}
.ctn-pr-file:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.ctn-pr-file-name{font-family:var(--serif);font-size:15px;color:var(--ink)}
.ctn-pr-file-fmt{flex:none;font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--copper)}
@media (max-width:640px){.ctn-pr-head{padding:9px 16px}.ctn-pr-txt{font-size:11px}.ctn-pr-body-inner{padding:2px 16px 14px}}
@media (prefers-reduced-motion:reduce){
  .ctn-pr-body{transition:none}
  .ctn-pr-lang{transition:color .2s ease;opacity:1;transform:none;transition-delay:0s!important}
}

/* voice: header call button + slim live status */
.ctn-call{appearance:none;background:none;border:none;cursor:pointer;color:var(--copper);
  font-size:1.1rem;line-height:1;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.ctn-call:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.ctn-call-status{font:600 0.72rem/1 var(--sans);letter-spacing:1.5px;text-transform:uppercase;
  color:var(--copper);margin-right:8px;opacity:0;transition:opacity .2s var(--ease)}
.ctn.is-connecting .ctn-call-status,.ctn.is-in-call .ctn-call-status{opacity:1}
.ctn.is-in-call .ctn-call{color:var(--error)} /* becomes the End-call affordance */

/* message list */
.ctn-msgs{flex:1 1 auto;overflow-y:auto;overflow-anchor:none;padding:20px 22px;display:flex;flex-direction:column;gap:15px}
.ctn-msg{max-width:90%;animation:ctn-rise .35s var(--ease) both}
/* nose reply: editorial serif, fluid 17→20px (DESIGN.md role 16→20) — eased down a touch from
   the flat 19px that read slightly large in the demo, without losing the editorial weight */
.ctn-msg--nose{align-self:flex-start;font-family:var(--serif);font-size:clamp(17px,calc(1rem + .4vw),20px);line-height:1.55;color:var(--ink)}
.ctn-msg--user{align-self:flex-end;max-width:78%;background:var(--copper);color:#fff;
  font-size:15px;line-height:1.4;padding:9px 14px;border-radius:4px}
@keyframes ctn-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* streaming reveal: per-character blur-fade (chat-ui-polish §1) */
.ctn-ch{display:inline-block;white-space:pre;animation:ctn-char .42s ease both}
@keyframes ctn-char{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}

/* thinking dots */
.ctn-dots{align-self:flex-start;display:flex;gap:5px;padding:4px 0}
.ctn-dots span{width:6px;height:6px;border-radius:50%;background:var(--copper);opacity:.35;animation:ctn-pulse 1.2s infinite}
.ctn-dots span:nth-child(2){animation-delay:.18s}
.ctn-dots span:nth-child(3){animation-delay:.36s}
@keyframes ctn-pulse{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:.95;transform:translateY(-3px)}}

/* system failure line (hard errors) */
.ctn-sysline{align-self:center;text-align:center;color:var(--grey);font-size:13px;line-height:1.5;max-width:80%}
.ctn-retry{display:inline-block;margin-top:5px;color:var(--copper);font-size:13px;
  border:none;background:none;border-bottom:1px solid var(--beige);cursor:pointer;padding:0}
.ctn-retry:focus-visible{outline:2px solid var(--copper);outline-offset:2px}

/* empty state */
.ctn-empty{margin:auto;text-align:center;max-width:84%;font-family:var(--serif);font-size:22px;
  line-height:1.35;color:#453f3f}

/* footer: openers + disclaimer + composer */
.ctn-foot{flex:0 0 auto;border-top:1px solid var(--border);padding:16px 22px}
.ctn-openers{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.ctn-openers-label{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--grey)}
.ctn-chip{align-self:flex-start;display:inline-flex;align-items:baseline;gap:7px;
  font-family:var(--serif);font-size:16px;color:var(--copper);
  border:1px solid var(--beige);background:rgba(194,174,153,.12);padding:7px 14px;border-radius:3px;cursor:pointer}
.ctn-chip:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
/* starred openers — the likely-FAQ prompts; a quiet copper star, slightly firmer border */
.ctn-chip.is-starred{border-color:var(--copper)}
.ctn-chip-star{font-family:var(--sans);font-size:11px;line-height:1;color:var(--copper);opacity:.85}
.ctn-disclaimer{font-size:12px;letter-spacing:.3px;color:var(--grey);margin:0 0 11px}
.ctn-composer{display:flex;gap:9px}
.ctn-input{flex:1;min-width:0;background:var(--white);border:1px solid var(--border);border-radius:4px;
  padding:11px 13px;font-family:var(--sans);font-size:16px;color:var(--ink)}
.ctn-input::placeholder{color:var(--placeholder)}
.ctn-input:focus-visible{outline:none;border-color:var(--copper);box-shadow:0 0 0 1px var(--copper)}
.ctn-send{appearance:none;border:none;background:var(--copper);color:#fff;border-radius:4px;
  padding:0 20px;min-height:44px;font-family:var(--sans);font-size:13px;letter-spacing:2px;
  text-transform:uppercase;cursor:pointer}
.ctn-send:disabled{opacity:.5;cursor:default}
.ctn-send:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ctn-input:disabled{opacity:.6}

/* rotate gate — short-height landscape phones only */
.ctn-rotate{position:absolute;inset:0;z-index:1001;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:0 28px;
  background:rgba(246,244,242,.92);backdrop-filter:blur(2px)}
.ctn.is-landscape-gated .ctn-rotate{display:flex}
.ctn-rotate-icon{width:44px;height:28px;border:1.6px solid var(--copper);border-radius:5px;
  transform-origin:50% 50%;animation:ctn-tip 1.9s var(--ease) infinite alternate}
@keyframes ctn-tip{from{transform:rotate(0)}to{transform:rotate(90deg)}}
.ctn-rotate h2{font-family:var(--serif);font-weight:400;font-size:21px;margin:2px 0 0;color:var(--ink)}
.ctn-rotate p{margin:0;font-size:13px;color:var(--grey);line-height:1.5;max-width:280px}

/* mobile: full-bleed */
@media (max-width:640px){
  .ctn-panel{width:100%;height:100%;max-height:none;border-radius:0}
}

/* reduced motion: flat */
@media (prefers-reduced-motion: reduce){
  .ctn-scrim,.ctn-panel,.ctn-msg{transition:none!important;animation:none!important;transform:none!important;opacity:1!important}
  .ctn-dots span,.ctn-rotate-icon{animation:none!important}
  .ctn-ch{animation:none!important;filter:none!important}
}