/* Pizza Mia AI host chat — shared styles (see chat-widget.js) */
.pm-chat, .pm-chat *, .pm-chat *::before, .pm-chat *::after { box-sizing:border-box; }
.pm-chat { font-family:'Karla',sans-serif; }
.pm-chat button { font-family:'Karla',sans-serif; cursor:pointer; }

/* Launcher: glowing button + nudge bubble */
.chat-dock { position:fixed; bottom:22px; right:20px; z-index:999; display:flex; align-items:center; gap:12px; transition:bottom .2s; }
.chat-dock.raised { bottom:92px; }
.chat-dock.raised.tall { bottom:128px; }
.chat-dock.away { display:none; }
.chat-fab { position:relative; width:64px; height:64px; border-radius:50%; border:3px solid #FBF3E6; padding:0; background:linear-gradient(135deg,#C9341F,#E8A33D); color:#fff; display:flex; align-items:center; justify-content:center; animation:cfGlow 2.2s ease-in-out infinite; transition:transform .15s; }
.chat-fab:hover { transform:scale(1.08); }
.chat-fab .cf-ico { font-size:28px; line-height:1; display:block; animation:cfWiggle 4.4s ease-in-out infinite; }
.chat-fab::before, .chat-fab::after { content:''; position:absolute; inset:-3px; border-radius:50%; border:3px solid #E8A33D; animation:cfRing 2.2s ease-out infinite; pointer-events:none; }
.chat-fab::after { animation-delay:1.1s; }
.chat-fab .dot { position:absolute; top:1px; right:2px; width:14px; height:14px; border-radius:50%; background:#2FBF5B; border:2px solid #fff; animation:cfDot 1.6s ease-in-out infinite; }
.chat-fab.seen { animation:none; box-shadow:0 5px 16px rgba(0,0,0,.3); }
.chat-fab.seen::before, .chat-fab.seen::after, .chat-fab.seen .cf-ico { animation:none; opacity:0; }
.chat-fab.seen .cf-ico { opacity:1; }
@keyframes cfGlow { 0%,100% { box-shadow:0 5px 16px rgba(0,0,0,.3), 0 0 12px 2px rgba(232,163,61,.55); } 50% { box-shadow:0 5px 16px rgba(0,0,0,.3), 0 0 26px 9px rgba(232,163,61,.85); } }
@keyframes cfRing { 0% { transform:scale(1); opacity:.9; } 100% { transform:scale(1.75); opacity:0; } }
@keyframes cfWiggle { 0%,78%,100% { transform:rotate(0); } 82% { transform:rotate(-14deg); } 86% { transform:rotate(12deg); } 90% { transform:rotate(-8deg); } 94% { transform:rotate(5deg); } }
@keyframes cfDot { 0%,100% { transform:scale(1); } 50% { transform:scale(1.2); } }
.chat-nudge { position:relative; background:#FFFCF6; color:#22271F; border:1.5px solid #E8A33D; border-radius:16px; padding:10px 28px 10px 13px; font-size:13px; line-height:1.35; max-width:210px; box-shadow:0 8px 22px rgba(0,0,0,.22); cursor:pointer; opacity:0; transform:translateX(10px) scale(.95); pointer-events:none; transition:opacity .25s, transform .25s; }
.chat-nudge.show { opacity:1; transform:none; pointer-events:auto; }
.chat-nudge b { display:block; font-size:14px; color:#1B3A2A; }
.chat-nudge::after { content:''; position:absolute; right:-8px; top:50%; margin-top:-7px; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:8px solid #E8A33D; }
.chat-nudge .cn-x { position:absolute; top:3px; right:5px; background:none; border:none; color:#7A7767; font-size:17px; line-height:1; padding:2px 4px; }
.pm-chat-open .chat-dock { opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce) { .chat-fab, .chat-fab::before, .chat-fab::after, .chat-fab .cf-ico, .chat-fab .dot { animation:none; } }
@media (max-width:600px) { .chat-dock { bottom:18px; right:16px; } .chat-dock.raised { bottom:88px; } .chat-dock.raised.tall { bottom:124px; } .chat-fab { width:58px; height:58px; } .chat-nudge { max-width:170px; font-size:12.5px; } }

/* Panel */
  .chat-panel { position:fixed; bottom:22px; right:20px; z-index:1001; font-family:'Karla',sans-serif; color:#22271F; text-align:left; width:min(380px,calc(100vw - 24px)); height:min(600px,calc(100vh - 110px)); background:#FBF3E6; border-radius:20px; box-shadow:0 12px 40px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:hidden; opacity:0; pointer-events:none; transform:translateY(16px) scale(.98); transition:opacity .2s, transform .2s; }
  .chat-panel.show { opacity:1; pointer-events:auto; transform:none; }
  .chat-head { background:#1B3A2A; color:#FBF3E6; padding:12px 14px; display:flex; align-items:center; gap:11px; }
  .chat-head .av { width:40px; height:40px; border-radius:50%; background:#2E5B41; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
  .chat-head .who { flex:1; min-width:0; }
  .chat-head .who .nm { font-weight:700; font-size:15px; }
  .chat-head .who .st { font-size:11.5px; color:#B9C7B0; }
  .chat-head .hbtn { background:none; border:none; color:#DCE8D6; font-weight:700; font-size:12.5px; cursor:pointer; padding:4px; }
  .chat-head .xc { font-size:23px; line-height:1; }
  .chat-body { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:9px; }
  .c-msg { max-width:86%; padding:10px 13px; border-radius:15px; font-size:14px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
  .c-msg.bot { align-self:flex-start; background:#FFFCF6; border:1px solid #EFE4D0; border-bottom-left-radius:5px; color:#22271F; }
  .c-msg.me { align-self:flex-end; background:#1B3A2A; color:#FBF3E6; border-bottom-right-radius:5px; }
  .c-adds { display:flex; flex-wrap:wrap; gap:7px; align-self:flex-start; max-width:90%; }
  .c-add { background:#C9341F; color:#fff; border:none; font-weight:700; font-size:12.5px; padding:7px 13px; border-radius:100px; cursor:pointer; box-shadow:0 2px 0 #8E2314; }
  .c-typing { align-self:flex-start; background:#FFFCF6; border:1px solid #EFE4D0; border-radius:15px; border-bottom-left-radius:5px; padding:12px 15px; display:flex; gap:4px; }
  .c-typing span { width:7px; height:7px; border-radius:50%; background:#B9A98C; animation:ctb 1s infinite; }
  .c-typing span:nth-child(2){ animation-delay:.15s; } .c-typing span:nth-child(3){ animation-delay:.3s; }
  @keyframes ctb { 0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-5px);opacity:1} }
  .chat-input { border-top:1px solid #EFE4D0; padding:10px; display:flex; gap:8px; align-items:flex-end; background:#FFFCF6; }
  .chat-input textarea { flex:1; border:1.5px solid #D9CBB3; border-radius:14px; padding:9px 12px; font-family:'Karla',sans-serif; font-size:14px; resize:none; max-height:90px; background:#fff; color:#22271F; }
  .chat-input textarea:focus { outline:none; border-color:#1B3A2A; }
  .chat-input .send { background:#C9341F; color:#fff; border:none; width:42px; height:42px; border-radius:50%; font-size:17px; flex-shrink:0; cursor:pointer; }
  .chat-input .send:disabled { opacity:.5; }
  @media (max-width:480px){ .chat-panel { bottom:0; right:0; width:100vw; height:90vh; border-radius:18px 18px 0 0; } }