:root{
  --bg: #000000;
  --ink: #fff8e1;
  --muted:#ffcc80;
  --teal:#ffca28;
  --vio:#ff7043;
  --line: rgba(255,255,255,.12);

  --hud-radius: 16px;
  --hud-edge: rgba(255,255,255,.08);
  --hud-glass: rgba(0, 0, 0, 0.72);
  --hud-grid: rgba(255,202,40,.08);
  --hud-grid2: rgba(255,112,67,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:
    radial-gradient(1200px 800px at 70% 10%, rgba(255,202,40,.06), transparent),
    radial-gradient(900px 700px at 20% 90%, rgba(255,112,67,.06), transparent),
    var(--bg);
  font: 16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
  overflow:hidden;
}

.wall-wrap{
  position:fixed; inset:0;
  overflow:auto; padding:8px; z-index:1;
  isolation:isolate; will-change: scroll-position;
}
.wall{
  min-height:100%;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-auto-rows: 140px;
  gap:8px;
  filter:saturate(105%);
  contain: layout paint;
}

.tile{
  position:relative; overflow:hidden; border-radius:12px;
  background: #0a0f16;
  border:1px solid var(--line);
  aspect-ratio: 8 / 7;
  transform: translateZ(0) scale(.97);
  opacity:0;
  transition: opacity .28s ease, transform .25s ease;
  will-change: opacity, transform;
  contain: paint;
}
.tile::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(
    90deg,
    rgba(255,214,64,0.06),
    rgba(255,167,38,0.18),
    rgba(255,214,64,0.06)
  );
  background-size: 240% 100%;
  animation: shimmer 1.4s linear infinite;
  opacity:.25;
  pointer-events:none;
}
@keyframes shimmer{ 0%{background-position:100% 0} 100%{background-position:-140% 0}}
.tile.show{ opacity:1; transform: translateZ(0) scale(1) }
.tile.show::before{ opacity:0; transition: opacity .25s ease }
.tile img{
  width:100%; height:100%; object-fit:cover; display:block;
  backface-visibility:hidden; transform: translateZ(0);
  will-change: opacity; opacity:0; transition: opacity .28s ease;
}
.tile.ready img{ opacity:1 }

.center{
  position:relative; z-index:3;
  height:100%; display:grid; place-content:center; gap:16px;
  text-align:center; padding:24px;
  pointer-events:none;
}

.hud{
  pointer-events:auto;
  width:min(860px, 92vw);
  margin-inline:auto;
  padding:20px;
  border-radius:var(--hud-radius);
  position:relative;
  border:1px solid transparent;
  box-shadow:none;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.hud::before{
  content:""; position:absolute; inset:0; border-radius:var(--hud-radius);
  background:
    radial-gradient(600px 160px at 50% 0%, rgba(255,202,40,.10), transparent 70%),
    radial-gradient(600px 160px at 50% 100%, rgba(255,112,67,.08), transparent 70%),
    var(--hud-glass);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  opacity:0; transition: opacity .35s ease; z-index:-1;
  pointer-events:none;
}
.hud::after{
  content:""; position:absolute; inset:1px; border-radius:calc(var(--hud-radius) - 1px);
  background:
    repeating-linear-gradient(0deg, transparent 0 28px, var(--hud-grid) 28px 29px),
    repeating-linear-gradient(90deg, transparent 0 28px, var(--hud-grid2) 28px 29px);
  mask-image: radial-gradient(120% 120% at 50% 50%, #000 60%, transparent 100%);
  opacity:0; transition: opacity .35s ease; animation: hudGridSlide 18s linear infinite;
  pointer-events:none;
}
@keyframes hudGridSlide{ from{transform:translateY(0)} to{transform:translateY(-28px)} }
.hud > .corner{ position:absolute; width:18px; height:18px; border:1.5px solid var(--hud-edge); opacity:0; transition: opacity .35s ease; pointer-events:none }
.hud > .corner.tl{ top:8px; left:8px; border-right:none; border-bottom:none; border-radius:8px 0 0 0 }
.hud > .corner.tr{ top:8px; right:8px; border-left:none; border-bottom:none; border-radius:0 8px 0 0 }
.hud > .corner.bl{ bottom:8px; left:8px; border-right:none; border-top:none; border-radius:0 0 0 8px }
.hud > .corner.br{ bottom:8px; right:8px; border-left:none; border-top:none; border-radius:0 0 8px 0 }
body.wall-active .hud{ border-color: var(--line); box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05) }
body.wall-active .hud::before{ opacity:1 }
body.wall-active .hud::after{ opacity:.08 }
body.wall-active .hud > .corner{ opacity:.9 }

.hud .jarvis{ margin:4px auto 12px }
.hud .prompt{ width:100%; }
.hud .hint{ margin-top:8px }

.prompt{ display:flex; gap:8px; margin:0 auto;}
input[type="text"]{
  flex:1; padding:14px 16px; border-radius:12px; border:1px solid var(--line);
  background: rgba(10,10,10,.72); color:var(--ink); outline:none; font-weight:600;
  backdrop-filter: blur(6px);
}
input::placeholder{ color:#ffd180 }
.btn{
  padding:14px 16px; border-radius:12px; border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:var(--ink); font-weight:700; cursor:pointer;
}
.btn.ghost{ background: transparent }
.btn.danger{ border-color: rgba(255,87,34,.45); color:#ffe0b2 }
.btn:hover{ border-color: rgba(255,112,67,.55) }
.hint{ margin:0; color:var(--muted); font-size:13px; text-shadow: 0 1px 0 rgba(0,0,0,.2) }
.hint em{ color:#fff3b0; font-style:normal }

.jarvis{ margin:0 auto 10px; width:140px; display:grid; place-items:center; gap:8px }
.orb{
  width:90px; height:90px; border-radius:50%;
  background: radial-gradient(35% 35% at 35% 35%, #fff8e1, #fff176 35%, #ffca28 50%, transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(255,112,67,.85), rgba(255,202,40,.75));
  border: 2px solid rgba(255,255,255,.6);
  animation: float 3.8s ease-in-out infinite, spin 24s linear infinite;
}
.label{ letter-spacing:.35em; font-size:11px; color:#ffe082; text-shadow: 0 0 14px rgba(255,202,40,.35) }
@keyframes float{ 0%,100%{ transform: translateY(-4px)} 50%{ transform: translateY(6px)} }
@keyframes spin{ to{ transform: rotate(360deg) } }

.footer-hud{
  position:fixed; left:0; right:0; bottom:12px; z-index:4;
  display:flex; justify-content:center;
  pointer-events:none;
}
.footer-inner{
  position:relative;
  width:min(920px, 96vw);
  padding:12px 14px;
  border-radius:14px;
  border:1px solid transparent;
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  background: rgba(8,12,18,0);
  box-shadow:none;
  pointer-events:auto;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;

  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
}
.footer-inner::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:
    radial-gradient(500px 120px at 50% 0%, rgba(255,202,40,.10), transparent 70%),
    radial-gradient(500px 120px at 50% 100%, rgba(255,112,67,.08), transparent 70%),
    rgba(0, 0, 0, 0.72);
  opacity:0; transition: opacity .35s ease; z-index:-1;
  pointer-events:none;
}
body.wall-active .footer-inner{
  border-color: var(--line);
  background: rgba(8,12,18,0.55);
  box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
body.wall-active .footer-inner::before{ opacity:1 }

.ca-pill{
  grid-column:2;
  justify-self:center;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  border:1px solid var(--line);
  background: rgba(12,12,12,.82);
  font-weight:700; color:var(--ink);
  cursor:pointer;
}
.ca-label{ opacity:.7; letter-spacing:.08em }
.ca-value{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ca-copy-icon{ opacity:.8 }
.ca-pill:active{ transform: translateY(1px) }

.x-button{
  grid-column:3;
  justify-self:end;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid var(--line);
  background: rgba(255,255,255,.04); color:var(--ink); text-decoration:none; font-weight:700;
}
.x-button:hover{ border-color: rgba(255,112,67,.55) }
.x-icon{ width:18px; height:18px; fill:#fff8e1 }
.x-text{ opacity:.9 }

.toast{
  position:fixed; left:50%; bottom:64px; transform: translateX(-50%);
  padding:10px 14px; border-radius:10px; background: rgba(10,10,10,.85);
  border:1px solid var(--line); color:#fff3b0; z-index:5; opacity:0; transition: opacity .25s ease;
  pointer-events:none;
}
.toast.show{ opacity:1 }

@media (prefers-reduced-motion: reduce){
  .tile, .tile img, .hud::before, .hud::after, .toast, .footer-inner, .footer-inner::before { transition: none !important; animation: none !important; }
}

@media (max-width:700px){
  .wall{ grid-auto-rows: 120px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));}
  .orb{ width:76px; height:76px }
  .hud{ padding:14px; border-radius:14px }
  .footer-inner{ width:min(980px, 98vw); padding:10px 12px }
  .x-text{ display:none }
}

@media (max-width: 700px){
  .wall{
    grid-auto-rows: 100px;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap:6px;
  }

  .center{ padding: 16px }

  .hud{
    width:min(680px, 94vw);
    padding:12px;
    border-radius:12px;
  }
  .hud::before{
    backdrop-filter: blur(8px) saturate(115%);
    -webkit-backdrop-filter: blur(8px) saturate(115%);
  }

  .hud::after{ display:none }

  .prompt{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    gap:8px;
  }
  #q{
    min-height: 46px;
    font-size: 16px;
  }
  .btn{
    padding:12px 14px;
    font-size:14px;
    min-height: 44px;
  }
  .btn[type="submit"]{ grid-column: 2 / 3 }
  #micBtn{ grid-column: 1 / 2 }
  #resetBtn{ grid-column: 2 / 3 }

  .footer-hud{
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
  .footer-inner{
    width:min(980px, 98vw);
    padding:10px 12px;
    grid-template-columns: 1fr auto 1fr;
    backdrop-filter: blur(8px) saturate(115%);
    -webkit-backdrop-filter: blur(8px) saturate(115%);
  }
  .ca-pill{
    padding:10px 16px;
    max-width: 90vw;
  }
  .x-text{ display:none }
  .x-button{ padding:10px 12px }

  .toast{
    bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
    padding:10px 12px;
  }

  .orb{ width:76px; height:76px }
}