/* The site chat (EU SPEC §9). Markup: the launcher #chat-dock (site/tools/pages/parts.mjs page()), the «Form / Chat» switch .via and
   .chat-slot in the Contact block (form.mjs), the panel #chat built by js/chat.js. In the site's paper language: a paper panel on
   hairlines, mono uppercase labels, square corners, no shadows; the accent only for the visitor's own messages, the Send chip and
   the unread mark. Tokens only (styles.css, css/pages.css): --paper --ink --accent --mid --line --hair --gut --body-ink --header.
   Everything here is hidden until the script runs: without JavaScript nothing of the chat shows and the form stays as it is.
   Layers: the launcher 15 (under the fixed header's 20, so the phone menu covers it), the panel 40 (under the modal player's 50). */
.chat-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.chat-dot{flex:0 0 auto;width:6px;height:6px;background:var(--accent)}
.chat-dot[hidden]{display:none}

/* ---- the launcher: a zero-height sticky line between the page and its footer. The chip stays in the window's corner while the page
   scrolls and stops above the footer, so it never lies on the footer's own corner. It steps aside (.away) while the Contact block
   is on screen, under the open player (.off), while its own panel is open (.open), and whenever a control of the page lies under
   its corner (.aside, js/chat.js way()): then it is faded out and lets taps through, but a keyboard still reaches it and it shows
   while it has the focus */
.chat-dock{position:sticky;bottom:0;height:0;z-index:15;pointer-events:none}
.chat-dock[hidden]{display:none}
.chat-open{all:unset;box-sizing:border-box;position:absolute;right:var(--gut);bottom:var(--gut);pointer-events:auto;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;color:var(--ink);background:var(--paper);border:1px solid var(--line);font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;transition:color .2s,border-color .2s,opacity .2s}
.chat-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* gone: faded, then out of reach; back: in reach at once (it takes the focus when its panel closes), then faded in */
.chat-dock.away .chat-open,.chat-dock.off .chat-open,.chat-dock.open .chat-open{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s .2s}
.chat-dock.aside .chat-open:not(:focus-visible){opacity:0;pointer-events:none}

/* ---- the panel. Floating: a dialog in the window's corner, an ink hairline around it (it lies over the page) */
.chat-panel{position:fixed;right:var(--gut);bottom:var(--gut);z-index:40;box-sizing:border-box;display:flex;flex-direction:column;width:min(384px,calc(100vw - 2 * var(--gut)));height:min(600px,calc(100dvh - var(--header) - 2 * var(--gut)));background:var(--paper);color:var(--ink);border:1px solid var(--ink)}
.chat-panel[hidden]{display:none}
.chat-panel:focus{outline:none}
.chat-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px;padding:0 4px 0 16px;border-bottom:var(--hair)}
.chat-head .label{margin:0}
.chat-x{all:unset;box-sizing:border-box;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;color:var(--mid);transition:color .2s}
.chat-x svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:1.3}
.chat-x:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.chat-log{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px 14px;display:flex;flex-direction:column;gap:14px}
.chat-log:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.chat-intro{padding-bottom:4px}
.chat-title{margin:0 0 8px;font-size:22px;line-height:1.04;letter-spacing:-.025em;font-weight:700;text-transform:uppercase;text-wrap:balance}
.chat-intro p{margin:0;font-size:15px;line-height:1.45;color:var(--body-ink)}
.chat-list{display:flex;flex-direction:column;gap:10px}
.chat-list:empty{display:none}
/* a message: the visitor's on the right in the accent, Nick's on the left in a hairline box; under a run of them, who and when */
.chat-msg{display:grid;gap:5px;max-width:86%;min-width:0}
.chat-msg.me{align-self:flex-end;justify-items:end}
.chat-msg.nick{align-self:flex-start;justify-items:start}
.chat-b{box-sizing:border-box;max-width:100%;padding:9px 12px;font-size:15px;line-height:1.42;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-msg.me .chat-b{background:var(--accent);color:var(--paper)}
.chat-msg.nick .chat-b{border:1px solid var(--line)}
.chat-meta{margin:0;color:var(--mid);font-size:10.5px}
.chat-msg.run{margin-bottom:-4px}
.chat-msg.run .chat-meta{display:none}
/* on its way: outlined; arrived: filled. Not sent: an ink outline and «Retry» */
.chat-msg.me.sending .chat-b,.chat-msg.me.failed .chat-b{background:none;color:var(--ink);outline:1px solid var(--accent);outline-offset:-1px}
.chat-msg.me.failed .chat-b{outline-color:var(--ink)}
.chat-note{margin:0;padding:11px 0 12px;border-top:var(--hair);border-bottom:var(--hair);font-size:14px;line-height:1.45;color:var(--body-ink)}
.chat-note[hidden]{display:none}
.chat-link{all:unset;cursor:pointer;color:var(--ink);border-bottom:1px solid var(--line);font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;transition:color .2s,border-color .2s}
.chat-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- the optional contact, between the conversation and the composer */
.chat-contact{flex:0 0 auto;border-top:var(--hair);padding:11px 16px 12px}
.chat-contact[hidden],.chat-cedit[hidden],.chat-csaved[hidden],.chat-cerr[hidden]{display:none}
.chat-cedit{display:grid;gap:5px;margin:0}
.chat-clabel{color:var(--mid);font-size:10.5px}
.chat-chint{margin:0;font-size:13.5px;line-height:1.4;color:var(--body-ink)}
.chat-crow{display:flex;align-items:flex-end;gap:12px;margin-top:2px}
.chat-cin{all:unset;box-sizing:border-box;flex:1 1 auto;min-width:0;font-size:16px;line-height:1.4;padding:5px 0;color:var(--ink);border-bottom:1px solid var(--line);transition:border-color .2s}
.chat-cin:focus{border-bottom-color:var(--ink)}
.chat-cin[aria-invalid="true"]{border-bottom-color:var(--accent)}
.chat-panel ::placeholder{color:var(--mid);opacity:1}
.chat-chip{all:unset;box-sizing:border-box;flex:0 0 auto;cursor:pointer;min-height:32px;display:inline-flex;align-items:center;padding:0 12px;color:var(--ink);border:1px solid var(--line);font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;transition:color .2s,border-color .2s}
.chat-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chat-chip:disabled{cursor:default;color:var(--mid);border-color:var(--line)}
.chat-cerr,.chat-stat{margin:0;font-size:13.5px;line-height:1.4;color:var(--ink)}
.chat-cerr::before,.chat-stat:not(:empty)::before{content:'';display:inline-block;width:6px;height:6px;margin-right:8px;background:var(--accent);vertical-align:.1em}
.chat-csaved{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.chat-cval{font-size:14.5px;line-height:1.4;min-width:0;overflow-wrap:anywhere}

/* ---- the composer: a hairline field and the accent chip, as in the form */
.chat-form{flex:0 0 auto;margin:0;border-top:var(--hair);padding:10px 16px 12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 10px;align-items:end}
/* one file per message: the paper clip, then the chosen file's name and size above the field, with a way to take it back */
.chat-clip{all:unset;box-sizing:border-box;cursor:pointer;width:32px;height:36px;display:grid;place-items:center;color:var(--mid);transition:color .2s}
.chat-clip svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.chat-clip:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.chat-clip:disabled{cursor:default;opacity:.5}
.chat-att{grid-column:1/-1;margin:0;display:flex;align-items:center;gap:10px;min-width:0;color:var(--ink);font-size:10.5px}
.chat-att[hidden]{display:none}
.chat-alabel{flex:0 0 auto;color:var(--accent)}
.chat-aname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none;letter-spacing:.02em;font-size:12px}
.chat-ax{flex:0 0 auto;width:28px;height:28px;margin:-6px 0 -6px auto}
/* a message's file: its name and size, nothing to open (the file went to Nick, it does not come back) */
.chat-f{display:block;font-size:10.5px;line-height:1.5;text-transform:none;letter-spacing:.03em;overflow-wrap:anywhere}
.chat-b:not(:empty)>.chat-f:not(:first-child){margin-top:6px}
/* a file dragged over the panel */
.chat-drop{display:none;position:absolute;inset:0;z-index:2;margin:0;place-items:center;text-align:center;padding:24px;background:var(--paper);color:var(--accent);outline:1px dashed var(--accent);outline-offset:-10px}
.chat-panel.dropping .chat-drop{display:grid}
.chat-ta{all:unset;box-sizing:border-box;display:block;width:100%;min-height:calc(1.4em + 13px);max-height:132px;overflow-y:auto;resize:none;font-size:16px;line-height:1.4;padding:6px 0;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;border-bottom:1px solid var(--line);transition:border-color .2s}
.chat-ta:focus{border-bottom-color:var(--ink)}
.chat-ta:disabled{color:var(--mid)}
.chat-go{all:unset;box-sizing:border-box;cursor:pointer;min-height:36px;display:inline-flex;align-items:center;padding:0 18px;color:var(--paper);background:var(--accent);font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;transition:background .2s}
.chat-go:disabled{cursor:default;background:var(--mid)}
.chat-go:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chat-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.chat-stat,.chat-consent{grid-column:1/-1}
.chat-stat:empty{display:none}
.chat-consent{margin:0;color:var(--mid);font-size:10px;letter-spacing:.02em;text-transform:none;line-height:1.5}
.chat-consent a{border-bottom:1px solid var(--line)}

/* ---- in the Contact block (the switch says «Chat»): a region in the form's place, in the flow, on quiet hairlines; no head, the
   switch above it is the way out */
.chat-panel.inline{position:relative;right:auto;bottom:auto;z-index:auto;width:auto;height:min(620px,max(440px,68svh));border-color:var(--line)}
.chat-panel.inline .chat-head{display:none}
.chat-panel.inline .chat-log{padding:24px 20px 16px}
.chat-panel.inline .chat-title{font-size:26px}
.chat-panel.inline .chat-msg{max-width:min(86%,56ch)}
.chat-panel.inline .chat-contact{padding-left:20px;padding-right:20px}
.chat-panel.inline .chat-form{padding:12px 20px 14px}
.chat-panel.inline .chat-ta{font-size:17px}
/* the switch: two mono words, the chosen one in ink on an accent underline (the grid filters' way) */
.write .via{display:flex;gap:22px;align-items:baseline;min-width:0}
.write .via[hidden],.write .chat-slot[hidden],.write .cform[hidden]{display:none}
.via button{all:unset;box-sizing:border-box;position:relative;cursor:pointer;display:inline-flex;align-items:center;gap:7px;color:var(--mid);padding:2px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.via button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.via button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.write .chat-slot{min-width:0}
/* two columns: the lead stays on the left beside both rows; the switch above the form (or the chat) on the right */
@media (min-width:1025px){
  .write.has-chat>.lead{grid-row:1/span 2}
  .write.has-chat>.via{grid-column:2;grid-row:1}
  .write.has-chat>.cform,.write.has-chat>.chat-slot{grid-column:2;grid-row:2}
}

/* ---- phones: the floating panel is a sheet across the width, from the bottom; --chat-kb / --chat-vh (js/chat.js, from the visual
   viewport) keep it above the on-screen keyboard and inside what is left of the screen */
@media (max-width:720px){
  .chat-panel:not(.inline){left:0;right:0;bottom:var(--chat-kb,0px);width:auto;height:min(640px,86dvh,var(--chat-vh,100dvh));border-width:1px 0 0}
  .chat-panel.inline{height:min(560px,max(420px,72svh));margin:0 calc(-1 * var(--gut));border-width:1px 0}
  .chat-panel.inline .chat-log,.chat-panel.inline .chat-contact,.chat-panel.inline .chat-form{padding-left:var(--gut);padding-right:var(--gut)}
}
/* hover only where a pointer can hover: after a tap on a touch screen Send and the launcher keep their own colours */
@media (hover:hover){
  .chat-open:hover{color:var(--accent);border-color:var(--accent)}
  .chat-x:hover{color:var(--accent)}
  .chat-clip:not(:disabled):hover{color:var(--accent)}
  .chat-link:hover{color:var(--accent);border-bottom-color:var(--accent)}
  .chat-chip:not(:disabled):hover{color:var(--accent);border-color:var(--accent)}
  .chat-go:not(:disabled):hover{background:var(--ink)}
  .chat-consent a:hover{color:var(--accent);border-bottom-color:var(--accent)}
  .via button:hover{color:var(--ink)}
}
@media (pointer:coarse){
  .chat-go{min-height:44px}
  /* the launcher keeps its small box on a touch screen; 4 px around it take the finger too (44 px tall in all) */
  .chat-open::after{content:'';position:absolute;inset:-5px}
  .chat-chip{min-height:40px}
  .chat-x{width:44px;height:44px}
  .chat-clip{width:40px;height:44px}
  .chat-ax{width:44px;height:44px;margin:-10px -8px -10px auto}
  /* the words keep their underline close; a transparent area around each takes the finger (44 px tall) */
  .write .via{padding:8px 0}
  .via button::after{content:'';position:absolute;inset:-14px -10px}
  .chat-link{padding:8px 0}
}
@media (prefers-reduced-motion:no-preference){
  .chat-panel:not(.inline){animation:chat-in .18s cubic-bezier(.2,.7,.2,1)}
  @keyframes chat-in{from{opacity:0;transform:translateY(8px)}}
}
@media (prefers-reduced-motion:reduce){.chat-clip,.chat-open,.chat-dock.away .chat-open,.chat-dock.off .chat-open,.chat-dock.open .chat-open,.chat-x,.chat-link,.chat-chip,.chat-go,.chat-ta,.chat-cin,.via button{transition:none}}
@media print{.chat-dock,.chat-panel:not(.inline){display:none}}