/* HEX, the site assistant (assets/hex/hex.js). It keeps Boisha violet everywhere, also on the PSYCHOBYL
   page whose green theme changes --v, so it uses its own --hex-* colours. Above the sticky header (40),
   below the gallery lightbox (80). */
.hex{--hex-v:#712bfc;--hex-v2:#b48aff;--hex-panel:#0c0a12;--hex-card:#15121d;--hex-tx:#f1eef5;--hex-dim:#b1aaba;--hex-line:rgba(223,210,245,.16);--hex-user:#2b1f4a;--hex-drop:rgba(0,0,0,.45);--hex-glow-soft:rgba(124,63,255,.3);--hex-glow:rgba(140,80,255,.85);--hex-shadow:0 12px 32px rgba(0,0,0,.5);position:fixed;right:22px;bottom:22px;z-index:60;font-family:inherit;color:var(--hex-tx)}
[data-theme=light] .hex{--hex-v:#6530c6;--hex-v2:#5124a9;--hex-panel:#fff;--hex-card:#f6f4fa;--hex-tx:#231a36;--hex-dim:#5a4979;--hex-line:rgba(51,37,78,.18);--hex-user:#ece4fb;--hex-drop:rgba(46,35,73,.25);--hex-glow-soft:rgba(101,48,198,.2);--hex-glow:rgba(101,48,198,.55);--hex-shadow:0 12px 30px rgba(46,35,73,.16)}

/* The button: the HEX mark alone, no frame. A violet glow follows its hexagon and breathes slowly, so it is
   easy to find without being loud. */
.hex-btn{display:block;width:80px;height:80px;padding:0;background:none;border:0;cursor:pointer;filter:drop-shadow(0 8px 16px var(--hex-drop)) drop-shadow(0 0 8px var(--hex-glow-soft));animation:hex-glow 3s ease-in-out infinite;transition:transform .2s}
.hex-btn img{display:block;width:100%;height:100%;animation:hex-float 3s ease-in-out infinite}
.hex-btn:hover{transform:translateY(-3px) scale(1.06)}
.hex-btn:active{transform:scale(.96)}
.hex-btn:focus-visible{outline:2px solid var(--hex-v2);outline-offset:4px;border-radius:3px}
.hex--open .hex-btn,.hex--open .hex-btn img{animation:none}
@keyframes hex-glow{50%{filter:drop-shadow(0 8px 16px var(--hex-drop)) drop-shadow(0 0 22px var(--hex-glow))}}
@keyframes hex-float{50%{transform:translateY(-3px)}}

/* Once per visit a speech bubble above the button invites a question. */
.hex-teaser{position:absolute;right:0;bottom:96px;display:flex;align-items:flex-start;gap:4px;width:max-content;max-width:260px;padding:10px 6px 10px 14px;background:var(--hex-panel);border:1px solid var(--hex-line);border-radius:3px;box-shadow:var(--hex-shadow);animation:hex-pop .4s cubic-bezier(.2,.8,.2,1)}
.hex-teaser[hidden],.hex--open .hex-teaser{display:none}
.hex-teaser:after{content:"";position:absolute;right:35px;bottom:-6px;width:10px;height:10px;background:var(--hex-panel);border-right:1px solid var(--hex-line);border-bottom:1px solid var(--hex-line);transform:rotate(45deg)}
.hex-teaser-text{padding:2px 0;background:none;border:0;font:inherit;font-size:14px;line-height:1.45;color:var(--hex-tx);text-align:left;cursor:pointer}
.hex-teaser-x{flex-shrink:0;display:grid;place-items:center;width:24px;height:24px;padding:0;background:none;border:0;border-radius:3px;color:var(--hex-dim);cursor:pointer}
.hex-teaser-x:hover,.hex-teaser-x:focus-visible{color:var(--hex-tx)}
@keyframes hex-pop{from{opacity:0;transform:translateY(8px) scale(.96)}}

/* The panel grows out of the button when it opens and shrinks back into it when it closes. */
.hex-panel{position:absolute;right:0;bottom:98px;width:480px;height:680px;max-height:calc(100vh - 130px);display:flex;flex-direction:column;background:var(--hex-panel);border:1px solid var(--hex-line);border-radius:3px;box-shadow:0 24px 64px rgba(0,0,0,.5);overflow:hidden;transform-origin:100% 100%;animation:hex-in .28s cubic-bezier(.2,.8,.2,1)}
.hex-panel[hidden]{display:none}
.hex--closing .hex-panel{animation:hex-out .18s ease-in forwards}
[data-theme=light] .hex-panel{box-shadow:0 22px 56px rgba(46,35,73,.18)}
@keyframes hex-in{from{opacity:0;transform:translateY(16px) scale(.94)}}
@keyframes hex-out{to{opacity:0;transform:translateY(12px) scale(.96)}}

.hex-head{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 18px;border-bottom:1px solid var(--hex-line)}
.hex-back{margin-left:-8px}
.hex-avatar{width:40px;height:40px;flex-shrink:0}
.hex-name{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.hex-name strong{font-size:17px;font-weight:600;letter-spacing:.03em}
.hex-sub{font-size:13px;color:var(--hex-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hex-icon{width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;padding:0;background:none;border:1px solid transparent;border-radius:3px;color:var(--hex-dim);cursor:pointer}
.hex-icon[hidden]{display:none}
.hex-icon:hover,.hex-icon:focus-visible{color:var(--hex-tx);border-color:var(--hex-line);outline:none}

.hex-body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.hex-home,.hex-log{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px;display:flex;flex-direction:column;gap:10px}
.hex-home[hidden],.hex-log[hidden]{display:none}

/* Home screen: greeting card, ready questions, recent chats. */
.hex-welcome{padding:14px 16px;background:var(--hex-card);border:1px solid var(--hex-line);border-radius:3px}
.hex-welcome strong{display:block;margin-bottom:4px;font-size:16px;font-weight:600}
.hex-welcome p{margin:0;font-size:15px;line-height:1.5;color:var(--hex-dim)}
.hex-quicks{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.hex-quick{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:10px 14px 10px 16px;background:var(--hex-card);color:var(--hex-tx);border:1px solid var(--hex-line);border-radius:3px;font:inherit;font-size:15px;text-align:left;cursor:pointer;transition:border-color .2s}
.hex-quick svg{flex-shrink:0;color:var(--hex-dim);transition:transform .2s,color .2s}
.hex-quick:hover,.hex-quick:focus-visible{border-color:var(--hex-v2);outline:none}
.hex-quick:hover svg,.hex-quick:focus-visible svg{color:var(--hex-tx);transform:translateX(3px)}
.hex-recent{margin-top:14px}
.hex-recent h4{margin:0 0 6px;font-size:13px;font-weight:500;color:var(--hex-dim)}
.hex-recent ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.hex-recent li{display:flex;align-items:center;gap:4px}
.hex-chat{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:9px 10px;background:none;color:var(--hex-tx);border:1px solid transparent;border-radius:3px;font:inherit;font-size:14px;text-align:left;cursor:pointer}
.hex-chat:hover,.hex-chat:focus-visible{background:var(--hex-card);border-color:var(--hex-line);outline:none}
.hex-chat span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hex-chat time{flex-shrink:0;font-size:12px;color:var(--hex-dim)}
.hex-del{width:32px;height:32px}

.hex-msg{max-width:88%;padding:10px 13px;border-radius:3px;font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.hex-msg p{margin:0;white-space:pre-wrap}
.hex-msg strong{font-weight:600}
.hex-msg--hex{align-self:flex-start;background:var(--hex-card);border:1px solid var(--hex-line)}
.hex-msg--user{align-self:flex-end;background:var(--hex-user)}
.hex-msg a{color:var(--hex-v2);text-decoration:underline;text-underline-offset:2px}
.hex-done{margin-top:8px !important;font-size:13px;color:var(--hex-dim)}
.hex-dots{display:inline-flex;gap:5px;padding:4px 0}
.hex-dots i{width:7px;height:7px;border-radius:50%;background:var(--hex-v2);animation:hex-dot 1.2s ease-in-out infinite}
.hex-dots i:nth-child(2){animation-delay:.15s}
.hex-dots i:nth-child(3){animation-delay:.3s}
@keyframes hex-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.hex-mini{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--hex-line)}
.hex-mini label{font-size:13px;color:var(--hex-dim)}
.hex-mini small{font-size:12px;color:var(--hex-dim)}
.hex-row{display:flex;gap:6px}
.hex-mini input,.hex-mini textarea,.hex-form textarea{min-width:0;padding:9px 11px;background:var(--hex-panel);color:var(--hex-tx);border:1px solid var(--hex-line);border-radius:3px;font:inherit;font-size:14px}
.hex-mini ::placeholder,.hex-form ::placeholder{color:var(--hex-dim);opacity:.85}
.hex-mini textarea::placeholder{font-style:italic}
.hex-mini input{flex:1}
.hex-mini textarea{resize:vertical;max-height:160px}
.hex-mini input:focus,.hex-mini textarea:focus,.hex-form textarea:focus{outline:none;border-color:var(--hex-v2)}
.hex-mini button{flex-shrink:0;padding:0 12px;min-height:38px;background:var(--hex-v);color:#fff;border:0;border-radius:3px;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.hex-mini button:disabled,.hex-send:disabled{opacity:.55;cursor:wait}
.hex-err{margin:0;font-size:13px;color:#ffa6b8}
[data-theme=light] .hex-err{color:#aa2349}

.hex-ts{display:flex;justify-content:center;padding:6px 12px 0}
.hex-ts[hidden]{display:none}
.hex-form{display:flex;align-items:flex-end;gap:6px;padding:12px 16px 8px}
.hex-form textarea{flex:1;resize:none;min-height:50px;max-height:120px;padding:13px 14px;font-size:15px;line-height:1.45}
.hex-send{width:50px;height:50px;flex-shrink:0;display:grid;place-items:center;padding:0;background:var(--hex-v);color:#fff;border:0;border-radius:3px;cursor:pointer;transition:background .2s}
.hex-send:hover{background:#8550ff}
.hex-foot{position:relative;display:flex;justify-content:center;align-items:center;gap:6px;padding:2px 16px 12px;font-size:12px;color:var(--hex-dim)}
.hex-link{padding:0;background:none;border:0;font:inherit;font-size:12px;color:var(--hex-v2);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.hex-link:hover{color:var(--hex-tx)}
.hex-count{position:absolute;right:16px}

/* Privacy note: it fills the panel, and the back button sits where the message box was, like the send button. */
.hex-privacy{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;gap:14px;overflow-y:auto;padding:24px 20px 16px;background:var(--hex-panel)}
.hex-privacy[hidden]{display:none}
.hex-privacy h3{margin:0;font-size:20px;font-weight:600;color:var(--hex-tx)}
.hex-privacy p{margin:0;font-size:16px;line-height:1.75;color:var(--hex-dim)}
.hex-privacy-close{display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;width:100%;min-height:50px;margin-top:auto;padding:0 16px;background:var(--hex-v);color:#fff;border:0;border-radius:3px;font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background .2s}
.hex-privacy-close:hover{background:#8550ff}
.hex-privacy-close:focus-visible{outline:2px solid var(--hex-v2);outline-offset:2px}

/* 2K zoom: body is zoomed, so viewport units are divided by --z like the rest of the site. */
@media (min-width:2100px) and (min-height:1000px){.hex-panel{max-height:calc(100vh / var(--z) - 130px)}}

/* The launcher covers the page's bottom-right corner: keep the footer's last row ("Back to top") above it. */
body:has(> .hex) .footer-bottom{padding-bottom:118px}

@media (max-width:600px){
  body:has(> .hex) .footer-bottom{padding-bottom:92px}
  .hex{right:14px;bottom:14px}
  .hex-btn{width:64px;height:64px}
  .hex--open .hex-btn{display:none}
  .hex-teaser{bottom:78px;max-width:calc(100vw - 40px)}
  .hex-teaser:after{right:27px}
  .hex-panel{position:fixed;inset:10px;width:auto;height:auto;max-height:none}
  .hex-home,.hex-log{padding:16px}
}

@media (prefers-reduced-motion:reduce){
  .hex-btn,.hex-btn img,.hex-panel,.hex-teaser,.hex-dots i{animation:none}
  .hex-btn,.hex-quick,.hex-quick svg,.hex-send{transition:none}
}