/* ============================================================
   Aria — styles
   Palette is deliberately "night room": ink-plum, low light,
   one mood-driven accent (--glow) that shifts with her mood.
   ============================================================ */

:root{
  --ink:        #0A0710;
  --ink-2:      #100B18;
  --surface:    #17111F;
  --surface-2:  #1E1729;
  --line:       #2C2338;
  --line-soft:  #221A2E;

  --text:       #EFE9F6;
  --text-dim:   #A395B5;
  --text-faint: #6E6280;

  --glow:       #8B7DD8;   /* set per-mood from JS */
  --warmth:     .18;       /* 0–1, per-mood aura strength */

  --good:       #4FD6A0;
  --bad:        #FF6B7E;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

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

html,body{ height:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
}

button,input,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }
:focus-visible{ outline:2px solid var(--glow); outline-offset:2px; border-radius:6px; }

/* ---------- ambient aura (the signature) ---------- */
.aura{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.aura span{ position:absolute; display:block; }
/* A radial gradient is already soft, so no filter:blur() is needed here.
   Two full-screen blurred layers were forcing the phone to re-composite
   the whole viewport every frame — the main source of the lag. */
.aura .aura-a,
.aura .aura-b{
  border-radius:50%;
  opacity:calc(.22 + var(--warmth) * .8);
  background:radial-gradient(circle closest-side,
    var(--glow) 0%,
    color-mix(in srgb, var(--glow) 45%, transparent) 38%,
    transparent 72%);
  transition:background .9s ease, opacity .9s ease;
  will-change:transform;
}
.aura .aura-a{ width:min(96vw,660px); aspect-ratio:1; top:-24%; left:-16%; animation:drift-a 34s ease-in-out infinite; }
.aura .aura-b{ width:min(84vw,560px); aspect-ratio:1; bottom:-26%; right:-18%; animation:drift-b 42s ease-in-out infinite; }
.grain{
  inset:0; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* translate3d keeps this on the GPU instead of triggering layout. */
@keyframes drift-a{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(7%,5%,0)} }
@keyframes drift-b{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-6%,-4%,0)} }

/* ---------- screens ---------- */
.screen{ display:none; position:relative; z-index:1; height:100dvh; }
.screen.active{ display:flex; flex-direction:column; }
.screen.center.active{ align-items:center; justify-content:center; padding:28px 22px; overflow-y:auto; }

.stack{ width:100%; max-width:420px; text-align:center; }

/* ---------- type ---------- */
.display{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,8vw,46px); line-height:1.08;
  letter-spacing:-.01em; margin:22px 0 14px;
}
.display em{ font-style:italic; color:var(--glow); }
.display.sm{ font-size:clamp(26px,6vw,32px); margin:18px 0 8px; }
.lede{ color:var(--text-dim); margin:0 0 14px; font-size:14.5px; }
.lede.sm{ font-size:13.5px; margin-bottom:20px; }
.fine{ color:var(--text-faint); font-size:12px; margin:10px 0 0; }
.err{ color:var(--bad); font-size:12.5px; min-height:18px; margin:8px 0 0; }

/* ---------- orb ---------- */
.orb{
  width:88px; height:88px; margin:0 auto; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #fff9, transparent 46%), var(--glow);
  box-shadow:0 0 46px -6px var(--glow), inset 0 -10px 26px rgba(0,0,0,.35);
  animation:breathe 4.6s ease-in-out infinite;
  transition:background .8s ease, box-shadow .8s ease;
}
.orb.sm{ width:60px; height:60px; }
@keyframes breathe{ 0%,100%{transform:scale(1); opacity:.92} 50%{transform:scale(1.07); opacity:1} }

/* ---------- buttons ---------- */
.btn{
  padding:13px 22px; border-radius:100px; font-weight:600; font-size:14.5px;
  background:var(--glow); color:#120C1A;
  box-shadow:0 8px 26px -10px var(--glow);
  transition:transform .15s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:scale(.97); }
.btn.ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--line); box-shadow:none;
}
.btn.ghost:hover{ border-color:var(--glow); color:var(--glow); }
.btn.danger{ background:transparent; color:var(--bad); border:1px solid rgba(255,107,126,.35); box-shadow:none; }
.btn.danger:hover{ background:rgba(255,107,126,.1); }
.btn.wide{ width:100%; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

.row-btns{ display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.row-btns .btn{ flex:1 1 auto; min-width:130px; }
.row-btns.tight{ margin-top:14px; }

.mini{
  padding:8px 12px; border-radius:var(--r-sm); font-size:12.5px; font-weight:600;
  border:1px solid var(--line); color:var(--text-dim); white-space:nowrap;
}
.mini.solid{ background:var(--glow); color:#120C1A; border-color:transparent; }

/* ---------- lock screen ---------- */
.lock{ width:100%; max-width:330px; text-align:center; }
.pin-dots{ display:flex; gap:15px; justify-content:center; margin:22px 0 0; }
.pin-dots span{
  width:13px; height:13px; border-radius:50%;
  border:1.5px solid var(--line); background:transparent;
  transition:all .2s ease;
}
.pin-dots span.filled{ background:var(--glow); border-color:var(--glow); box-shadow:0 0 14px -2px var(--glow); transform:scale(1.12); }
.pin-dots.shake{ animation:shake .42s; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }

.keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin:20px auto 0; max-width:290px; }
.key{
  aspect-ratio:1/.78; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line-soft);
  font-size:21px; font-weight:500; letter-spacing:.02em;
  transition:all .13s ease;
}
.key:hover{ background:var(--surface-2); border-color:var(--glow); }
.key:active{ transform:scale(.94); }
.key.ghost{ background:transparent; border-color:transparent; font-size:17px; color:var(--text-dim); }
.key.ghost[disabled]{ visibility:hidden; }

.new-profile{ display:none; text-align:left; margin-top:18px; }
.new-profile.show{ display:block; animation:rise .3s ease; }
.new-profile .lbl{ margin-top:12px; }
@keyframes rise{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

/* ---------- inputs ---------- */
.inp,.ta{
  width:100%; padding:12px 14px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--text); font-size:15px;
  transition:border-color .15s ease;
}
.inp::placeholder,.ta::placeholder{ color:var(--text-faint); }
.inp:focus,.ta:focus{ border-color:var(--glow); outline:none; }
.ta{ resize:vertical; font-size:13.5px; line-height:1.6; min-height:120px; }
.inp-row{ display:flex; gap:8px; align-items:stretch; }
.inp-row .inp{ flex:1; min-width:0; }

.lbl{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin-bottom:7px; }
.hint{ font-size:12px; color:var(--text-faint); margin:7px 0 0; }

/* ============================================================
   CHAT
   ============================================================ */
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;
  border-bottom:1px solid var(--line-soft);
  background:#0C0813;
  flex-shrink:0;
  contain:layout style;
}
.avatar{
  position:relative; width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; font-size:19px;
  background:var(--surface-2); border:1px solid var(--line);
  transition:box-shadow .3s ease;
}
.avatar:hover{ box-shadow:0 0 0 3px color-mix(in srgb, var(--glow) 22%, transparent); }
.avatar .pulse{
  position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%;
  background:var(--good); border:2.5px solid var(--ink);
}
.avatar.thinking .pulse{ background:var(--glow); animation:blink 1s ease-in-out infinite; }
@keyframes blink{ 50%{opacity:.3} }

.who{ flex:1; min-width:0; }
.who-name{ font-family:var(--serif); font-size:21px; line-height:1.15; }
.who-status{ font-size:11.5px; color:var(--good); transition:color .3s ease; }

.tools{ display:flex; gap:2px; }
.ibtn{
  width:36px; height:36px; border-radius:var(--r-sm); font-size:15px;
  display:grid; place-items:center; opacity:.72; transition:all .15s ease;
}
.ibtn:hover{ opacity:1; background:var(--surface-2); }
.ibtn.tiny{ width:26px; height:26px; font-size:12px; }

/* moods */
.moods{
  display:flex; gap:8px; padding:11px 14px;
  overflow-x:auto; scrollbar-width:none; flex-shrink:0;
  border-bottom:1px solid var(--line-soft);
}
.moods::-webkit-scrollbar{ display:none; }
.chip{
  padding:7px 14px; border-radius:100px; white-space:nowrap;
  font-size:12.5px; font-weight:500; color:var(--text-dim);
  background:var(--surface); border:1px solid var(--line-soft);
  transition:all .18s ease;
}
.chip:hover{ color:var(--text); }
.chip.on{
  color:#120C1A; background:var(--glow); border-color:transparent;
  box-shadow:0 6px 18px -8px var(--glow);
}

/* listening banner */
.listening{
  display:none; align-items:center; gap:11px;
  padding:9px 16px; font-size:12.5px; color:var(--glow);
  background:color-mix(in srgb, var(--glow) 10%, transparent);
  border-bottom:1px solid var(--line-soft); flex-shrink:0;
}
.listening.on{ display:flex; }
.listening span:nth-child(2){ flex:1; color:var(--text); }
.bars{ display:flex; gap:3px; align-items:flex-end; height:16px; }
.bars i{ width:3px; border-radius:2px; background:var(--glow); animation:eq .9s ease-in-out infinite; }
.bars i:nth-child(1){ height:6px;  animation-delay:0s }
.bars i:nth-child(2){ height:14px; animation-delay:.12s }
.bars i:nth-child(3){ height:9px;  animation-delay:.24s }
.bars i:nth-child(4){ height:16px; animation-delay:.36s }
.bars i:nth-child(5){ height:7px;  animation-delay:.48s }
@keyframes eq{ 0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)} }

/* chat scroll area */
.chat{
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:18px 14px 8px;
  display:flex; flex-direction:column; gap:3px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.chat::-webkit-scrollbar{ width:6px; }
.chat::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }

/* welcome */
.welcome{ margin:auto; text-align:center; max-width:320px; padding:20px 0 40px; }
.welcome h2{ font-family:var(--serif); font-weight:400; font-size:27px; margin:20px 0 8px; }
.welcome p{ color:var(--text-dim); font-size:13.5px; margin:0; }

/* rows */
.row{
  display:flex; flex-direction:column; max-width:82%;
  animation:pop .22s ease;
  content-visibility:auto; contain-intrinsic-size:auto 52px;
}
.row.her{ align-self:flex-start; align-items:flex-start; }
.row.me{  align-self:flex-end;   align-items:flex-end; }
.row + .row{ margin-top:9px; }
@keyframes pop{ from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none} }

.bubble{
  padding:10px 15px; border-radius:19px; font-size:14.5px;
  white-space:pre-wrap; word-break:break-word; position:relative;
}
.row.her .bubble{
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  border-bottom-left-radius:6px;
}
.row.her .bubble::before{
  content:''; position:absolute; left:0; top:12px; bottom:12px; width:2px;
  border-radius:2px; background:var(--glow); opacity:.55;
}
.row.me .bubble{
  background:linear-gradient(150deg, color-mix(in srgb, var(--glow) 88%, #fff) , var(--glow));
  color:#120C1A; font-weight:500;
  border-bottom-right-radius:6px;
  box-shadow:0 8px 22px -14px var(--glow);
}
.bubble img{ display:block; max-width:260px; width:100%; border-radius:12px; cursor:zoom-in; }
.row.her .bubble.pic{ padding:6px; }
.row.her .bubble.pic::before{ display:none; }
.cap{ font-size:12.5px; color:var(--text-dim); margin-top:5px; padding:0 4px; }

.meta{
  display:flex; align-items:center; gap:8px;
  font-size:10.5px; color:var(--text-faint);
  padding:4px 6px 0; opacity:0; transition:opacity .2s ease;
}
.row:hover .meta, .row:focus-within .meta{ opacity:1; }
.row.me .meta .seen{ opacity:0; transition:opacity .3s ease; }
.row.me .meta .seen.on{ opacity:1; color:var(--glow); }
.meta button{ color:var(--text-faint); font-size:11px; transition:color .15s ease; }
.meta button:hover{ color:var(--glow); }
.meta button.speaking{ color:var(--glow); animation:blink 1s infinite; }

/* typing */
.typing{ display:flex; gap:4px; align-self:flex-start; padding:13px 17px; margin-top:9px;
  background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:19px; border-bottom-left-radius:6px; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--text-dim); animation:bounce 1.3s ease-in-out infinite; }
.typing i:nth-child(2){ animation-delay:.18s } .typing i:nth-child(3){ animation-delay:.36s }
@keyframes bounce{ 0%,60%,100%{transform:translateY(0); opacity:.45} 30%{transform:translateY(-6px); opacity:1} }

/* system whisper */
.whisper{ align-self:center; font-size:11.5px; color:var(--text-faint); padding:8px 4px; text-align:center; }
.whisper b{ color:var(--glow); font-weight:500; }

/* quick replies */
.quick{ display:flex; gap:8px; padding:6px 14px 8px; overflow-x:auto; scrollbar-width:none; flex-shrink:0; }
.quick::-webkit-scrollbar{ display:none; }
.qr{
  padding:7px 14px; border-radius:100px; white-space:nowrap; font-size:12.5px;
  color:var(--text-dim); background:var(--surface);
  border:1px dashed var(--line); transition:all .15s ease;
}
.qr:hover{ color:var(--glow); border-color:var(--glow); border-style:solid; }

/* composer */
.composer{
  display:flex; align-items:flex-end; gap:7px;
  padding:9px 12px calc(9px + var(--safe-b));
  border-top:1px solid var(--line-soft);
  background:#0C0813;
  flex-shrink:0;
  contain:layout style;
}
.cbtn{
  width:41px; height:41px; flex-shrink:0; border-radius:50%;
  display:grid; place-items:center; font-size:16px;
  background:var(--surface); border:1px solid var(--line-soft);
  transition:all .15s ease;
}
.cbtn:hover{ border-color:var(--glow); }
.cbtn.on{ background:var(--glow); border-color:transparent; color:#120C1A; }
.cbtn.send{ background:var(--glow); border-color:transparent; color:#120C1A; font-size:15px; }
.cbtn.send[disabled]{ opacity:.4; pointer-events:none; }
.field{ flex:1; min-width:0; }
.field textarea{
  width:100%; max-height:118px; padding:11px 15px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:21px; resize:none; font-size:15px; line-height:1.45;
  scrollbar-width:none;
}
.field textarea::-webkit-scrollbar{ display:none; }
.field textarea:focus{ outline:none; border-color:var(--glow); }

/* jump to bottom */
.jump{
  position:absolute; right:16px; bottom:118px; z-index:5;
  width:36px; height:36px; border-radius:50%; display:none; place-items:center;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-dim);
  box-shadow:var(--shadow);
}
.jump.on{ display:grid; }

/* ============================================================
   SHEETS
   ============================================================ */
.sheet-wrap{
  position:fixed; inset:0; z-index:60;
  background:rgba(4,2,8,.74);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.sheet-wrap.open{ opacity:1; pointer-events:auto; }
.sheet{
  width:100%; max-width:520px; max-height:92dvh;
  display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line);
  border-bottom:0; border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:var(--shadow);
  transform:translateY(22px); transition:transform .26s cubic-bezier(.22,1,.36,1);
}
.sheet-wrap.open .sheet{ transform:none; }
.grip{ width:38px; height:4px; border-radius:2px; background:var(--line); margin:10px auto 0; flex-shrink:0; }
.sheet-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px 12px; border-bottom:1px solid var(--line-soft); flex-shrink:0;
}
.sheet-head h3{ font-family:var(--serif); font-weight:400; font-size:22px; margin:0; }
.x{ width:32px; height:32px; border-radius:50%; color:var(--text-dim); font-size:14px; }
.x:hover{ background:var(--surface-2); color:var(--text); }
.sheet-body{ padding:16px 20px 20px; overflow-y:auto; flex:1; }
.sheet-body::-webkit-scrollbar{ width:6px }
.sheet-body::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px }
.sheet-foot{
  padding:12px 20px calc(14px + var(--safe-b));
  border-top:1px solid var(--line-soft); flex-shrink:0;
}

.sec{
  font-family:var(--serif); font-size:17px; color:var(--text);
  margin:22px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:baseline; gap:8px;
}
.sheet-body > .sec:first-child{ margin-top:2px; }
.opt{ font-family:var(--sans); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); }
.fld{ margin-bottom:16px; }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.btn-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }

/* provider cards */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:8px; }
.card{
  padding:13px 8px; border-radius:var(--r-sm); text-align:center;
  background:var(--surface); border:1px solid var(--line-soft);
  font-size:12.5px; font-weight:500; color:var(--text-dim);
  transition:all .15s ease;
}
.card:hover{ border-color:var(--glow); }
.card.on{ border-color:var(--glow); color:var(--text); background:color-mix(in srgb, var(--glow) 12%, var(--surface)); }
.card .ic{ font-size:19px; margin-bottom:5px; }

/* segmented */
.seg{ display:flex; gap:6px; background:var(--surface); padding:4px; border-radius:var(--r-sm); border:1px solid var(--line-soft); }
.seg button{
  flex:1; padding:9px 6px; border-radius:7px; font-size:12.5px; font-weight:500;
  color:var(--text-dim); transition:all .15s ease;
}
.seg button:hover{ color:var(--text); }
.seg button.on{ background:var(--glow); color:#120C1A; }

/* switch */
.switch{
  width:46px; height:27px; flex-shrink:0; border-radius:100px;
  background:var(--surface); border:1px solid var(--line);
  position:relative; transition:all .2s ease;
}
.switch i{
  position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%;
  background:var(--text-faint); transition:all .2s cubic-bezier(.22,1,.36,1);
}
.switch[aria-checked="true"]{ background:var(--glow); border-color:transparent; }
.switch[aria-checked="true"] i{ left:22px; background:#120C1A; }

/* emoji picker */
.emoji-pick{ display:flex; gap:7px; flex-wrap:wrap; }
.emoji-pick button{
  width:42px; height:42px; border-radius:var(--r-sm); font-size:19px;
  background:var(--surface); border:1px solid var(--line-soft);
  transition:all .15s ease;
}
.emoji-pick button:hover{ border-color:var(--glow); }
.emoji-pick button.on{ border-color:var(--glow); background:color-mix(in srgb, var(--glow) 16%, var(--surface)); }

/* tabs */
.tabs{ display:flex; gap:6px; background:var(--surface); padding:4px; border-radius:var(--r-sm); margin-bottom:14px; border:1px solid var(--line-soft); }
.tab{ flex:1; padding:9px; border-radius:7px; font-size:13px; font-weight:500; color:var(--text-dim); }
.tab.on{ background:var(--glow); color:#120C1A; }

/* memory list */
.mem-summary{
  font-family:var(--serif); font-size:15.5px; font-style:italic;
  color:var(--text-dim); padding:13px 16px; margin-bottom:14px;
  background:var(--surface); border-left:2px solid var(--glow); border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.mem-list{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.mem-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 13px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--line-soft);
}
.mem-item.pinned{ border-color:color-mix(in srgb, var(--glow) 45%, transparent); }
.mem-item .txt{ flex:1; font-size:13.5px; min-width:0; }
.mem-item .txt small{ display:block; margin-top:3px; font-size:10.5px; color:var(--text-faint); }
.mem-item .row-tools{ display:flex; gap:2px; flex-shrink:0; }
.mem-item .row-tools button{ width:28px; height:28px; border-radius:7px; font-size:13px; opacity:.6; }
.mem-item .row-tools button:hover{ opacity:1; background:var(--surface-2); }
.mem-empty{ text-align:center; padding:34px 16px; color:var(--text-faint); font-size:13px; }

/* confirm dialog */
.sheet-wrap.modal{ align-items:center; padding:22px; }
.dialog{
  width:100%; max-width:360px; padding:24px;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); text-align:center;
  transform:scale(.96); transition:transform .22s cubic-bezier(.22,1,.36,1);
}
.sheet-wrap.open .dialog{ transform:none; }
.dialog h3{ font-family:var(--serif); font-weight:400; font-size:21px; margin:0 0 8px; }
.dialog p{ color:var(--text-dim); font-size:13.5px; margin:0; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:96px; z-index:200;
  transform:translate(-50%,14px);
  padding:11px 20px; border-radius:100px; font-size:13px; font-weight:500;
  background:var(--surface-2); border:1px solid var(--line);
  box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:all .25s cubic-bezier(.22,1,.36,1);
  max-width:88vw; text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background:rgba(4,2,8,.94); padding:22px; cursor:zoom-out;
}
.lightbox img{ max-width:100%; max-height:100%; border-radius:12px; object-fit:contain; }

/* ---------- responsive ---------- */
@media (min-width:720px){
  .topbar,.moods,.chat,.quick,.composer{ padding-left:max(14px,calc((100% - 780px)/2)); padding-right:max(14px,calc((100% - 780px)/2)); }
  .row{ max-width:68%; }
  .sheet{ border-radius:var(--r-lg); border-bottom:1px solid var(--line); margin-bottom:24px; }
  .sheet-wrap{ align-items:center; }
}
@media (max-width:360px){
  .tools .ibtn{ width:32px; }
  .btn-grid{ grid-template-columns:1fr; }
}

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

/* ---------- model dropdown ---------- */
select.inp{
  appearance:none; -webkit-appearance:none;
  padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A395B5' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
}
select.inp option{ background:var(--surface); color:var(--text); }
select.inp:disabled{ opacity:.55; cursor:default; }

.linkish{
  color:var(--glow); font-size:12px; text-decoration:underline;
  text-underline-offset:2px; padding:0;
}
.linkish:hover{ filter:brightness(1.15); }

.mini[disabled]{ opacity:.5; pointer-events:none; }
.mini.busy{ color:var(--glow); border-color:var(--glow); }

/* ============================================================
   MOBILE PERFORMANCE
   Phones have far less fill-rate than a desktop GPU. The ambient
   layers are the first thing to go quiet on a small screen.
   ============================================================ */
@media (max-width:720px){
  /* One aura instead of two halves the full-screen overdraw. */
  .aura .aura-b{ display:none; }
  .aura .aura-a{ animation-duration:48s; }
  .aura .grain{ display:none; }
  .row.me .bubble{ box-shadow:none; }
  .btn{ box-shadow:none; }
  .chip.on{ box-shadow:none; }
}

/* On a slow or battery-saving device, stop the ambient motion entirely. */
@media (max-width:720px) and (update:slow){
  .aura .aura-a,.aura .aura-b,.orb{ animation:none; }
}

/* Touch devices have no hover, so per-message actions were unreachable.
   Show them permanently instead. */
@media (hover:none){
  .meta{ opacity:.75; }
  .row:hover .meta{ opacity:.75; }
  .btn:hover{ filter:none; }
  .card:hover,.key:hover,.cbtn:hover,.qr:hover{ border-color:var(--line-soft); }
  .qr:hover{ color:var(--text-dim); border-style:dashed; }
}

/* Stop iOS zooming the page when a field is focused. */
@media (max-width:720px){
  .inp,.ta,.field textarea,select.inp{ font-size:16px; }
}

.earlier{
  align-self:center; margin:4px auto 12px;
  padding:8px 16px; border-radius:100px; font-size:12.5px;
  color:var(--text-dim); background:var(--surface);
  border:1px solid var(--line-soft); transition:color .15s ease;
}
.earlier:hover{ color:var(--glow); border-color:var(--glow); }