/* The chat (and the 404 page): say what you are waiting for, your dot replies when it happens.
   Fonts, colours, radii, pill buttons and the easing curve are the
   site's own, taken from its stylesheet (site/_astro/about.*.css). */
@font-face{font-family:Aeonik;src:url(/assets/fonts/Aeonik-Regular.woff2) format("woff2"),url(/assets/fonts/Aeonik-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:Aeonik;src:url(/assets/fonts/Aeonik-Medium.woff2) format("woff2"),url(/assets/fonts/Aeonik-Medium.woff) format("woff");font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:IBMPlexMono;src:url(/assets/fonts/IBMPlexMono-Regular.woff2) format("woff2"),url(/assets/fonts/IBMPlexMono-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:block}

:root{
  --color-off-white:#f0f1fa;--color-white:#fff;--color-dark-white:#e4e6ef;--color-black:#000;
  --color-blue:#1a2ffb;--color-grey-blue:#2b2e3a;--color-panel:#15161a;
  --global-border-radius:20px;--base-padding-x:max(5vw,40px);--base-padding-y:clamp(30px,4vw,50px);
  --ease:cubic-bezier(.35,0,0,1);
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--color-off-white);color:var(--color-black);font-family:Aeonik,system-ui,sans-serif;font-size:16px;line-height:1.3}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}

.label{font-family:IBMPlexMono,ui-monospace,monospace;font-size:.6875rem;letter-spacing:.02em;text-transform:uppercase}

/* header: logo left, pills right, as on the site */
.bar{display:flex;justify-content:space-between;align-items:center;padding:var(--base-padding-y) var(--base-padding-x) 0}
.bar-logo{display:block;line-height:0}
.bar-logo svg{width:8.95em;height:auto}
.bar-logo svg g{mix-blend-mode:normal!important}
.bar-right{display:flex;gap:.6em}
.pill{display:inline-flex;align-items:center;gap:.35em;height:3.2em;padding:0 1.125em 0 1.625em;border:0;border-radius:6.25em;font-size:.875em;font-weight:500;text-transform:uppercase;cursor:pointer;transition:color .4s,background-color .4s}
.pill span{margin-right:.9em;white-space:nowrap}
.pill i{width:.3em;height:.3em;border-radius:50%;background:currentColor}
.pill-dark{background:var(--color-grey-blue);color:var(--color-white)}
.pill-dark:hover{background:var(--color-blue)}
.pill-light{background:var(--color-dark-white);color:var(--color-black)}
.pill-light:hover{background:var(--color-white)}

/* layout */
.chat{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2vw;padding:clamp(24px,3vw,44px) var(--base-padding-x) 0;align-items:stretch}
.side{display:flex;flex-direction:column;align-items:flex-start;padding-top:.5em}
.side-title{margin:0;font-size:clamp(2.6rem,5.2vw,5.2rem);font-weight:400;line-height:1;letter-spacing:-.02em}
.side-text{margin:1.2em 0 0;max-width:24em;font-size:1.0625rem}
.meter{margin-top:auto;padding-top:2.5em}
.clock{margin:.15em 0 .1em;font-size:clamp(3rem,6.6vw,6.6rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.facts{display:flex;flex-wrap:wrap;gap:0 2.5em;margin:2em 0 0;padding:1em 0 0;border-top:1px solid rgba(0,0,0,.14);width:100%}
.facts div{display:flex;flex-direction:column;gap:.3em}
.facts dt{font-family:IBMPlexMono,ui-monospace,monospace;font-size:.6875rem;text-transform:uppercase}
.facts dd{margin:0;font-size:1.0625rem;font-variant-numeric:tabular-nums}
.ca{border:0;background:none;padding:0;cursor:pointer;max-width:16em;overflow:hidden;text-overflow:ellipsis}
/* the open waits: one line each, its own clock, a round button to stop it */
.waits-block{width:100%;margin-top:1.6em}
.waits{margin-top:.6em;border-top:1px solid rgba(0,0,0,.14)}
.wait{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.7em 0;border-bottom:1px solid rgba(0,0,0,.14)}
.wait-main{display:flex;align-items:center;gap:.7em;min-width:0}
.wait-main .dot{width:.55em;height:.55em;animation:pulse 1.8s var(--ease) infinite}
.wait-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.0625rem}
.wait-side{display:flex;align-items:center;gap:1em;flex:none}
.wait-clock{font-variant-numeric:tabular-nums}
.wait-x{position:relative;width:1.7em;height:1.7em;border:0;border-radius:50%;background:var(--color-dark-white);cursor:pointer;transition:background-color .4s}
.wait-x:before,.wait-x:after{content:"";position:absolute;left:50%;top:50%;width:.7em;height:1.5px;background:var(--color-black);transition:background-color .4s}
.wait-x:before{transform:translate(-50%,-50%) rotate(45deg)}
.wait-x:after{transform:translate(-50%,-50%) rotate(-45deg)}
.wait-x:hover{background:var(--color-blue)}
.wait-x:hover:before,.wait-x:hover:after{background:var(--color-white)}
.side-buttons{display:flex;flex-wrap:wrap;gap:.6em;margin-top:1.6em}
.pill:disabled{cursor:default;opacity:.55}
.pill-dark:disabled:hover{background:var(--color-grey-blue)}

/* the dark rounded panel, like the frame on the home page */
.panel{display:flex;flex-direction:column;min-height:min(66vh,640px);height:calc(100vh - 15.5em);max-height:820px;border-radius:var(--global-border-radius);background:var(--color-panel);color:var(--color-off-white);overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:1.2em 1.5em;border-bottom:1px solid rgba(240,241,250,.12)}
.who{display:flex;align-items:center;gap:.6em}
/* the dot: a round solid circle in the site's blue, wherever your dot is shown */
.dot{flex:none;display:block;width:.75em;height:.75em;border-radius:50%;background:var(--color-blue)}
.is-waiting .who .dot{animation:pulse 1.8s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:none;opacity:1}50%{transform:scale(.6);opacity:.55}}
.thread{flex:1;display:flex;flex-direction:column;gap:.9em;padding:1.5em;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(240,241,250,.25) transparent}
.empty{margin:auto;text-align:center;color:rgba(240,241,250,.6)}
.empty p{margin:0;font-size:1.0625rem}
.empty p:first-child{color:var(--color-off-white);font-size:1.6rem;margin-bottom:.3em}
.examples{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em;margin-top:1.1em}
.examples button{border:1px solid rgba(240,241,250,.22);background:none;border-radius:6.25em;padding:.55em 1.1em;font-size:.9375rem;color:var(--color-off-white);cursor:pointer;transition:background-color .4s,border-color .4s}
.examples button:hover{background:var(--color-blue);border-color:var(--color-blue)}
.row{display:flex;flex-direction:column;max-width:78%}
.row.me{align-self:flex-end;align-items:flex-end}
.row.them{align-self:flex-start;align-items:flex-start}
.bubble{padding:.75em 1.1em;border-radius:1.25em;font-size:1.0625rem;overflow-wrap:anywhere}
.me .bubble{background:var(--color-blue);color:var(--color-white);border-bottom-right-radius:.35em}
.them .bubble{background:var(--color-grey-blue);border-bottom-left-radius:.35em}
.line{display:flex;align-items:flex-end;gap:.6em}
.line .dot{margin-bottom:.9em}
.them .meta{margin-left:1.35rem}
.reply .bubble{background:var(--color-off-white);color:var(--color-black)}
.bubble-link{display:table;margin-top:.7em;padding:.45em 1em;border-radius:6.25em;background:var(--color-blue);color:var(--color-white);font-size:.8125rem;font-weight:500;text-transform:uppercase;transition:background-color .4s}
.bubble-link:hover{background:var(--color-black)}
.meta{margin-top:.5em;color:rgba(240,241,250,.5)}
.error{margin:0 1.5em .8em;padding:.7em 1em;border-radius:.9em;background:rgba(240,241,250,.1);font-size:.9375rem}
.row.in{animation:rise .7s var(--ease) both}
.row.them.in{animation-delay:.5s}
@keyframes rise{from{opacity:0;transform:translate3d(0,1.2em,0)}to{opacity:1;transform:none}}
.dots{display:flex;gap:.4em;padding:1em 1.1em}
.dots i{width:.55em;height:.55em;border-radius:50%;background:var(--color-off-white);animation:hop 1.4s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.18s}
.dots i:nth-child(3){animation-delay:.36s}
@keyframes hop{0%,60%,100%{transform:none;opacity:.35}30%{transform:translateY(-.35em);opacity:1}}

/* composer: the site's rounded input with the arrow button */
.composer{position:relative;margin:0 1.5em 1.5em;height:4.375em}
.composer input{width:100%;height:100%;border:0;outline:none;border-radius:1.125em;padding:.625em 4em .625em 1.25em;font-size:1.25em;background:var(--color-off-white);color:var(--color-black)}
.composer input::placeholder{color:rgba(0,0,0,.35)}
.composer input:focus-visible{box-shadow:0 0 0 2px var(--color-blue)}
.composer button{position:absolute;top:50%;right:1em;transform:translateY(-50%);width:2.6em;height:2.6em;display:grid;place-items:center;border:0;border-radius:50%;background:var(--color-black);color:var(--color-white);cursor:pointer;transition:background-color .4s}
.composer button:hover{background:var(--color-blue)}

/* the row of + marks the site puts under its frames */
.crosses{grid-column:1/-1;display:flex;justify-content:space-between;padding:.4em 0 0}
.crosses b{position:relative;width:.875rem;height:.875rem}
.crosses b:before,.crosses b:after{content:"";position:absolute;background:var(--color-black)}
.crosses b:before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.crosses b:after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-50%)}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5em 2em;padding:1.4em var(--base-padding-x) var(--base-padding-y);font-size:.75rem}

/* 404 */
.lost{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 var(--base-padding-x)}
.lost h1{margin:0;font-size:clamp(3rem,9vw,9rem);font-weight:400;line-height:1;letter-spacing:-.02em}
.lost p{margin:1.2em 0 2em;font-size:1.0625rem}

@media (max-width:812px){
  :root{--global-border-radius:15px;--base-padding-x:20px}
  .bar-logo svg{width:7.16em}
  .pill{height:3em;padding:0 .9em 0 1.2em}
  .bar-right .pill-light{display:none}
  .chat{display:flex;flex-direction:column;gap:20px}
  .side{display:contents}
  .side-title{order:1}
  .side-text{order:2;margin-top:-.4em}
  .panel{order:3;height:auto;min-height:0;max-height:none}
  .thread{min-height:15em;max-height:52vh;padding:1.1em}
  .composer{margin:0 1.1em 1.1em;height:3.6em}
  .composer input{font-size:1.0625em}
  .row{max-width:88%}
  .meter{order:4;margin-top:0;padding-top:.4em}
  .facts{order:5;margin-top:0}
  .waits-block{order:6;margin-top:0}
  .side-buttons{order:6;margin-top:0}
  .wait-side .label:first-child{display:none}
  .crosses{order:7}
  .foot{flex-direction:column}
}