/* ============================================================================
   RAUM-SZENE  ·  der Meeting-Raum (aus der bewährten room-scene, jetzt in der App)
   Wird in .scene-area (position:relative) montiert; .stage füllt diese absolut.
   ============================================================================ */
.scene-area{ position:relative; flex:1; min-width:0; overflow:hidden; }

.stage{
  position:absolute; inset:0; overflow:hidden;
  perspective:1500px; perspective-origin:50% 40%;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(212,162,78,.10), transparent 55%),
    radial-gradient(120% 90% at 50% 120%, #05070c 20%, transparent 60%),
    linear-gradient(180deg,#0b1120 0%, #080b13 45%, #05070c 100%);
}
.floor{
  position:absolute; left:50%; top:56%; width:220%; height:150%;
  transform:translateX(-50%) rotateX(72deg); transform-origin:top center;
  background:
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(212,162,78,.05) 78px 80px),
    repeating-linear-gradient(0deg, transparent 0 78px, rgba(120,150,200,.045) 78px 80px),
    radial-gradient(60% 55% at 50% 0%, rgba(30,44,74,.5), transparent 70%);
  -webkit-mask-image:radial-gradient(60% 70% at 50% 12%, #000 0%, transparent 72%);
          mask-image:radial-gradient(60% 70% at 50% 12%, #000 0%, transparent 72%);
}
.spot{
  position:absolute; left:50%; top:-8%; width:60%; height:80%; transform:translateX(-50%);
  background:conic-gradient(from 180deg at 50% 0%, transparent 78deg, rgba(212,162,78,.10) 90deg, transparent 102deg);
  filter:blur(6px); pointer-events:none;
}

/* Projektname im Bogen */
.arch{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:min(760px,86%); z-index:6; pointer-events:none; text-align:center; }
.arch svg{ width:100%; height:120px; overflow:visible; }
.arch text{ font-family:var(--font-display); font-weight:600; letter-spacing:.02em;
  fill:url(#goldgrad); filter:drop-shadow(0 2px 20px rgba(212,162,78,.35)); }
.arch .sub{ margin-top:-16px; }
.arch .sub .eyebrow{ font-size:12px; letter-spacing:.30em; }
.arch .mono-id{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); margin-top:6px; }

/* Tisch */
.table-wrap{ position:absolute; left:50%; top:53%; width:min(680px,72%); transform:translate(-50%,-50%); transform-style:preserve-3d; z-index:3; }
.tabletop{
  width:100%; aspect-ratio:2.3 / 1;
  transform:rotateX(60deg); transform-style:preserve-3d; position:relative; border-radius:50%;
  border:2.5px solid #d4a24e;                 /* robuster Goldrand (statt fragiler Maske) */
  background:
    radial-gradient(42% 42% at 50% 44%, rgba(95,208,214,.12), transparent 62%),
    radial-gradient(120% 120% at 50% 38%, #141b29 0%, #0d121c 52%, #070a11 100%);
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.85), inset 0 3px 10px rgba(255,255,255,.05),
    0 0 22px rgba(212,162,78,.35),            /* goldenes Glühen am Rand */
    0 44px 90px rgba(0,0,0,.6);
}
/* feiner Innenglanz auf dem Goldrand */
.tabletop::before{
  content:""; position:absolute; inset:-1px; border-radius:50%; pointer-events:none;
  border:1px solid rgba(247,223,166,.45); z-index:1;
}
.tabletop::after{
  content:""; position:absolute; left:12%; top:10%; width:44%; height:26%;
  background:radial-gradient(closest-side, rgba(255,255,255,.14), transparent 70%);
  border-radius:50%; transform:rotate(-18deg); filter:blur(3px); pointer-events:none;
}
.holo{ position:absolute; left:50%; top:44%; transform:translate(-50%,-50%) rotateX(-60deg); width:150px; height:150px; transform-style:preserve-3d; pointer-events:none; }
.holo .ring{ position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(95,208,214,.5); box-shadow:0 0 26px rgba(95,208,214,.35); animation:spin 14s linear infinite; }
.holo .ring:nth-child(2){ inset:16px; border-color:rgba(212,162,78,.5); box-shadow:0 0 20px rgba(212,162,78,.3); animation-duration:9s; animation-direction:reverse; }
.holo .ring:nth-child(3){ inset:34px; border-style:dashed; border-color:rgba(155,140,255,.5); animation-duration:20s; }
.holo .core{ position:absolute; inset:52px; border-radius:50%; background:radial-gradient(circle,#eafcff,#5fd0d6 40%,transparent 72%); box-shadow:0 0 40px rgba(95,208,214,.7); animation:pulse 3.4s ease-in-out infinite; }
.holo .label{ position:absolute; left:50%; top:112%; transform:translateX(-50%); white-space:nowrap; font:600 11px var(--font-mono); letter-spacing:.16em; color:var(--cyan); text-shadow:0 0 12px rgba(95,208,214,.6); }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pulse{ 50%{ transform:scale(1.12); opacity:.85; } }

/* Sitzplätze */
.seat{ position:absolute; z-index:4; transform:translate(-50%,-50%); text-align:center; transition:transform .3s, filter .3s; cursor:pointer; }
.seat:hover{ filter:brightness(1.12); } .seat:hover .avatar{ transform:translateY(-6px); }
.avatar{ position:relative; width:var(--sz,96px); height:var(--sz,96px); margin:0 auto; transition:transform .3s; animation:float 6s ease-in-out infinite; }
.bot .body{ position:absolute; inset:0; border-radius:44% 44% 40% 40%/48% 48% 42% 42%; background:linear-gradient(160deg,#242e42,#141a28 70%); border:1px solid rgba(255,255,255,.06); box-shadow:0 14px 30px rgba(0,0,0,.5), inset 0 2px 6px rgba(255,255,255,.06); }
.bot .visor{ position:absolute; left:18%; right:18%; top:26%; height:26%; border-radius:16px; background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 85%, #fff 0%), #0b0f18); box-shadow:0 0 18px var(--brand), inset 0 0 10px rgba(0,0,0,.6); }
.bot .visor::before{ content:""; position:absolute; left:14%; top:26%; width:22%; height:34%; border-radius:50%; background:rgba(255,255,255,.75); filter:blur(.4px); }
.bot .antenna{ position:absolute; left:50%; top:-14%; width:3px; height:16%; background:var(--brand); transform:translateX(-50%); border-radius:2px; box-shadow:0 0 10px var(--brand); }
.bot .antenna::after{ content:""; position:absolute; left:50%; top:-6px; width:8px; height:8px; border-radius:50%; background:var(--brand); transform:translateX(-50%); box-shadow:0 0 12px var(--brand); animation:pulse 2.6s ease-in-out infinite; }
.plate{ position:absolute; left:50%; bottom:6%; transform:translateX(-50%); font:700 10.5px var(--font-mono); letter-spacing:.04em; white-space:nowrap; padding:3px 8px; border-radius:999px; color:#0a0e15; background:linear-gradient(180deg, color-mix(in srgb,var(--brand) 92%, #fff), var(--brand)); box-shadow:0 0 14px color-mix(in srgb,var(--brand) 60%, transparent), 0 2px 6px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.35); }
.human .body{ position:absolute; inset:0; border-radius:46% 46% 42% 42%/52% 52% 44% 44%; background:linear-gradient(160deg,#4a2f3a,#2a1a22 72%); border:1px solid rgba(255,143,174,.25); box-shadow:0 14px 30px rgba(0,0,0,.5), inset 0 2px 6px rgba(255,255,255,.08); }
.human .face{ position:absolute; left:26%; right:26%; top:22%; height:34%; border-radius:50%; background:radial-gradient(circle at 50% 40%, #ffd9c2, #e7a98a); box-shadow:inset 0 -6px 10px rgba(0,0,0,.2); }
.human .plate{ background:linear-gradient(180deg,#ffb6c9,var(--rose)); }
.seat .who{ margin-top:8px; font:600 12px var(--font-ui); color:var(--ink); text-shadow:0 1px 8px rgba(0,0,0,.8); }
.seat .role{ font:500 10.5px var(--font-ui); color:var(--ink-3); letter-spacing:.02em; }
.seat .status{ display:inline-flex; align-items:center; gap:5px; margin-top:3px; font:600 10px var(--font-mono); color:var(--cyan); }
.seat .status::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:pulse 2s infinite; }
.seat.idle .status{ color:var(--ink-3); } .seat.idle .status::before{ background:var(--ink-3); box-shadow:none; animation:none; }
@keyframes float{ 50%{ transform:translateY(-5px); } }
.dust{ position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(212,162,78,.5); box-shadow:0 0 6px rgba(212,162,78,.6); animation:rise linear infinite; }
@keyframes rise{ from{ transform:translateY(20px); opacity:0; } 10%{opacity:.8;} 90%{opacity:.5;} to{ transform:translateY(-60%); opacity:0; } }

.hint-bar{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:7; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* Raum-Topbar */
.room-topbar{ position:absolute; top:0; left:0; right:0; height:52px; z-index:8; display:flex; align-items:center; gap:12px; padding:0 16px; }
.room-topbar .back{ background:var(--bg-glass-strong); }
.room-topbar .spacer{ flex:1; }

/* Umschalt-Knopf fürs Dock (nur mobil sichtbar) */
.dock-toggle{ display:none; position:absolute; right:14px; bottom:16px; z-index:9; }

/* ===================== MOBIL / PHONE-BROWSER ===================== */
@media (max-width:860px){
  #roomView{ flex-direction:column; }
  .scene-area{ height:100%; }               /* Szene füllt den Schirm */
  .arch{ top:44px; width:94%; }
  .arch svg{ height:96px; } .arch text{ font-size:44px; }
  .arch .mono-id{ font-size:10px; word-break:break-all; }
  .room-topbar{ height:48px; padding:0 10px; }
  .room-topbar .back{ font-size:13px; padding:8px 12px; }

  /* Dock wird zum aufziehbaren Bottom-Sheet */
  #panelsMount{
    position:fixed !important; left:0; right:0; bottom:0; width:100% !important;
    height:72vh; max-height:72vh; z-index:30;
    transform:translateY(calc(100% - 0px)); transition:transform .32s cubic-bezier(.4,0,.2,1);
    border-top-left-radius:20px; border-top-right-radius:20px; overflow:hidden;
    box-shadow:0 -18px 50px rgba(0,0,0,.6);
  }
  #roomView.dock-open #panelsMount{ transform:translateY(0); }
  /* Griff oben am Sheet */
  #panelsMount::before{ content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:44px; height:5px; border-radius:99px; background:var(--line); z-index:40; }
  .dock-toggle{ display:inline-flex; }
  #roomView.dock-open .dock-toggle{ bottom:calc(72vh + 14px); }
}

/* sehr schmal: Tische/Sitze etwas kompakter */
@media (max-width:520px){
  .arch text{ font-size:34px; } .arch svg{ height:80px; }
  .table-wrap{ width:82%; }                  /* echte Breite, kein Zirkelbezug */
  .seat .role{ display:none; }              /* Platz sparen */
  .hint-bar{ display:none; }                /* überlappt sonst den Mensch-Avatar; Zahlen stehen im Dock */
}