/* ŽRZ — pogovor / v4
   Direction: a lit room, not a document. Dark by default, light on request.
   Ink on charcoal, one warm signal, mono for provenance. */

:root{
  /* dark is the default room */
  --paper:#0B0B0E;
  --paper-2:#0E0E12;
  --rail:#08080A;
  --card:#141418;
  --card-2:#191920;
  --ink:#EDE9E1;
  --ink-2:#C6C1B6;
  --muted:#8B8579;
  --faint:#7C766B;
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.13);
  --line-3:rgba(255,255,255,.22);
  --accent:#FF6A3C;
  --accent-2:#FF8A5F;
  --accent-ink:#1A0B05;
  --accent-soft:rgba(255,106,60,.11);
  --accent-line:rgba(255,106,60,.32);
  --glow:rgba(255,106,60,.18);
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 12px 32px -12px rgba(0,0,0,.75),0 2px 8px -4px rgba(0,0,0,.6);
  --shadow-3:0 28px 60px -24px rgba(0,0,0,.85),0 6px 18px -10px rgba(0,0,0,.6);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.055);
  --grain:.032;
  --veil:rgba(6,6,8,.62);

  --ui:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  --rail-w:274px;
  --read:768px;
}

:root[data-theme="light"]{
  --paper:#F2EEE6;
  --paper-2:#EDE8DE;
  --rail:#EAE5DA;
  --card:#FFFDF8;
  --card-2:#FBF8F1;
  --ink:#16150F;
  --ink-2:#3B372D;
  --muted:#7B7364;
  --faint:#827A6B;
  --line:rgba(22,21,15,.10);
  --line-2:rgba(22,21,15,.16);
  --line-3:rgba(22,21,15,.26);
  --accent:#C1440E;
  --accent-2:#A83A0B;
  --accent-ink:#FFF8F2;
  --accent-soft:rgba(193,68,14,.08);
  --accent-line:rgba(193,68,14,.3);
  --glow:rgba(193,68,14,.14);
  --shadow-1:0 1px 2px rgba(22,21,15,.06);
  --shadow-2:0 10px 26px -14px rgba(22,21,15,.28),0 2px 6px -3px rgba(22,21,15,.12);
  --shadow-3:0 26px 54px -26px rgba(22,21,15,.34),0 6px 16px -10px rgba(22,21,15,.16);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.7);
  --grain:.022;
  --veil:rgba(22,21,15,.34);
}

:root{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

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

/* ───────────────────────── touch ─────────────────────────
   Android Chrome paints its own translucent blue flash over
   whatever is tapped. It cannot be restyled, only removed —
   so it goes, and press feedback we control takes its place. */
*{-webkit-tap-highlight-color:transparent}

a,button,input,textarea,select,summary,[role="button"],[tabindex]:not([tabindex="-1"]){
  touch-action:manipulation;   /* no 300 ms double-tap wait, no zoom flash */
}

button,.newchat,.convo,.chip,.lang,.lang button,.themebtn,.send,.rail__mail,.iconbtn,.art__links a{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;  /* no long-press sheet on a control */
}

/* press states we own, standing in for the flash.
   Kept to pointers without hover so desktop clicks don't double up. */
@media (hover:none){
  .convo:active{background:rgba(255,255,255,.062);color:var(--ink)}
  .iconbtn:active{background:rgba(255,255,255,.07)}
  .lang button:active{color:var(--ink)}
  .chip:active{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26)}
  .rail__mail:active,.art__links a:active{color:var(--accent)}
  .art:not(.art--three):not(.art--stats):not(.art--contact):active{transform:translateY(0) scale(.995)}
}

@media (hover:none){
  :root[data-theme="light"] .convo:active{background:rgba(22,21,15,.07)}
  :root[data-theme="light"] .iconbtn:active{background:rgba(22,21,15,.08)}
  :root[data-theme="light"] .chip:active{background:rgba(22,21,15,.08);border-color:rgba(22,21,15,.24)}
}

html,body{height:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ui);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  overflow:hidden;
  transition:background-color .42s ease,color .42s ease;
}

/* ambient light + film grain — the room, not decoration */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(760px 460px at 18% -8%,var(--accent-soft),transparent 62%),
    radial-gradient(900px 520px at 92% 4%,rgba(96,132,255,.055),transparent 66%),
    radial-gradient(700px 500px at 50% 112%,rgba(255,255,255,.028),transparent 68%);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:90;
  opacity:var(--grain);
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{background:var(--accent);color:var(--accent-ink)}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}

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

.mono{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

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

.app{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:var(--rail-w) minmax(0,1fr);
  /* Fallback first, then the dynamic unit — order matters: the last
     supported declaration wins. Reversed, 100vh (the *large* viewport on
     mobile, measured with browser chrome retracted) made the shell taller
     than the visible area and pushed the composer off-screen entirely. */
  height:100vh;
  height:100dvh;
}

/* ───────────────────────── rail ───────────────────────── */

.rail{
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:22px 14px 16px;
  background:var(--rail);
  border-right:1px solid var(--line);
  position:relative;
}

.rail::after{
  content:"";
  position:absolute;
  top:0;right:-1px;bottom:0;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.09) 18%,rgba(255,255,255,.03) 72%,transparent);
  pointer-events:none;
}

.rail__head{padding:2px 10px 20px}

.mark{
  display:inline-block;
  font-size:19px;
  font-weight:650;
  letter-spacing:-.03em;
  color:var(--ink);
  text-decoration:none;
  line-height:1;
}

.mark::after{
  content:"";
  display:block;
  width:22px;height:2px;
  margin-top:9px;
  border-radius:2px;
  background:var(--accent);
  box-shadow:0 0 12px var(--glow);
}

.mark__sub{
  margin:12px 0 0;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--faint);
}

.newchat{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:10px 12px;
  margin-bottom:22px;
  font:inherit;
  font-size:13.5px;
  font-weight:550;
  letter-spacing:-.005em;
  color:var(--ink);
  background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  box-shadow:var(--inset-hi),var(--shadow-1);
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s ease;
}

.newchat svg{
  width:13px;height:13px;
  flex:none;
  color:var(--accent);
  transition:transform .25s cubic-bezier(.2,.8,.3,1);
}

.newchat:hover{
  border-color:var(--line-3);
  transform:translateY(-1px);
  box-shadow:var(--inset-hi),var(--shadow-2);
}

.newchat:hover svg{transform:rotate(90deg)}
.newchat:active{transform:translateY(0) scale(.995)}

.convos{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0 2px 6px;
  display:flex;
  flex-direction:column;
  gap:1px;
}

.convos__label{
  margin:0 0 8px;
  padding:0 9px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
}

.convo{
  position:relative;
  width:100%;
  padding:9px 11px 9px 13px;
  font:inherit;
  font-size:13.5px;
  line-height:1.35;
  text-align:left;
  color:var(--muted);
  background:none;
  border:0;
  border-radius:var(--r-sm);
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color .16s ease,background .16s ease;
}

.convo::before{
  content:"";
  position:absolute;
  left:3px;top:50%;
  width:2px;height:0;
  border-radius:2px;
  background:var(--accent);
  transform:translateY(-50%);
  transition:height .22s cubic-bezier(.2,.8,.3,1);
}

.convo:hover{color:var(--ink-2);background:rgba(255,255,255,.038)}
:root[data-theme="light"] .convo:hover{background:rgba(22,21,15,.05)}

.convo[aria-current="true"]{
  color:var(--ink);
  font-weight:550;
  background:linear-gradient(90deg,var(--accent-soft),rgba(255,255,255,.02) 70%);
}

.convo[aria-current="true"]::before{height:15px}

.rail__foot{
  flex:none;
  padding:14px 10px 2px;
  border-top:1px solid var(--line);
  margin-top:10px;
}

.rail__mail{
  display:block;
  font-size:12.5px;
  color:var(--ink-2);
  text-decoration:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color .16s ease;
}

.rail__mail:hover{color:var(--accent)}

.rail__place{margin:7px 0 0;color:var(--faint)}

/* ───────────────────────── scrim ───────────────────────── */

.scrim{
  position:fixed;
  inset:0;
  background:var(--veil);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  z-index:40;
}

.scrim[hidden]{display:none}

/* ───────────────────────── stage ───────────────────────── */

.stage{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  position:relative;
  background:var(--paper);
  transition:background-color .42s ease;
}

.stage__head{
  display:flex;
  align-items:center;
  gap:12px;
  flex:none;
  z-index:10;
  padding:14px 22px;
  border-bottom:1px solid var(--line);
  background:var(--paper);
  background:color-mix(in srgb,var(--paper) 78%,transparent);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}

.iconbtn{
  display:none;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  flex:none;
  color:var(--ink-2);
  background:none;
  border:1px solid transparent;
  border-radius:9px;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}

.iconbtn svg{width:16px;height:16px}
.iconbtn:hover{color:var(--ink);background:rgba(255,255,255,.06);border-color:var(--line)}
:root[data-theme="light"] .iconbtn:hover{background:rgba(22,21,15,.06)}

.stage__title{min-width:0;flex:1}

.stage__title h1{
  margin:0;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:-.012em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.stage__title p{
  margin:3px 0 0;
  color:var(--faint);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lang{
  display:flex;
  gap:2px;
  padding:3px;
  flex:none;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  border-radius:10px;
}

:root[data-theme="light"] .lang{background:rgba(22,21,15,.04)}

.lang button{
  padding:5px 9px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.09em;
  color:var(--faint);
  background:none;
  border:0;
  border-radius:7px;
  cursor:pointer;
  transition:color .16s ease,background .16s ease,box-shadow .16s ease;
}

.lang button:hover{color:var(--ink-2)}

.lang button.on{
  color:var(--ink);
  background:var(--card-2);
  box-shadow:var(--inset-hi),var(--shadow-1);
}

.themebtn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  flex:none;
  color:var(--muted);
  background:none;
  border:1px solid transparent;
  border-radius:10px;
  cursor:pointer;
  transition:color .2s ease,background .2s ease,border-color .2s ease,transform .3s cubic-bezier(.2,.8,.3,1);
}

.themebtn svg{width:16px;height:16px}
.themebtn:hover{color:var(--ink);background:rgba(255,255,255,.06);border-color:var(--line)}
:root[data-theme="light"] .themebtn:hover{background:rgba(22,21,15,.06)}
.themebtn:active{transform:rotate(-18deg) scale(.94)}
.themebtn .i-moon{display:none}
:root[data-theme="dark"] .themebtn .i-sun{display:none}
:root[data-theme="dark"] .themebtn .i-moon{display:block}

/* ───────────────────────── thread ───────────────────────── */

.thread{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:34px 24px 20px;
}

.thread__inner{
  max-width:var(--read);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:22px;
}

.msg{
  display:flex;
  gap:12px;
  animation:rise .42s cubic-bezier(.22,.8,.28,1) both;
}

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

.msg--user{justify-content:flex-end}

.msg__bubble{
  max-width:82%;
  padding:10px 15px;
  font-size:14.5px;
  line-height:1.5;
  color:var(--ink);
  background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--line-2);
  border-radius:var(--r-lg) var(--r-lg) 5px var(--r-lg);
  box-shadow:var(--inset-hi),var(--shadow-2);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.avatar{
  flex:none;
  display:grid;
  place-items:center;
  width:28px;height:28px;
  margin-top:1px;
  font-size:11.5px;
  font-weight:650;
  letter-spacing:0;
  color:var(--accent-ink);
  background:linear-gradient(155deg,var(--accent-2),var(--accent));
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.09),0 4px 14px -4px var(--glow);
}

.msg__body{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:13px;
  padding-top:1px;
}

.msg__text{
  font-size:14.5px;
  line-height:1.62;
  text-wrap:pretty;
  color:var(--ink-2);
  overflow-wrap:anywhere;
}

.msg__text .caret{
  display:inline-block;
  width:2px;height:1.02em;
  margin-left:2px;
  vertical-align:-3px;
  background:var(--accent);
  box-shadow:0 0 9px var(--glow);
  animation:blink 1.05s steps(2,start) infinite;
}

@keyframes blink{to{opacity:0}}

.dots{display:inline-flex;gap:4px;padding:6px 0;vertical-align:middle}

.dots i{
  width:5px;height:5px;
  border-radius:50%;
  background:var(--faint);
  animation:pulse 1.15s ease-in-out infinite;
}

.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}

@keyframes pulse{
  0%,100%{opacity:.3;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-2.5px)}
}

/* ───────────────────────── artifacts ───────────────────────── */

.art{
  animation:rise .5s cubic-bezier(.22,.8,.28,1) both;
  animation-delay:.06s;
}

.art--three{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.tile{
  position:relative;
  display:block;
  overflow:hidden;
  text-decoration:none;
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-1);
  transition:border-color .2s ease,transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease;
}

.tile img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top center;
  filter:saturate(.92) contrast(1.02) brightness(.94);
  transition:transform .5s cubic-bezier(.2,.8,.3,1),filter .3s ease;
}

.tile__name{
  display:block;
  padding:8px 10px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
  border-top:1px solid var(--line);
  transition:color .2s ease;
}

.tile:hover{
  border-color:var(--accent-line);
  transform:translateY(-3px);
  box-shadow:var(--shadow-2),0 0 0 3px var(--accent-soft);
}

.tile:hover img{transform:scale(1.035);filter:saturate(1) contrast(1.04) brightness(1)}
.tile:hover .tile__name{color:var(--accent)}

.art--stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--card-2),var(--card));
  box-shadow:var(--inset-hi),var(--shadow-2);
  overflow:hidden;
}

.art--stats>div{
  padding:15px 16px;
  border-right:1px solid var(--line);
}

.art--stats>div:last-child{border-right:0}

.art--stats strong{
  display:block;
  font-size:26px;
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.05;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

.art--stats span{
  display:block;
  margin-top:5px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--faint);
}

.art--contact{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.mailbtn{
  display:inline-flex;
  align-items:center;
  padding:9px 17px;
  font-size:13.5px;
  font-weight:550;
  color:var(--accent-ink);
  text-decoration:none;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  border:1px solid rgba(0,0,0,.14);
  border-radius:99px;
  box-shadow:0 8px 22px -10px var(--glow),var(--inset-hi);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s ease,filter .2s ease;
}

.mailbtn:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
  box-shadow:0 12px 28px -10px var(--glow),var(--inset-hi);
}

.art__links{display:flex;gap:16px}

.art__links a{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .18s ease,border-color .18s ease;
}

.art__links a:hover{color:var(--ink);border-color:var(--accent)}

/* single product card */
.art:not(.art--three):not(.art--stats):not(.art--contact){
  display:block;
  max-width:430px;
  text-decoration:none;
  background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--inset-hi),var(--shadow-2);
  transition:border-color .2s ease,transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease;
}

.art:not(.art--three):not(.art--stats):not(.art--contact):hover{
  border-color:var(--accent-line);
  transform:translateY(-3px);
  box-shadow:var(--shadow-3),0 0 0 3px var(--accent-soft);
}

.art__frame{overflow:hidden;border-bottom:1px solid var(--line)}

.art__frame img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:top center;
  filter:saturate(.95) brightness(.95);
  transition:transform .55s cubic-bezier(.2,.8,.3,1),filter .3s ease;
}

.art:not(.art--three):hover .art__frame img{transform:scale(1.03);filter:saturate(1) brightness(1)}

.art__meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:12px 15px 0;
}

.art__meta strong{
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
}

.art__meta span{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.08em;
  color:var(--faint);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.art__cap{
  padding:5px 15px 14px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ───────────────────────── chips ───────────────────────── */

.chips{display:flex;flex-wrap:wrap;gap:7px}

.chip{
  padding:6px 12px;
  font:inherit;
  font-size:12.5px;
  letter-spacing:-.003em;
  color:var(--ink-2);
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  border-radius:99px;
  cursor:pointer;
  transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s ease;
}

:root[data-theme="light"] .chip{background:rgba(22,21,15,.035)}

.chip:hover{
  color:var(--ink);
  background:var(--accent-soft);
  border-color:var(--accent-line);
  transform:translateY(-1px);
  box-shadow:0 6px 16px -10px var(--glow);
}

.chip:active{transform:translateY(0)}

/* ───────────────────────── composer ───────────────────────── */

.composer{
  flex:none;
  z-index:10;
  padding:14px 24px 16px;
  background:linear-gradient(180deg,transparent,var(--paper) 34%);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--paper) 84%,transparent) 34%);
}

.composer__box{
  display:flex;
  align-items:flex-end;
  gap:9px;
  max-width:var(--read);
  margin:0 auto;
  padding:9px 9px 9px 16px;
  background:color-mix(in srgb,var(--card) 88%,transparent);
  border:1px solid var(--line-2);
  border-radius:var(--r-xl);
  box-shadow:var(--inset-hi),var(--shadow-2);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.composer__box:focus-within{
  border-color:var(--accent-line);
  box-shadow:var(--inset-hi),var(--shadow-2),0 0 0 3px var(--accent-soft);
}

#input{
  flex:1;
  min-width:0;
  min-height:26px;
  padding:6px 0;
  font:inherit;
  font-size:14.5px;
  line-height:1.5;
  color:var(--ink);
  background:none;
  border:0;
  resize:none;
  outline:none;
  max-height:148px;
  overflow-y:auto;
}

#input::placeholder{color:var(--faint)}

.send{
  display:grid;
  place-items:center;
  width:34px;height:34px;
  flex:none;
  color:var(--accent-ink);
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  border:0;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 8px 20px -8px var(--glow),var(--inset-hi);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s ease,opacity .2s ease,filter .2s ease;
}

.send svg{width:15px;height:15px}

.send:hover:not(:disabled){transform:translateY(-1px) scale(1.03);filter:brightness(1.07)}
.send:active:not(:disabled){transform:scale(.96)}

.send:disabled{
  color:var(--faint);
  background:rgba(255,255,255,.055);
  box-shadow:none;
  cursor:default;
  opacity:.85;
}

:root[data-theme="light"] .send:disabled{background:rgba(22,21,15,.075)}

.composer__note{
  max-width:var(--read);
  margin:9px auto 0;
  color:var(--faint);
  text-align:center;
  font-size:9px;
  letter-spacing:.09em;
}

/* ───────────────────────── scrollbars ───────────────────────── */

.thread::-webkit-scrollbar,
.convos::-webkit-scrollbar{width:10px}

.thread::-webkit-scrollbar-track,
.convos::-webkit-scrollbar-track{background:transparent}

.thread::-webkit-scrollbar-thumb,
.convos::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.10);
  border:3px solid transparent;
  background-clip:content-box;
  border-radius:99px;
}

.thread::-webkit-scrollbar-thumb:hover,
.convos::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2);background-clip:content-box}

:root[data-theme="light"] .thread::-webkit-scrollbar-thumb,
:root[data-theme="light"] .convos::-webkit-scrollbar-thumb{background:rgba(22,21,15,.16);background-clip:content-box}

/* ───────────────────────── responsive ───────────────────────── */

@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}

  .rail{
    position:fixed;
    top:0;bottom:0;left:0;
    width:min(296px,84vw);
    z-index:50;
    background:var(--rail);
    transform:translateX(-101%);
    transition:transform .32s cubic-bezier(.22,.8,.28,1),box-shadow .32s ease;
  }

  body.nav-open .rail{
    transform:none;
    box-shadow:24px 0 60px -20px rgba(0,0,0,.7);
  }

  .iconbtn{display:flex}
  .stage__head{padding:11px 14px;gap:9px}
  .stage__title h1{font-size:14.5px}
  .stage__title p{font-size:9px}

  .thread{padding:22px 16px 12px}
  .thread__inner{gap:18px}
  .composer{padding:10px 12px calc(12px + env(safe-area-inset-bottom))}
  .composer__box{padding:8px 8px 8px 14px;border-radius:20px}
  .msg__bubble{max-width:88%}
}

@media (max-width:620px){
  .art--three{grid-template-columns:1fr}
  .tile img{aspect-ratio:16/9}
  .art--stats{grid-template-columns:1fr}
  .art--stats>div{border-right:0;border-bottom:1px solid var(--line);padding:12px 14px}
  .art--stats>div:last-child{border-bottom:0}
  .art--stats strong{font-size:22px}
  .art:not(.art--three):not(.art--stats):not(.art--contact){max-width:100%}
  .composer__note{font-size:8.5px;letter-spacing:.06em}
  .lang button{padding:5px 7px;font-size:9.5px}
  .themebtn{width:30px;height:30px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}