/* HUMO CHAT CONCEPTS, ROUND TWO (2026-10-08). His verdict on round one (1 one voice, 2 the stage, 3 the letter: flat type, hairlines, no
   glass): "definitely none", "a lot cleaner", keep the film behind and the liquid glass. Round one is in git (3b3a694).
   ?chat=4 THE SHEET: one liquid glass sheet, bottom centre, grows out of the bar as the conversation grows. Its head: Humo's glass bead, his
     name, eight points of light (the brief), the close. Humo's lines plain Stack inside the glass, the visitor's a clear glass pill, the bar
     flat at the sheet's foot. The sheet's rim lights per key (chat.js). The brief lands in the thread at the end with the send pill.
   ?chat=5 THE CAPSULE: the floating layout kept (Humo's clear glass bubble, the glass bar) with the card replaced by a glass capsule at the
     right edge: the bead at its head, eight points down it; it widens on hover and by itself once the brief is ready, with Send at its foot.
   Both: the film behind blurred less so the glass has something to refract; Stack for Humo's lines, Helvetica Neue for the rest (the new
   site's type, not the old Avant Garde). Face 2 THE LENS (a clear glass bead) by default; ?face=1 the signal and 3 the ring stay on the
   picker. Desktop only (his rule). */

html[data-chat] #chatDialog{--font:"Helvetica Neue HC","Helvetica Neue",Helvetica,Arial,sans-serif;--title:"Stack","Helvetica Neue HC","Helvetica Neue",Helvetica,Arial,sans-serif;--ink:#F4F2F7}
html[data-chat] .stage-film{filter:blur(26px) brightness(.85)}
html[data-chat] .stage-veil{background:radial-gradient(120% 90% at 50% 40%,transparent 35%,rgba(0,0,0,.42) 75%,rgba(0,0,0,.78) 100%),linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.08) 30%,rgba(0,0,0,.08) 70%,rgba(0,0,0,.38))}
/* type */
html[data-chat] #chatDialog .gmsg.bot{font-family:var(--title);font-weight:200;font-size:20px;line-height:1.42;letter-spacing:-.005em;color:var(--ink)}
html[data-chat] #chatDialog .gmsg.bot.typing-out .tw-live::after{width:1px;opacity:.5}
html[data-chat] #chatDialog .gmsg.me{font-family:var(--font);font-weight:300;font-size:15.5px;line-height:1.5;color:var(--ink);padding:10px 16px;border-radius:18px 18px 4px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 0 0 .5px rgba(255,255,255,.16),0 6px 18px rgba(0,0,0,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html[data-chat] #chatDialog .gmsg.me::before{display:none}
html[data-chat] #chatDialog .gtyping::before{display:none}
html[data-chat] #chatDialog .gtyping{padding:8px 0}
html[data-chat] #chatDialog .gtyping i{width:4px;height:4px;background:var(--ink);box-shadow:none;opacity:.75}
html[data-chat] #chatDialog .gchips .ui-btn{font-family:var(--font);font-weight:300;font-size:13.5px;letter-spacing:.01em;--h:36px;padding:0 15px;border-radius:999px}
html[data-chat] #chatDialog .gchips .ui-btn:not(.go):hover{text-shadow:none}
html[data-chat] #chatDialog .gbar textarea{font-family:var(--font);font-weight:300;font-size:15.5px}
html[data-chat] #chatDialog .gplace{font-family:var(--font);font-weight:300;font-size:15.5px;background:none;-webkit-text-fill-color:rgba(244,242,247,.5);color:rgba(244,242,247,.5);opacity:1}
html[data-chat] #chatDialog .gplace.out{opacity:0}
html[data-chat] #chatDialog .gfoot{font-family:var(--font);font-weight:300;font-size:12px;color:rgba(244,242,247,.45)}
html[data-chat] #chatDialogTitle{font-family:var(--font);font-weight:300;letter-spacing:.01em;color:var(--ink)}
html[data-chat] .brief-sub{font-family:var(--font);font-weight:300;color:rgba(244,242,247,.5)}
html[data-chat] .brief-rows::before{display:none}
html[data-chat] .brief-row .k{font-family:var(--font);font-weight:300;font-size:12.5px;letter-spacing:.01em;color:rgba(244,242,247,.45)}
html[data-chat] .brief-row.on .k{color:rgba(244,242,247,.9)}
html[data-chat] .brief-row .k::before{width:6px;height:6px;border:.5px solid rgba(244,242,247,.5)}
html[data-chat] .brief-row.on .k::before{background:#fff;border-color:#fff;box-shadow:0 0 6px rgba(255,255,255,.9),0 0 14px rgba(180,147,255,.7)}
html[data-chat] .stage-brief .ui-btn.block{font-family:var(--font);font-weight:300;font-size:13.5px;letter-spacing:.01em}
html[data-chat] .stage-brief .alt-link,html[data-chat] .brief-note{font-family:var(--font);font-weight:300;font-size:12px;color:rgba(244,242,247,.45)}
/* the brief in the thread (the sheet): a hairline, quiet labels, Stack values, a white pill */
html[data-chat] #chatDialog .gsum{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-top:.5px solid rgba(255,255,255,.14);border-radius:0;box-shadow:none;padding:16px 0 0;margin-top:8px;max-width:100%;width:100%}
html[data-chat] #chatDialog .gsum h4{font-family:var(--font);font-weight:300;font-size:11px;letter-spacing:.2em;color:rgba(244,242,247,.5);margin:0 0 4px}
html[data-chat] #chatDialog .gsum .r{font-family:var(--font);font-weight:300;font-size:14px;line-height:1.5;padding:8px 0;border-top:.5px solid rgba(255,255,255,.08);gap:24px}
html[data-chat] #chatDialog .gsum .r:first-of-type{border-top:0}
html[data-chat] #chatDialog .gsum .r span:first-child{color:rgba(244,242,247,.45)}
html[data-chat] #chatDialog .gsum .r span:last-child{font-family:var(--title);font-weight:200;font-size:17px;color:var(--ink)}
html[data-chat] #chatDialog .gsum .ui-btn{--h:40px;height:40px;min-height:40px;width:auto;display:inline-flex;align-items:center;justify-content:center;margin-top:16px;padding:0 20px;border-radius:999px;border:0;background:linear-gradient(180deg,#FFFFFF,#E4E5EA);color:#000;font-family:var(--font);font-weight:400;font-size:13.5px;white-space:nowrap;box-shadow:inset 0 1px 0 #fff,0 10px 28px -8px rgba(185,168,255,.45),0 0 24px -4px rgba(197,211,245,.4)}
html[data-chat] #chatDialog .gsum .ui-btn::before,html[data-chat] #chatDialog .gsum .ui-btn::after,html[data-chat] #chatDialog .gsum .ui-btn .dot{display:none}
html[data-chat] #chatDialog .gsum .alt-link{display:inline-block;margin-left:16px;font-family:var(--font);font-weight:300;font-size:12px;color:rgba(244,242,247,.45)}

@property --ka{syntax:"<angle>";inherits:true;initial-value:0deg}
@media(min-width:1024px){
/* ---------- 4 THE SHEET ---------- */
html[data-chat="4"] .stage-grid{display:flex;justify-content:center;align-items:flex-end;gap:0;padding:100px 32px 44px}
html[data-chat="4"] .stage-chat{position:relative;width:min(820px,100%);max-height:100%;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border-radius:30px;isolation:isolate;border:1px solid transparent;
  background:linear-gradient(118deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.045) 26%,rgba(255,255,255,.015) 50%,rgba(255,255,255,.04) 76%,rgba(255,255,255,.09) 100%) padding-box,
    linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.22)) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.8),rgba(197,211,245,.34) 40%,rgba(185,168,255,.38)) border-box;
  -webkit-backdrop-filter:blur(26px) saturate(2.2) brightness(1.1);backdrop-filter:blur(26px) saturate(2.2) brightness(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(185,168,255,.26),inset 0 0 0 1px rgba(255,255,255,.04),0 30px 80px rgba(0,0,0,.55),0 0 40px -14px rgba(185,168,255,.3)}
/* the rim light: a run of light around the sheet per key, a slow circling one while Humo writes */
html[data-chat="4"] .stage-chat::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.6px;pointer-events:none;z-index:4;opacity:0;transition:opacity .5s ease,--ka .55s cubic-bezier(.2,.7,.2,1);
  background:conic-gradient(from var(--ka,0deg),rgba(255,255,255,0) 0deg,rgba(231,162,255,.85) 30deg,rgba(255,255,255,.95) 52deg,rgba(143,162,255,.8) 80deg,rgba(255,255,255,0) 125deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
html[data-chat="4"] .stage-chat.key::after{opacity:1;transition:opacity .05s ease,--ka .55s cubic-bezier(.2,.7,.2,1)}
html[data-chat="4"] .stage-chat[data-state="composing"]::after,html[data-chat="4"] .stage-chat[data-state="working"]::after{opacity:.7;animation:sheet-run 2.4s linear infinite}
@keyframes sheet-run{from{--ka:0deg}to{--ka:360deg}}
html[data-chat="4"] #chatDialog[open] .stage-brief{animation-name:stage-in}
html[data-chat="4"] .stage-brief{flex:none;align-self:stretch;max-height:none;overflow:visible;flex-direction:row;align-items:center;gap:14px;padding:12px 12px 12px 20px;border:0;border-bottom:.5px solid rgba(255,255,255,.12);border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-chat="4"] .brief-head{flex-direction:row;align-items:center;gap:10px;margin:0}
html[data-chat="4"] #chatDialogTitle{font-size:14px;margin:0;line-height:1}
html[data-chat="4"] .brief-sub{margin:0;font-size:12.5px;line-height:1}
html[data-chat="4"] .brief-sub::before{content:"·";margin-right:8px;color:rgba(244,242,247,.3)}
html[data-chat="4"] .brief-rows{width:auto;margin-left:auto;flex-direction:row;gap:9px;align-items:center}
html[data-chat="4"] .brief-row{position:relative;padding:0;border:0;gap:0}
html[data-chat="4"] .brief-row .k{gap:0;font-size:0}
html[data-chat="4"] .brief-row .v{display:none}
html[data-chat="4"] .brief-row.on:hover .v{display:block;position:absolute;top:calc(100% + 12px);right:-6px;white-space:nowrap;max-width:none;font-family:var(--font);font-weight:300;font-size:12.5px;color:var(--ink);background:rgba(10,10,14,.82);padding:7px 11px;border-radius:999px;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2);z-index:5;-webkit-line-clamp:unset;overflow:visible}
html[data-chat="4"] .brief-meter,html[data-chat="4"] #briefSend,html[data-chat="4"] #briefMail,html[data-chat="4"] .brief-note{display:none}
html[data-chat="4"] #chatClose{position:static;width:34px;height:34px;margin-left:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(185,168,255,.25),0 8px 20px rgba(0,0,0,.4)}
html[data-chat="4"] #chatClose svg{width:15px;height:15px}
html[data-chat="4"] #chatDialog .chat{padding:0}
html[data-chat="4"] #chatDialog .gthread{margin:0;padding:22px 26px 6px;gap:14px}
html[data-chat="4"] #chatDialog .gthread:empty{display:block;padding:0}
html[data-chat="4"] #chatDialog .gmsg.bot{padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;max-width:92%}
html[data-chat="4"] #chatDialog .gchips{padding:0 26px;margin:0 0 18px}
html[data-chat="4"] #chatDialog .gchips:empty{display:none}
html[data-chat="4"] #chatDialog .gbar{margin:0;border-radius:0;min-height:62px;padding:10px 14px 10px 26px;border:0;border-top:.5px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-chat="4"] #chatDialog .gbar::before{display:none}
html[data-chat="4"] #chatDialog .gbar:focus-within{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02))}
html[data-chat="4"] #chatDialog .gplace{left:26px}
html[data-chat="4"] #chatDialog .gfoot{padding:0 26px 12px;margin:-4px 0 0}
html[data-chat="4"] #chatDialog .gfoot:empty{display:none}
html[data-chat="4"] #chatDialog .gfiles{padding:0 26px}

/* ---------- 5 THE CAPSULE ---------- */
html[data-chat="5"] .stage-grid{grid-template-columns:720px;gap:0}
html[data-chat="5"] .stage-brief{position:absolute;right:36px;top:50%;transform:translateY(-50%);width:56px;max-height:none;padding:10px;border-radius:30px;align-items:stretch;overflow:hidden;transition:width .55s var(--cv-ease,cubic-bezier(.22,1,.36,1))}
html[data-chat="5"] .stage-brief:hover,html[data-chat="5"] .stage-brief.ready{width:270px}
html[data-chat="5"] .brief-head{flex-direction:row;align-items:center;gap:12px;margin:0 0 8px;height:36px}
html[data-chat="5"] #chatDialogTitle{font-size:14.5px;margin:0;line-height:1;white-space:nowrap;opacity:0;transition:opacity .3s ease}
html[data-chat="5"] .brief-sub{display:none}
html[data-chat="5"] .brief-rows{gap:0}
html[data-chat="5"] .brief-row{justify-content:flex-start;align-items:center;gap:10px;padding:0 0 0 15px;height:30px;border:0;white-space:nowrap}
html[data-chat="5"] .brief-row .k{gap:14px;font-size:0;transition:color .3s ease}
html[data-chat="5"] .brief-row .v{text-align:left;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font);font-weight:300;font-size:12.5px;color:var(--ink);opacity:0;transition:opacity .3s ease;-webkit-line-clamp:unset}
html[data-chat="5"] .brief-meter{margin:8px 0 10px;opacity:0;transition:opacity .3s ease}
html[data-chat="5"] .stage-brief .ui-btn.block{height:0;min-height:0;padding:0 12px;opacity:0;overflow:hidden;transition:height .45s var(--cv-ease,cubic-bezier(.22,1,.36,1)),opacity .3s ease;white-space:nowrap}
html[data-chat="5"] .stage-brief .alt-link{margin-top:0;height:0;opacity:0;overflow:hidden;white-space:nowrap;transition:height .3s ease,opacity .3s ease}
html[data-chat="5"] .brief-note{margin:0;height:0;opacity:0;overflow:hidden;white-space:nowrap;transition:height .3s ease,opacity .3s ease}
html[data-chat="5"] .stage-brief:hover #chatDialogTitle,html[data-chat="5"] .stage-brief.ready #chatDialogTitle,html[data-chat="5"] .stage-brief:hover .brief-meter,html[data-chat="5"] .stage-brief.ready .brief-meter,html[data-chat="5"] .stage-brief:hover .brief-row .v,html[data-chat="5"] .stage-brief.ready .brief-row .v,html[data-chat="5"] .stage-brief:hover .ui-btn.block,html[data-chat="5"] .stage-brief.ready .ui-btn.block,html[data-chat="5"] .stage-brief:hover .alt-link,html[data-chat="5"] .stage-brief.ready .alt-link,html[data-chat="5"] .stage-brief:hover .brief-note,html[data-chat="5"] .stage-brief.ready .brief-note{opacity:1}
html[data-chat="5"] .stage-brief:hover .brief-row .k,html[data-chat="5"] .stage-brief.ready .brief-row .k{font-size:12.5px;color:rgba(244,242,247,.45)}
html[data-chat="5"] .stage-brief:hover .brief-row.on .k,html[data-chat="5"] .stage-brief.ready .brief-row.on .k{color:rgba(244,242,247,.9)}
html[data-chat="5"] .stage-brief:hover .ui-btn.block,html[data-chat="5"] .stage-brief.ready .ui-btn.block{height:40px;min-height:40px}
html[data-chat="5"] .stage-brief:hover .alt-link,html[data-chat="5"] .stage-brief.ready .alt-link{height:auto;margin-top:8px}
html[data-chat="5"] .stage-brief:hover .brief-note,html[data-chat="5"] .stage-brief.ready .brief-note{height:auto;margin-top:10px}
html[data-chat="5"] #chatDialog .gmsg.bot{padding:11px 18px;border-radius:22px 22px 22px 6px;border:0;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 .5px rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.14);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-size:19px}
html[data-chat="5"] #chatDialog .gthread{padding-top:20px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40px);mask-image:linear-gradient(180deg,transparent 0,#000 40px)}
html[data-chat="5"] #chatClose{top:40px;right:44px;width:40px;height:40px}
}

/* ---------- the faces ---------- */
html[data-face="1"] .humo,html[data-face="3"] .humo{border:0;background:none;box-shadow:none}
html[data-face="2"] .humo{border:0;background:radial-gradient(circle at 36% 28%,rgba(255,255,255,.3),rgba(255,255,255,.07) 48%,rgba(255,255,255,.02) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -8px 14px -9px rgba(0,0,0,.45),0 12px 28px -12px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(2px) saturate(1.8) brightness(1.3);backdrop-filter:blur(2px) saturate(1.8) brightness(1.3)}
html[data-face="2"] .humo::after{content:"";position:absolute;inset:0;border-radius:50%;padding:.6px;pointer-events:none;
  background:conic-gradient(from 200deg,rgba(255,255,255,.95),rgba(143,162,255,.55) 22%,rgba(231,162,255,.7) 48%,rgba(255,255,255,.4) 66%,rgba(180,147,255,.7) 84%,rgba(255,255,255,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
html[data-face] .chat-launcher:hover,html[data-face] .chat-launcher:focus-visible{box-shadow:0 0 30px -8px rgba(185,168,255,.45)}

/* the picker rows (localhost only, chat.js) */
.nx-pick b.c{color:#E3E4EC}