/* ── TOKENS ────────────────────────────────────────── */
:root {
  --teal:          #E07422;
  --teal-light:    #F5903A;
  --teal-dark:     #A84E10;

  --bg:            #160800;
  --text:          #ffffff;
  --text-muted:    rgba(255,255,255,0.42);
  --text-dim:      rgba(255,255,255,0.72);
  --card-bg:       rgba(255,255,255,0.06);
  --card-border:   rgba(255,255,255,0.12);
  --topbar-bg:     rgba(12,5,0,0.70);
  --topbar-border: rgba(255,255,255,0.08);
  --input-bg:      rgba(12,5,0,0.78);
  --input-border:  rgba(224,116,34,0.45);
  --divider:       rgba(255,255,255,0.07);
  --footer-color:  rgba(255,255,255,0.15);
  --dot-color:     rgba(224,116,34,0.07);
  --shadow-card:   rgba(0,0,0,0.25);
  --msg-user-bg:   rgba(224,116,34,0.15);
  --msg-user-border: rgba(224,116,34,0.3);
  --msg-bot-bg:    rgba(255,255,255,0.04);
  --msg-bot-border: rgba(255,255,255,0.08);

  --sidebar-w:     68px;
  --sidebar-bg:    rgba(10,4,0,0.80);
  --sidebar-border: rgba(255,255,255,0.07);

  --radius: 14px;
  --tr: 0.25s cubic-bezier(0.4,0,0.2,1);
}

[data-theme="light"] {
  --bg:            #fff8f2;
  --text:          #2e1508;
  --text-muted:    rgba(46,21,8,0.48);
  --text-dim:      rgba(46,21,8,0.78);
  --card-bg:       rgba(255,255,255,0.78);
  --card-border:   rgba(224,116,34,0.15);
  --topbar-bg:     rgba(255,248,242,0.90);
  --topbar-border: rgba(224,116,34,0.12);
  --input-bg:      rgba(255,255,255,0.96);
  --input-border:  rgba(224,116,34,0.35);
  --divider:       rgba(0,0,0,0.07);
  --footer-color:  rgba(46,21,8,0.3);
  --dot-color:     rgba(224,116,34,0.05);
  --shadow-card:   rgba(224,116,34,0.07);
  --msg-user-bg:   rgba(224,116,34,0.1);
  --msg-user-border: rgba(224,116,34,0.22);
  --msg-bot-bg:    rgba(255,255,255,0.88);
  --msg-bot-border: rgba(224,116,34,0.12);
  --sidebar-bg:    rgba(255,248,242,0.94);
  --sidebar-border: rgba(224,116,34,0.12);
}

/* ── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; }
html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Cairo', sans-serif;
  direction: ltr;
  background: #160800;
  color: var(--text);
  transition: color 0.35s;
}
[data-theme="light"] body { background: #fff8f2; }

/* ── BACKGROUND ────────────────────────────────────── */
.bg-layer {
  position: fixed;
  inset: -6%;          /* extra room for zoom without white edges */
  z-index: 0;
  pointer-events: none;
  background-image: url('../bg.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  animation: kenBurns 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenBurns {
  0%   { transform: scale(1.0)  translate(0%,    0%);   }
  25%  { transform: scale(1.06) translate(-1.5%, 0.5%); }
  50%  { transform: scale(1.04) translate(1%,    1%);   }
  75%  { transform: scale(1.07) translate(-0.5%, -0.5%);}
  100% { transform: scale(1.05) translate(1.5%,  0.5%); }
}

/* dark overlay — breathes */
.bg-layer::before {
  content: '';
  position: absolute; inset: 0;
  animation: overlayBreathe 10s ease-in-out infinite alternate;
}
[data-theme="dark"] .bg-layer::before {
  background:
    linear-gradient(180deg, rgba(22,8,0,0.68) 0%, rgba(10,4,0,0.80) 100%),
    radial-gradient(ellipse 65% 45% at 50% 5%, rgba(224,116,34,0.14) 0%, transparent 58%);
}
[data-theme="light"] .bg-layer::before {
      background: linear-gradient(180deg, rgb(255 248 242) 0%, rgb(255 240 220) 100%), radial-gradient(ellipse 65% 45% at 50% 5%, rgb(224 116 34 / 8%) 0%, transparent 58%);
}
@keyframes overlayBreathe {
  0%   { opacity: 0.92; }
  100% { opacity: 1.0;  }
}

/* floating glow orb */
.bg-layer::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: gridDrift 20s linear infinite;
}
@keyframes gridDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 28px 28px; }
}

/* ── VIEWPORT STACK ────────────────────────────────── */
.app {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  overflow: hidden;
}