:root {
  --bg: #0b0f14;
  --panel: #111824;
  --panel2: #0f1722;
  --text: #e7eefc;
  --muted: #a9b6d3;
  --accent: #4aa3ff;
  --danger: #ff4a6a;
  --border: rgba(255,255,255,.08);

  /* glass */
  --glass: rgba(16, 22, 34, 0.38);
  --glass2: rgba(14, 18, 28, 0.28);
  --glassBorder: rgba(255,255,255,.10);
  --glassGlow: rgba(74,163,255,.14);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  position: relative;
}

/* ==========================
   Animated orb background (CSS-only)
   ========================== */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -20vh -20vw;
  z-index: -2;
  pointer-events: none;
  background-repeat: no-repeat;
  filter: blur(34px) saturate(140%);
  opacity: 0.9;
  transform: translate3d(0,0,0);
}

body::before {
  background-image:
    radial-gradient(420px 320px at 18% 20%, rgba(74,163,255,.28), transparent 62%),
    radial-gradient(520px 380px at 82% 16%, rgba(255,74,106,.22), transparent 64%),
    radial-gradient(520px 420px at 70% 82%, rgba(140, 120, 255, .18), transparent 62%),
    radial-gradient(520px 420px at 12% 85%, rgba(74,163,255,.14), transparent 60%);
  animation: orbFloatA 18s ease-in-out infinite alternate;
}

body::after {
  z-index: -3;
  background-image:
    radial-gradient(620px 480px at 40% 35%, rgba(74,163,255,.10), transparent 68%),
    radial-gradient(720px 520px at 55% 75%, rgba(255,74,106,.08), transparent 70%),
    radial-gradient(720px 560px at 92% 52%, rgba(255,255,255,.06), transparent 72%);
  filter: blur(52px) saturate(160%);
  opacity: 0.75;
  animation: orbFloatB 26s ease-in-out infinite alternate;
}

/* subtle vignette + sheen */
.wrap::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,255,255,.05), transparent 55%),
    radial-gradient(1100px 700px at 50% 110%, rgba(0,0,0,.55), transparent 55%),
    radial-gradient(900px 600px at 0% 50%, rgba(0,0,0,.38), transparent 50%),
    radial-gradient(900px 600px at 100% 50%, rgba(0,0,0,.38), transparent 50%);
  mix-blend-mode: normal;
}

@keyframes orbFloatA {
  0%   { transform: translate(-1.5%, -1%) scale(1.02); }
  35%  { transform: translate(1.2%, 0.6%) scale(1.06); }
  70%  { transform: translate(-0.6%, 1.4%) scale(1.03); }
  100% { transform: translate(1.8%, -0.4%) scale(1.07); }
}
@keyframes orbFloatB {
  0%   { transform: translate(1.2%, 1.0%) scale(1.00); }
  40%  { transform: translate(-1.4%, 0.2%) scale(1.03); }
  75%  { transform: translate(0.8%, -1.2%) scale(1.02); }
  100% { transform: translate(-0.6%, 1.6%) scale(1.04); }
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none !important; }
}

/* ==========================
   Layout
   ========================== */
.wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
}

/* ==========================
   Glass card
   ========================== */
.card {
  width: min(920px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid var(--glassBorder);
  border-radius: 20px;
  overflow: hidden;

  /* glass effect */
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);

  box-shadow:
    0 22px 80px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.04) inset;
}

/* add a glossy “highlight” band */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 180px at 30% 0%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 180px at 70% 0%, rgba(74,163,255,.08), transparent 62%);
  opacity: 0.55;
}

/* ensure positioned pseudo works */
.card { position: relative; }

/* ==========================
   Header
   ========================== */
.header {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  background: rgba(0,0,0,.10);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.brand .title {
  font-weight: 900;
  letter-spacing: .8px;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.brand .subtitle { color: var(--muted); font-size: 13px; }

/* ==========================
   Buttons (glassy + glow)
   ========================== */
.btn {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;

  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  box-shadow:
    0 10px 30px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.04) inset;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.btn:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  transform: translateY(-1px);
  box-shadow:
    0 14px 38px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.05) inset;
}

.btn:active { transform: translateY(0px) scale(0.99); }

.btn.primary {
  background: rgba(74,163,255,.16);
  border-color: rgba(74,163,255,.38);
  box-shadow:
    0 12px 34px rgba(74,163,255,.10),
    0 0 0 1px rgba(74,163,255,.10) inset;
}
.btn.primary:hover {
  background: rgba(74,163,255,.20);
  box-shadow:
    0 16px 42px rgba(74,163,255,.14),
    0 0 0 1px rgba(74,163,255,.12) inset;
}

.btn.danger {
  background: rgba(255,74,106,.12);
  border-color: rgba(255,74,106,.38);
  box-shadow:
    0 12px 34px rgba(255,74,106,.10),
    0 0 0 1px rgba(255,74,106,.08) inset;
}

/* ==========================
   Content / grid
   ========================== */
.content { padding: 18px 22px; }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 820px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================
   Fields (glassy inputs)
   ========================== */
.field label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(0,0,0,.20);
  color: var(--text);
  outline: none;

  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  box-shadow:
    0 10px 26px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.03) inset;

  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.field input:focus {
  border-color: rgba(74,163,255,.50);
  box-shadow:
    0 0 0 3px rgba(74,163,255,.14),
    0 14px 40px rgba(74,163,255,.10);
  background: rgba(0,0,0,.24);
}

.note { color: var(--muted); font-size: 13px; line-height: 1.35; }

.err {
  display: none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,74,106,.40);
  background: rgba(255,74,106,.10);
  color: #ffd7df;

  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* ==========================
   Chat
   ========================== */
.chat {
  height: 66vh;
  min-height: 420px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.messages {
  padding: 18px 22px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* make scroll look nicer (Firefox + Chromium-ish) */
.messages {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) rgba(0,0,0,.18);
}
.messages::-webkit-scrollbar { width: 10px; }
.messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16);
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,.18);
}
.messages::-webkit-scrollbar-track { background: rgba(0,0,0,.12); }

.bubble {
  max-width: 78%;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  line-height: 1.35;
  white-space: pre-wrap;

  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  box-shadow:
    0 12px 30px rgba(0,0,0,.20),
    0 0 0 1px rgba(255,255,255,.02) inset;
}

.bubble.user {
  align-self: flex-end;
  border-color: rgba(74,163,255,.32);
  background: rgba(74,163,255,.10);
  box-shadow:
    0 14px 36px rgba(74,163,255,.10),
    0 0 0 1px rgba(74,163,255,.06) inset;
}

.bubble.jarvis {
  align-self: flex-start;
  border-color: rgba(255,255,255,.12);
}

/* ==========================
   Composer
   ========================== */
.composer {
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;

  background: rgba(0,0,0,.12);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

.composer textarea {
  width: 100%;
  resize: none;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline: none;
  min-height: 44px;
  max-height: 160px;

  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  box-shadow:
    0 10px 26px rgba(0,0,0,.20),
    0 0 0 1px rgba(255,255,255,.03) inset;
}

.composer textarea:focus {
  border-color: rgba(74,163,255,.50);
  box-shadow:
    0 0 0 3px rgba(74,163,255,.14),
    0 14px 40px rgba(74,163,255,.10);
}

.small { color: var(--muted); font-size: 12px; }