/* THE ROOM · 1102e · THE LOUNGE — black leather, button tufted. Three chairs, our avatars in them, the globe on the table. */

/* the whole room goes Chesterfield: tufting laid over the seat lights so their colour still pools in the leather */
#room::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--lg-leather, none), radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,212,0,.06), transparent 70%), radial-gradient(ellipse 120% 80% at 50% 50%, transparent 40%, rgba(0,0,0,.72) 100%);
  background-size: 88px 88px, 100% 100%, 100% 100%; background-position: center top; opacity: .82; }
@media (max-width: 640px) { #room::before { background-size: 60px 60px, 100% 100%, 100% 100%; } }
header::before { content: ""; position: absolute; left: 10px; right: 10px; bottom: 5px; border-bottom: 1px dashed rgba(195,201,210,.16); pointer-events: none; }
footer { position: relative; }
footer::before { content: ""; position: absolute; left: 10px; right: 10px; top: 5px; border-top: 1px dashed rgba(195,201,210,.16); pointer-events: none; }
header, footer { background-color: rgba(7,6,6,.82) !important; }

#lounge { flex: none; position: relative; height: clamp(170px, 33vh, 340px); overflow: hidden; user-select: none; -webkit-user-select: none;
  border-bottom: 1px solid rgba(195,201,210,.1); transition: height .45s cubic-bezier(.2,.8,.2,1); }
#lounge::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 5px; border-bottom: 1px dashed rgba(195,201,210,.14); pointer-events: none; }
body:not(.chat) #lounge { display: none; }
#lounge.min { height: 40px; }
#lounge.min .lg-scene { opacity: 0; pointer-events: none; }
.lg-scene { position: absolute; inset: 0; transition: opacity .35s; }
.lg-scene svg.lg-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the bar: THE LOUNGE · ZONE · fold */
.lg-bar { position: absolute; z-index: 4; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 9px 14px; pointer-events: none; }
.lg-bar > * { pointer-events: auto; }
.lg-bar h4 { font: 400 17px/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .16em; color: rgba(195,201,210,.55); margin-right: auto; }
.lg-bar h4 small { font: 600 8.5px/1 "JetBrains Mono", monospace; letter-spacing: .3em; color: rgba(255,212,0,.5); margin-left: 10px; vertical-align: 2px; }
.lg-zone { display: inline-flex; align-items: center; gap: 7px; font: 600 9.5px/1 "JetBrains Mono", monospace; letter-spacing: .2em; color: var(--silver); text-decoration: none; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(195,201,210,.18); background: rgba(5,5,6,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lg-zone:hover { color: #fff; border-color: rgba(255,212,0,.6); }
.lg-zone svg { width: 22px; height: 10px; }
html.zone-live .lg-zone { color: #fff; border-color: rgba(225,6,0,.7); background: rgba(225,6,0,.16); }
.lg-fold { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(195,201,210,.18); background: rgba(5,5,6,.6); color: var(--silver); display: grid; place-items: center; font: 600 13px/1 "JetBrains Mono", monospace; }
.lg-fold:hover { color: #fff; border-color: #fff; }

/* chairs light up with their seat */
.lg-svg .spot { opacity: 0; transition: opacity 1.1s; }
.lg-svg .chair .pipe { stroke-opacity: .22; transition: stroke-opacity .8s, filter .8s; }
.lg-svg .chair.ready .pipe { stroke-opacity: .4; }
.lg-svg .chair.in .pipe, .lg-svg .chair.typing .pipe { stroke-opacity: .95; filter: drop-shadow(0 0 4px var(--c)); }
.lg-svg .spot.ready { opacity: .35; } .lg-svg .spot.in, .lg-svg .spot.typing { opacity: 1; }
.lg-svg .ember { animation: lgEmber 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes lgEmber { 0%, 100% { opacity: .85; } 40% { opacity: 1; } 55% { opacity: .7; } 70% { opacity: .95; } }
.lg-svg .onlight { opacity: 0; transition: opacity 1s; }
body.one .lg-svg .onlight { opacity: 1; }

/* the avatars, seated */
.lg-seat { position: absolute; z-index: 2; border-radius: 50%; padding: 0; cursor: pointer; --c: var(--silver); }
.lg-seat.brian { --c: var(--red); } .lg-seat.claude { --c: var(--blue); } .lg-seat.grok { --c: var(--green); }
.lg-seat::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from var(--spin, 0deg), var(--c), transparent 35%, var(--c) 50%, transparent 85%, var(--c)); opacity: 0; transition: opacity .6s; }
.lg-seat img, .lg-seat canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 3px solid #0a0a0b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.75); filter: grayscale(1) brightness(.32); transition: filter .8s, box-shadow .8s; }
.lg-seat canvas { display: none; filter: none; }
.lg-seat.ready img { filter: grayscale(.35) brightness(.6); } .lg-seat.ready::before { opacity: .35; }
.lg-seat.in img, .lg-seat.typing img { filter: none; box-shadow: 0 0 22px var(--c), 0 0 54px color-mix(in srgb, var(--c) 45%, transparent), 0 10px 26px rgba(0,0,0,.75); animation: breathe 3.2s ease-in-out infinite; }
.lg-seat.in::before { opacity: .9; } .lg-seat.typing::before { opacity: 1; animation: spin 1.1s linear infinite; }
.lg-plate { position: absolute; z-index: 3; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none;
  font: 600 8.5px/1 "JetBrains Mono", monospace; letter-spacing: .22em; padding: 5px 8px 4px; border-radius: 3px;
  color: #1a1204; background: linear-gradient(180deg, #f3d77a, #b8892a 55%, #8a6116); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 3px 8px rgba(0,0,0,.6); opacity: .82; }
.lg-plate i { font-style: normal; opacity: .62; }
.lg-plate.lit { opacity: 1; }

/* Brian in the zone: his chair carries the live feed */
html.zone-live .lg-seat.brian canvas { display: block; }
html.zone-live .lg-seat.brian img { opacity: 0; }
html.zone-live .lg-seat.brian { cursor: zoom-in; }
html.zone-live .lg-seat.brian::before { opacity: 1; background: conic-gradient(from var(--spin, 0deg), var(--red), #ff7a70, var(--red), transparent 60%, var(--red)); animation: spin 1.6s linear infinite; }
html.zone-live .lg-seat.brian canvas { box-shadow: 0 0 0 2px var(--red), 0 0 34px var(--red), 0 0 80px rgba(225,6,0,.45); }
html.zone-live .lg-plate.brian { color: #fff; background: linear-gradient(180deg, #ff2a1f, #a10400); }
html.zone-stale .lg-seat.brian canvas { filter: grayscale(.6) brightness(.6); }

.lg-globe { position: absolute; z-index: 2; border-radius: 50%; cursor: grab; touch-action: none; }
.lg-globe:active { cursor: grabbing; }
.lg-smoke { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

@media (max-width: 640px) { #lounge { height: clamp(150px, 27vh, 230px); } .lg-bar { padding: 7px 10px; } .lg-bar h4, .lg-zone span { display: none; } .lg-bar { justify-content: flex-end; } .lg-plate { font-size: 7.5px; letter-spacing: .16em; padding: 4px 6px 3px; } }
@media (max-height: 520px) { #lounge { display: none; } }
@media (prefers-reduced-motion: reduce) { .lg-seat img, .lg-seat::before, .lg-svg .ember { animation: none !important; } #lounge { transition: none; } }