/* ==========================================================================
   PROMETHEON BETA — Forge theme layer.
   Loaded AFTER the app's own two <style> blocks, so it retunes the existing
   101-id interface without touching a line of its logic. Every selector here
   targets markup that already exists.
   ========================================================================== */
:root{
  /* Retuned to the exact homepage palette. The app was already orange-on-dark;
     these are the same hues the marketing site uses, so the two read as one product. */
  --bg-0:#060608; --bg-1:#0a0a0f; --bg-2:#101017;
  --panel:rgba(22,22,31,.62); --panel-2:rgba(28,28,38,.72);
  --border:rgba(244,239,232,.09); --border-strong:rgba(255,106,26,.34);
  --orange:#ff6a1a; --orange-bright:#ffa05c; --orange-dim:#b8370a;
  --text:#f4efe8; --text-dim:#938d97; --text-dimmer:#6a6572;
  --ease:cubic-bezier(.16,1,.3,1);
  --glass-blur:blur(18px) saturate(155%);
}
body{
  background:var(--bg-0);
  background-image:
    radial-gradient(90vw 60vh at 78% -10%,rgba(255,106,26,.09),transparent 62%),
    radial-gradient(70vw 50vh at 8% 108%,rgba(255,106,26,.055),transparent 60%);
  background-attachment:fixed;
}
::selection{background:var(--orange);color:#120800}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,106,26,.26);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,106,26,.46)}

/* ---- glass surfaces ---- */
#sidebar{
  background:linear-gradient(180deg,rgba(16,16,23,.84),rgba(10,10,15,.92));
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--border);
}
#composer{
  background:linear-gradient(165deg,rgba(244,239,232,.055),rgba(244,239,232,.015));
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border);border-radius:18px;
  box-shadow:0 18px 50px -24px rgba(0,0,0,.9);
  transition:border-color .35s,box-shadow .35s;
}
#composer:focus-within{
  border-color:var(--border-strong);
  box-shadow:0 18px 50px -20px rgba(0,0,0,.95),0 0 0 3px rgba(255,106,26,.12);
}

/* ---- buttons: glassy, with a travelling sheen on hover ---- */
button,.btn{transition:transform .28s var(--ease),background .28s,border-color .28s,box-shadow .28s}
button:hover,.btn:hover{transform:translateY(-1px)}
button:active,.btn:active{transform:translateY(0)}
.btn-primary,#auth-submit-btn,[class*="primary"]{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--orange),var(--orange-dim));
  border:1px solid transparent;color:#140700;font-weight:700;
  box-shadow:0 6px 24px -8px rgba(255,106,26,.6);
}
.btn-primary::after,#auth-submit-btn::after{
  content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);
  transition:transform .75s var(--ease);
}
.btn-primary:hover::after,#auth-submit-btn:hover::after{transform:translateX(120%)}

/* ---- auth screen gets real art ---- */
#auth-modal{
  background:
    linear-gradient(to bottom,rgba(6,6,8,.9),rgba(6,6,8,.78)),
    url("assets/beta-auth.jpg") center/cover no-repeat;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
#auth-form{
  background:linear-gradient(165deg,rgba(22,22,31,.88),rgba(12,12,18,.94));
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border);border-radius:20px;
  box-shadow:0 40px 100px -40px rgba(0,0,0,1),0 0 0 1px rgba(255,106,26,.1);
}
#auth-modal-title{
  background:linear-gradient(104deg,var(--text) 20%,var(--orange-bright) 70%,var(--text) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- empty chat state: the dormant-field art, very subtle ---- */
#chat-scroll:empty::before,#chat-inner:empty::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:url("assets/beta-empty.jpg") center/cover no-repeat;
  -webkit-mask-image:radial-gradient(50% 50% at 50% 42%,#000,transparent 72%);
  mask-image:radial-gradient(50% 50% at 50% 42%,#000,transparent 72%);
}

/* ---- messages ---- */
.msg,.message,[class*="bubble"]{animation:msgIn .5s var(--ease) both}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ==========================================================================
   CHAT / VOICE TOGGLE
   Modelled on the pill switch in the reference shot, rebuilt in Prometheon
   amber. A sliding thumb behind two labels: one element moves, so it stays
   smooth, and the labels keep real text for screen readers.
   ========================================================================== */
.pmx-switch{
  position:relative;display:inline-flex;align-items:center;
  padding:4px;gap:0;border-radius:999px;
  background:rgba(10,10,15,.82);border:1px solid var(--border);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 rgba(244,239,232,.05),0 6px 20px -10px rgba(0,0,0,.9);
  user-select:none;
}
.pmx-switch__thumb{
  position:absolute;top:4px;left:4px;height:calc(100% - 8px);
  border-radius:999px;z-index:0;
  background:linear-gradient(135deg,var(--orange),var(--orange-dim));
  box-shadow:0 4px 18px -4px rgba(255,106,26,.7),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .42s var(--ease),width .42s var(--ease);
}
.pmx-switch__opt{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:.42rem;
  padding:.56rem 1.15rem;min-height:40px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:.92rem;font-weight:600;color:var(--text-dim);
  border-radius:999px;white-space:nowrap;
  transition:color .32s var(--ease);
}
.pmx-switch__opt[aria-selected="true"]{color:#140700}
.pmx-switch__opt:focus-visible{outline:2px solid var(--orange-bright);outline-offset:2px}
.pmx-switch__opt svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
/* the mic pulses only while voice mode is active and listening */
.pmx-switch.is-listening .pmx-switch__opt[data-mode="voice"] svg{animation:micPulse 1.4s ease-in-out infinite}
@keyframes micPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.14)}}

@media (prefers-reduced-motion:reduce){
  .pmx-switch__thumb{transition:none}
  .msg,.message,[class*="bubble"]{animation:none}
  .pmx-switch.is-listening .pmx-switch__opt svg{animation:none}
}