/* ══════════════════════════════════════════════════════════════════════════
   KRON AI — INTERFACE
   --------------------------------------------------------------------------
   Built from the site's own tokens rather than beside them: the same
   graphite, the same royal, the same golden-ratio type scale, the same
   hairline rule work.

   One decision governs the whole file: THIS IS A TRANSCRIPT, NOT A CHAT.

   No bubbles. No avatars. No typing dots bouncing on a coloured pill. Two
   speakers, each with a mono label in the margin, entries ruled apart like
   lines in a ledger. A chat window says "a service is talking to you". A
   transcript says "this exchange is being recorded", which is both more
   truthful and considerably more in keeping with an enterprise whose
   position is that correspondence is read and not always returned.
   ══════════════════════════════════════════════════════════════════════════ */

/* The tokens live in style.css now. This file carries only what the
   transcript needs — the palette, the type scale and the rule work are the
   site's, so the page cannot drift away from it. */
:root{
  --void:#0A0A0B;
  --ground:#1C1C1E;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

/* the site paints .is-bare solid black; this page lets the footage through */
body.is-bare.kron-ai{background:transparent}

/* The footage runs behind the transcript, so it is pulled down hard and a
   pool of shade is laid under the reading column. A page whose whole point
   is text does not get to let a moving picture compete with it. */
body.kron-ai .bg-video{opacity:.34;filter:saturate(.75) brightness(.62)}
body.kron-ai::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 62% 58% at 50% 46%, rgba(10,10,11,.90) 0%, rgba(10,10,11,.72) 45%, rgba(10,10,11,.34) 78%, transparent 100%),
    linear-gradient(to bottom, rgba(10,10,11,.72) 0%, rgba(10,10,11,.30) 30%, rgba(10,10,11,.55) 100%);
}

body.kron-ai{
  min-height:100svh;
  color:var(--bone);
  font-family:var(--f-sans);
  font-weight:200;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}


.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  padding:.7rem 1.1rem;background:var(--ground);color:var(--bone);
  font-family:var(--f-mono);font-size:var(--t-2);
}
.skip:focus{left:1rem;top:1rem}

::selection{background:rgba(20,67,214,.34);color:#fff}

:focus-visible{outline:1px solid rgba(242,239,233,.5);outline-offset:3px}

/* the homeward control is gone from this page — it carries the site's own
   permanent head instead, and those rules live in style.css */

/* ── the frame ────────────────────────────────────────────────────────── */
.kron{
  position:relative;z-index:3;
  max-width:var(--measure);
  margin-inline:auto;
  padding:clamp(9rem,20vh,12rem) var(--pad) var(--s-4);
  min-height:100svh;
  display:flex;flex-direction:column;
}

/* ── masthead ─────────────────────────────────────────────────────────── */
.kron__head{text-align:center;padding-bottom:var(--s-4);border-bottom:1px solid var(--line)}

.kron__name{
  font-family:var(--f-mono);font-weight:400;
  font-size:clamp(var(--t-5),5vw,var(--t-6));
  letter-spacing:.42em;text-indent:.42em;
  color:var(--bone);line-height:1;
}
.kron__name span{
  display:inline-block;margin-left:.1em;
  color:var(--royal-lit);
}

.kron__role{
  margin-top:.9rem;
  font-family:var(--f-mono);font-size:var(--t-1);
  letter-spacing:.34em;text-transform:uppercase;color:var(--dust);
}

.kron__state{
  margin-top:var(--s-3);
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-mono);font-size:var(--t-1);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ash);
}
.kron__pip{
  width:5px;height:5px;border-radius:50%;
  background:var(--royal-lit);
  box-shadow:0 0 0 0 rgba(30,79,232,.5);
  animation:pip 3.2s var(--ease) infinite;
}
@keyframes pip{
  0%,100%{box-shadow:0 0 0 0 rgba(30,79,232,.45)}
  50%    {box-shadow:0 0 0 5px rgba(30,79,232,0)}
}
.kron__state.is-busy .kron__pip{animation-duration:.9s}
.kron__state.is-down .kron__pip{background:var(--dust);animation:none;box-shadow:none}

/* ── the opening ──────────────────────────────────────────────────────── */
.kron__open{padding:var(--s-5) 0 var(--s-4);animation:rise .8s var(--ease) both}
.kron__open.is-gone{display:none}

.kron__ask{
  font-size:clamp(var(--t-4),3.4vw,var(--t-5));
  font-weight:100;letter-spacing:-.01em;text-align:center;
  color:var(--bone);margin-bottom:var(--s-4);
}

.kron__routes{list-style:none;display:grid;gap:1px;background:var(--line-soft);border-block:1px solid var(--line)}
.route{
  width:100%;display:flex;align-items:baseline;gap:var(--s-3);
  padding:.95rem var(--s-2);
  background:var(--void);border:0;cursor:pointer;text-align:left;
  font-family:var(--f-mono);color:var(--ash);
  transition:color .4s var(--ease),background .4s var(--ease),padding-left .5s var(--ease);
}
.route:hover{color:var(--bone);background:rgba(242,239,233,.022);padding-left:var(--s-3)}
.route__n{
  flex:0 0 2.2rem;font-size:var(--t-1);letter-spacing:.14em;color:var(--royal-lit);
}
.route__t{font-size:var(--t-2);letter-spacing:.22em;text-transform:uppercase}

.kron__note{
  margin-top:var(--s-4);max-width:46ch;margin-inline:auto;text-align:center;
  font-size:var(--t-2);line-height:1.85;color:var(--dust);
}

/* ══ the transcript ═══════════════════════════════════════════════════════
   Each entry is a record: a mono label in the margin, the text beside it,
   a hairline between. */

.kron__stream{flex:1;padding:var(--s-4) 0 0;display:flex;flex-direction:column;gap:0}

.turn{
  display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:var(--s-3);
  padding:var(--s-3) 0;
  border-top:1px solid var(--line-soft);
  animation:rise .55s var(--ease) both;
}
.turn:first-child{border-top:0}

.turn__who{
  font-family:var(--f-mono);font-size:var(--t-1);
  letter-spacing:.22em;text-transform:uppercase;
  padding-top:.36rem;
}
.turn--you  .turn__who{color:var(--dust)}
.turn--kron .turn__who{color:var(--royal-lit)}

.turn__body{min-width:0;font-size:var(--t-3);line-height:1.85}
.turn--you  .turn__body{color:var(--ash)}
.turn--kron .turn__body{color:rgba(242,239,233,.92)}
.turn__body p + p{margin-top:.85rem}
.turn__body a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--royal-lit)}
.turn__body strong{font-weight:400;color:var(--bone)}

/* the caret that runs while an answer is being composed */
.turn--pending .turn__body::after{
  content:"";display:inline-block;width:.5rem;height:1em;
  background:var(--royal-lit);vertical-align:-.15em;
  animation:blink 1.05s steps(2,start) infinite;
}
@keyframes blink{to{opacity:0}}

.turn--system .turn__body{color:var(--dust);font-family:var(--f-mono);font-size:var(--t-2);letter-spacing:.06em}

@media (max-width:640px){
  .turn{grid-template-columns:1fr;gap:.4rem}
  .turn__who{padding-top:0}
}

/* ── the input ────────────────────────────────────────────────────────── */
.kron__entry{
  position:sticky;bottom:0;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:.8rem;
  margin-top:var(--s-4);padding:.95rem 1.1rem;
  background:rgba(10,10,11,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--line);
  transition:border-color .45s var(--ease);
}
.kron__entry:focus-within{border-color:rgba(30,79,232,.42)}

.kron__caret{font-family:var(--f-mono);font-size:var(--t-3);color:var(--royal-lit);user-select:none}

.kron__line{
  width:100%;background:none;border:0;color:var(--bone);
  font-family:var(--f-mono);font-size:var(--t-3);line-height:1.6;
}
.kron__line::placeholder{color:var(--dust);letter-spacing:.04em}
.kron__line:focus{outline:none}

.kron__send{
  display:grid;place-items:center;width:34px;height:34px;
  background:none;border:1px solid var(--line);color:var(--ash);cursor:pointer;
  transition:color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.kron__send:hover:not(:disabled){color:var(--bone);border-color:rgba(242,239,233,.3);transform:translateX(2px)}
.kron__send:disabled{opacity:.34;cursor:default}

/* ── foot ─────────────────────────────────────────────────────────────── */
.kron__foot{
  margin-top:var(--s-3);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem var(--s-3);
  font-family:var(--f-mono);font-size:var(--t-1);
  letter-spacing:.1em;color:var(--dust);line-height:1.7;
}
.kron__foot a{color:var(--ash);text-decoration:none}
.kron__foot a:hover{color:var(--bone)}

@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

/* ── the loading plan ─────────────────────────────────────────────────────
   A reply may carry a plan. It is drawn the way the rest of the site is
   drawn: the deck read from above, headboard at the top, bays parted where
   the stanchions stand, figures set like ledger lines. One action. */
.plan{
  margin:1.1rem 0 .2rem;border:1px solid var(--line);
  background:rgba(10,10,11,.55);backdrop-filter:blur(6px);
  padding:var(--s-2) var(--s-3) var(--s-3);
}
.plan__cap{
  font-family:var(--f-mono);font-size:var(--t-1);letter-spacing:.3em;
  text-transform:uppercase;color:var(--royal-lit);margin-bottom:var(--s-2);
}
.plan__grid{display:grid;grid-template-columns:78px 1fr;gap:var(--s-3);align-items:start}
.plan__map{width:78px;display:block}
.plan__cell{fill:transparent;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.plan__cell.is-on{fill:rgba(30,79,232,.30);stroke:var(--royal-lit)}
.plan__facts{min-width:0}
.plan__end{
  font-family:var(--f-mono);font-size:var(--t-1);letter-spacing:.24em;
  text-transform:uppercase;color:var(--dust);padding-bottom:.55rem;
  border-bottom:1px solid var(--line-soft);
}
.plan__row{
  display:flex;justify-content:space-between;gap:var(--s-3);
  padding:.55rem 0;border-bottom:1px solid var(--line-soft);
  font-size:var(--t-2);color:var(--ash);
}
.plan__row b{font-family:var(--f-mono);font-weight:400;color:var(--bone);white-space:nowrap}
.plan__row--soft, .plan__row--soft b{color:var(--dust)}
.plan__go{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:var(--s-2);
  font-family:var(--f-mono);font-size:var(--t-1);letter-spacing:.26em;
  text-transform:uppercase;color:var(--bone);text-decoration:none;
  border:0;border-bottom:1px solid var(--royal-lit);padding:.4rem 0 .45rem;
  transition:color .3s var(--ease),letter-spacing .3s var(--ease);
}
.turn__body .plan__go{border-bottom:1px solid var(--royal-lit)}
.plan__go:hover{color:var(--royal-lit);letter-spacing:.32em}
.plan__go svg{transition:transform .3s var(--ease)}
.plan__go:hover svg{transform:translateX(3px)}
@media (max-width:480px){
  .plan__grid{grid-template-columns:64px 1fr}
  .plan__map{width:64px}
}

/* the state line, when the model is unreachable and the record answers */
.kron__state.is-local .kron__pip{background:var(--dust);animation:none;box-shadow:none}

/* ── documents in hand ───────────────────────────────────────────────────
   The attach control sits beside send, in the same hairline language. A
   staged photograph appears as a small plate above the line, with its
   dismissal an × and nothing more. In the transcript, the photograph is a
   plate in the visitor's own turn. */
.kron__attach{
  display:grid;place-items:center;width:34px;height:34px;
  background:transparent;border:1px solid var(--line);color:var(--dust);
  cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease);
}
.kron__attach:hover{color:var(--bone);border-color:rgba(30,79,232,.42)}
.kron__attach:disabled{opacity:.4;cursor:default}
/* the entry is a grid: caret · line · document · send, with the held strip
   spanning the full width above them when a photograph is staged */
.kron__entry{grid-template-columns:auto minmax(0,1fr) auto auto}
.kron__held{
  grid-column:1 / -1;display:flex;gap:.6rem;flex-wrap:wrap;
  padding:0 0 .7rem;margin-bottom:.15rem;border-bottom:1px solid var(--line-soft);
}
.kron__held[hidden]{display:none}
.held__doc{position:relative;width:52px;height:52px;border:1px solid var(--line)}
.held__doc img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.8) brightness(.92)}
.held__x{
  position:absolute;top:-7px;right:-7px;width:16px;height:16px;
  display:grid;place-items:center;background:var(--void);
  border:1px solid var(--line);color:var(--dust);font-size:10px;line-height:1;
  cursor:pointer;
}
.held__x:hover{color:var(--bone);border-color:rgba(30,79,232,.42)}
.turn__docs{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.turn__docs img{
  width:84px;height:84px;object-fit:cover;display:block;
  border:1px solid var(--line);filter:saturate(.8) brightness(.9);
}