/* ============================================================
   BUNKROS CHAT — video call layout (2026-09-27)
   desktop / iPad landscape: call left, chat right (one viewport)
   iPad portrait: call on top, chat below · phone: compact call, chat below
   ============================================================ */
.chat-page { --c-red: #ff1744; }
.call { position: relative; isolation: isolate; padding: calc(var(--sh-top-h) + 18px) var(--gutter) 28px; box-sizing: border-box; min-height: 100svh; }
.call-ambient { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: blur(28px) saturate(140%) brightness(.45); transform: scale(1.1); }
.call::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 20% 20%, rgba(255,0,90,.18), transparent 70%), linear-gradient(180deg, rgba(8,8,12,.55), var(--bg-base) 90%); }
[data-theme="light"] .call::before { background: radial-gradient(70% 60% at 20% 20%, rgba(255,51,102,.14), transparent 70%), linear-gradient(180deg, rgba(250,248,245,.6), var(--bg-base) 90%); }

.call-grid { width: min(1400px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); gap: clamp(14px, 1.6vw, 22px);
    height: calc(100svh - var(--sh-top-h) - 18px - 92px); min-height: 560px; }

/* ---- stage ---- */
.call-stage { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.call-topline { display: flex; gap: 8px; flex-wrap: wrap; }
.call-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 999px; font: 700 .74rem/1 var(--font-accent); letter-spacing: .12em; text-transform: uppercase; background: var(--sh-glass); border: 1px solid var(--sh-border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--sh-text); font-variant-numeric: tabular-nums; }
.call-pill--live b { width: 8px; height: 8px; border-radius: 50%; background: var(--c-red); box-shadow: 0 0 10px var(--c-red); animation: callBlink 1.4s ease-in-out infinite; }
@keyframes callBlink { 50% { opacity: .25; } }
.call-tile { position: relative; flex: 1; min-height: 0; border-radius: 26px; overflow: hidden; background: #050507; border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 40px 90px -40px rgba(255,0,90,.55), inset 0 0 0 1px rgba(255,255,255,.03); }
.call-tile > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.call-tile::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 30%), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
.call-nameplate { position: absolute; z-index: 1; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 16px; background: rgba(10,10,15,.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; border: 1px solid rgba(255,255,255,.12); }
.call-nameplate strong { display: block; font: 700 .95rem/1.1 var(--font-heading); }
.call-nameplate small { display: block; font-size: .76rem; opacity: .75; margin-top: 2px; }
.call-avatar { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--sh-grad); font: 900 1rem/1 var(--font-heading); }
.call-signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-left: 6px; }
.call-signal i { width: 3px; background: #3ddc84; border-radius: 1px; }
.call-signal i:nth-child(1) { height: 30%; } .call-signal i:nth-child(2) { height: 55%; } .call-signal i:nth-child(3) { height: 80%; } .call-signal i:nth-child(4) { height: 100%; }
.call-self { position: absolute; z-index: 1; right: 16px; top: 16px; width: clamp(110px, 16%, 190px); aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; border: 2px solid rgba(255,255,255,.4); box-shadow: 0 16px 40px -10px rgba(0,0,0,.8); }
.call-self video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
.call-self span { position: absolute; left: 8px; bottom: 6px; font: 700 .7rem/1 var(--font-accent); letter-spacing: .1em; color: #fff; text-transform: uppercase; }

.call-controls { display: flex; align-items: center; gap: 10px; }
.call-topics { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: 18px; background: var(--sh-glass); border: 1px solid var(--sh-border); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.call-topic { min-height: 48px; border: 0; border-radius: 13px; background: none; color: var(--sh-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 .78rem/1.1 var(--font-accent); letter-spacing: .06em; text-transform: uppercase; transition: background-color .2s, color .2s, transform .3s var(--sh-spring); }
.call-topic:active { transform: scale(.95); }
.call-topic[aria-checked="true"] { background: var(--sh-tint); color: var(--sh-text); box-shadow: inset 0 0 0 1px rgba(var(--sh-accent-rgb), .45); }
.call-topic[aria-checked="true"] i { color: var(--sh-accent); }
.call-ctl { width: 58px; height: 58px; flex: none; border-radius: 50%; border: 1px solid var(--sh-border-2); background: var(--sh-glass); color: var(--sh-text); display: grid; place-items: center; font-size: 1.1rem; cursor: pointer; text-decoration: none; transition: transform .3s var(--sh-spring), background-color .2s; }
.call-ctl:active { transform: scale(.9); }
.call-ctl[aria-pressed="true"] { background: #fff; color: #111; }
.call-ctl--end { background: #e5243b; border-color: #e5243b; color: #fff !important; }

/* ---- chat panel ---- */
.call-chat { display: flex; flex-direction: column; min-height: 0; border-radius: 26px; overflow: hidden; background: var(--sh-glass-strong); border: 1px solid var(--sh-border-2); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--sh-shadow); }
.call-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--sh-border); }
.call-chat-head strong { display: block; font: 800 1rem/1.1 var(--font-heading); }
.call-chat-head small { display: block; font-size: .78rem; color: var(--text-secondary); margin-top: 2px; }
.call-chat-dot { width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 4px rgba(61,220,132,.18); }
.call-chat-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; -webkit-overflow-scrolling: touch; }
.call-chat-body > div { min-height: 100%; }

.call-links { width: min(1400px, 100%); margin: 18px auto 0; display: flex; flex-wrap: wrap; gap: 8px; }
.call-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--sh-glass); border: 1px solid var(--sh-border); color: var(--sh-text) !important; text-decoration: none; font: 600 .86rem/1 var(--font-body); }
.call-links a:hover { border-color: var(--sh-accent); }
.call-links i { color: var(--sh-accent); }

/* iPad landscape */
@media (min-width: 1024px) and (max-width: 1199px) {
    .call { padding: 22px calc(var(--gutter) + 56px) 24px var(--gutter); }
    .call-grid { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); height: calc(100svh - 110px); }
    .call-topic span { display: none; }
}
/* iPad portrait */
@media (min-width: 768px) and (max-width: 1023px) {
    .call { padding: 26px calc(var(--gutter) + 56px) 30px var(--gutter); }
    .call-grid { grid-template-columns: 1fr; height: auto; min-height: 0; }
    .call-tile { flex: none; aspect-ratio: 16 / 10; }
    .call-chat { height: min(640px, 62svh); }
}
/* phone */
@media (max-width: 767px) {
    .call { padding: calc(var(--sh-top-h) + 10px) 12px 20px; }
    .call-grid { grid-template-columns: 1fr; height: auto; min-height: 0; gap: 12px; }
    .call-topline { display: none; }
    .call-tile { flex: none; aspect-ratio: 4 / 3.3; border-radius: 22px; }
    .call-self { width: 86px; right: 10px; top: 10px; border-radius: 12px; }
    .call-nameplate { left: 10px; bottom: 10px; padding: 6px 10px 6px 6px; }
    .call-avatar { width: 30px; height: 30px; }
    .call-controls { gap: 8px; }
    .call-topics { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px; }
    .call-topic { min-height: 46px; flex-direction: column; gap: 4px; font-size: .6rem; letter-spacing: .02em; }
    .call-ctl { width: 50px; height: 50px; }
    .call-ctl--end { display: none; }
    .call-chat { height: calc(100svh - var(--sh-top-h) - var(--sh-bot-h) - 40px); min-height: 460px; border-radius: 22px; }
    .call-links { margin-top: 14px; }
    .call-links a { flex: 1 1 calc(50% - 8px); justify-content: center; }
}
/* short landscape phones */
@media (max-height: 560px) and (min-width: 768px) {
    .call-grid { height: auto; }
    .call-tile { aspect-ratio: 16 / 9; flex: none; }
    .call-chat { height: 80svh; }
}
.chat-page .hud-container { display: none !important; }
/* The Elfsight chat sizes itself to its box: the box must always have a real height */
.call-chat-body { display: flex; flex-direction: column; }
.call-chat-body > div { flex: 1; min-height: 420px; }
@media (max-width: 767px) {
    .call-chat { height: auto; min-height: 0; }
    .call-chat-body { overflow: visible; }
    .call-chat-body > div { min-height: 560px; }
}