/* The Inca web chat (public/inca/chat.html, public/chatapp.js): an app screen, calm and warm. One terracotta accent (the send button, the focus of the place name), one teal
   (the "post an event" door), navy ink on warm paper; the event type tags and tints are the ones of the rest of the site (.kt in public/inca.css).
   The Inca signature is kept small: a stepped notch under the header, a cut corner on every bubble's tail, a slanted send button. No stone texture here: the text is the subject.
   Everything is scoped under body.chatpage (inca.css is added after this file by the Worker) and uses logical properties, so Hebrew mirrors by itself.
   Contrast (WCAG AA): ink #0f2747 on paper 14:1, muted #44506a 7:1, white on terracotta #a05a42 5.5:1, white on the visitor's navy bubble 14:1;
   dark: #fbf8f2 on #26231f 15:1, muted #d6cfc4 10:1, dark ink #3a1d10 on the light terracotta button #f0bfa8 9:1. */
html:has(body.chatpage) { background: var(--c-bg2, #e9e2d5); }
body.chatpage {
  --c-bg2: #e9e2d5; --c-paper: #f7f3ea; --c-head: #fbf8f2; --c-bub: #fff; --c-pop: #fff;
  --c-ink: #0f2747; --c-mute: #44506a; --c-line: rgba(15, 39, 71, .14); --c-line2: rgba(15, 39, 71, .5);
  --c-terra: #a05a42; --c-terra-h: #8a4630; --c-terra-t: #8a4630; --c-on-terra: #fff; --c-teal: #2f6a60;
  --c-user: #0f2747; --c-on-user: #fff; --c-link: #094c82; --c-focus: #0f2747;
  --c-note-bg: #fff3d1; --c-note: #3a2c00; --c-note-line: #e3cf8f; --c-dis: rgba(15, 39, 71, .12); --c-on-dis: #5b6579;
  --pop-shadow: 0 10px 28px rgba(15, 39, 71, .2), 0 0 0 1px rgba(15, 39, 71, .12);
  --tail: 10px;
  margin: 0; position: fixed; inset: 0; overflow: hidden; background: var(--c-bg2); color: var(--c-ink); font: 16px/1.5 var(--sans);
}
@media (prefers-color-scheme: dark) {
  html:has(body.chatpage) { background: #1c1a17; }
  body.chatpage {
    --c-bg2: #1c1a17; --c-paper: #26231f; --c-head: #2d2a25; --c-bub: #34302b; --c-pop: #3d3935;
    --c-ink: #fbf8f2; --c-mute: #d6cfc4; --c-line: rgba(255, 255, 255, .14); --c-line2: rgba(255, 255, 255, .45);
    --c-terra: #f0bfa8; --c-terra-h: #f6d0bd; --c-terra-t: #f0bfa8; --c-on-terra: #3a1d10; --c-teal: #7fc0b2;
    --c-user: #2b4a78; --c-on-user: #fff; --c-link: #9cc9f0; --c-focus: #fff;
    --c-note-bg: #3b3216; --c-note: #fbeab0; --c-note-line: #6b5a22; --c-dis: rgba(255, 255, 255, .1); --c-on-dis: #b9b2a6;
    --pop-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .14);
  }
}
.chatpage ::selection { background: var(--c-ink); color: var(--c-paper); }
.chatpage :focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- the app: one column, as tall as the visible screen (public/chatui.js keeps it above the keyboard) */
.chatpage .chatapp { height: 100dvh; max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; background: var(--c-paper); position: relative; overflow: hidden; }
@media (min-width: 900px) { .chatpage .chatapp { box-shadow: 0 0 0 1px var(--c-line); } }
.chatpage .chat-main { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.chatpage .chat-main:focus { outline: none; }

/* ---------------------------------------------------------------- header: the hummingbird, "Lulu / our AI guide for [place]", language, More */
.chatpage .chat-hd { flex: none; position: relative; z-index: 20; display: flex; align-items: center; gap: 10px; background: var(--c-head);
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px)); min-height: 62px; }
/* the stepped notch (the Inca stair) hanging from the header's lower edge: the only ornament */
.chatpage .chat-hd::after { content: ""; position: absolute; inset-inline: 0; bottom: -9px; height: 9px; pointer-events: none; background: var(--c-terra);
  clip-path: polygon(0 0, 100% 0, 100% 2px, calc(50% + 26px) 2px, calc(50% + 26px) 5px, calc(50% + 14px) 5px, calc(50% + 14px) 9px, calc(50% - 14px) 9px, calc(50% - 14px) 5px, calc(50% - 26px) 5px, calc(50% - 26px) 2px, 0 2px); }
.chatpage .hd-av { width: 42px; height: 42px; flex: none; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 2px var(--c-bub), 0 0 0 3.5px var(--c-terra); }
.chatpage .hd-t { flex: 1; min-width: 0; }
.chatpage .hd-t h1 { margin: 0; font: 700 21px/1.1 var(--display); letter-spacing: -.01em; color: var(--c-ink); text-wrap: initial; }
.chatpage .hd-s { display: flex; align-items: center; flex-wrap: wrap; column-gap: 5px; margin-top: 2px; font: 500 13.5px/1.3 var(--sans); color: var(--c-mute); }
.chatpage .hd-s > span { min-width: 0; }
.chatpage .hd-r { flex: none; display: flex; align-items: center; gap: 4px; }
html[lang="he"] .chatpage .hd-t h1 { letter-spacing: 0; }
/* the place name is a quiet text button: the current place and a caret (the markup and the keyboard handling of every other page, public/placebar.js) */
.chatpage .hd-s .pl { flex: none; order: 0; margin: 0; display: block; min-width: 0; }
.chatpage .hd-s .plm { display: block; }
.chatpage .hd-s .plb { position: relative; min-height: 28px; padding: 0 2px; gap: 3px; background: none; box-shadow: none; clip-path: none; color: var(--c-terra-t); font: 700 13.5px/1.2 var(--sans); }
.chatpage .hd-s .plb::before { content: ""; position: absolute; inset: -9px -6px; } /* a 44px target around a 28px word */
.chatpage .hd-s .plb .ico-svg:first-child { display: none; }
.chatpage .hd-s .plb .ico-svg:last-of-type { font-size: 14px; color: var(--c-terra-t); }
.chatpage .hd-s .plb:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
.chatpage .hd-s .plb:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; }
.chatpage .plpop { inset-inline-start: -6px; top: calc(100% + 10px); background: var(--c-pop); color: var(--c-ink); border: 0; box-shadow: var(--pop-shadow); padding: 6px; min-width: 230px; }
.chatpage .pli { color: var(--c-ink); min-height: 46px; font-size: 16px; }
.chatpage .pli .ico-svg { color: var(--c-terra-t); }
.chatpage .pli[aria-current] { color: var(--c-terra-t); background: var(--c-dis); }
.chatpage .pli:hover, .chatpage .pli:focus-visible { background: var(--c-dis); }
.chatpage .pli:focus-visible { box-shadow: inset 0 0 0 2px var(--c-focus); }
.chatpage .plall { color: var(--c-mute); border-top-color: var(--c-line); }
/* language: a quiet globe and the code */
.chatpage .ld { position: relative; }
.chatpage .ld-btn { clip-path: none; min-width: 44px; height: 44px; padding: 0 10px; gap: 5px; background: var(--c-dis); color: var(--c-ink); box-shadow: none; font-size: 12.5px; letter-spacing: .04em; }
.chatpage .ld-btn:hover, .chatpage .ld.open .ld-btn { background: var(--c-line); }
.chatpage .ld-btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.chatpage .ld-globe { width: 19px; height: 19px; }
html.js .chatpage .ld-menu { top: calc(100% + 8px); background: var(--c-pop); color: var(--c-ink); border: 0; box-shadow: var(--pop-shadow); }
html.js .chatpage .ld-i { color: var(--c-ink); }
html.js .chatpage .ld-i:hover, html.js .chatpage .ld-i:focus-visible { background: var(--c-dis); }
html.js .chatpage .ld-i:focus-visible { box-shadow: inset 0 0 0 2px var(--c-focus); }
html.js .chatpage .ld-i[aria-checked="true"] { color: var(--c-terra-t); }
html:not(.js) .chatpage .ld-menu { background: var(--c-pop); }
html:not(.js) .chatpage .ld-i { color: var(--c-ink); }
html:not(.js) .chatpage .ld-i[aria-current] { background: var(--c-ink); color: var(--c-paper); }
@media (max-width: 379px) { .chatpage .ld-code { display: none; } .chatpage .ld-btn { padding: 0 9px; } }
/* More */
.chatpage .cm { position: relative; }
.chatpage .cmb { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; list-style: none; cursor: pointer; color: var(--c-ink); background: var(--c-dis); user-select: none; }
.chatpage .cmb::-webkit-details-marker { display: none; }
.chatpage .cmb::marker { content: ""; }
.chatpage .cmb .ico-svg { width: 22px; height: 22px; }
.chatpage .cmb:hover, .chatpage .cm[open] > .cmb { background: var(--c-line); }
.chatpage .cml { list-style: none; margin: 0; padding: 6px; position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 70; min-width: 250px; max-width: calc(100vw - 24px); background: var(--c-pop); box-shadow: var(--pop-shadow); }
.chatpage .cmi { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 14px; border: 0; background: none; color: var(--c-ink); font: 600 16px/1.2 var(--sans); text-align: start; text-decoration: none; cursor: pointer; }
.chatpage .cmi .ico-svg { flex: none; font-size: 19px; color: var(--c-terra-t); }
.chatpage .cmi:hover, .chatpage .cmi:focus-visible { background: var(--c-dis); outline: none; }
.chatpage .cmi:focus-visible { box-shadow: inset 0 0 0 2px var(--c-focus); }
.chatpage .cmh { margin: 4px 0 2px; padding: 8px 14px 2px; border-top: 1px solid var(--c-line); font: 700 12.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--c-mute); }
.chatpage .cmh:empty { padding: 0; margin: 4px 0 0; }
.chatpage .cmh:first-child { border-top: 0; margin-top: 0; }

/* ---------------------------------------------------------------- the conversation */
.chatpage .chat-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--c-line2) transparent; padding-block-start: 9px; }
.chatpage .chat-log:focus-visible { outline-offset: -3px; }
.chatpage .chat-col { max-width: 720px; min-height: 100%; margin: 0 auto; padding: 12px max(14px, env(safe-area-inset-right, 0px)) 18px max(14px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 10px; }
.chatpage .msgs { display: flex; flex-direction: column; gap: 12px; }
.chatpage .chat-note:empty { display: none; }
.chatpage .wa-note[data-chat] { align-items: center; gap: 6px; padding: 4px 4px 4px 12px; background: var(--c-note-bg); color: var(--c-note); border: 0; box-shadow: inset 0 0 0 1px var(--c-note-line); font: 500 13.5px/1.35 var(--sans); }
html[dir="rtl"] .chatpage .wa-note[data-chat] { padding: 4px 12px 4px 4px; }
.chatpage .wa-note[data-chat] .wa-note-x { width: 44px; height: 44px; margin: 0; color: var(--c-note); }
.chatpage .wa-note[data-chat] a { color: inherit; }
.chatpage .wa-note[data-chat] a:focus-visible, .chatpage .wa-note[data-chat] .wa-note-x:focus-visible { outline-color: var(--c-note); }

/* the greeting and the four starters */
.chatpage .empty { margin-block: auto; padding: 6px 0 8px; text-align: center; }
.chatpage .empty[hidden] { display: none; }
.chatpage .empty-av { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 3px var(--c-paper), 0 0 0 5px var(--c-terra); }
.chatpage .empty h2 { margin: 0; font: 700 27px/1.15 var(--display); letter-spacing: -.02em; color: var(--c-ink); text-wrap: balance; }
html[lang="he"] .chatpage .empty h2 { letter-spacing: 0; }
.chatpage .empty-p { max-width: 30em; margin: 8px auto 16px; font-size: 16px; line-height: 1.5; color: var(--c-mute); text-wrap: pretty; }
.chatpage .starts { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: 560px; text-align: start; }
@media (min-width: 560px) { .chatpage .starts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .chatpage .empty h2 { font-size: 31px; } }
.chatpage .start { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 9px 14px 9px 10px; border: 0; background: var(--c-bub); color: var(--c-ink); font: inherit; text-align: start; cursor: pointer; box-shadow: inset 0 0 0 1px var(--c-line); }
html[dir="rtl"] .chatpage .start { padding: 9px 10px 9px 14px; }
.chatpage .start:hover { box-shadow: inset 0 0 0 2px var(--c-ink); }
.chatpage .start:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
.chatpage .start:active { background: var(--c-dis); }
.chatpage .si { flex: none; width: 42px; height: 42px; display: grid; place-items: center; background: var(--sb, #e9e4db); color: var(--sf, #3a352e); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
html[dir="rtl"] .chatpage .si { clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 100%, 5px 100%); }
.chatpage .st { min-width: 0; }
.chatpage .st b { display: block; font: 650 16px/1.25 var(--sans); }
.chatpage .st small { display: block; margin-top: 1px; font: 400 13.5px/1.3 var(--sans); color: var(--c-mute); }
.chatpage .s-tonight { --sb: #f1ddd2; --sf: #6e3320; }
.chatpage .s-around { --sb: #d8e5ee; --sf: #1f4a6a; }
.chatpage .s-post { --sb: #d9e8e2; --sf: #1f4d42; }
.chatpage .s-ask { --sb: #efe4c4; --sf: #5c4410; }
@media (prefers-color-scheme: dark) {
  .chatpage .s-tonight { --sb: #4a2b20; --sf: #f0d6c8; } .chatpage .s-around { --sb: #233f55; --sf: #d6e6f2; }
  .chatpage .s-post { --sb: #24433b; --sf: #cfe8df; } .chatpage .s-ask { --sb: #4a3f1e; --sf: #f2e6bf; }
}
@media (max-height: 860px) { .chatpage .empty-av { width: 52px; height: 52px; margin-bottom: 8px; } .chatpage .empty h2 { font-size: 25px; } .chatpage .empty-p { margin: 6px auto 12px; } .chatpage .wa-note[data-chat] { font-size: 13px; } }
@media (max-height: 720px) { .chatpage .empty-av { display: none; } .chatpage .st small { display: none; } .chatpage .start { min-height: 54px; } .chatpage .empty-p { margin-bottom: 12px; } }
html.kb .chatpage .empty-av, html.kb .chatpage .empty-p, html.kb .chatpage .st small { display: none; }

/* a turn: what the visitor sent (end side) or what Lulu answered (start side: bubbles, event cards) */
.chatpage .turn { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.chatpage .turn.out { align-items: flex-end; }
.chatpage .turn.in, .chatpage .turn.err { align-items: flex-start; }
.chatpage .turn.cont { margin-top: -6px; }
@media (prefers-reduced-motion: no-preference) {
  .chatpage .turn:not(.quiet) { animation: turn-in .22s ease-out both; }
  @keyframes turn-in { from { opacity: 0; transform: translateY(6px); } }
}
.chatpage .bub { max-width: min(100%, 34rem); padding: 10px 14px; font-size: 16.5px; line-height: 1.5; overflow-wrap: anywhere; background: var(--c-bub); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line); min-width: 0; }
.chatpage .turn.in .bub { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--tail) 100%, 0 calc(100% - var(--tail))); }
.chatpage .turn.in[dir="rtl"] .bub { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tail)), calc(100% - var(--tail)) 100%, 0 100%); }
.chatpage .turn.out .bub { max-width: min(88%, 30rem); background: var(--c-user); color: var(--c-on-user); box-shadow: none; white-space: pre-wrap; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tail)), calc(100% - var(--tail)) 100%, 0 100%); }
html[dir="rtl"] .chatpage .turn.out .bub { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--tail) 100%, 0 calc(100% - var(--tail))); }
.chatpage .turn.err .bub { background: var(--c-note-bg); color: var(--c-note); box-shadow: inset 0 0 0 1px var(--c-note-line); font-size: 15.5px; clip-path: none; }
.chatpage .bub .ln { min-height: 1.5em; }
.chatpage .bub .ln.ttl { font-weight: 700; }
.chatpage .bub .gap { height: .6em; }
.chatpage .turn[dir="rtl"] .ln { text-align: right; } .chatpage .turn[dir="ltr"] .ln { text-align: left; }
.chatpage .bub a { color: var(--c-link); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.chatpage .bub a:hover { text-decoration-thickness: 2px; }
.chatpage .turn.out .att-sent { display: block; max-width: 132px; height: auto; margin-bottom: 4px; box-shadow: 0 0 0 1px var(--c-line); }
.chatpage .errbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chatpage .errbtns .chip { text-decoration: none; background: var(--c-bub); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-note-line); }
.chatpage .postbtns .chip { background: var(--c-paper); box-shadow: inset 0 0 0 1.5px var(--c-line2); }
.chatpage .errbtns .chip:hover { box-shadow: inset 0 0 0 2px var(--c-ink); }

/* typing */
.chatpage .typing { display: inline-flex; align-items: center; gap: 10px; color: var(--c-mute); font-size: 14.5px; }
.chatpage .typing .dots { display: inline-flex; gap: 4px; }
.chatpage .typing .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-terra-t); animation: dotb 1.2s infinite; }
.chatpage .typing .dots i:nth-child(2) { animation-delay: .15s; } .chatpage .typing .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dotb { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.chatpage .bub.streaming { box-shadow: inset 0 0 0 1px var(--c-line2); }

/* an event card: type tag, title, the sentence that says what it is, when / where / price, one link */
.chatpage .evc { --kc: var(--c-line2); width: min(100%, 34rem); display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 4px; background: var(--c-bub); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line); border-inline-start: 4px solid var(--kc); min-width: 0; }
.chatpage .evc[data-k="music"] { --kc: #c28a73; } .chatpage .evc[data-k="yoga"] { --kc: #7fae9f; } .chatpage .evc[data-k="workshop"] { --kc: #9098c4; } .chatpage .evc[data-k="ceremony"] { --kc: #a98bb8; }
.chatpage .evc[data-k="markets"] { --kc: #c4a55e; } .chatpage .evc[data-k="talks"] { --kc: #86aac4; } .chatpage .evc[data-k="kids"] { --kc: #c48fa0; } .chatpage .evc[data-k="outdoors"] { --kc: #9cb87f; } .chatpage .evc[data-k="other"] { --kc: #a39c90; }
@media (prefers-color-scheme: dark) {
  .chatpage .evc[data-k="music"] { --kc: #b9806a; } .chatpage .evc[data-k="yoga"] { --kc: #5f9a8b; } .chatpage .evc[data-k="workshop"] { --kc: #7a84bd; } .chatpage .evc[data-k="ceremony"] { --kc: #9a78b0; }
  .chatpage .evc[data-k="markets"] { --kc: #b49a4e; } .chatpage .evc[data-k="talks"] { --kc: #6f9bbb; } .chatpage .evc[data-k="kids"] { --kc: #b0788a; } .chatpage .evc[data-k="outdoors"] { --kc: #8cac6e; }
}
.chatpage .evc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chatpage .evc-h:empty { display: none; }
.chatpage .evc .kt { margin: 0; }
.chatpage .evc-n { display: inline-flex; align-items: center; min-height: 24px; padding: 1px 8px; background: var(--c-note-bg); color: var(--c-note); box-shadow: inset 0 0 0 1px var(--c-note-line); font: 600 12.5px/1.2 var(--sans); }
.chatpage .evc-t { font: 700 17.5px/1.28 var(--sans); overflow-wrap: anywhere; }
.chatpage .evc-b { margin: 0; font-size: 15px; line-height: 1.45; color: var(--c-mute); }
.chatpage .evc-m { display: grid; gap: 3px; margin-top: 2px; }
.chatpage .evc-r { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.4; }
.chatpage .evc-i { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--c-terra-t); }
.chatpage .evc-cur { display: inline-block; text-align: center; font: 700 15px/18px var(--sans); }
.chatpage .evc-v { min-width: 0; overflow-wrap: anywhere; }
.chatpage .evc-map, .chatpage .evc-v a { color: var(--c-link); font-weight: 650; text-underline-offset: 3px; }
.chatpage .evc-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-inline-start: -2px; padding: 0 2px; color: var(--c-terra-t); font: 700 15.5px/1.2 var(--sans); text-decoration: none; }
.chatpage .evc-go:hover span { text-decoration: underline; text-underline-offset: 3px; }
.chatpage .evc-ar { flex: none; }
html[dir="rtl"] .chatpage .evc-ar, .chatpage .turn[dir="rtl"] .evc-ar { transform: scaleX(-1); }
.chatpage .turn[dir="ltr"] .evc-ar { transform: none; }

/* ---------------------------------------------------------------- the composer */
.chatpage .composer-wrap { flex: none; position: relative; z-index: 5; background: var(--c-paper); border-top: 1px solid var(--c-line);
  padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
.chatpage .composer, .chatpage .att-prev, .chatpage .att-err, .chatpage .disc { max-width: 720px; margin-inline: auto; }
.chatpage .composer { display: flex; flex-direction: column; background: var(--c-bub); box-shadow: inset 0 0 0 1.5px var(--c-line2); }
.chatpage .composer:focus-within { box-shadow: inset 0 0 0 2px var(--c-focus); }
.chatpage .composer textarea { display: block; width: 100%; box-sizing: border-box; min-height: 46px; max-height: 140px; margin: 0; padding: 12px 14px 4px; border: 0; border-radius: 0; background: transparent; color: var(--c-ink); font: 17px/1.4 var(--sans); resize: none; outline: none; overflow-y: auto; }
.chatpage .composer textarea::placeholder { color: var(--c-mute); opacity: .9; }
.chatpage .cbar { display: flex; align-items: center; gap: 6px; padding: 4px 6px 6px; }
.chatpage .cbar .att-btn { width: auto; min-height: 44px; padding: 0 12px 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--c-dis); color: var(--c-ink); font: 650 14.5px/1 var(--sans); }
.chatpage .cbar .att-btn[hidden] { display: none; }
.chatpage .cbar .att-btn:hover { background: var(--c-line); }
.chatpage .cbar .att-btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; }
.chatpage .cbar .att-btn[aria-pressed="true"] { background: var(--c-terra); color: var(--c-on-terra); }
.chatpage .att-ic { display: inline-flex; }
.chatpage .att-ic svg { width: 20px; height: 20px; }
.chatpage .att-btn:first-of-type .att-ic { color: var(--c-teal); }
.chatpage .cbar .att-btn[aria-pressed="true"] .att-ic { color: inherit; }
.chatpage .send { margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 96px; padding: 0 18px; border: 0; background: var(--c-terra); color: var(--c-on-terra); font: 700 16px/1 var(--sans); cursor: pointer;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
html[dir="rtl"] .chatpage .send { clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 100%, 7px 100%); }
.chatpage .send:hover:not(:disabled) { background: var(--c-terra-h); }
.chatpage .send:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-paper), inset 0 0 0 5px var(--c-ink); }
.chatpage .send:disabled { background: var(--c-dis); color: var(--c-on-dis); cursor: default; }
html[dir="rtl"] .chatpage .send-ar { transform: scaleX(-1); }
@media (prefers-reduced-motion: no-preference) { .chatpage .is-busy .send-ar { animation: att-pulse 1s ease-in-out infinite; } }
.chatpage .disc { margin-block: 6px 0; text-align: center; font-size: 12.5px; line-height: 1.35; color: var(--c-mute); text-wrap: balance; }
html.kb .chatpage .disc { display: none; }
@media (max-width: 380px) { .chatpage .cbar .att-btn { padding: 0 9px 0 8px; gap: 4px; font-size: 14px; } .chatpage .send { min-width: 84px; padding: 0 14px; } }
@media (max-height: 460px) { .chatpage .disc { display: none; } }

/* flyer / voice preview and errors, above the composer (markup from public/chatattach.js) */
.chatpage .att-prev { display: flex; margin-bottom: 8px; width: 100%; border: 0; background: var(--c-bub); box-shadow: inset 0 0 0 1.5px var(--c-line2); }
.chatpage .att-prev[hidden], .chatpage .att-err[hidden] { display: none; }
.chatpage .att-err { display: block; width: 100%; margin-bottom: 8px; background: var(--c-note-bg); color: var(--c-note); border-inline-start: 4px solid #b3261e; box-sizing: border-box; }
.chatpage .att-btn:focus-visible, .chatpage .att-x:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.chatpage .att-prog { accent-color: var(--c-terra); }
.chatpage .att-prev { padding: 8px 4px 6px 8px; gap: 2px 10px; }
html[dir="rtl"] .chatpage .att-prev { padding: 8px 8px 6px 4px; }
.chatpage .att-img { width: 48px; height: 48px; }
.chatpage .att-line { font-size: 14.5px; }
.chatpage .att-note { font-size: 12px; line-height: 1.35; opacity: .8; }
html.kb .chatpage .att-note { display: none; }

/* "Latest": appears when the visitor scrolled up while Lulu writes */
.chatpage .jump { position: absolute; left: 50%; top: -54px; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 0; background: var(--c-ink); color: var(--c-paper); font: 700 15px/1 var(--sans); cursor: pointer; box-shadow: var(--pop-shadow);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%); }
.chatpage .jump[hidden] { display: none; }
.chatpage .jump:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-paper); }
@media (prefers-reduced-motion: reduce) { .chatpage .typing .dots i { animation: none; opacity: .8; } }
@media print { .chatpage .composer-wrap, .chatpage .chat-hd::after { display: none; } body.chatpage { position: static; } }