/* LabuChat 웹 4a — 라이브 광장 (templates/live/plaza.html). 색은 --c4a-* 토큰만 쓴다.
 * 광장 채팅·발언·선물 로직은 plaza*.js 가 소유하고, 이 파일은 상단 카드·발언자 행·안전 안내를 그린다. */
.redesign-15 .plaza-shell {
    /* 4a 앱바 52 + 하단 내비 68. 데스크톱(≥1024)은 내비가 숨겨져 아래에서 다시 준다. */
    --plaza-chrome: 120px;
    background: var(--c4a-surface);
    font-family: var(--c4a-font-text);
}
@media (min-width: 1024px) { .redesign-15 .plaza-shell { --plaza-chrome: 72px; } }
/* 태블릿 앱바는 69(로고 40) + 내비 68. 이 값이 어긋나면 콤포저가 하단 내비 밑으로 밀린다. */
@media (min-width: 641px) and (max-width: 1023px) { .redesign-15 .plaza-shell { --plaza-chrome: 137px; } }

.redesign-15 .plaza-header { height: 52px; padding: 0 12px 0 20px; }
.redesign-15 .plaza-header h1 { margin: 0; font: 800 24px/1 var(--c4a-font); letter-spacing: -.02em; }
.redesign-15 .plaza-menu-button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--c4a-ink); }
.redesign-15 .plaza-shell .ms { font-size: 24px; }
.redesign-15 .plaza-rooms-link { color: var(--c4a-text-secondary); font: 600 13px/1 var(--c4a-font-text); }
.redesign-15 .plaza-recording-settings { gap: 4px; color: var(--c4a-text-secondary); }
.redesign-15 .plaza-recording-settings .ms { font-size: 18px; }

/* 상단 ink 카드 */
.plaza-live { grid-row: 2; margin: 4px 20px 0; padding: 16px 18px; border-radius: var(--c4a-radius-card); background: var(--c4a-ink); color: var(--c4a-surface); }
.plaza-live-top { display: flex; align-items: center; justify-content: space-between; }
.plaza-live .plaza-mode { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); color: var(--c4a-surface); font: 500 12px/1 var(--c4a-font-text); }
.plaza-mode-dot { width: 7px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .4); }
.plaza-mode.is-voice .plaza-mode-dot { background: var(--c4a-green-dark); }
.plaza-live .plaza-viewers { gap: 4px; color: rgba(255, 255, 255, .6); font: 400 12px/1 var(--c4a-font-text); }
.plaza-live-title { margin: 12px 0 0; font: 800 20px/1.3 var(--c4a-font); letter-spacing: -.01em; }
.plaza-live-who { display: flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 32px; }
.plaza-live .plaza-speakers { display: flex; flex: none; min-height: 0; padding: 0; border: 0; gap: 0; overflow: visible; }
.plaza-live .plaza-speakers .plaza-avatar { width: 32px; height: 32px; margin: 0 0 0 -8px; border: 2px solid var(--c4a-ink); outline: 0; transform: none; box-shadow: none; animation: none; font-size: 13px; }
.plaza-live .plaza-speakers .plaza-avatar:first-child { margin-left: 0; }
.plaza-live .plaza-speakers .plaza-avatar.is-speaking { border-color: var(--c4a-green-dark); }
.plaza-speakers-summary { min-width: 0; font: 400 12.5px/1.3 var(--c4a-font-text); color: rgba(255, 255, 255, .6); }

.plaza-wave { display: none; align-items: center; gap: 4px; height: 28px; margin-top: 12px; }
.plaza-live.is-voice .plaza-wave { display: flex; }
.plaza-wave i { flex: 1; max-width: 3px; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.plaza-live.has-speaking .plaza-wave i { background: var(--c4a-green-dark); }
.plaza-wave i:nth-child(4n+1) { height: 10px; }
.plaza-wave i:nth-child(4n+2) { height: 22px; }
.plaza-wave i:nth-child(4n+3) { height: 16px; }
.plaza-wave i:nth-child(4n) { height: 26px; }

.plaza-live-actions { display: flex; gap: 8px; margin-top: 14px; }
.plaza-live-actions:not(:has(:not([hidden]))) { display: none; }
.plaza-listen, .plaza-live .plaza-mic {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 48px; padding: 0 16px; border-radius: var(--c4a-radius-btn);
    font: 600 15px/1 var(--c4a-font-text); cursor: pointer;
}
.plaza-listen { flex: 1; border: 0; background: var(--c4a-surface); color: var(--c4a-ink); }
.plaza-listen[hidden] { display: none; }
.plaza-live .plaza-mic { border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: var(--c4a-surface); }
.plaza-live .plaza-mic:not([hidden]) { display: inline-flex; }
.plaza-live .plaza-mic::before { content: "mic"; font-family: 'Material Symbols Rounded'; font-size: 20px; font-weight: 400; font-feature-settings: 'liga'; }
.plaza-live .plaza-mic[data-muted="true"]::before { content: "mic_off"; }

/* 지금 말하고 있어요 */
.plaza-now { grid-row: 3; max-height: 176px; overflow-y: auto; padding: 14px 20px 0; }
.plaza-now[hidden] { display: none; }
.plaza-now h2 { margin: 0 0 4px; font: 700 15px/1 var(--c4a-font-text); }
.plaza-now .plaza-speaker { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--c4a-list-divider); }
.plaza-now .plaza-speaker .plaza-avatar { width: 48px; height: 48px; margin: 0; flex: none; outline: 0; background: var(--c4a-ink); color: var(--c4a-surface); }
.plaza-speaker-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.plaza-speaker-text strong { font: 700 15px/1.2 var(--c4a-font-text); overflow-wrap: anywhere; }
.plaza-speaker-text small { font: 400 12.5px/1 var(--c4a-font-text); color: var(--c4a-text-secondary); }
.plaza-speaker-gift { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border: 1px solid var(--c4a-btn-border); border-radius: 99px; background: var(--c4a-surface); color: var(--c4a-ink); font: 600 12px/1 var(--c4a-font-text); cursor: pointer; }
.plaza-speaker-gift .ms { font-size: 16px; }
.plaza-speaker-wave { flex: none; color: var(--c4a-text-secondary); }
.plaza-speaker.is-speaking .plaza-speaker-wave { color: var(--c4a-green); font-variation-settings: 'FILL' 1; }
.plaza-speaker.is-speaking .plaza-avatar { box-shadow: 0 0 0 2px var(--c4a-surface), 0 0 0 4px var(--c4a-green); }

/* 안전 안내 */
.plaza-safety { grid-row: 4; display: flex; align-items: center; gap: 10px; margin: 12px 20px 8px; padding: 10px 14px; border-radius: 14px; background: var(--c4a-surface-alt); color: #444; font: 400 12.5px/1.5 var(--c4a-font-text); }
.plaza-safety .ms { flex: none; font-size: 20px; color: var(--c4a-text-secondary); }

.redesign-15 .plaza-connection { padding-inline: 20px; }
.redesign-15 .plaza-messages { padding-inline: 20px; }
@media (max-width: 640px) {
    .plaza-live-title { font-size: 18px; }
    .plaza-safety { margin-block: 8px 6px; padding: 8px 12px; }
}
.plaza-live .plaza-speakers:empty { display: none; }

/* 키보드가 올라온 모바일·가로 화면: 상단 카드를 줄여 입력창이 항상 하단 내비 위에 남게 한다. */
@media (max-height: 640px) {
    .plaza-live { padding: 10px 14px; }
    .plaza-live-title, .plaza-wave, .plaza-safety { display: none; }
    .plaza-live-who { margin-top: 8px; }
    .plaza-live-actions { margin-top: 8px; }
    .plaza-listen, .plaza-live .plaza-mic { height: 40px; }
    .plaza-now { max-height: 96px; padding-top: 8px; }
}
@media (max-height: 480px) {
    .plaza-live { display: flex; align-items: center; gap: 12px; }
    .plaza-live-top { flex: none; gap: 10px; }
    .plaza-live-who { flex: 1; min-width: 0; margin-top: 0; }
    .plaza-live-actions { flex: none; margin-top: 0; }
    .plaza-now { max-height: 64px; }
}