/* Nyukt.AI Voice — "Night Majlis".
 *
 * Gulf evening: near-black ground with a blue bias, brass (the dallah coffee
 * pot), pearl for text (the Emirates' pre-oil pearl-diving trade), and a
 * girih lattice held at low opacity as atmosphere rather than decoration.
 *
 * Committed single-theme: this is a stage for one action in a darkened room,
 * so there is no light variant. Every colour is painted explicitly and the
 * page never borrows the host's ground.
 *
 * Hard rule for this screen: it must never scroll. The console is a fixed
 * composition sized against the viewport, not a document.
 */
:root{
  --ground:#07090c;
  --ground-2:#0b0f15;
  --panel:rgba(255,255,255,.032);
  --panel-2:rgba(255,255,255,.055);
  --line:rgba(233,225,209,.11);
  --line-2:rgba(233,225,209,.2);

  --brass:#c8a15a;
  --brass-hi:#e8cd96;
  --brass-dim:rgba(200,161,90,.16);

  --pearl:#ece5d8;
  --pearl-2:#a9a396;
  --pearl-3:#6f6c66;

  --sea:#4fb3a4;
  --terra:#cf6a4c;

  --display:"Space Grotesk",sans-serif;   /* CruxLabx brand face */
  --body:"Instrument Sans",sans-serif;
  --arabic:"IBM Plex Sans Arabic",sans-serif;

  --r:14px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
html{background:var(--ground)}
body{
  background:var(--ground);
  color:var(--pearl);
  font-family:var(--body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;               /* the console never scrolls */
}

/* ---------- stage + atmosphere ---------- */
.stage{
  position:relative;
  height:100dvh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  isolation:isolate;
}

/* girih-adjacent lattice: two mirrored 30deg stripe fields cross into a
   diamond mesh. Cheap, resolution-free, and reads as geometry not noise. */
.lattice{
  position:absolute; inset:0; z-index:-3; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(30deg,transparent 0 34px,rgba(200,161,90,.055) 34px 35px),
    repeating-linear-gradient(-30deg,transparent 0 34px,rgba(200,161,90,.055) 34px 35px),
    repeating-linear-gradient(90deg,transparent 0 59px,rgba(200,161,90,.03) 59px 60px);
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 42%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 75% at 50% 42%,#000 0%,transparent 78%);
}
.glow{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 62% 48% at 50% 60%,rgba(200,161,90,.11),transparent 70%),
    radial-gradient(ellipse 80% 55% at 50% 118%,rgba(79,179,164,.09),transparent 70%),
    linear-gradient(180deg,var(--ground-2) 0%,var(--ground) 55%);
}
.grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.32;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- top bar ---------- */
.bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(18px,4vw,38px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:13px; min-width:0}
.logo{height:22px; width:auto; display:block}
.brand-div{width:1px; height:16px; background:var(--line-2)}
.brand-mark{
  font-family:var(--display); font-weight:600; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--pearl-2);
  white-space:nowrap;
}
.chip-demo{
  font-family:var(--display); font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); border:1px solid var(--brass-dim);
  background:rgba(200,161,90,.06);
  padding:5px 11px; border-radius:999px;
}

/* ---------- console ---------- */
.console{
  align-self:center; justify-self:center;
  width:min(760px,92vw);
  max-height:100%;
  overflow-y:auto;               /* internal safety valve on tiny screens */
  scrollbar-width:none;
  padding:clamp(10px,2.4vh,26px) 0;
  display:flex; flex-direction:column;
  gap:clamp(12px,2.2vh,20px);
}
.console::-webkit-scrollbar{display:none}

.row{display:flex; flex-direction:column; gap:10px}
.row-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}

.lbl{
  font-family:var(--display); font-size:10px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--pearl-3);
  display:block;
}
.lbl b{color:var(--brass); font-weight:600; margin-left:4px; letter-spacing:.06em}
.note{font-size:11px; color:var(--brass); opacity:.85}
.desc{margin:0; font-size:12.5px; color:var(--pearl-2); min-height:1.1em}

/* use-case chips */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips button{
  font-family:var(--body); font-size:13px; font-weight:500;
  color:var(--pearl-2); cursor:pointer;
  background:var(--panel); border:1px solid var(--line);
  padding:8px 16px; border-radius:999px;
  transition:.2s var(--ease);
}
.chips button:hover{border-color:var(--line-2); color:var(--pearl)}
.chips button[aria-pressed="true"]{
  color:#141007; border-color:transparent; font-weight:600;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass));
  box-shadow:0 6px 18px -8px rgba(200,161,90,.7);
}

/* controls */
.row-ctl{
  display:grid; grid-template-columns:1fr 1fr 1.25fr;
  gap:clamp(12px,2vw,20px); align-items:start;
}
.ctl{display:flex; flex-direction:column; gap:8px; min-width:0}
.sel{position:relative}
.sel::after{
  content:""; position:absolute; right:13px; top:50%; pointer-events:none;
  width:6px; height:6px; border-right:1.5px solid var(--pearl-3);
  border-bottom:1.5px solid var(--pearl-3);
  transform:translateY(-70%) rotate(45deg);
}
select{
  width:100%; appearance:none; -webkit-appearance:none; cursor:pointer;
  font-family:var(--body); font-size:13.5px; color:var(--pearl);
  background:var(--panel); border:1px solid var(--line);
  border-radius:11px; padding:11px 32px 11px 13px;
  transition:.2s var(--ease);
}
select:hover{border-color:var(--line-2)}
select option{background:#12161d; color:var(--pearl)}
select:focus-visible,textarea:focus-visible,button:focus-visible,
input[type=range]:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px;
}

input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:3px; margin:14px 0 0; cursor:pointer;
  background:linear-gradient(90deg,var(--brass) 0%,var(--brass) var(--pct,45%),
             rgba(233,225,209,.14) var(--pct,45%),rgba(233,225,209,.14) 100%);
  border-radius:999px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--brass-hi); border:2px solid #14100a;
  box-shadow:0 0 0 4px rgba(200,161,90,.16);
}
input[type=range]::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%;
  background:var(--brass-hi); border:2px solid #14100a;
}
.scale{
  display:flex; justify-content:space-between; margin-top:7px;
  font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--pearl-3);
}

/* ---------- the launch ---------- */
.row-launch{align-items:center; padding-top:2px}
.yalla{
  position:relative; overflow:hidden; cursor:pointer;
  width:100%; display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,3vw,26px);
  padding:clamp(15px,2.4vh,21px) 30px;
  border:none; border-radius:16px;
  background:linear-gradient(180deg,var(--brass-hi) 0%,var(--brass) 62%,#a9843f 100%);
  color:#130f07;
  box-shadow:0 18px 44px -20px rgba(200,161,90,.85),
             inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             filter .2s var(--ease);
}
.yalla[hidden]{display:none}
.yalla:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 26px 56px -20px rgba(200,161,90,.95),
             inset 0 1px 0 rgba(255,255,255,.5);
}
.yalla:active:not(:disabled){transform:translateY(0)}
.yalla:disabled{cursor:progress; filter:saturate(.55) brightness(.86)}
.yalla-ar{
  font-family:var(--arabic); font-weight:600;
  font-size:clamp(28px,4.6vh,36px); line-height:1;
  letter-spacing:.01em; opacity:.92;
}
.yalla-div{width:1px; align-self:stretch; background:rgba(19,15,7,.24)}
.yalla-txt{display:flex; flex-direction:column; align-items:flex-start; gap:1px}
.yalla-txt b{
  font-family:var(--display); font-size:clamp(16px,2.4vh,19px);
  font-weight:700; letter-spacing:.03em; line-height:1.15;
}
.yalla-txt i{
  font-style:normal; font-size:11.5px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; opacity:.66;
}
/* sheen sweeps once on hover — one deliberate moment, not ambient motion */
.sheen{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  transform:translateX(-110%);
}
.yalla:hover:not(:disabled) .sheen{transition:transform .75s var(--ease); transform:translateX(110%)}

/* live cluster (replaces the launch button mid-call) */
.live{
  width:100%; display:flex; align-items:center; gap:16px;
  padding:14px 16px; border-radius:16px;
  background:var(--panel-2); border:1px solid var(--line);
}
.live[hidden]{display:none}
/* Turn indicator. --turn-color switches per mode; sea green means "you have
   the floor," brass means "the agent is talking," dim pearl means neither
   is - the same color language as the rest of the console (brass = agent,
   sea = the live/caller signal already used in setState's dot). */
.orb{position:relative; width:38px; height:38px; flex:none; --turn-color:var(--pearl-3)}
.orb span{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--turn-color); opacity:0;
  transition:opacity .25s var(--ease);
}
.orb::after{
  content:""; position:absolute; inset:13px; border-radius:50%;
  background:var(--turn-color); box-shadow:0 0 10px var(--turn-color);
  transition:background .25s var(--ease), box-shadow .25s var(--ease);
}
.orb.mode-listening{--turn-color:var(--sea)}
.orb.mode-speaking{--turn-color:var(--brass)}
.orb.mode-listening span,.orb.mode-speaking span{
  opacity:.9; animation:ring 2.4s var(--ease) infinite;
}
.orb.mode-listening span:nth-child(2),.orb.mode-speaking span:nth-child(2){
  animation-delay:1.2s;
}
@keyframes ring{
  0%{transform:scale(.42); opacity:.9}
  100%{transform:scale(1); opacity:0}
}
.live-meta{display:flex; flex-direction:column; min-width:0; flex:1}
.live-meta b{
  font-family:var(--display); font-size:14.5px; font-weight:600;
  letter-spacing:.01em; color:var(--pearl);
}
.live-meta i{
  font-style:normal; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--pearl-3);
}
.live-btns{display:flex; gap:8px; flex:none}
.mini{
  font-family:var(--body); font-size:12.5px; font-weight:600; cursor:pointer;
  color:var(--pearl-2); background:var(--panel);
  border:1px solid var(--line); border-radius:10px; padding:9px 16px;
  transition:.18s var(--ease);
}
.mini:hover{border-color:var(--line-2); color:var(--pearl)}
.mini.danger{color:var(--terra); border-color:rgba(207,106,76,.32)}
.mini.danger:hover{background:rgba(207,106,76,.13); color:#e8836a}

/* ---------- messages ---------- */
.msg-slot:empty{display:none}
.notice,.error{
  font-size:12.5px; border-radius:11px; padding:10px 13px;
  border:1px solid transparent;
}
.notice{background:rgba(200,161,90,.09); border-color:var(--brass-dim); color:var(--brass-hi)}
.error{background:rgba(207,106,76,.1); border-color:rgba(207,106,76,.3); color:#e8836a}

/* ---------- advanced ---------- */
.adv{border-top:1px solid var(--line); padding-top:12px}
.adv summary{
  cursor:pointer; list-style:none;
  font-family:var(--display); font-size:10px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--pearl-3);
  transition:color .18s var(--ease);
}
.adv summary::-webkit-details-marker{display:none}
.adv summary:hover{color:var(--brass)}
.adv textarea{
  width:100%; margin-top:11px; resize:none; height:86px;
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:11.5px; line-height:1.6; color:var(--pearl);
  background:rgba(0,0,0,.28); border:1px solid var(--line);
  border-radius:11px; padding:11px 13px;
}
.adv textarea::placeholder{color:var(--pearl-3)}
.persona-bar{display:flex; align-items:center; gap:11px; margin-top:9px}
.persona-status{font-size:11.5px; color:var(--pearl-3)}
.persona-status.ok{color:var(--sea)}
.persona-status.err{color:var(--terra)}

/* ---------- footer ---------- */
.foot{
  display:flex; align-items:center; gap:11px;
  padding:13px clamp(18px,4vw,38px);
  border-top:1px solid var(--line);
  font-size:11.5px; letter-spacing:.06em; color:var(--pearl-3);
}
.dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--pearl-3); transition:.3s var(--ease);
}
.dot.busy{background:var(--brass); box-shadow:0 0 0 3px var(--brass-dim)}
.dot.live{background:var(--sea); box-shadow:0 0 0 3px rgba(79,179,164,.2)}
.dot.err{background:var(--terra); box-shadow:0 0 0 3px rgba(207,106,76,.2)}
.foot-sep{flex:1}

/* ---------- partner attribution + live deployments ----------
 *
 * Two credibility signals for a UAE enterprise buyer: who delivers this
 * (Nyukt.ai, DIFC-registered) and where it already runs. Both are deliberately
 * quiet. On a collections pitch especially, a logo wall shouting at the
 * operator reads as a vendor selling itself, while a small mark set into the
 * furniture of the product reads as a company that already has customers.
 *
 * Everything here is sized in fixed pixels and placed inside the existing bar
 * and footer rows, so it consumes no vertical space those rows did not already
 * have. The console's "must never scroll" rule survives untouched, which is
 * also why this is a strip in the chrome and not a band across the stage.
 */
.bar-right{display:flex; align-items:center; gap:14px; min-width:0}

/* Nav brand wordmark. Same construction as .partner-mark but at logo scale,
   since Nyukt.ai is the primary brand here now rather than an attribution.
   The brass ".ai" is what stops it reading as plain typed text. */
.brand-logo{
  font-family:var(--display); font-weight:700; font-size:18px;
  letter-spacing:-.01em; color:var(--pearl); white-space:nowrap;
}
.brand-logo em{font-style:normal; color:var(--brass)}

/* The login card version of the wordmark: centred and larger, standing in for
   the logo image on that screen. Placeholder until the real Nyukt.AI asset is
   supplied - see the comment in index.html. */
.login-mark{text-align:center; margin-bottom:14px}
.login-mark .brand-logo{font-size:26px}
.login-icon{height:40px; width:auto; display:block; margin:0 auto 8px}

.partner{display:flex; align-items:center; gap:9px; min-width:0}
.partner-lbl{
  font-family:var(--display); font-style:normal;
  font-size:9.5px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--pearl-3); white-space:nowrap;
}
.partner-mark{
  font-family:var(--display); font-weight:700; font-size:14px;
  letter-spacing:-.005em; color:var(--pearl); white-space:nowrap;
}
/* The ".ai" carries the brass so the mark reads as a logotype rather than as
   a word someone typed into the header. */
.partner-mark em{font-style:normal; color:var(--brass)}
/* Pre-styled slot for the real asset. Height matches the nav wordmark
   so it lines up with the nav wordmark when it lands. */
.partner-logo{height:19px; width:auto; display:block}
.partner-badge{
  font-family:var(--display); font-size:9px; font-weight:700;
  letter-spacing:.15em; color:var(--brass);
  border:1px solid var(--brass-dim); background:rgba(200,161,90,.06);
  padding:3px 7px; border-radius:5px; white-space:nowrap; cursor:help;
}

.dep{display:flex; align-items:center; gap:9px; min-width:0}
/* No items left in the markup means no label either: :has() keeps the label
   from surviving its own list. */
.dep:not(:has(.dep-item)){display:none}
.dep-lbl{
  font-family:var(--display); font-style:normal;
  font-size:9.5px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--pearl-3); white-space:nowrap;
}
.dep-item{
  font-size:11.5px; letter-spacing:.04em; color:var(--pearl-2);
  white-space:nowrap;
}
/* Separator between names, drawn rather than typed, so adding or removing a
   name never leaves a dangling middot behind to clean up. */
.dep-item + .dep-item{padding-left:11px; position:relative}
.dep-item + .dep-item::before{
  content:""; position:absolute; left:4px; top:50%;
  width:3px; height:3px; margin-top:-1.5px;
  border-radius:50%; background:var(--pearl-3);
}

/* ---------- login card credibility block ---------- */
.cred{
  margin-top:26px; padding-top:20px;
  border-top:1px solid var(--line);
  display:grid; gap:13px;
}
.cred i{
  display:block; font-style:normal;
  font-family:var(--display); font-size:9px; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--pearl-3);
  margin-bottom:6px;
}
.cred-partner .partner-mark{font-size:16px; vertical-align:middle}
.cred-partner .partner-badge{margin-left:8px; vertical-align:middle}
.cred-dep span{
  font-size:12.5px; letter-spacing:.03em; color:var(--pearl-2);
}

/* ---------- entrance ---------- */
.reveal{animation:rise .62s var(--ease) both; animation-delay:calc(var(--d) * 85ms)}
@keyframes rise{from{opacity:0; transform:translateY(11px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .sheen{display:none}
}

/* ---------- tight viewports ---------- */
@media (max-height:640px){
  .console{gap:10px}
  .scale,.desc{display:none}
  .adv{display:none}
}
@media (max-width:680px){
  .row-ctl{grid-template-columns:1fr; gap:12px}
  .live{flex-wrap:wrap}
  .live-meta{order:-1; flex:1 1 100%}

  /* The bar has a hard width budget and the brand mark wins it. Shed the
     credibility furniture in order of what a phone viewer least needs: the
     "Delivered with" / "Live at" labels first (the marks still read without
     them), then the deployment strip, then "Voice Console". The Nyukt.ai mark
     and the DIFC badge are the last things to go, because they are the whole
     point of putting them here. */
  .partner-lbl,.dep-lbl{display:none}
  .dep{display:none}
  .brand-mark,.brand-div{display:none}
  .bar-right{gap:9px}
}

/* ---------- login ---------- */
.login-page{
  /* body sets overflow:hidden for the console, which must never scroll. The
     login page is a document, not a fixed stage, and the credibility block
     below the button made the card tall enough to be clipped outright on a
     short laptop window rather than merely cut off. Re-allow scrolling here
     only. Without this the "Sign in" button itself can end up unreachable. */
  overflow:auto;
  min-height:100dvh; display:grid; place-items:center; padding:20px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%,rgba(200,161,90,.12),transparent 70%),
    linear-gradient(180deg,var(--ground-2),var(--ground));
}
.login-card{
  width:min(360px,94vw); text-align:center; padding:36px 30px;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:18px; backdrop-filter:blur(9px);
}
.login-card .logo{height:26px; margin:0 auto 14px}
.login-card .sub{
  font-family:var(--display); font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--pearl-3);
  margin:0 0 24px;
}
.login-card input{
  width:100%; margin-bottom:14px; padding:12px 14px;
  font-family:var(--body); font-size:14px; color:var(--pearl);
  background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:11px;
}
.login-card input::placeholder{color:var(--pearl-3)}
.login-card .btn,.login-card button{
  width:100%; cursor:pointer; padding:12px;
  font-family:var(--display); font-size:13px; font-weight:600;
  letter-spacing:.05em; color:#130f07; border:none; border-radius:11px;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass));
}

/* ---------- outbound campaign panel ----------
 *
 * A queue, not a card grid: the operator is reading down a list of people to
 * ring and needs to see position, status and who is blocked at a glance. Same
 * hairline-rule language as the rest of the console so it does not read as a
 * bolted-on module.
 */
.campaign{display:block}
.scroll-y{max-height:196px; overflow-y:auto; border:1px solid var(--line);
  border-radius:9px; margin-top:9px}
table.queue{width:100%; border-collapse:collapse; font-size:12.5px}
table.queue td{padding:6px 10px; border-bottom:1px solid var(--line);
  white-space:nowrap}
table.queue tr:last-child td{border-bottom:0}
table.queue td.q-n{
  width:1%; color:var(--pearl-3); font-variant-numeric:tabular-nums;
  font-family:var(--display); font-size:11px;
}
table.queue td.q-name{color:var(--pearl); white-space:normal}
table.queue td.q-loc{color:var(--pearl-2); font-size:11.5px}
table.queue td.q-state{text-align:right; font-size:11px; letter-spacing:.04em}
table.queue tr.is-next td{background:rgba(200,161,90,.09)}
table.queue tr.is-next td.q-name{color:var(--brass-hi)}
table.queue tr.is-blocked td{color:var(--pearl-3)}
table.queue tr.is-blocked td.q-name{color:var(--pearl-3); text-decoration:line-through}
table.queue tr.is-done td.q-state{color:var(--sea)}

.camp-now{
  margin-top:11px; padding:11px 13px; border:1px solid var(--line-2);
  border-radius:11px; background:var(--panel);
}
.camp-who{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px}
.camp-who b{font-family:var(--display); font-size:15px; color:var(--pearl)}
.camp-who span{font-size:12px; color:var(--pearl-2)}
.camp-outcomes{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
.camp-outcomes button{
  cursor:pointer; font-family:var(--body); font-size:12px;
  padding:5px 10px; border-radius:8px; color:var(--pearl-2);
  background:transparent; border:1px solid var(--line-2);
}
.camp-outcomes button:hover{border-color:var(--brass); color:var(--brass-hi)}
.camp-outcomes button:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
.camp-outcomes button:disabled{opacity:.45; cursor:default}