/* ═══════════════════════════════════════════════════════════════════
   cat agent — meow
   material: white dashed strokes on pure black, monospace only.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --void:    #000000;   /* page                          */
  --chalk:   #ffffff;   /* the dashed line-art white     */
  --whisker: #7a7a7a;   /* secondary / system voice      */
  --dust:    #2b2b2b;   /* dashes, rules, frames         */
  --tongue:  #ff6b8a;   /* accent — caret, live, copied  */

  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'SF Mono',
          Menlo, Consolas, 'DejaVu Sans Mono', monospace;

  --gutter: clamp(18px, 5vw, 40px);
  --stack:  clamp(24px, 5vh, 44px);
}

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

html{ background:var(--void); -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--void);
  color:var(--chalk);
  font-family:var(--mono);
  font-size:14px;
  font-weight:400;
  line-height:1.7;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* the house dash: 4px stroke / 5px gap — the rhythm of the artwork */
.rule,
.ca::before,
.term__bar::after,
.foot__rule{
  display:block;
  height:1px;
  background-image:repeating-linear-gradient(
    to right, var(--dust) 0 4px, transparent 4px 9px);
}

.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:9;
  padding:10px 16px; background:var(--void); color:var(--chalk);
  border:1px dashed var(--chalk); text-decoration:none;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{
  outline:1px dashed var(--chalk);
  outline-offset:3px;
}

/* ─────────────────────────────  shell  ───────────────────────────── */

.shell{
  width:100%;
  max-width:740px;
  margin:0 auto;
  padding:var(--stack) var(--gutter) calc(var(--stack) * .8);
  display:flex;
  flex-direction:column;
  gap:var(--stack);
  min-height:100vh;
  min-height:100svh;
}

/* ─────────────────────────────  hero  ────────────────────────────── */

.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  animation:rise .7s cubic-bezier(.2,.7,.3,1) both;
}

.hero__art{
  display:block;
  width:100%;
  max-width:512px;
  height:auto;
  /* the art is black at the edges — it fuses straight into the page */
}

.hero__sub{
  margin:0;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:12px;
  letter-spacing:.14em;
  color:var(--whisker);
}

.hero__face{ color:var(--chalk); letter-spacing:0; }

/* ────────────────────────────  contract  ─────────────────────────── */

.ca{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 4px 0;
  animation:rise .7s .08s cubic-bezier(.2,.7,.3,1) both;
}
.ca::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
}

.ca__tick{
  flex:none;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--chalk);
}

.ca__addr{
  flex:1 1 auto;
  min-width:0;
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:300;
  color:#9d9d9d;
  letter-spacing:.02em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ca__copy{
  flex:none;
  font:inherit;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--whisker);
  background:none;
  border:1px dashed var(--dust);
  padding:5px 14px;
  cursor:pointer;
  transition:color .18s, border-color .18s;
}
.ca__copy:hover{ color:var(--chalk); border-color:var(--chalk); }
.ca__copy.is-done{ color:var(--tongue); border-color:var(--tongue); }

/* ────────────────────────────  terminal  ─────────────────────────── */

.term{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:min(58vh, 460px);
  border:1px dashed var(--dust);
  animation:rise .7s .16s cubic-bezier(.2,.7,.3,1) both;
}

.term__bar{
  position:relative;
  flex:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 16px 12px;
}
.term__bar::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
}

.term__face{
  color:var(--chalk);
  font-size:13px;
  min-width:8ch;      /* face swaps must not shift the name */
}

.term__name{
  font-size:11px;
  letter-spacing:.18em;
  color:var(--whisker);
}

.term__state{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--whisker);
}

.dot{
  width:5px; height:5px;
  background:var(--tongue);
  border-radius:50%;
  animation:pulse 2.4s ease-in-out infinite;
}

/* ─────────────────────────────  log  ─────────────────────────────── */

.term__log{
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:18px 16px 22px;
  display:flex;
  flex-direction:column;
  gap:4px;              /* boot lines read as one tight block ... */
  scrollbar-width:thin;
  scrollbar-color:var(--dust) transparent;
}
.term__log::-webkit-scrollbar{ width:8px; }
.term__log::-webkit-scrollbar-thumb{ background:var(--dust); }
.term__log::-webkit-scrollbar-track{ background:transparent; }

.msg{
  display:flex;
  gap:10px;
  align-items:flex-start;
  animation:fade .22s ease-out both;
  overflow-wrap:anywhere;
}

.msg__tag{
  flex:none;
  color:var(--whisker);
  font-size:13px;
  user-select:none;
}

.msg__body{
  flex:1 1 auto;
  min-width:0;
  white-space:pre-wrap;   /* keeps the dotted leaders lined up */
}

/* ... while turns of conversation get room to breathe */
.msg--you,
.msg--cat{ margin-top:9px; }

.msg--you .msg__body{ color:#d2d2d2; }
.msg--cat .msg__tag{ color:var(--chalk); }
.msg--cat .msg__body{ color:var(--chalk); }

/* system voice: boot lines, tool calls, stray purrs */
.msg--sys{
  color:var(--whisker);
  font-size:12px;
  font-weight:300;
  letter-spacing:.04em;
  gap:0;
}
.msg--sys .msg__body{ color:var(--whisker); }

.msg--tool .msg__body{ color:#5c5c5c; font-size:12px; }

.spin{ display:inline-block; width:1ch; color:var(--chalk); }

/* the kaomoji tails reach into thai, canadian syllabics, hangul and cjk —
   the mono face has none of it, so they get their own fallback chain */
.kao{
  font-family:'Segoe UI Symbol','Segoe UI Historic','Apple Symbols',
              'Hiragino Sans','Yu Gothic','Meiryo','Microsoft YaHei',
              'Leelawadee UI','Nirmala UI','Noto Sans Symbols 2',
              'Noto Sans Canadian Aboriginal','Noto Sans Thai',
              'Segoe UI','Apple Color Emoji','Segoe UI Emoji',sans-serif;
  white-space:nowrap;   /* a face must never break across two lines */
  letter-spacing:0;
  color:var(--chalk);
  font-size:1.06em;     /* the fallback faces run small next to the mono */
  margin-left:.55em;
}

.cursor{
  display:inline-block;
  width:.62em; height:1.02em;
  margin-left:2px;
  background:var(--tongue);
  vertical-align:text-bottom;
  animation:blink 1.05s steps(1,end) infinite;
}

/* ────────────────────────────  prompt  ───────────────────────────── */

.term__form{
  flex:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  border-top:1px dashed var(--dust);
}

.term__caret{
  flex:none;
  color:var(--tongue);
  user-select:none;
}

.term__input{
  flex:1 1 auto;
  min-width:0;
  font:inherit;
  font-size:14px;
  color:var(--chalk);
  background:none;
  border:0;
  padding:2px 0;
  caret-color:var(--tongue);
}
.term__input::placeholder{ color:#4a4a4a; letter-spacing:.02em; }
.term__input:focus{ outline:none; }
.term__form:focus-within .term__caret{ color:var(--chalk); }

.term__send{
  flex:none;
  font:inherit;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--whisker);
  background:none;
  border:1px dashed var(--dust);
  padding:6px 16px;
  cursor:pointer;
  transition:color .18s, border-color .18s, opacity .18s;
}
.term__send:hover:not(:disabled){ color:var(--chalk); border-color:var(--chalk); }
.term__send:disabled{ opacity:.32; cursor:not-allowed; }

/* ─────────────────────────────  foot  ────────────────────────────── */

.foot{
  display:flex;
  align-items:center;
  gap:16px;
  padding-bottom:4px;
}

.foot__x{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--whisker);
  text-decoration:none;
  font-size:11px;
  letter-spacing:.16em;
  transition:color .18s;
}
.foot__x:hover{ color:var(--chalk); }
.foot__x svg{ display:block; }

.foot__rule{ flex:1 1 auto; }

.foot__note{
  font-size:11px;
  letter-spacing:.14em;
  color:#4a4a4a;
}

/* ────────────────────────────  motion  ───────────────────────────── */

@keyframes rise{
  from{ opacity:0; transform:translateY(9px); }
  to  { opacity:1; transform:none; }
}
@keyframes fade{
  from{ opacity:0; transform:translateY(3px); }
  to  { opacity:1; transform:none; }
}
@keyframes blink{ 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.28} }

/* ────────────────────────────  narrow  ───────────────────────────── */

@media (max-width:560px){
  body{ font-size:13.5px; }
  .term{ min-height:52vh; }
  .hero__sub{ flex-direction:column; gap:4px; text-align:center; }
  .ca{ flex-wrap:wrap; gap:9px; }
  .ca__addr{ order:3; flex-basis:100%; font-size:11px; }
  .ca__copy{ margin-left:auto; }
  .term__name{ display:none; }
  .term__log{ padding:15px 13px 18px; }
  .term__form{ padding:11px 13px; }
  .foot{ flex-wrap:wrap; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .cursor{ opacity:1; }
  .dot{ opacity:1; }
}