/* =========================================================
   shared.css — site-wide consistent components
   Chat, streaming bubbles, and preloader. Loaded by every page.
   ========================================================= */

/* ===== JOANNA CHAT ===== */
.chat{position:fixed;bottom:24px;right:24px;z-index:200;font-family:var(--f-body)}
.chat__btn{display:inline-flex !important;align-items:center;gap:12px;padding:16px 24px 16px 20px;background:#14110c !important;color:#fbfaf5 !important;border:0;border-radius:999px;font-family:"Newsreader","Charter",Georgia,serif;font-size:14px;font-weight:500;letter-spacing:0;cursor:pointer;box-shadow:0 12px 32px -10px rgba(26,21,16,.4),0 4px 12px -4px rgba(26,21,16,.2);transition:background .4s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s cubic-bezier(.2,.8,.2,1);line-height:1;white-space:nowrap}
.chat__btn:hover{background:#b13720 !important;transform:translateY(-3px);box-shadow:0 16px 40px -10px rgba(177,55,32,.5),0 6px 14px -4px rgba(177,55,32,.3)}
.chat__btn > span{color:#fbfaf5 !important;display:inline-block;font-style:italic}
.chat__btn svg{width:18px !important;height:18px !important;stroke:#fbfaf5 !important;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;display:inline-block;flex:0 0 18px}
.chat__btn .pulse{width:8px !important;height:8px !important;border-radius:50%;background:#65c97a !important;box-shadow:0 0 0 3px rgba(101,201,122,.25);animation:chat-cp 2.2s cubic-bezier(.2,.8,.2,1) infinite;flex:0 0 8px}
@keyframes chat-cp{0%,100%{opacity:1}50%{opacity:.5}}
.chat--open .chat__btn{display:none}

.chat__panel{position:fixed;bottom:24px;right:24px;width:min(420px,calc(100vw - 32px));max-height:min(680px,calc(100vh - 48px));background:var(--paper-soft,var(--cream));border:1px solid var(--line);box-shadow:0 8px 16px rgba(26,21,16,.08),0 40px 80px -30px rgba(26,21,16,.3);display:none;flex-direction:column;overflow:hidden;border-radius:var(--r-lg)}
.chat--open .chat__panel{display:flex;animation:chat-ci .4s var(--ease) both}
@keyframes chat-ci{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}

.chat__head{padding:20px 22px;background:var(--ink);color:var(--cream);display:flex;justify-content:space-between;align-items:center;gap:14px}
.chat__host{display:flex;align-items:center;gap:14px}
.chat__avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--amber));display:grid;place-items:center;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:24px;color:var(--cream);flex:0 0 46px;box-shadow:0 0 0 2px rgba(251,250,245,.18),0 6px 16px -4px rgba(177,55,32,.5)}
.chat__host h4{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:22px;line-height:1;margin:0 0 6px;letter-spacing:-.005em;color:var(--cream)}
.chat__host small{font-family:var(--f-body);font-style:normal;font-size:12px;color:rgba(251,250,245,.6);display:inline-flex;align-items:center;gap:8px;letter-spacing:.01em}
.chat__host small::before{content:"";width:7px;height:7px;border-radius:50%;background:#65c97a;box-shadow:0 0 0 2px rgba(101,201,122,.2)}
.chat__close{width:36px;height:36px;border:0;cursor:pointer;border-radius:50%;display:grid;place-items:center;background:transparent;font-family:var(--f-body);font-size:18px;color:rgba(251,250,245,.6);line-height:1;transition:background .3s var(--ease),color .3s var(--ease)}
.chat__close:hover{background:rgba(251,250,245,.1);color:var(--cream)}

.chat__body{flex:1;padding:22px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;background:var(--paper-soft,var(--cream))}
.chat__body::-webkit-scrollbar{width:6px}
.chat__body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}

.msg{max-width:86%;padding:12px 18px;font-family:var(--f-body);font-size:15px;line-height:1.55;border-radius:20px;animation:chat-mi .4s var(--ease) both}
.msg strong{font-weight:600}
.msg em{font-style:italic}
.msg--host{align-self:flex-start;background:var(--paper-2);color:var(--ink);border-bottom-left-radius:6px}
.msg--user{align-self:flex-end;background:var(--ink);color:var(--cream);border-bottom-right-radius:6px}
.msg--host em.dish{font-style:normal;color:var(--red);font-weight:500}
.msg--host strong{color:var(--ink)}
@keyframes chat-mi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg__caret{display:inline-block;width:2px;height:1em;vertical-align:-.15em;margin-left:2px;background:var(--red);animation:chat-caret 1.1s steps(2) infinite}
@keyframes chat-caret{50%{opacity:0}}

.typing{display:inline-flex;align-items:center;gap:4px;padding:14px 18px;background:var(--paper-2);border-radius:20px;border-bottom-left-radius:6px;align-self:flex-start;animation:chat-mi .3s var(--ease) both}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--ink-dim);animation:chat-tt 1.2s infinite ease-in-out}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
@keyframes chat-tt{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

.chat__suggest{display:flex;flex-wrap:wrap;gap:6px;padding:2px 22px 16px;background:var(--paper-soft,var(--cream))}
.chat__suggest button{padding:9px 14px;background:#fefdf9;border:1px solid rgba(26,21,16,.18);border-radius:999px;font-family:"Newsreader","Charter",Georgia,serif;font-size:13px;color:#2a241e;cursor:pointer;transition:background .3s cubic-bezier(.2,.8,.2,1),color .3s cubic-bezier(.2,.8,.2,1),border-color .3s cubic-bezier(.2,.8,.2,1),transform .25s cubic-bezier(.2,.8,.2,1)}
.chat__suggest button:hover{background:#b13720!important;border-color:#b13720!important;color:#fbfaf5!important;transform:translateY(-1px)}
.chat__suggest button:focus-visible{outline:2px solid #b13720;outline-offset:2px}

/* Inline links inside chat messages — auto-rendered from URLs in bot replies */
.msg__link{color:#b13720;text-decoration:none;border-bottom:1px solid rgba(177,55,32,.4);padding-bottom:1px;font-style:italic;transition:border-color .25s ease,color .25s ease;word-break:break-word}
.msg__link:hover{color:#d24528;border-bottom-color:#d24528}
.msg--user .msg__link{color:inherit;border-bottom-color:rgba(255,255,255,.5)}

.chat__form{display:flex;gap:8px;padding:16px 22px calc(env(safe-area-inset-bottom) + 20px);background:var(--paper-soft,var(--cream));border-top:1px solid var(--line)}
.chat__form input{flex:1 1 0;min-width:0;padding:13px 18px;background:var(--paper-2);border:1px solid var(--line);font-family:var(--f-body);font-size:16px;color:var(--ink);border-radius:var(--r-pill);outline:none;transition:border-color .3s var(--ease),background .3s var(--ease)}
.chat__form input:focus{border-color:var(--red);background:var(--paper-soft,var(--cream))}
.chat__form button{width:44px;height:44px;padding:0;background:var(--ink);color:var(--cream);border:0;cursor:pointer;border-radius:50%;display:grid;place-items:center;transition:background .3s var(--ease),transform .3s var(--ease);flex:0 0 44px}
.chat__form button:hover{background:var(--red);transform:scale(1.06)}
.chat__form button svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

.msg{overflow-wrap:break-word;word-wrap:break-word}
.chat__body{overflow-x:hidden}
.chat__panel{max-width:100vw;box-sizing:border-box}

@media(max-width:560px){
  .chat{bottom:14px;right:14px}
  .chat__panel{right:8px;bottom:8px;left:8px;width:auto;max-width:calc(100vw - 16px);max-height:86vh}
  .chat__head{padding:16px 18px}
  .chat__body{padding:18px}
  .chat__suggest{padding:2px 18px 12px}
  .chat__form{padding:12px 18px calc(env(safe-area-inset-bottom) + 16px)}
}

/* ===== MOBILE NAV: BURGER + DRAWER (site-wide) ===== */
.nav__burger{display:none;width:44px;height:44px;border:1px solid var(--line-2,rgba(26,21,16,.18));border-radius:999px;background:transparent;color:var(--ink,#1a1510);align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer;padding:0;transition:background .3s cubic-bezier(.2,.8,.2,1),border-color .3s cubic-bezier(.2,.8,.2,1);flex:0 0 44px}
.nav__burger span{display:block;width:16px;height:1.5px;background:currentColor;border-radius:1px;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s cubic-bezier(.2,.8,.2,1)}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.nav__burger:hover{background:rgba(26,21,16,.05)}

.nav__drawer{position:fixed;inset:0;z-index:199;background:var(--paper,#fbfaf5);display:flex;flex-direction:column;pointer-events:none;opacity:0;transition:opacity .35s cubic-bezier(.2,.8,.2,1),visibility .35s;visibility:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
.nav__drawer[aria-hidden="false"]{opacity:1;pointer-events:auto;visibility:visible}
.nav__drawer-inner{padding:calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 32px);display:flex;flex-direction:column;gap:28px;min-height:100%;max-width:560px;margin:0 auto;width:100%}
.nav__drawer-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:4px}
.nav__drawer-eyebrow{font-family:var(--f-body,"Newsreader",serif);font-style:italic;font-size:12px;font-weight:500;color:var(--ink-dim,#776b5c);letter-spacing:.22em;text-transform:uppercase}
.nav__drawer-close{width:46px;height:46px;border:1px solid var(--line-2,rgba(26,21,16,.18));border-radius:999px;background:transparent;color:var(--ink,#1a1510);display:grid;place-items:center;cursor:pointer;transition:background .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1);flex:0 0 46px;padding:0}
.nav__drawer-close:hover{background:rgba(26,21,16,.05);transform:rotate(90deg)}
.nav__drawer-close svg{width:18px;height:18px}
.nav__drawer-links{display:flex;flex-direction:column;flex:1;min-height:0}
.nav__drawer-links a{font-family:var(--f-display,"Instrument Serif",serif);font-style:italic;font-weight:400;font-size:clamp(32px,9vw,48px);line-height:1.15;color:var(--ink,#1a1510);padding:14px 0;border-bottom:1px solid var(--line,rgba(26,21,16,.1));letter-spacing:-.015em;transition:color .3s cubic-bezier(.2,.8,.2,1),padding-left .4s cubic-bezier(.2,.8,.2,1);display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(14px);gap:16px}
.nav__drawer[aria-hidden="false"] .nav__drawer-links a{animation:drawerLinkIn .65s cubic-bezier(.2,.8,.2,1) both}
.nav__drawer[aria-hidden="false"] .nav__drawer-links a:nth-child(1){animation-delay:.08s}
.nav__drawer[aria-hidden="false"] .nav__drawer-links a:nth-child(2){animation-delay:.14s}
.nav__drawer[aria-hidden="false"] .nav__drawer-links a:nth-child(3){animation-delay:.20s}
.nav__drawer[aria-hidden="false"] .nav__drawer-links a:nth-child(4){animation-delay:.26s}
.nav__drawer[aria-hidden="false"] .nav__drawer-links a:nth-child(5){animation-delay:.32s}
.nav__drawer[aria-hidden="false"] .nav__drawer-links a:nth-child(6){animation-delay:.38s}
@keyframes drawerLinkIn{to{opacity:1;transform:none}}
.nav__drawer-links a::after{content:"→";font-family:var(--f-body,"Newsreader",serif);font-style:normal;font-size:.42em;color:var(--ink-dim,#776b5c);opacity:0;transform:translateX(-8px);transition:opacity .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1),color .3s cubic-bezier(.2,.8,.2,1);flex:0 0 auto}
.nav__drawer-links a:hover,.nav__drawer-links a:focus{color:#b13720;padding-left:6px}
.nav__drawer-links a:hover::after,.nav__drawer-links a:focus::after{opacity:1;transform:none;color:#b13720}
.nav__drawer-links a.is-on{color:#b13720}
.nav__drawer-links a.is-on::after{opacity:1;transform:none;color:#b13720}

.nav__drawer-foot{display:flex;flex-direction:column;gap:6px;padding-top:22px;border-top:1px solid var(--line,rgba(26,21,16,.1))}
.nav__drawer-phone{font-family:var(--f-display,"Instrument Serif",serif);font-style:italic;font-size:30px;color:var(--ink,#1a1510);line-height:1.1;letter-spacing:-.01em;transition:color .3s cubic-bezier(.2,.8,.2,1)}
.nav__drawer-phone:hover{color:#b13720}
.nav__drawer-addr,.nav__drawer-hrs{font-family:var(--f-body,"Newsreader",serif);font-size:14px;color:var(--ink-dim,#776b5c);letter-spacing:.005em;margin:0;line-height:1.55}
.nav__drawer-hrs em{font-style:italic;color:var(--ink-2,#2d251d)}

@media(max-width:1060px){.nav__burger{display:inline-flex}}
@media(max-width:760px){
  .nav__name small{display:none}
  .nav__name{font-size:18px}
  .nav__cta > a.btn{display:none}
}
html.is-nav-open,html.is-nav-open body{overflow:hidden}
html.is-nav-open .chat{visibility:hidden}