:root{
  --bg:#060a10;
  --panel:#0c141e;
  --panel-line:#152233;
  --cyan:#3ddcff;
  --cyan-dim:#1c7a99;
  --cyan-glow:rgba(61,220,255,.55);
  --amber:#ffa64d;
  --amber-glow:rgba(255,166,77,.55);
  --text:#dcf2fb;
  --text-dim:#5f7c8c;
  --text-faint:#3a4d59;
}

html,body{height:100%; margin:0;}
body{background:var(--bg); overflow-x:hidden;}
*{box-sizing:border-box;}

.app{
  position:relative;
  height:100vh;
  height:100dvh;
  height:var(--app-height, 100dvh); /* set by script.js from visualViewport, keyboard-safe */
  display:flex;
  flex-direction:column;
  color:var(--text);
  font-family:'Rajdhani',sans-serif;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(61,220,255,.10), transparent 55%),
    radial-gradient(ellipse at 50% 110%, rgba(28,122,153,.10), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, transparent 1px, transparent 3px),
    var(--bg);
  overflow:hidden;
  overflow-x:hidden;
  max-width:100vw;
}

/* ---------- top bar ---------- */
.hud-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:calc(16px + env(safe-area-inset-top,0px)) clamp(16px,4vw,32px) 10px;
  border-bottom:1px solid var(--panel-line);
  flex-wrap:wrap;
  flex:none;
}
.clock{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px; letter-spacing:.08em;
  color:var(--text-dim);
  font-variant-numeric:tabular-nums;
  min-width:78px;
}
.wordmark{
  font-family:'Orbitron',sans-serif;
  font-weight:900;
  font-size:clamp(18px,3vw,24px);
  letter-spacing:.32em;
  color:var(--cyan);
  text-shadow:0 0 18px var(--cyan-glow);
  text-align:center;
  flex:1;
}
.sysline{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:.1em;
  color:var(--text-dim);
  min-width:78px; justify-content:flex-end;
}
.dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan-glow);
  transition:background .3s, box-shadow .3s;
}
.dot.thinking{background:var(--amber); box-shadow:0 0 8px var(--amber-glow);}

.agent-toggle{
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px; letter-spacing:.08em;
  color:var(--text-faint);
  background:transparent;
  border:1px solid var(--panel-line);
  border-radius:999px;
  padding:4px 10px;
  cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.agent-toggle:hover{ border-color:var(--cyan-dim); color:var(--cyan); }
.agent-toggle:active{ transform:scale(.96); }
.agent-toggle.on{ color:#03050a; background:linear-gradient(135deg,var(--amber),#ffcf94); border-color:var(--amber); }
.agent-toggle.on.cyan-on{ background:linear-gradient(135deg,var(--cyan),#7be8ff); border-color:var(--cyan); }
.agent-toggle.offline{ color:var(--text-faint); border-color:rgba(255,95,109,.35); }
.agent-toggle:disabled{ opacity:.35; cursor:not-allowed; }

.confirm-bar{
  margin:0 clamp(14px,5vw,64px);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
  background:rgba(255,166,77,.08);
  border:1px solid rgba(255,166,77,.4);
  border-radius:12px;
  padding:10px 14px;
  margin-bottom:8px;
}
.confirm-bar span{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  color:var(--text);
}
.confirm-actions{ display:flex; gap:8px; flex:none; }
.confirm-btn{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase;
  border:none; border-radius:6px; padding:6px 14px; cursor:pointer;
}
.confirm-btn.approve{ background:var(--amber); color:#03050a; }
.confirm-btn.deny{ background:transparent; border:1px solid rgba(255,95,109,.5); color:#ff8b96; }
.confirm-btn:active{ transform:scale(.95); }

.reminder-bar{ background:rgba(61,220,255,.08); border-color:rgba(61,220,255,.4); }
.reminder-bar .confirm-btn.approve{ background:var(--cyan); }

/* ---------- 3D core ---------- */
.scene{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:clamp(20px,4vh,40px) 16px clamp(8px,2vh,16px);
  perspective:1200px;
}
.tilt{
  transform-style:preserve-3d;
  transition:transform .25s ease-out;
}
.core3d{
  position:relative;
  width:clamp(150px,24vw,200px);
  height:clamp(150px,24vw,200px);
  transform-style:preserve-3d;
  animation:spinY 16s linear infinite;
}
@keyframes spinY{ from{transform:rotateY(0deg);} to{transform:rotateY(360deg);} }

.ring3d{
  position:absolute; inset:0;
  border-radius:50%;
  border:1.5px solid var(--cyan-dim);
  transform-style:preserve-3d;
  box-shadow:0 0 18px rgba(61,220,255,.15);
  transition:border-color .4s, box-shadow .4s, opacity .4s;
}
.ring3d.r1{ transform:rotateX(78deg); }
.ring3d.r2{ transform:rotateX(78deg) rotateZ(60deg); opacity:.75; }
.ring3d.r3{ transform:rotateX(78deg) rotateZ(120deg); border-color:var(--amber); opacity:.55; border-style:dashed; }

/* r4/r5: extra rings at different Z depths, spinning independently of the
   core3d parent for a parallax effect. r4 is a segmented "reticle" ring. */
.ring3d.r4{
  inset:-7%; opacity:.5; border-width:1px;
  animation:ringSpinBack 13s linear infinite;
  mask-image: repeating-conic-gradient(from 0deg, #000 0deg 6deg, transparent 6deg 14deg);
  -webkit-mask-image: repeating-conic-gradient(from 0deg, #000 0deg 6deg, transparent 6deg 14deg);
}
.ring3d.r5{
  inset:9%; opacity:.6; border-color:var(--cyan);
  animation:ringSpinFront 10s linear infinite reverse;
}
@keyframes ringSpinBack{ from{transform:translateZ(-10px) rotateX(78deg) rotateZ(0deg);} to{transform:translateZ(-10px) rotateX(78deg) rotateZ(360deg);} }
@keyframes ringSpinFront{ from{transform:translateZ(14px) rotateX(78deg) rotateZ(0deg);} to{transform:translateZ(14px) rotateX(78deg) rotateZ(360deg);} }

.node{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan-glow);
  top:50%; left:-3px; margin-top:-3px;
  transform:translateZ(0);
}
.node.n2{ left:auto; right:-2px; width:4px; height:4px; margin-top:-2px; box-shadow:0 0 7px var(--cyan-glow); }
.node.n3{ width:4px; height:4px; margin-top:-2px; background:var(--amber); box-shadow:0 0 7px var(--amber-glow); }

/* ---------- layered core: bright inner sphere + translucent outer shell
   rotating independently, plus a faint scanline flicker on the sphere ---------- */
.shell{
  position:absolute; inset:15%;
  border-radius:50%;
  border:1px solid rgba(61,220,255,.35);
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), rgba(61,220,255,.10) 45%, transparent 75%);
  box-shadow:0 0 30px rgba(61,220,255,.25), inset 0 0 24px rgba(61,220,255,.15);
  mix-blend-mode:screen;
  transform:translateZ(18px);
  animation:shellSpin 9s linear infinite;
  transition:border-color .4s, box-shadow .4s, background .4s;
}
@keyframes shellSpin{ from{transform:translateZ(18px) rotateY(0deg);} to{transform:translateZ(18px) rotateY(360deg);} }

.sphere{
  position:absolute; inset:30%;
  border-radius:50%;
  overflow:hidden;
  background:radial-gradient(circle at 32% 28%, #eafcff 0%, var(--cyan) 34%, rgba(61,220,255,.12) 72%, transparent 100%);
  box-shadow:
    0 0 46px var(--cyan-glow),
    inset -10px -10px 26px rgba(0,0,0,.45),
    inset 8px 8px 20px rgba(255,255,255,.35);
  transform:translateZ(30px);
  animation:pulse 3.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{transform:translateZ(30px) scale(1);} 50%{transform:translateZ(30px) scale(1.07);} }

.flicker{
  position:absolute; inset:0; border-radius:50%;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0px, rgba(255,255,255,.12) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
  opacity:.25;
  animation:flicker 2.6s steps(6) infinite;
}
@keyframes flicker{ 0%,100%{opacity:.15;} 50%{opacity:.35;} }

/* ---------- orbiting motes: a handful of small particles on independent
   circular orbits for an "energy field" feel — pure transform, cheap ---------- */
.motes{ position:absolute; inset:0; transform-style:preserve-3d; }
.mote{
  position:absolute; top:50%; left:50%;
  width:3px; height:3px; margin:-1.5px 0 0 -1.5px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 6px var(--cyan-glow);
  animation:orbit linear infinite;
  transition:background .4s, box-shadow .4s;
}
@keyframes orbit{
  from{ transform:rotate(0deg) translateX(var(--orbit-r,70px)) rotate(0deg); }
  to{ transform:rotate(360deg) translateX(var(--orbit-r,70px)) rotate(-360deg); }
}
.mote.m1{ --orbit-r:64px; animation-duration:7s; }
.mote.m2{ --orbit-r:80px; animation-duration:11s; animation-direction:reverse; animation-delay:-2s; }
.mote.m3{ --orbit-r:58px; animation-duration:9s; animation-delay:-4s; }
.mote.m4{ --orbit-r:90px; animation-duration:14s; animation-direction:reverse; animation-delay:-6s; }
.mote.m5{ --orbit-r:70px; animation-duration:6s; animation-delay:-1s; width:2px; height:2px; margin:-1px 0 0 -1px; }

.bars{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; gap:4px;
  transform:translateZ(48px);
  opacity:0;
  transition:opacity .25s;
}
.bars span{ width:4px; height:10px; border-radius:2px; background:var(--amber); box-shadow:0 0 8px var(--amber-glow); }

.scene.listening .sphere{ box-shadow:0 0 64px var(--cyan-glow), inset -10px -10px 26px rgba(0,0,0,.45), inset 8px 8px 20px rgba(255,255,255,.4); }
.scene.listening .core3d{ animation-duration:4s; }
.scene.listening .ring3d.r1,.scene.listening .ring3d.r2{ border-color:var(--cyan); }
.scene.listening .shell{ box-shadow:0 0 40px rgba(61,220,255,.35), inset 0 0 28px rgba(61,220,255,.2); }
.scene.listening .mote{ box-shadow:0 0 9px var(--cyan-glow); }

.scene.thinking .sphere{
  background:radial-gradient(circle at 32% 28%, #fff2e4 0%, var(--amber) 34%, rgba(255,166,77,.12) 72%, transparent 100%);
  box-shadow:0 0 50px var(--amber-glow), inset -10px -10px 26px rgba(0,0,0,.45), inset 8px 8px 20px rgba(255,255,255,.35);
}
.scene.thinking .core3d{ animation-duration:2.6s; }
.scene.thinking .ring3d{ border-color:var(--amber); }
.scene.thinking .shell{ border-color:rgba(255,166,77,.35); background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), rgba(255,166,77,.12) 45%, transparent 75%); box-shadow:0 0 30px rgba(255,166,77,.25), inset 0 0 24px rgba(255,166,77,.15); }
.scene.thinking .mote{ background:var(--amber); box-shadow:0 0 6px var(--amber-glow); }
.scene.thinking .flicker{ animation-duration:1.1s; }

.scene.speaking .bars{ opacity:1; }
.scene.speaking .bars span{ animation:bar .9s ease-in-out infinite; }
.scene.speaking .bars span:nth-child(1){animation-delay:0s;}
.scene.speaking .bars span:nth-child(2){animation-delay:.12s;}
.scene.speaking .bars span:nth-child(3){animation-delay:.24s;}
.scene.speaking .bars span:nth-child(4){animation-delay:.36s;}
.scene.speaking .bars span:nth-child(5){animation-delay:.48s;}
@keyframes bar{ 0%,100%{height:8px;} 50%{height:24px;} }

/* Speaking: a faster, punchier pulse on the sphere/shell (distinct from
   the slow idle breathing) plus quicker flicker, so it's obvious at a
   glance that she's talking, not just the small center bars. */
.scene.speaking .core3d{ animation-duration:10s; }
.scene.speaking .sphere{ animation:pulseTalk .6s ease-in-out infinite; }
@keyframes pulseTalk{ 0%,100%{transform:translateZ(30px) scale(1);} 50%{transform:translateZ(30px) scale(1.12);} }
.scene.speaking .shell{ animation:shellSpin 9s linear infinite, shellPulse 1.4s ease-in-out infinite; }
@keyframes shellPulse{ 0%,100%{box-shadow:0 0 30px rgba(61,220,255,.25), inset 0 0 24px rgba(61,220,255,.15);} 50%{box-shadow:0 0 46px var(--cyan-glow), inset 0 0 30px rgba(61,220,255,.28);} }
.scene.speaking .flicker{ animation-duration:.8s; }

/* Continuous motion is decorative here — cut it for anyone who's asked
   their OS/browser to reduce motion, rather than adding a new mechanism. */
@media (prefers-reduced-motion: reduce){
  .core3d, .sphere, .shell, .ring3d.r4, .ring3d.r5, .mote, .flicker, .bars span{
    animation:none !important;
  }
  .tilt{ transition:none; }
  .flicker{ opacity:.15; }
  .mote{ opacity:.7; }
}

.state-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:.3em;
  color:var(--text-dim);
}
.state-label.listening{color:var(--cyan);}
.state-label.thinking{color:var(--amber);}
.state-label.speaking{color:var(--cyan);}

/* ---------- transcript panel (frosted glass, dark) ---------- */
.panel{
  margin:6px clamp(14px,5vw,64px) 0;
  flex:1; min-height:120px;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.panel-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px; letter-spacing:.14em;
  color:var(--text-faint);
  padding:12px 18px 0;
}
.transcript{ flex:1; overflow-y:auto; padding:8px 18px 16px; display:flex; flex-direction:column; gap:12px; }
.msg{ max-width:min(520px,88%); display:flex; flex-direction:column; gap:3px; }
.msg.user{ align-self:flex-end; align-items:flex-end; }
.msg.vesper{ align-self:flex-start; align-items:flex-start; }
.msg .meta{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.08em; color:var(--text-faint); }
.msg .bubble{ font-family:'IBM Plex Mono',monospace; font-size:14px; line-height:1.55; padding:10px 14px; white-space:pre-wrap; word-break:break-word; }
.msg.user .bubble{
  background:linear-gradient(135deg, rgba(61,220,255,.28), rgba(61,220,255,.12));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(61,220,255,.4);
  color:var(--text); border-radius:14px 14px 3px 14px;
  box-shadow:0 6px 18px -8px rgba(61,220,255,.4);
}
.msg.vesper .bubble{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text); border-radius:14px 14px 14px 3px;
}
.msg.vesper.error .bubble{ border-color:rgba(255,95,109,.4); background:rgba(255,95,109,.08); }

.transcript::-webkit-scrollbar{width:8px;}
.transcript::-webkit-scrollbar-thumb{background:var(--panel-line); border-radius:4px;}

/* ---------- input bar (frosted glass pill) ---------- */
.inputbar{
  display:flex; align-items:center; gap:10px;
  padding:14px clamp(16px,6vw,80px) calc(16px + env(safe-area-inset-bottom,0px));
}
.icon-btn{
  flex:none; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  color:var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.6);
  transition:transform .15s, color .2s, box-shadow .2s, border-color .2s;
}
.icon-btn:hover{ transform:translateY(-2px); border-color:var(--cyan-dim); color:var(--cyan); }
.icon-btn:active{ transform:scale(.92); }
.icon-btn.active{ color:#03050a; background:linear-gradient(135deg,var(--cyan),var(--amber)); box-shadow:0 0 20px var(--cyan-glow); }
.icon-btn.hands-free-on{ color:#03050a; background:linear-gradient(135deg,var(--cyan),#7be8ff); box-shadow:0 0 16px var(--cyan-glow); }
.icon-btn.muted{ color:#ff5f6d; border-color:rgba(255,95,109,.4); }
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:disabled{ opacity:.35; cursor:not-allowed; }

.field{
  flex:1; min-width:0;
  display:flex; align-items:center;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:4px 6px 4px 18px;
  box-shadow:0 12px 28px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}

#textInput{
  flex:1; min-width:0;
  background:transparent; border:none; color:var(--text);
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  padding:11px 6px; outline:none;
}
#textInput::placeholder{ color:var(--text-faint); }

.send-btn{
  flex:none; font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.14em; font-size:13px;
  color:#03050a; background:linear-gradient(135deg,var(--cyan),#7be8ff); border:none; padding:0 20px; height:38px; border-radius:999px;
  cursor:pointer; text-transform:uppercase;
  box-shadow:0 8px 20px -8px var(--cyan-glow);
  transition:filter .2s, transform .1s;
}
.send-btn:hover{ filter:brightness(1.1); }
.send-btn:active{ transform:scale(.94); }

.footnote{
  text-align:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px; letter-spacing:.08em;
  color:var(--text-faint);
  padding:10px 16px 14px;
}
.mic-note{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  color:var(--text-faint);
  text-align:center;
  padding:0 16px 6px;
}

/* ---------- touch targets: bump hit areas on touch devices (any width),
   not on mouse/desktop, so the compact HUD look is unchanged there ---------- */
@media (hover:none) and (pointer:coarse){
  .agent-toggle{ padding:11px 14px; min-height:44px; }
  .send-btn{ min-height:44px; height:44px; }
  .confirm-btn{ padding:12px 16px; min-height:44px; }
  .icon-btn{ width:46px; height:46px; }
}

/* ---------- narrow-viewport reflow (phones, down to ~375px) ---------- */
@media (max-width:520px){
  .wordmark{ letter-spacing:.2em; }
  .send-btn{ padding:0 14px; font-size:12px; }

  .hud-top{ padding-left:14px; padding-right:14px; gap:8px 10px; justify-content:center; }
  .clock{ min-width:auto; order:2; }
  .wordmark{ flex:1 1 100%; order:1; }
  .sysline{ order:3; min-width:auto; justify-content:center; width:100%; }

  .scene{ padding:clamp(10px,2.5vh,20px) 12px clamp(4px,1vh,10px); gap:6px; }
  .core3d{ width:clamp(112px,42vw,150px); height:clamp(112px,42vw,150px); }

  /* Mote orbit radii are px (translateX doesn't take %-of-parent the way
     we'd want here), so scale them down to match the smaller core3d. */
  .mote.m1{ --orbit-r:44px; }
  .mote.m2{ --orbit-r:55px; }
  .mote.m3{ --orbit-r:40px; }
  .mote.m4{ --orbit-r:62px; }
  .mote.m5{ --orbit-r:48px; }

  .panel{ margin-left:10px; margin-right:10px; min-height:100px; border-radius:16px; }
  .confirm-bar{ margin-left:10px; margin-right:10px; }
  .inputbar{ padding-left:10px; padding-right:10px; gap:8px; }
  .field{ padding-left:12px; }
}

/* When the on-screen keyboard is up (text input focused on a phone), give
   the transcript + input bar all the room by folding away the decorative
   3D core rather than letting it get squeezed or push the input off-screen. */
@media (max-width:520px){
  .app.kb-open .scene{ display:none; }
  .app.kb-open .hud-top{ padding-top:calc(8px + env(safe-area-inset-top,0px)); padding-bottom:6px; }
  .app.kb-open .panel{ margin-top:0; }
}

/* ---------- contacts settings panel (used by quick actions) ---------- */
.settings-overlay{
  position:fixed; inset:0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(3,6,10,.6);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
/* display:flex above would otherwise permanently override the [hidden]
   attribute's UA-stylesheet display:none, since author CSS always wins
   over the browser default regardless of the attribute being present. */
.settings-overlay[hidden]{ display:none; }
.settings-card{
  width:100%; max-width:420px; max-height:min(80vh,640px);
  display:flex; flex-direction:column; gap:12px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:18px;
  padding:18px 20px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
}
.settings-head{
  display:flex; align-items:center; justify-content:space-between;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.14em;
  color:var(--cyan);
}
.icon-btn.small{ width:28px; height:28px; }
.icon-btn.small svg{ width:14px; height:14px; }
.settings-hint{
  font-family:'Rajdhani',sans-serif; font-size:13px; line-height:1.5;
  color:var(--text-dim); margin:0;
}
.contacts-list{ display:flex; flex-direction:column; gap:6px; overflow-y:auto; min-height:0; }
.contacts-empty{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-faint); padding:6px 0; }
.contact-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--panel-line);
  border-radius:10px;
  padding:8px 10px;
  font-family:'IBM Plex Mono',monospace; font-size:12px;
  color:var(--text);
}
.contact-del{
  flex:none;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.06em;
  background:transparent; border:1px solid rgba(255,95,109,.4); color:#ff8b96;
  border-radius:6px; padding:4px 8px; cursor:pointer;
}
.contacts-form{ display:flex; flex-direction:column; gap:8px; padding-top:6px; border-top:1px solid var(--panel-line); }
.contacts-form input{
  font-family:'Rajdhani',sans-serif; font-size:14px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--panel-line);
  border-radius:8px;
  padding:9px 12px;
  color:var(--text);
}
.contacts-form input:focus{ outline:none; border-color:var(--cyan-dim); }
.contacts-form .confirm-btn{ align-self:flex-start; }