:root{
  --hk:#FFA500;
  --lw:#39FF14;
  --td:#4FB3D9;
  --dc:#7A7D82;
  --ln:#F4D35E;
  --pr:#9B1B30;
  --cream:#F2EDE4;
  --bg:#121212;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:#0a0a0a;min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;color:#fff;
}
.stage{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;padding:28px 12px;gap:14px;
}
.caption{
  font-size:10.5px;color:rgba(255,255,255,.38);
  letter-spacing:.8px;text-transform:uppercase;font-weight:500;
  max-width:420px;text-align:center;
}
.caption b{color:rgba(255,255,255,.78);font-weight:500}

/* ───────── FLOW TOGGLE ───────── */
.flows{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:360px;margin-bottom:4px}
.fb{
  font-size:9.5px;padding:5px 10px;border-radius:14px;
  border:0.5px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);color:rgba(255,255,255,.55);
  cursor:pointer;font-family:inherit;transition:all .2s ease;letter-spacing:.3px;
}
.fb:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.8)}
.fb.on{background:#1e1e1e;color:var(--cream);border-color:#555}

/* ───────── PHONE FRAME ───────── */
.phone{
  width:290px;height:570px;background:var(--bg);
  border-radius:34px;border:5px solid #242424;
  position:relative;overflow:hidden;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset;
}

/* ───────── DYNAMIC ISLAND ───────── */
.di{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  background:#000;border-radius:11px;height:20px;z-index:40;
  display:flex;align-items:center;gap:7px;padding:0 9px;
  transition:width .4s, padding .4s;
}
.di-mark{display:flex;align-items:center}
.di-time{font-size:9px;color:rgba(242,237,228,.55);font-weight:500;letter-spacing:.2px}
.di-bars{display:flex;align-items:flex-end;gap:1.8px;height:10px}
.di-bar{width:2.2px;border-radius:1px;background:#39FF14;transition:background .3s;height:5px}

/* ───────── GLASS OVERLAY ───────── */
.glass{
  position:absolute;inset:0;z-index:30;pointer-events:none;border-radius:29px;
  background:linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 12%, transparent 92%, rgba(0,0,0,.05) 100%);
}

/* ───────── PAGER ───────── */
.pager{
  position:absolute;inset:0;z-index:1;
  display:flex;
  width:300%;
  transform:translateX(-33.3333%);
  transition:transform .55s cubic-bezier(.25,.9,.3,1);
  will-change:transform;
}
.panel{
  position:relative;flex:0 0 33.3333%;height:100%;overflow:hidden;
}

/* Pager state classes */
.pager.to-rooms{transform:translateX(0%)}
.pager.to-home {transform:translateX(-33.3333%)}
.pager.to-news {transform:translateX(-66.6666%)}

/* Room overlay dims pager */
.phone.in-room .pager{opacity:.0;transition:opacity .45s ease}
.phone.in-room .pager .panel-home .aura{opacity:0 !important}

/* ───────── SHARED AURA VOCAB ───────── */
.bg-ambient{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 240px 240px at 0% 0%,   rgba(255,165,0,.06) 0%, transparent 100%),
    radial-gradient(ellipse 240px 240px at 100% 0%, rgba(57,255,20,.05) 0%, transparent 100%),
    radial-gradient(ellipse 240px 240px at 0% 100%, rgba(79,179,217,.06) 0%, transparent 100%),
    radial-gradient(ellipse 240px 240px at 100% 100%,rgba(122,125,130,.05) 0%, transparent 100%);
}
.aura{position:absolute;width:210px;height:210px;pointer-events:none;z-index:1;mix-blend-mode:screen;transition:opacity .45s ease, transform .6s ease}
/* Home panel: large, softly-overlapping auras that swirl and engulf the screen */
.panel-home .aura{width:520px;height:520px}
.panel-home .a-tl{top:-260px;left:-260px;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,165,0,.78) 0%, rgba(255,165,0,.42) 14%,
    rgba(255,165,0,.18) 28%, rgba(255,165,0,.06) 42%, transparent 58%);
  animation:drift-tl 22s ease-in-out infinite, breathe 10s ease-in-out infinite;
}
.panel-home .a-tr{top:-260px;right:-260px;
  background:radial-gradient(circle at 50% 50%,
    rgba(57,255,20,.74) 0%, rgba(57,255,20,.40) 14%,
    rgba(57,255,20,.17) 28%, rgba(57,255,20,.06) 42%, transparent 58%);
  animation:drift-tr 26s ease-in-out infinite -6s, breathe 10s ease-in-out infinite 2.5s;
}
.panel-home .a-bl{bottom:-260px;left:-260px;
  background:radial-gradient(circle at 50% 50%,
    rgba(79,179,217,.72) 0%, rgba(79,179,217,.40) 14%,
    rgba(79,179,217,.17) 28%, rgba(79,179,217,.06) 42%, transparent 58%);
  animation:drift-bl 24s ease-in-out infinite -12s, breathe 10s ease-in-out infinite 5s;
}
.panel-home .a-br{bottom:-260px;right:-260px;
  background:radial-gradient(circle at 50% 50%,
    rgba(122,125,130,.68) 0%, rgba(122,125,130,.38) 14%,
    rgba(122,125,130,.16) 28%, rgba(122,125,130,.05) 42%, transparent 58%);
  animation:drift-br 28s ease-in-out infinite -18s, breathe 10s ease-in-out infinite 7.5s;
}
@keyframes breathe{0%,100%{opacity:.78}50%{opacity:1}}
/* Swirling orbits — each aura traces a wide elliptical path, with scale pulse
   so the colors continuously reach into each other and overlap */
@keyframes drift-tl{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(70px,30px) scale(1.12)}
  50%{transform:translate(90px,80px) scale(1.18)}
  75%{transform:translate(20px,60px) scale(1.06)}
}
@keyframes drift-tr{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(-30px,50px) scale(1.08)}
  50%{transform:translate(-80px,90px) scale(1.16)}
  75%{transform:translate(-60px,20px) scale(1.1)}
}
@keyframes drift-bl{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(50px,-60px) scale(1.14)}
  50%{transform:translate(90px,-30px) scale(1.08)}
  75%{transform:translate(30px,-90px) scale(1.18)}
}
@keyframes drift-br{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(-70px,-20px) scale(1.1)}
  50%{transform:translate(-40px,-80px) scale(1.18)}
  75%{transform:translate(-90px,-50px) scale(1.12)}
}

/* ───────── HOME PANEL ───────── */
.panel-home{background:var(--bg)}
.topbar{position:absolute;top:40px;left:0;right:0;z-index:15;display:flex;justify-content:flex-end;padding:0 18px}
.gear{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(242,237,228,.04);border:0.5px solid rgba(242,237,228,.08);
  cursor:pointer;transition:all .3s;opacity:.55;
}
.gear:hover{opacity:.9;background:rgba(242,237,228,.08)}

/* CHANGE 2: Wordmark zone — transient. Recedes after 4s; auras become primary. */
.wordmark-zone{
  position:absolute;top:24%;left:0;right:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  pointer-events:none;transition:opacity 1.2s ease;
}
.wordmark-zone.recede .wordmark{opacity:.3}
.wordmark-zone.recede .tagline{opacity:.2}
.wordmark{
  transition:opacity 1.2s ease;
  font-size:20px;font-weight:500;letter-spacing:.33em;
  color:var(--cream);opacity:.92;
  text-shadow:0 0 20px rgba(242,237,228,.12);padding-left:.33em;
}
.tagline{
  transition:opacity 1.2s ease;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(242,237,228,.32);font-weight:400;
}
.ambient-breath{
  position:absolute;top:calc(24% + 72px);left:50%;transform:translateX(-50%);z-index:10;
  display:flex;gap:5px;align-items:center;height:8px;transition:opacity .3s;
}
.ab-dot{
  width:3px;height:3px;border-radius:50%;
  background:rgba(242,237,228,.35);animation:ab 2.2s ease-in-out infinite;
}
.ab-dot:nth-child(1){animation-delay:0s}
.ab-dot:nth-child(2){animation-delay:.3s}
.ab-dot:nth-child(3){animation-delay:.6s}
.ab-dot:nth-child(4){animation-delay:.9s}
.ab-dot:nth-child(5){animation-delay:1.2s}
@keyframes ab{0%,100%{transform:scaleY(.6);opacity:.25}50%{transform:scaleY(2.2);opacity:.75}}

.action{
  position:absolute;bottom:0;left:0;right:0;padding:0 20px 56px;z-index:12;
  display:flex;flex-direction:column;gap:14px;
}
.action::before{
  content:"";position:absolute;top:-50px;left:0;right:0;height:50px;
  background:linear-gradient(to bottom, transparent 0%, rgba(18,18,18,.35) 100%);pointer-events:none;
}
.enter{
  position:relative;width:100%;height:46px;
  background:rgba(242,237,228,.055);
  border:0.5px solid rgba(242,237,228,.32);border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  color:var(--cream);font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;cursor:pointer;
  transition:all .35s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:0 0 24px rgba(242,237,228,.04), inset 0 1px 0 rgba(242,237,228,.08);
  overflow:hidden;
}
.enter::before{
  content:"";position:absolute;inset:0;border-radius:999px;
  background:radial-gradient(ellipse 60% 100% at 50% 100%, rgba(242,237,228,.14) 0%, transparent 70%);
  opacity:.6;pointer-events:none;
}
.enter:hover, .enter:active{
  background:rgba(242,237,228,.09);
  border-color:rgba(242,237,228,.5);
  box-shadow:0 0 40px rgba(242,237,228,.09), inset 0 1px 0 rgba(242,237,228,.14);
}
.enter-arrow{font-size:10px;opacity:.7}
.recent-lbl{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,237,228,.32);font-weight:500;margin-top:2px;margin-bottom:-4px;padding-left:4px;
}
.card{
  position:relative;overflow:hidden;height:44px;border-radius:14px;
  background:rgba(242,237,228,.025);border:0.5px solid rgba(242,237,228,.06);
  padding:0 14px;display:flex;flex-direction:column;justify-content:center;gap:3px;
  cursor:pointer;transition:all .3s ease;
}
.card:hover, .card:active{background:rgba(242,237,228,.045);border-color:rgba(242,237,228,.12)}
.card-aura{position:absolute;width:70px;height:70px;pointer-events:none;opacity:.75}
.ca-tl{top:-35px;left:-35px}
.ca-tr{top:-35px;right:-35px}
.ca-bl{bottom:-35px;left:-35px}
.ca-br{bottom:-35px;right:-35px}
.ca-hk{background:radial-gradient(circle at 50% 50%, rgba(255,165,0,.75) 0%, rgba(255,165,0,.28) 35%, transparent 70%)}
.ca-lw{background:radial-gradient(circle at 50% 50%, rgba(57,255,20,.75) 0%, rgba(57,255,20,.28) 35%, transparent 70%)}
.ca-td{background:radial-gradient(circle at 50% 50%, rgba(79,179,217,.75) 0%, rgba(79,179,217,.28) 35%, transparent 70%)}
.ca-dc{background:radial-gradient(circle at 50% 50%, rgba(122,125,130,.70) 0%, rgba(122,125,130,.26) 35%, transparent 70%)}
.ca-ln{background:radial-gradient(circle at 50% 50%, rgba(244,211,94,.72) 0%, rgba(244,211,94,.28) 35%, transparent 70%)}
.ca-pr{background:radial-gradient(circle at 50% 50%, rgba(155,27,48,.78) 0%, rgba(155,27,48,.3) 35%, transparent 70%)}
.card-meta{
  position:relative;z-index:2;font-size:8.5px;letter-spacing:.06em;
  color:rgba(242,237,228,.5);font-weight:500;display:flex;gap:8px;align-items:center;
}
.card-meta .sep{opacity:.35}
.card-line{
  position:relative;z-index:2;font-size:11px;line-height:1.3;color:rgba(234,234,234,.85);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:italic;font-weight:400;
}

/* Home mic pill (greyed placeholder) */
.mic-pill{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:13;
  width:28px;height:28px;border-radius:50%;
  background:rgba(242,237,228,.04);border:0.5px solid rgba(242,237,228,.08);
  display:flex;align-items:center;justify-content:center;
}
.mic-pill--home{opacity:.5}

/* Edge hints on home */
.edge-hint{
  position:absolute;top:50%;transform:translateY(-50%);
  width:3px;height:54%;border-radius:2px;z-index:14;
  background:rgba(242,237,228,.14);pointer-events:none;
}
.edge-hint-l{left:0;animation:pulseL 7s ease-in-out infinite}
.edge-hint-r{right:0;animation:pulseR 7s ease-in-out infinite 3.5s}
@keyframes pulseL{
  0%,88%,100%{background:rgba(242,237,228,.14)}
  91%{background:rgba(242,237,228,.38)}
  93%{background:rgba(242,237,228,.14)}
  95%{background:rgba(242,237,228,.38)}
}
@keyframes pulseR{
  0%,88%,100%{background:rgba(242,237,228,.14)}
  91%{background:rgba(242,237,228,.38)}
  93%{background:rgba(242,237,228,.14)}
  95%{background:rgba(242,237,228,.38)}
}

/* Panel chevrons (peek the neighbor direction) */
.panel-chev{position:absolute;top:50%;transform:translateY(-50%);z-index:13;opacity:.45;pointer-events:none}
.chev-right{right:8px}
.chev-left{left:8px}

/* ───────── ROOMS PANEL ───────── */
.panel-rooms{
  background:
    /* CHANGE 5: subtle amber+green warmth at top — half opacity, smaller radius */
    radial-gradient(ellipse 180px 120px at 22% -4%, rgba(255,165,0,.055), transparent 70%),
    radial-gradient(ellipse 180px 120px at 78% -4%, rgba(57,255,20,.045), transparent 70%),
    radial-gradient(ellipse 320px 200px at 0% -5%, rgba(255,165,0,.05), transparent 70%),
    radial-gradient(ellipse 320px 200px at 100% -5%, rgba(57,255,20,.04), transparent 70%),
    radial-gradient(ellipse 320px 200px at 50% 110%, rgba(79,179,217,.05), transparent 70%),
    var(--bg);
  padding:42px 18px 18px;
  display:flex;flex-direction:column;gap:14px;
}
.rooms-header{display:flex;flex-direction:column;gap:3px;padding:0 2px 8px}
.rooms-title{font-size:18px;font-weight:500;color:var(--cream);letter-spacing:.3px}
.rooms-sub{font-size:9px;color:rgba(242,237,228,.4);letter-spacing:.18em;text-transform:uppercase}

.rooms-list{display:flex;flex-direction:column;gap:18px;overflow-y:auto;padding-bottom:24px}
.rooms-list::-webkit-scrollbar{display:none}
.rooms-group-lbl{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,237,228,.3);font-weight:500;padding:0 2px 6px;
}
.rooms-row{
  position:relative;display:flex;gap:10px;align-items:flex-start;
  padding:11px 12px 12px;border-radius:12px;
  background:rgba(242,237,228,.022);border:0.5px solid rgba(242,237,228,.05);
  cursor:pointer;transition:all .3s ease;
}
.rooms-row + .rooms-row{margin-top:7px}
.rooms-row:hover{background:rgba(242,237,228,.04);border-color:rgba(242,237,228,.1)}
.rooms-main{display:flex;gap:10px;align-items:flex-start;width:100%}
.rooms-row.removing, .news-card.removing{
  opacity:0;transform:translateX(-20px);max-height:0;margin:0!important;
  padding-top:0!important;padding-bottom:0!important;border-width:0!important;
  transition:all .3s ease;
}

/* ───────── Action bar (Summary / Run-down / ⋯) ───────── */
.act-bar{
  display:flex;align-items:center;gap:5px;
  margin-top:9px;padding-top:9px;
  border-top:0.5px solid rgba(242,237,228,.06);
  position:relative;
}
.act-btn{
  appearance:none;border:0.5px solid rgba(242,237,228,.09);
  background:rgba(242,237,228,.028);color:rgba(242,237,228,.62);
  font:inherit;font-size:9.5px;font-weight:500;letter-spacing:.02em;
  padding:4px 8px;border-radius:999px;
  display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  transition:all .22s ease;line-height:1;white-space:nowrap;
  flex-shrink:0;
}
.act-btn svg{flex-shrink:0}
.act-btn:hover{background:rgba(242,237,228,.065);border-color:rgba(242,237,228,.18);color:rgba(242,237,228,.88)}
.act-btn.tapped{background:rgba(242,237,228,.12);border-color:rgba(242,237,228,.3);color:var(--cream)}
.act-more-wrap{margin-left:auto;position:relative}
.act-more-btn{padding:4px 8px}
.act-menu{
  position:absolute;bottom:calc(100% + 5px);right:0;z-index:12;
  background:rgba(22,22,22,.96);border:0.5px solid rgba(242,237,228,.12);
  border-radius:9px;padding:4px;min-width:104px;
  box-shadow:0 10px 24px rgba(0,0,0,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
}
.act-menu.on{opacity:1;pointer-events:auto;transform:translateY(0)}
.act-menu-item{
  appearance:none;border:0;background:transparent;font:inherit;
  width:100%;padding:6px 9px;border-radius:6px;
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font-size:10.5px;color:rgba(242,237,228,.88);letter-spacing:.02em;
  transition:background .18s ease;
}
.act-menu-item:hover{background:rgba(242,237,228,.08)}
.act-menu-item svg{flex-shrink:0;color:rgba(242,237,228,.7)}

/* Aura stack (clustered dots representing personas in this room) */
.aura-stack{position:relative;flex-shrink:0;width:30px;height:30px;margin-top:3px}
.as-dot{
  position:absolute;width:16px;height:16px;border-radius:50%;
  filter:blur(4px);mix-blend-mode:screen;
}
.as-core{position:absolute;width:8px;height:8px;border-radius:50%}
.as-dot.p0{top:0;left:0}
.as-dot.p1{top:0;right:0}
.as-dot.p2{bottom:0;left:0}
.as-dot.p3{bottom:0;right:0}
.as-core.p0{top:4px;left:4px}
.as-core.p1{top:4px;right:4px}
.as-core.p2{bottom:4px;left:4px}
.as-core.p3{bottom:4px;right:4px}

.rooms-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rooms-meta{
  font-size:8.5px;letter-spacing:.05em;color:rgba(242,237,228,.48);
  display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;
  row-gap:2px;min-width:0;
}
.rooms-meta .rm-time{flex-shrink:0}
.rooms-meta .rm-names{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rooms-meta .sep{opacity:.4;flex-shrink:0}
.rooms-line{
  font-size:11px;line-height:1.4;color:rgba(234,234,234,.85);
  font-style:italic;font-weight:400;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;hyphens:auto;
}

/* ───────── NEWS PANEL ───────── */
.panel-news{
  background:
    /* CHANGE 5: warm-neutral glow at top-right (Lantern #F4D35E) — Chorus DNA */
    radial-gradient(ellipse 170px 130px at 92% -6%, rgba(244,211,94,.07), transparent 72%),
    radial-gradient(ellipse 320px 200px at 0% 110%, rgba(122,125,130,.06), transparent 70%),
    radial-gradient(ellipse 320px 200px at 100% -5%, rgba(244,211,94,.05), transparent 70%),
    var(--bg);
  padding:42px 18px 18px;
  display:flex;flex-direction:column;gap:14px;
}
.news-header{display:flex;flex-direction:column;gap:3px;padding:0 2px 8px}
.news-title{font-size:18px;font-weight:500;color:var(--cream);letter-spacing:.3px}
.news-sub{font-size:9px;color:rgba(242,237,228,.4);letter-spacing:.18em;text-transform:uppercase}

.news-list{display:flex;flex-direction:column;gap:14px;overflow-y:auto;padding-bottom:24px}
.news-list::-webkit-scrollbar{display:none}
.news-card{
  position:relative;border-radius:14px;padding:14px 14px 12px;
  background:rgba(242,237,228,.028);border:0.5px solid rgba(242,237,228,.06);
  overflow:hidden;cursor:pointer;transition:all .3s ease;
  flex-shrink:0;/* overflow:hidden zeroes a flex item's auto min-size; without this the cards squeeze to fit .news-list instead of scrolling */
}
.news-card:hover{background:rgba(242,237,228,.045);border-color:rgba(242,237,228,.12)}
.news-card .news-aura{
  position:absolute;top:-30px;right:-30px;width:90px;height:90px;
  pointer-events:none;opacity:.7;
}
.news-src{
  font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(242,237,228,.42);font-weight:500;margin-bottom:6px;
  display:flex;gap:6px;align-items:center;
}
.news-src .sep{opacity:.4}
.news-head{
  position:relative;z-index:2;font-size:13px;line-height:1.3;
  color:var(--cream);font-weight:500;margin-bottom:8px;
}
.news-blurb{
  position:relative;z-index:2;font-size:10.5px;line-height:1.45;
  color:rgba(234,234,234,.65);margin-bottom:12px;
}
.news-discuss{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  background:rgba(242,237,228,.05);border:0.5px solid rgba(242,237,228,.18);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);font-weight:500;cursor:pointer;transition:all .25s ease;
}
.news-discuss:hover{background:rgba(242,237,228,.1);border-color:rgba(242,237,228,.32)}
.news-discuss .dot{width:5px;height:5px;border-radius:50%}

/* ───────── ROOM OVERLAY ───────── */
.room{
  position:absolute;inset:0;z-index:2;
  background:var(--bg);
  opacity:0;pointer-events:none;
  transform:scale(.96);
  transition:opacity .5s ease, transform .5s cubic-bezier(.25,.9,.3,1);
}
.phone.in-room .room{opacity:1;pointer-events:auto;transform:scale(1)}

/* Room auras — large containers with centered hotspot so the gradient fades
   fully to transparent before hitting the element edge (no square visible) */
.room .aura{width:520px;height:520px;mix-blend-mode:screen;z-index:3;pointer-events:none;
  transition:opacity .5s ease, transform .5s ease, width .5s ease, height .5s ease, top .5s ease, left .5s ease, right .5s ease, bottom .5s ease}
/* CHANGE 1: Room atmosphere — richer than Home. The room is the product. */
.room .a-tl{top:-260px;left:-260px;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,165,0,1) 0%, rgba(255,165,0,.78) 14%,
    rgba(255,165,0,.38) 28%, rgba(255,165,0,.12) 42%, transparent 58%);
  animation:bTL 4.2s ease-in-out infinite;
}
.room .a-tr{top:-260px;right:-260px;
  background:radial-gradient(circle at 50% 50%,
    rgba(57,255,20,1) 0%, rgba(57,255,20,.76) 14%,
    rgba(57,255,20,.36) 28%, rgba(57,255,20,.11) 42%, transparent 58%);
  animation:bTR 4.2s ease-in-out infinite 1.1s;
}
.room .a-bl{bottom:-260px;left:-260px;
  background:radial-gradient(circle at 50% 50%,
    rgba(79,179,217,1) 0%, rgba(79,179,217,.74) 14%,
    rgba(79,179,217,.34) 28%, rgba(79,179,217,.11) 42%, transparent 58%);
  animation:bBL 4.2s ease-in-out infinite 2.2s;
}
.room .a-br{bottom:-260px;right:-260px;
  background:radial-gradient(circle at 50% 50%,
    rgba(122,125,130,.98) 0%, rgba(122,125,130,.7) 14%,
    rgba(122,125,130,.32) 28%, rgba(122,125,130,.10) 42%, transparent 58%);
  animation:bBR 4.2s ease-in-out infinite 3.1s;
}
@keyframes bTL{0%,100%{opacity:.82}50%{opacity:1}}
@keyframes bTR{0%,100%{opacity:.82}50%{opacity:1}}
@keyframes bBL{0%,100%{opacity:.78}50%{opacity:.96}}
@keyframes bBR{0%,100%{opacity:.72}50%{opacity:.9}}

/* speaker states */
.aura.spk{animation:spk .85s ease-in-out infinite!important}
.aura.dim{opacity:.18!important;animation:none!important}
@keyframes spk{0%,100%{opacity:.95}50%{opacity:1}}

/* Migrated bottom auras for keyboard state — large, centered hotspot, anchored above composer */
.room .a-bl.mig{
  top:120px;left:-260px;bottom:auto;right:auto;width:520px;height:520px;
  background:radial-gradient(circle at 50% 50%,
    rgba(79,179,217,.92) 0%, rgba(79,179,217,.5) 14%,
    rgba(79,179,217,.2) 28%, rgba(79,179,217,.06) 42%, transparent 58%);
  opacity:1!important;
}
.room .a-br.mig{
  top:120px;right:-260px;bottom:auto;left:auto;width:520px;height:520px;
  background:radial-gradient(circle at 50% 50%,
    rgba(122,125,130,.88) 0%, rgba(122,125,130,.48) 14%,
    rgba(122,125,130,.18) 28%, rgba(122,125,130,.06) 42%, transparent 58%);
  opacity:1!important;
}
.room .a-tl.kbd{opacity:.55!important;animation:none!important}
.room .a-tr.kbd{opacity:.55!important;animation:none!important}

/* Arc rings */
.ring{
  position:absolute;width:172px;height:172px;border-radius:50%;
  border:1.5px solid;pointer-events:none;opacity:0;transition:opacity .35s;
  animation:rp .86s ease-in-out infinite;z-index:2;
}
.ring-tl{top:-86px;left:-86px;border-color:rgba(255,165,0,.55)}
.ring-tr{top:-86px;right:-86px;border-color:rgba(57,255,20,.55)}
.ring-bl{bottom:-86px;left:-86px;border-color:rgba(79,179,217,.55)}
.ring-br{bottom:-86px;right:-86px;border-color:rgba(122,125,130,.5)}
.ring.on{opacity:1}
@keyframes rp{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* Name labels */
.nlbl{
  position:absolute;font-size:9px;font-weight:600;letter-spacing:.25px;
  opacity:.6;transition:opacity .3s, top .4s, bottom .4s;z-index:6;line-height:1.35;
}
.nl-tl{top:58px;left:10px}
.nl-tr{top:58px;right:10px;text-align:right}
.nl-bl{bottom:84px;left:14px}
.nl-br{bottom:84px;right:14px;text-align:right}
.nlbl.bright{opacity:1;font-weight:600;text-shadow:0 0 8px currentColor}
.nlbl.dim{opacity:.2}
.nl-bl.kbd{bottom:auto;top:318px}
.nl-br.kbd{bottom:auto;top:318px}

/* Mode pill */
.mode-pill{
  position:absolute;top:37px;left:50%;transform:translateX(-50%);z-index:10;
  display:flex;align-items:center;background:rgba(255,255,255,.04);
  border:0.5px solid rgba(255,255,255,.1);border-radius:999px;padding:2px;
  font-size:9px;letter-spacing:.2px;transition:opacity .3s;
}
.mp-opt{
  padding:3px 10px;border-radius:999px;color:rgba(242,237,228,.45);
  cursor:pointer;transition:all .25s ease;font-weight:500;letter-spacing:.4px;
}
.mp-opt.on{
  background:rgba(242,237,228,.09);color:rgba(242,237,228,.92);
  box-shadow:inset 0 0 0 .5px rgba(242,237,228,.14);
}

/* Transcript — padded off the bottom-corner aura zones */
.tc{
  position:absolute;left:36px;right:36px;top:38%;
  transform:translateY(-50%);z-index:4;
  transition:top .4s ease, bottom .4s ease, transform .4s ease, opacity .4s;
}
/* Keyboard state: anchor transcript ABOVE composer (bottom:260px = above composer at 210px) */
.tc.kbd{top:auto;bottom:300px;transform:none}
.tl{margin-bottom:9px;transition:opacity .3s}
.tl:last-child{margin-bottom:0}
.ts{font-size:9px;font-weight:700;letter-spacing:.2px;margin-bottom:2px}
.tt{line-height:1.44;color:#EAEAEA}
/* CHANGE 3: Three-line transcript depth — readable history, not a single floating line */
.tl.old2 .tt{font-size:11px;opacity:.38}
.tl.old2 .ts{opacity:.38}
.tl.old1 .tt{font-size:12.5px;opacity:.62}
.tl.old1 .ts{opacity:.62}
.tl.act .tt{font-size:14px;opacity:1}
.tl.act .ts{opacity:1}
.ul{border-bottom:1.5px solid;padding-bottom:0}

/* User aura — sits BELOW the corner auras so Tide/Dry Cell read on top */
.user-aura{
  position:absolute;left:0;right:0;bottom:0;height:130px;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse 52% 90% at 50% 100%,
    rgba(242,237,228,.72) 0%, rgba(242,237,228,.34) 30%,
    rgba(242,237,228,.08) 64%, transparent 84%);
  opacity:.22;transition:opacity .4s;
  mix-blend-mode:screen;
}
.user-aura.active{opacity:1;animation:ua 1.8s ease-in-out infinite}
@keyframes ua{0%,100%{opacity:.85;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.04)}}

/* Wave */
.wave{
  position:absolute;bottom:100px;left:50%;transform:translateX(-50%);
  display:none;gap:3px;align-items:center;height:18px;z-index:7;
}
.wave.on{display:flex}
.wv{width:2.5px;border-radius:1.5px;background:rgba(242,237,228,.75);animation:wv 1s ease-in-out infinite}
.wv:nth-child(1){animation-delay:0s}.wv:nth-child(2){animation-delay:.1s}
.wv:nth-child(3){animation-delay:.2s}.wv:nth-child(4){animation-delay:.3s}
.wv:nth-child(5){animation-delay:.25s}.wv:nth-child(6){animation-delay:.15s}
.wv:nth-child(7){animation-delay:.05s}.wv:nth-child(8){animation-delay:.18s}
@keyframes wv{0%,100%{height:4px}50%{height:18px}}

/* Mic zone */
.mic-zone{
  position:absolute;bottom:38px;left:50%;transform:translateX(-50%);z-index:7;
  display:flex;align-items:center;justify-content:center;transition:opacity .3s;
}
.mic-ghost{width:34px;height:34px;display:flex;align-items:center;justify-content:center;opacity:.3;transition:opacity .3s}
.mic-ghost.heard{opacity:.75}
.mic-btn{
  width:50px;height:50px;border-radius:50%;
  background:rgba(242,237,228,.1);border:1px solid rgba(242,237,228,.28);
  display:flex;align-items:center;justify-content:center;transition:all .3s ease;cursor:pointer;
}
.mic-btn.active{
  background:rgba(242,237,228,.22);border-color:rgba(242,237,228,.7);
  box-shadow:0 0 24px rgba(242,237,228,.25);
}

/* Icon row */
.iconrow{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  display:flex;gap:26px;align-items:center;z-index:7;transition:opacity .3s;
}
.ic{width:16px;height:16px;display:flex;align-items:center;justify-content:center;opacity:.42;cursor:pointer;transition:opacity .3s}
.ic:hover{opacity:.9}
.ic.on{opacity:.95}

/* Options popover — anchors just above the icon row */
.opt-menu{
  position:absolute;bottom:42px;left:50%;transform:translate(-50%, 6px);
  z-index:11;min-width:190px;
  background:rgba(22,22,22,.94);border:0.5px solid rgba(255,255,255,.09);
  border-radius:12px;padding:6px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 16px 40px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02) inset;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease, transform .22s cubic-bezier(.25,.9,.3,1);
}
.opt-menu.on{opacity:1;pointer-events:auto;transform:translate(-50%, 0)}
.opt-menu::after{
  content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:9px;height:9px;background:rgba(22,22,22,.94);
  border-right:0.5px solid rgba(255,255,255,.09);border-bottom:0.5px solid rgba(255,255,255,.09);
}
.opt-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  color:rgba(242,237,228,.88);font-size:12px;letter-spacing:.15px;
  cursor:pointer;transition:background .18s ease;
}
.opt-item:hover{background:rgba(242,237,228,.06)}
.opt-ico{width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:rgba(242,237,228,.72);flex-shrink:0}
.opt-lbl{flex:1}
.opt-hint{font-size:9px;color:rgba(242,237,228,.38);letter-spacing:.08em;text-transform:uppercase}
.opt-item.opt-disabled{color:rgba(242,237,228,.35);cursor:not-allowed}
.opt-item.opt-disabled:hover{background:transparent}
.opt-item.opt-disabled .opt-ico{color:rgba(242,237,228,.3)}

/* Composer */
.composer{
  position:absolute;left:12px;right:12px;bottom:210px;height:40px;
  display:none;align-items:center;gap:8px;z-index:8;
  background:rgba(28,28,28,.92);border:0.5px solid rgba(255,255,255,.08);
  border-radius:999px;padding:0 6px 0 10px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transform:translateY(20px);opacity:0;
  transition:opacity .3s ease, transform .35s ease;
}
.composer.on{display:flex;opacity:1;transform:translateY(0)}
.cmp-dismiss{width:22px;height:22px;display:flex;align-items:center;justify-content:center;opacity:.55;cursor:pointer;transition:opacity .25s;flex-shrink:0}
.cmp-dismiss:hover{opacity:1}
.cmp-plus{
  width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(242,237,228,.06);flex-shrink:0;cursor:pointer;transition:background .25s;
}
.cmp-plus:hover{background:rgba(242,237,228,.12)}
.cmp-plus.on{background:rgba(242,237,228,.16)}
.cmp-input{flex:1;font-size:11.5px;color:rgba(242,237,228,.4);font-style:italic;letter-spacing:.1px}
/* When opened from composer, anchor menu just above the composer bar (left side) */
.opt-menu.from-cmp{bottom:262px;left:34px;transform:translate(0,6px)}
.opt-menu.from-cmp.on{transform:translate(0,0)}
.opt-menu.from-cmp::after{left:18px;transform:rotate(45deg)}
.cmp-mic{
  width:28px;height:28px;border-radius:50%;
  background:rgba(242,237,228,.08);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;transition:background .25s;
}

/* Keyboard */
.keyboard{
  position:absolute;left:0;right:0;bottom:0;height:210px;
  display:none;flex-direction:column;z-index:7;
  background:#1d1d1d;border-top:0.5px solid rgba(255,255,255,.08);
  padding:8px 3px 18px;gap:7px;
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.25,.9,.3,1);
}
.keyboard.on{display:flex;transform:translateY(0)}
.kb-row{display:flex;gap:4px;flex:1;padding:0 3px;justify-content:center}
.key{
  flex:1;min-width:0;background:#363636;color:rgba(242,237,228,.88);
  border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:400;box-shadow:0 1px 0 rgba(0,0,0,.4);max-width:26px;
}
.key.wide{max-width:42px;font-size:11px}
.key.space{max-width:none;flex:4;font-size:11px}
.key.dark{background:#262626;color:rgba(242,237,228,.7)}

/* Hidden helpers */
.gone{display:none!important}

/* Swipe touch hits (invisible, just to prove swipe gesture works in static prototype) */
.swipe-hit{
  position:absolute;top:0;bottom:0;width:18px;z-index:20;
  cursor:w-resize;
}
.swipe-hit-l{left:0}
.swipe-hit-r{right:0;cursor:e-resize}
.phone.in-room .swipe-hit{display:none}