/* Ask Sherlo: the panel and the ask bar (DECISIONS/0314, addendum 2 and addendum 3). Every style of the panel is here, so
   a new look is one file to change. Addendum 3 (owner, 11 Nov 2026: "the chat box design on the website needs to be the
   same as the one on the Terminal"): the panel is the Terminal's Sherlo panel (apps/web/src/components/sherlo-assistant.tsx
   with its globals.css rules), in the Terminal's Pearl colours: ink #0b1b2b, ink-2 #3a3f44, muted #55585c, light #fbfbf9,
   surface #fff, sunken #f1f1ee, line #ececea, line-strong #d6d6d1, lime #c5d752; Hanken Grotesk and Mulish as there.
   A 420px card floating bottom right (24px radius, hairline, soft shadow; page not dimmed), header with the ink disc, her
   wordmark at 22px and a muted status line, a white thread, Sherlo's words in sunken bubbles and the visitor's in ink, cards
   and the booking form as white tiles under the bubble, pill chips, the rounded box with a round ink Send. Phones: the same
   card 8px from the edges. Kept from addendum 2: the AI note, home cards with their DLD permit, diary times as chips, the
   contact and consent card, "Prefer WhatsApp?", "How we use your messages". The ask bar (option C) is ink like the
   Terminal's Sherlo button. Printed on every page (inc/chat.php), chat on or off. One rule per line (the inline printer
   joins lines). */
.scrim{position:fixed;inset:0;background:transparent;z-index:40}
.drawer{position:fixed;right:24px;bottom:24px;width:420px;max-width:calc(100% - 48px);max-height:min(640px,calc(100vh - 48px));max-height:min(640px,calc(100dvh - 48px));background:#fff;border:1px solid #ececea;border-radius:24px;box-shadow:0 18px 40px rgba(0,0,0,.14);display:flex;flex-direction:column;overflow:hidden;z-index:41;font-family:Mulish,system-ui,sans-serif;color:#0b1b2b}
.scrim[hidden],.drawer[hidden]{display:none}
.drawer.page{position:static;width:auto;max-width:560px;max-height:none;margin:0 auto;box-shadow:0 1px 2px rgba(11,27,43,.05);min-height:70vh}
.drawer .dh{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #ececea}
.drawer .dh-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.drawer .dh-t strong{font-weight:inherit;color:#0b1b2b}
.drawer .dh .sl-word{font-size:22px}
.drawer .dh-t>span{font-size:12px;color:#55585c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer .dh-t>.dh-busy{display:none}
.drawer.sw-chat.sl-live .dh-t>.dh-idle{display:none}
.drawer.sw-chat.sl-live .dh-t>.dh-busy{display:block}
.drawer .x{width:36px;height:36px;flex:none;border:0;border-radius:12px;background:transparent;color:#3a3f44;display:grid;place-items:center;cursor:pointer;padding:0}
.drawer .x:hover{background:#f1f1ee}
.drawer .note{display:flex;gap:10px;align-items:flex-start;margin:12px 16px 0;padding:10px 14px;border-radius:14px;background:#f1f1ee;font-size:13px;line-height:1.45;color:#3a3f44}
.drawer .note .spark{display:inline-block;width:7px;height:7px;flex:none;margin-top:6px;border-radius:50%;background:#c5d752;box-shadow:0 0 0 2.5px #0b1b2b}
.drawer .note svg{flex:none;margin-top:1px}
.drawer .note strong{color:#0b1b2b}
.drawer .n-short{display:none}
.drawer .thread{flex:1;min-height:160px;overflow:auto;background:#fff;padding:16px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.drawer .me{align-self:flex-end;max-width:88%;background:#0b1b2b;color:#fbfbf9;border-radius:16px;padding:8px 14px;font-size:14.5px;line-height:1.625;white-space:pre-line;overflow-wrap:anywhere}
.drawer .bot{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:14.5px;line-height:1.625;color:#0b1b2b}
.drawer .bot p{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.drawer .bot>p:not(.fine):not(.consent){max-width:88%;background:#f1f1ee;border-radius:16px;padding:8px 14px}
.drawer .bot.intro{gap:12px;font-size:14px;line-height:1.45;color:#3a3f44}
.drawer .bot.intro>p:not(.fine):not(.consent){max-width:none;background:transparent;border-radius:0;padding:0}
.drawer .bot .fine{font-size:12.5px;line-height:1.5;color:#55585c;white-space:normal}
.drawer .bot.staff>p:not(.fine):not(.consent){box-shadow:inset 0 0 0 1.5px #c5d752}
.drawer .bot .who{font-size:12px;font-weight:700;color:#55585c;padding-left:2px}
.drawer .sysline{align-self:center;font-size:12.5px;color:#55585c;text-align:center;max-width:90%;margin:0}
.drawer .sl-typing{display:none;align-self:flex-start;padding:4px 0;font-size:14px}
.drawer.sl-live .sl-typing{display:inline-flex}
.drawer .cards{display:flex;flex-direction:column;gap:8px;width:100%;max-width:92%}
.drawer .pcard{display:flex;gap:12px;border:1px solid #ececea;border-radius:16px;padding:12px;background:#fff;box-shadow:0 1px 2px rgba(11,27,43,.05);color:#0b1b2b;text-decoration:none}
.drawer a.pcard:hover{border-color:#d6d6d1;color:#0b1b2b}
.drawer .pcard .thumb{width:76px;height:76px;flex:none;border-radius:12px;background:#e6e6e1;object-fit:cover;display:block}
.drawer .pcard .pb{display:flex;flex-direction:column;min-width:0}
.drawer .pcard .pt{font:600 14.5px/1.3 'Hanken Grotesk',system-ui,sans-serif;margin:0;color:#0b1b2b}
.drawer .pcard .ps{font-size:12.5px;line-height:1.4;color:#55585c;margin:2px 0 0}
.drawer .pcard .pp{font:600 14px 'Hanken Grotesk',system-ui,sans-serif;margin:4px 0 0;color:#0b1b2b}
.drawer .pcard .permit{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:#55585c;margin-top:4px}
.drawer .times{display:flex;flex-wrap:wrap;gap:8px}
.sw .drawer .chip{min-height:36px;padding:0 12px;border-radius:999px;font:700 14.5px Mulish,system-ui,sans-serif;color:#0b1b2b;background:#f1f1ee;border:1px solid #ececea;cursor:pointer;white-space:nowrap}
.sw .drawer .chip:hover{background:#002a51;border-color:#002a51;color:#fbfbf9}
.sw .drawer .chip.on{background:#0b1b2b;border-color:#0b1b2b;color:#fbfbf9}
.drawer .consent{font-size:12px;color:#55585c}
.drawer .bot.wide{align-self:stretch}
.drawer .book{display:flex;flex-direction:column;gap:10px;width:100%;max-width:92%;margin:0;padding:12px;border:1px solid #ececea;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(11,27,43,.05)}
.drawer .inp{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:700;color:#3a3f44}
.drawer .inp input{border:1px solid #d6d6d1;border-radius:8px;min-height:44px;padding:0 14px;font:500 16px Mulish,system-ui,sans-serif;color:#0b1b2b;background:#fff;width:100%}
.drawer .seg{display:flex;align-self:stretch;gap:4px;padding:3px;border-radius:999px;background:#f1f1ee}
.drawer .seg button{flex:1;justify-content:center;min-height:36px;padding:0 12px;border:0;border-radius:999px;background:transparent;font:700 13.5px Mulish,system-ui,sans-serif;color:#3a3f44;cursor:pointer}
.drawer .seg button[aria-pressed=true]{background:#0b1b2b;color:#fbfbf9}
.drawer .tick{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.45;color:#3a3f44;font-weight:400}
.drawer .tick input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:#0b1b2b}
.drawer .book .btn{width:100%}
.drawer .book .err{font-size:12px;color:#a83434;margin:0}
.sw .drawer .btn.bp{min-height:44px;border-radius:999px;padding:0 18px;background:#0b1b2b;border-color:#0b1b2b;color:#fbfbf9;font:600 14px Mulish,system-ui,sans-serif}
.sw .drawer .btn.bp:hover{background:#24364a;border-color:#24364a;color:#fbfbf9}
.drawer .comp{padding:12px;display:flex;flex-direction:column;gap:8px;border-top:1px solid #ececea;background:#fff;margin:0}
.sw-chat-row{display:flex;gap:8px;align-items:flex-end}
.drawer .comp textarea{flex:1;width:auto;border:1px solid #d6d6d1;border-radius:16px;padding:10px 14px;font:400 15px/1.45 Mulish,system-ui,sans-serif;color:#0b1b2b;resize:none;height:44px;min-height:44px;max-height:128px;background:#fff;overflow:auto}
.drawer .comp textarea::placeholder{color:#6c7074;opacity:1}
.drawer .comp textarea:focus-visible,.drawer .inp input:focus-visible,.drawer .tick input:focus-visible{outline:2px solid #0b1b2b;outline-offset:2px;box-shadow:0 0 0 6px rgba(197,215,82,.5)}
.drawer .comp textarea:focus{border-color:#d6d6d1}
.sw .drawer .comp .btn{flex:none;min-height:44px}
.sw .drawer .comp .btn.send{width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center}
.sw .drawer .comp textarea:placeholder-shown~.btn.send{opacity:.5}
.drawer .comp-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 4px}
.sw .drawer .how{font-size:12px;color:#55585c}
.sw-chat-wa{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#1E6B45;font-weight:700;text-decoration:none}
.sw a.sw-chat-wa{color:#1E6B45}
.sw a.sw-chat-wa:hover{color:#1E6B45;text-decoration:underline}
.askbar{position:fixed;right:24px;bottom:24px;z-index:35;width:380px;max-width:calc(100% - 48px);display:flex;align-items:center;gap:10px;min-height:52px;padding:0 6px 0 10px;border-radius:26px;background:#0b1b2b;color:#fbfbf9;box-shadow:0 10px 26px rgba(11,27,43,.05),0 2px 6px rgba(0,0,0,.12);margin:0}
.askbar:hover,.askbar:focus-within{box-shadow:0 0 0 4px rgba(197,215,82,.35),0 10px 26px rgba(11,27,43,.05)}
.askbar .sl-disc{width:32px;height:32px;font-size:14px;background:#fbfbf9;color:#0b1b2b}
.askbar .ab-mark{flex:none;display:inline-flex;align-items:center;padding-left:8px;color:#fbfbf9;font-size:20px}
.askbar .ab-mark .sl-btn-sherl{max-width:6em;opacity:1}
@media (prefers-reduced-motion:no-preference){
.askbar:not(:hover):not(:focus-within):not(.sl-live) .ab-mark .sl-btn-sherl{max-width:0;opacity:0;animation:sl-reveal 6s ease-in-out infinite}
}
.askbar input[type=text]{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fbfbf9;font:500 15px Mulish,system-ui,sans-serif;min-height:44px;padding:0}
.askbar input[type=text]::placeholder{color:#B9C3CC;opacity:1}
.askbar .kbd{font:700 11px Mulish,system-ui,sans-serif;color:#B9C3CC;border:1px solid #3A4A5A;border-radius:6px;padding:2px 7px;line-height:1.4;background:transparent}
.askbar .go{width:40px;height:40px;flex:none;border-radius:50%;border:0;background:#c5d752;color:#0b1b2b;display:grid;place-items:center;cursor:pointer}
.askbar .go:hover{background:#D3E36A}
.askbar .go:focus-visible{outline:2px solid #fbfbf9;outline-offset:2px}
body.noscroll .askbar{display:none}
.askbar.sl-live .sl-btn-o{animation:none}
@media (min-width:701px){.ft .fw{padding-bottom:104px}}
@media (max-width:700px){
.askbar{display:none}
.drawer{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;max-width:none;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px)}
.drawer.page{max-height:none}
.drawer .x{width:44px;height:44px;margin-right:-4px}
.drawer .note{margin:10px 12px 0;padding:8px 12px;font-size:12px}
.drawer .note svg,.drawer .n-long{display:none}
.drawer .n-short{display:inline}
.drawer .thread{padding:14px 12px;gap:10px}
.drawer .bot>p:not(.fine):not(.consent),.drawer .me{max-width:92%}
.drawer .cards,.drawer .book{max-width:100%}
.drawer .pcard .thumb{width:64px;height:64px}
.drawer .comp{padding:10px}
.drawer .comp textarea{font-size:16px}
.sw .drawer .comp .btn{padding:0 14px}
.sw .drawer .comp .btn.send{padding:0}
.drawer .how{display:none}
.drawer.page .how{display:inline}
}
@media (prefers-reduced-motion:no-preference){
.drawer:not(.page):not([hidden]){animation:sw-panel-in .16s ease-out;transform-origin:bottom right}
.drawer .x,.sw .drawer .chip,.sw .drawer .btn,.drawer .seg button{transition:background-color .15s,border-color .15s,color .15s,opacity .15s,transform .08s}
.drawer .x:active,.sw .drawer .chip:active,.sw .drawer .btn:active,.drawer .seg button:active{transform:scale(.97)}
.askbar{transition:box-shadow .2s ease}
}
@keyframes sw-panel-in{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}