/* GETTING TO KNOW THEM (18 Sep 2026, SEP18_KNOW) - her first conversation with
   a brand, in its own window over the chat. Samuel: "the interview should be
   like a normal chat but maybe a popup". Decided: over the chat column, the
   account page she drew stays in view on the right; a full sheet on a phone;
   they answer before anything else opens. Her paper, her ink, her lavender -
   no white box. Source: frontend/_know_sep18/ (served as /_know.css). */

#kn{position:fixed;inset:0;z-index:8800;display:none}
#kn.on{display:block}
#kn .kn-veil{position:absolute;top:0;left:0;bottom:0;right:var(--kn-right,0px);
  background:rgba(22,18,12,.30);-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);
  animation:knFade .3s ease both}
[data-theme="dark"] #kn .kn-veil{background:rgba(0,0,0,.46)}

#kn .kn-card{position:absolute;top:50%;left:calc((100% - var(--kn-right,0px)) / 2);
  transform:translate(-50%,-50%);width:min(620px,calc(100% - var(--kn-right,0px) - 40px));
  /* one height for the whole conversation: a window that grows and shrinks
     with every message jumps under his finger (seen on the first run) */
  height:min(720px,calc(100% - 44px));display:flex;flex-direction:column;box-sizing:border-box;
  background:var(--ground-chat,var(--paper));color:var(--ink);border-radius:18px 20px 17px 19px;
  box-shadow:0 34px 90px -34px rgba(25,21,15,.62),0 3px 12px rgba(25,21,15,.10);
  outline:none;animation:knRise .42s cubic-bezier(.22,1,.36,1) both}
[data-theme="dark"] #kn .kn-card{box-shadow:0 34px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(236,232,224,.06)}
#kn .kn-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
#kn .kn-card > *:not(.kn-frame){position:relative;z-index:1}

/* the head: her mark, the conversation's name, how far along */
#kn .kn-head{display:flex;align-items:center;gap:12px;padding:18px 22px 8px}
#kn .kn-mark{flex:0 0 30px;width:30px;height:30px;line-height:0}
#kn .kn-mark svg{width:30px;height:30px;display:block;overflow:visible}
#kn .kn-ht{flex:1;min-width:0}
#kn .kn-title{font-family:var(--serif);font-size:19px;line-height:1.25;font-weight:600;color:var(--ink);
  overflow-wrap:anywhere}
#kn .kn-sub{font-family:var(--pen,'Caveat',cursive);font-size:16px;line-height:1.2;color:var(--lav);margin-top:1px}
#kn .kn-dots{flex:0 0 auto;display:flex;gap:6px;align-items:center;padding-top:2px}
#kn .kn-dots i{display:block;width:8px;height:8px;border-radius:50%;box-sizing:border-box;
  border:1.5px solid var(--lav);transition:background .25s ease,transform .25s ease}
#kn .kn-dots i.on{background:var(--lav)}
#kn .kn-dots i.now{transform:scale(1.25)}

/* the body scrolls; the box to answer in stays put */
#kn .kn-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 22px 14px;
  scrollbar-width:thin}
#kn .kn-open{margin:4px 0 14px}
#kn .kn-posts{display:flex;gap:9px;margin:2px 0 12px}
#kn .kn-post{position:relative;width:54px;height:96px;border-radius:7px;overflow:hidden;background:var(--thumb,#E9E4DA);
  flex:0 0 auto}
#kn .kn-post img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s ease}
#kn .kn-post img.in{opacity:1}
#kn .kn-post svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#kn .kn-lead{font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--ink);margin:0 0 9px}
#kn .kn-sawh{font-family:var(--pen,'Caveat',cursive);font-size:16.5px;color:var(--lav);margin:0 0 3px}
#kn .kn-saw{list-style:none;margin:0;padding:0}
#kn .kn-saw li{position:relative;padding:0 0 0 17px;margin:0 0 5px;font-family:var(--serif);font-size:14.5px;
  line-height:1.5;color:var(--ink-soft,var(--ink));overflow-wrap:anywhere}
#kn .kn-saw li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:2px;border-radius:2px;
  background:var(--lav);transform:rotate(-8deg)}

/* the conversation */
#kn .kn-thread{display:flex;flex-direction:column;gap:13px}
#kn .kn-msg{max-width:100%;overflow-wrap:anywhere}
#kn .kn-msg.dalia{align-self:flex-start;font-family:var(--serif);font-size:15.5px;line-height:1.56;color:var(--ink)}
#kn .kn-msg.dalia p{margin:0 0 8px}
#kn .kn-msg.dalia p:last-child{margin:0}
#kn .kn-msg.pastq{font-style:italic;color:var(--ink-soft,var(--ink))}
#kn .kn-msg.you{align-self:flex-end;max-width:84%;border:1px solid rgba(175,105,238,.32);
  border-radius:13px 15px 12px 14px;padding:8px 13px;font-family:var(--sans);font-size:14px;line-height:1.5;
  color:var(--ink)}
#kn .kn-arrive{animation:knArrive .46s cubic-bezier(.22,1,.36,1) both}

/* her question and the answers he taps - the way she asks in her work */
#kn .kn-q{margin:16px 0 2px}
#kn .kn-qt{font-family:var(--serif);font-size:17.5px;line-height:1.42;color:var(--ink);margin:0 0 10px 1px;
  overflow-wrap:anywhere}
#kn .kn-opts{display:flex;flex-direction:column;gap:3px}
#kn .kn-opt{display:flex;align-items:flex-start;gap:12px;width:100%;box-sizing:border-box;text-align:left;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:11px;padding:9px 10px;margin:0;font:inherit;
  color:var(--ink);transition:background .14s ease,border-color .14s ease;-webkit-tap-highlight-color:transparent}
#kn .kn-opt:hover,#kn .kn-opt:focus-visible{background:var(--lav-08);border-color:var(--lav-16);outline:none}
#kn .kn-opt.on{background:var(--lav-16);border-color:rgba(175,105,238,.55)}
#kn .kn-k{flex:0 0 23px;width:23px;height:23px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--lav);
  color:var(--lav);display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);
  font-size:12px;font-weight:600;line-height:1;margin-top:1px}
#kn .kn-opt.on .kn-k,#kn .kn-opt:active .kn-k{background:var(--lav);color:#fff}
#kn .kn-tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
#kn .kn-lb{font-family:var(--sans);font-size:15px;line-height:1.32;color:var(--ink)}
#kn .kn-ds{font-family:var(--sans);font-size:13px;line-height:1.35;color:var(--mute);overflow-wrap:anywhere}
#kn .kn-box{flex:0 0 17px;width:17px;height:17px;box-sizing:border-box;border:1.5px solid var(--lav);border-radius:4px;
  margin-top:3px}
#kn .kn-opt.on .kn-box{background:var(--lav)}
#kn .kn-opt.kn-ns .kn-k{border-style:dashed;border-color:var(--mute);color:var(--mute)}
#kn .kn-opt.kn-ns .kn-lb{color:var(--mute);font-style:italic}
#kn .kn-row{display:flex;justify-content:flex-end;margin:7px 0 0}
#kn .kn-done{font-family:var(--sans);font-size:14px;color:#fff;background:var(--lav);border:none;border-radius:999px;
  padding:7px 18px;cursor:pointer}
#kn .kn-done[disabled]{opacity:.45;cursor:default}

/* her pen, while she thinks */
#kn .kn-typing{display:flex;align-items:center;gap:9px;margin:14px 0 2px;font-family:var(--pen,'Caveat',cursive);
  font-size:17px;color:var(--lav)}
#kn .kn-typing b{display:inline-flex;gap:4px}
#kn .kn-typing b i{width:5px;height:5px;border-radius:50%;background:var(--lav);display:block;
  animation:knDot 1.1s ease-in-out infinite}
#kn .kn-typing b i:nth-child(2){animation-delay:.16s}
#kn .kn-typing b i:nth-child(3){animation-delay:.32s}

/* her closing and the way in */
#kn .kn-end{margin:16px 0 4px}
#kn .kn-closing{font-family:var(--serif);font-size:16px;line-height:1.56;color:var(--ink);margin:0 0 14px}
#kn .kn-steps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
#kn .kn-step{font-family:var(--sans);font-size:13.5px;line-height:1.3;color:var(--lav);background:transparent;
  border:1px solid var(--lav-16);border-radius:14px;padding:6px 12px;cursor:pointer;text-align:left}
#kn .kn-step:hover,#kn .kn-step:focus-visible{background:var(--lav-08);border-color:var(--lav);outline:none}
#kn .kn-go{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:15px;font-weight:500;
  color:#fff;background:var(--lav);border:none;border-radius:999px;padding:10px 22px;cursor:pointer}
#kn .kn-go:hover{filter:brightness(1.06)}
#kn .kn-go:focus-visible{outline:2px solid var(--lav-16);outline-offset:3px}

/* the box to answer in */
#kn .kn-foot{padding:8px 16px 16px;border-top:1px solid var(--line)}
#kn .kn-inbox{position:relative;display:flex;align-items:flex-end;gap:10px;border:1.5px solid var(--lav-16);
  border-radius:14px 16px 13px 15px;padding:8px 8px 8px 14px;background:transparent;transition:border-color .15s ease}
#kn .kn-inbox:focus-within{border-color:var(--lav)}
#kn .kn-in{flex:1;min-width:0;resize:none;border:none;outline:none;background:transparent;color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.45;max-height:140px;padding:5px 0;caret-color:#AF69EE}
#kn .kn-in::placeholder{color:var(--mute);opacity:1}
#kn .kn-send{flex:0 0 34px;width:34px;height:34px;border-radius:50%;border:none;background:var(--lav);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0;transition:opacity .15s ease}
#kn .kn-send[disabled]{opacity:.35;cursor:default}
#kn .kn-send svg{width:17px;height:17px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#kn .kn-hint{font-family:var(--sans);font-size:12.5px;color:#C0563F;margin:7px 4px 0;min-height:0}
#kn .kn-hint:empty{display:none}
#kn .kn-foot.off{display:none}
#kn .kn-card.busy .kn-opt,#kn .kn-card.busy .kn-step{pointer-events:none}

/* a press outside, or Escape: she is still waiting - the window says so */
#kn .kn-card.kn-nudge{animation:knNudge .42s ease both}
@keyframes knNudge{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(calc(-50% - 6px),-50%)}
  55%{transform:translate(calc(-50% + 5px),-50%)}80%{transform:translate(calc(-50% - 2px),-50%)}}
@media (max-width:760px){
  #kn .kn-card.kn-nudge{animation:knNudgeS .42s ease both}
  @keyframes knNudgeS{0%,100%{transform:none}30%{transform:translateY(-6px)}60%{transform:translateY(2px)}}
}
@keyframes knFade{from{opacity:0}to{opacity:1}}
@keyframes knRise{from{opacity:0;transform:translate(-50%,calc(-50% + 14px)) scale(.985)}
  to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes knArrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes knDot{0%,100%{opacity:.25;transform:translateY(0)}45%{opacity:1;transform:translateY(-3px)}}

/* a phone: the whole screen is hers for a moment - a sheet from the bottom */
@media (max-width:760px){
  #kn .kn-veil{right:0}
  #kn .kn-card{top:auto;bottom:0;left:0;right:0;transform:none;width:100%;max-height:none;
    height:calc(100% - 10px);height:calc(100dvh - 10px);border-radius:20px 20px 0 0;
    animation:knSheet .42s cubic-bezier(.22,1,.36,1) both}
  #kn .kn-head{padding:16px 18px 6px}
  #kn .kn-title{font-size:17px}
  #kn .kn-body{padding:4px 18px 14px}
  #kn .kn-opt{padding:12px 10px;min-height:48px}
  #kn .kn-lb{font-size:15.5px}
  #kn .kn-in{font-size:16px}
  #kn .kn-send{flex-basis:40px;width:40px;height:40px}
  #kn .kn-foot{padding:8px 12px calc(12px + env(safe-area-inset-bottom,0px))}
  #kn .kn-step{padding:9px 13px;font-size:14px}
  #kn .kn-go{padding:12px 24px}
}
@keyframes knSheet{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
html[data-motion="reduced"] #kn *,html[data-motion="reduced"] #kn{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){#kn *,#kn{animation:none!important;transition:none!important}}

/* SEP21_KNOW_LATER: the way out - her questions are a choice. The x sits after
   the dots; 'skip for now' closes every question in her serif, quietly. */
#kn .kn-x{flex:0 0 auto;width:34px;height:34px;margin:-8px -10px -8px 0;padding:0;border:0;
  border-radius:50%;background:none;color:var(--mute);cursor:pointer;display:grid;place-items:center}
#kn .kn-x[hidden]{display:none}
#kn .kn-x svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
#kn .kn-x:hover,#kn .kn-x:focus-visible{color:var(--lav);background:var(--lav-08);outline:none}
#kn .kn-skip{display:block;margin:12px 0 0;padding:6px 2px;border:0;background:none;color:var(--mute);
  font:italic 14.5px/1.45 var(--serif);text-align:left;cursor:pointer}
#kn .kn-skip:hover,#kn .kn-skip:focus-visible{color:var(--lav);outline:none;
  text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
  #kn .kn-x{width:44px;height:44px;margin:-10px -12px -10px 0}
  #kn .kn-skip{padding:12px 2px;font-size:15.5px}
}