/* World chat (static/js/ui/ChatPanel.js): launcher bottom-left; side panel on the
   right (desktop, docks beside other right panels via --ccw-chat-right) or a
   bottom sheet (≤720 px) that stays above the on-screen keyboard. */
.ccw-chat {
    --ccw-chat-bg: rgba(15, 23, 38, 0.95);
    --ccw-chat-line: rgba(255, 255, 255, 0.12);
    --ccw-chat-text: #f4f7fb;
    --ccw-chat-muted: #aebbd0;
    --ccw-chat-accent: #ffd45a;
    --ccw-chat-self: #8fd3ff;
    font: 14px/1.45 system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}
.ccw-chat[hidden] { display: none; }
.ccw-chat button { font: inherit; cursor: pointer; }
.ccw-chat button:focus-visible, .ccw-chat input:focus-visible, .ccw-chat summary:focus-visible { outline: 3px solid var(--ccw-chat-accent); outline-offset: 2px; }

.ccw-chat-launcher {
    position: fixed; z-index: 25;
    left: calc(14px + env(safe-area-inset-left, 0px));
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%;
    background: rgba(17, 22, 34, 0.88); color: #fff; font-size: 23px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    touch-action: manipulation;
}
.ccw-chat.is-open .ccw-chat-launcher { background: #263553; }
.ccw-chat-badge {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
    border-radius: 10px; background: #ef4444; color: #fff; font: 700 11px/20px system-ui, sans-serif; text-align: center;
}
.ccw-chat-badge[hidden] { display: none; }

.ccw-chat-toast {
    position: fixed; z-index: 25;
    left: calc(76px + env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    max-width: min(320px, calc(100vw - 100px)); padding: 9px 13px;
    border: 0; border-radius: 12px; background: #fff; color: #1c2333; text-align: left;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ccw-chat-toast[hidden] { display: none; }

.ccw-chat-panel {
    position: fixed; z-index: 26;
    top: calc(76px + env(safe-area-inset-top, 0px));
    right: var(--ccw-chat-right, 16px);
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: clamp(300px, 27vw, 380px); box-sizing: border-box;
    display: flex; flex-direction: column; min-height: 0;
    border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px;
    background: var(--ccw-chat-bg); color: var(--ccw-chat-text);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.ccw-chat.is-left .ccw-chat-panel { right: auto; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
.ccw-chat-panel[hidden] { display: none; }

.ccw-chat-header { display: flex; align-items: center; gap: 6px; padding: 12px 12px 8px 16px; }
.ccw-chat-place { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.ccw-chat-place strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.ccw-chat-count { flex: none; padding: 3px 9px; border: 1px solid var(--ccw-chat-line); border-radius: 999px; background: transparent; color: var(--ccw-chat-muted); font-size: 12px !important; }
.ccw-chat-icon-button { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 17px !important; }

.ccw-chat-settings { display: grid; gap: 8px; margin: 0 12px 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); font-size: 13px; }
.ccw-chat-settings[hidden] { display: none; }
.ccw-chat-switch { display: flex; align-items: center; gap: 8px; }
.ccw-chat-switch input { width: 18px; height: 18px; }
.ccw-chat-policy { margin: 0; color: var(--ccw-chat-muted); font-size: 12px; }

.ccw-chat-tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--ccw-chat-line); }
.ccw-chat-tab { position: relative; flex: 1; min-height: 40px; padding: 6px 4px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ccw-chat-muted); font-weight: 600; }
.ccw-chat-tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--ccw-chat-accent); }
.ccw-chat-tab:disabled { opacity: 0.4; cursor: not-allowed; }
.ccw-chat-tabcount { display: inline-block; min-width: 18px; margin-left: 5px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font: 700 11px/18px system-ui, sans-serif; }
.ccw-chat-dot { display: inline-block; width: 8px; height: 8px; margin-left: 5px; border-radius: 50%; background: var(--ccw-chat-self); vertical-align: middle; }

.ccw-chat-convhead { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--ccw-chat-line); }
.ccw-chat-convhead[hidden] { display: none; }
.ccw-chat-convhead strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccw-chat-back { padding: 4px 8px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: #fff; }
.ccw-chat-presence { color: #7ee2a8; font-size: 12px; }
.ccw-chat-hint { color: var(--ccw-chat-muted); font-size: 12px; }
.ccw-chat-more { position: relative; }
.ccw-chat-more summary { list-style: none; padding: 2px 8px; border-radius: 8px; cursor: pointer; }
.ccw-chat-more summary::-webkit-details-marker { display: none; }
.ccw-chat-more[open] > button { display: block; }
.ccw-chat-more > button { display: none; position: absolute; right: 0; z-index: 2; min-width: 96px; margin-top: 4px; padding: 8px 12px; border: 0; background: #fff; color: #1c2333; text-align: left; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.ccw-chat-more > button + button { top: 38px; }

.ccw-chat-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ccw-chat-log { flex: 1; min-height: 0; margin: 0; padding: 10px 14px; list-style: none; overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; }
.ccw-chat-log[hidden] { display: none; }
.ccw-chat-line { margin: 0 0 10px; }
.ccw-chat-meta { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.ccw-chat-meta b { color: var(--ccw-chat-accent); }
.ccw-chat-line.is-self .ccw-chat-meta b { color: var(--ccw-chat-self); }
.ccw-chat-meta time { color: var(--ccw-chat-muted); }
.ccw-chat-role { padding: 0 6px; border-radius: 6px; background: rgba(255, 212, 90, 0.18); color: var(--ccw-chat-accent); font-size: 11px; }
.ccw-chat-text { margin: 2px 0 0; white-space: pre-wrap; }
.ccw-chat-line.is-failed .ccw-chat-text { opacity: 0.6; }
.ccw-chat-status { color: var(--ccw-chat-muted); font-size: 12px; }
.ccw-chat-line.is-failed .ccw-chat-status { color: #fca5a5; }
.ccw-chat-retry { margin-left: 8px; padding: 2px 8px; border: 1px solid #fca5a5; border-radius: 8px; background: none; color: #fca5a5; font-size: 12px !important; }
.ccw-chat-empty { color: var(--ccw-chat-muted); text-align: center; padding: 24px 0; }
.ccw-chat-jump { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 5px 12px; border: 0; border-radius: 999px; background: var(--ccw-chat-accent); color: #1c2333; font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
.ccw-chat-jump[hidden] { display: none; }
.ccw-chat-jump::after { content: "새 메시지 ↓"; }

.ccw-chat-people { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 14px; }
.ccw-chat-people[hidden] { display: none; }
.ccw-chat-people h3 { margin: 10px 0 6px; color: var(--ccw-chat-muted); font-size: 12px; font-weight: 700; }
.ccw-chat-person { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px; border: 0; border-radius: 10px; background: none; color: inherit; text-align: left; }
button.ccw-chat-person:hover, div.ccw-chat-person:hover { background: rgba(255, 255, 255, 0.06); }
button.ccw-chat-person { flex-wrap: wrap; }
button.ccw-chat-person span { flex: 1 1 100%; color: var(--ccw-chat-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccw-chat-avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #34507a; font-weight: 700; }
.ccw-chat-person-name { flex: 1; min-width: 0; display: grid; }
.ccw-chat-person-name small { color: var(--ccw-chat-muted); font-size: 12px; }
.ccw-chat-start { padding: 6px 12px; border: 0; border-radius: 8px; background: var(--ccw-chat-accent); color: #1c2333; font-weight: 700; }
.ccw-chat-start:disabled { opacity: 0.45; cursor: not-allowed; }

.ccw-chat-form { display: grid; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--ccw-chat-line); }
.ccw-chat-form[hidden] { display: none; }
.ccw-chat-target { color: var(--ccw-chat-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccw-chat-row { display: flex; gap: 6px; }
.ccw-chat-input { flex: 1; min-width: 0; min-height: 42px; padding: 8px 10px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: #fff; font: inherit; font-size: 16px; }
.ccw-chat-input::placeholder { color: rgba(255, 255, 255, 0.55); }
.ccw-chat-input:disabled { opacity: 0.55; }
.ccw-chat-send { min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--ccw-chat-accent); color: #1c2333; font-weight: 700; }
.ccw-chat-send:disabled { opacity: 0.45; cursor: not-allowed; }
.ccw-chat-login { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px 12px; color: var(--ccw-chat-muted); font-size: 13px; }
.ccw-chat-login[hidden] { display: none; }
.ccw-chat-login-button { padding: 6px 14px; border: 0; border-radius: 8px; background: #fff; color: #1c2333; font-weight: 700; }

/* Phones: bottom sheet over the lower part of the world; the composer rides on the keyboard. */
@media (max-width: 720px) {
    .ccw-chat-panel, .ccw-chat.is-left .ccw-chat-panel {
        top: auto; left: 0; right: 0;
        bottom: var(--ccw-keyboard-inset, 0px);
        width: 100%; height: min(72dvh, 560px); max-height: calc(100dvh - 64px - var(--ccw-keyboard-inset, 0px));
        border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .ccw-chat-panel::before { content: ""; align-self: center; width: 40px; height: 4px; margin-top: 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
    .ccw-chat.is-open .ccw-chat-launcher { display: none; }
    .ccw-chat-toast { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
}

/* Lecture NPCs use the existing chat shell; API messages remain a separate log. */
body.npc-dialogue-open .ccw-chat.has-npc { display: block; }
.ccw-chat-npc { display: flex; flex: 1; min-height: 0; overflow: auto; }
.ccw-chat-npc[hidden] { display: none; }
.ccw-chat-npc .npc-dialogue.is-chat-embedded {
    position: static; transform: none; width: 100%; min-width: 0; box-sizing: border-box;
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
    min-height: 0; overflow: auto;
}
.ccw-chat-npc .npc-log { flex: 1; min-height: 80px; max-height: none; }
.ccw-chat-npc .npc-actions { flex-shrink: 0; }
/* Keep the video room's fixed search and right-hand course detail unobstructed. */
body.course-space-active .ccw-chat-panel { left: 12px; right: auto; top: 76px; bottom: 16px; width: min(300px, 25vw); }
@media (max-width: 720px) {
    body.course-space-active .ccw-chat-panel { left: 8px; right: 8px; top: auto; width: auto; bottom: calc(8px + var(--ccw-keyboard-inset, 0px)); max-height: 42dvh; }
    .ccw-chat.has-npc .ccw-chat-panel { max-height: 46dvh; }
    .ccw-chat-npc .npc-dialogue { font-size: 13px; padding: 8px; }
    .ccw-chat-npc .npc-portrait { width: 34px; height: 34px; }
}
.ccw-chat-body[hidden] { display: none; }
body.lecture-lounge-active .ccw-chat-panel { top: auto; height: min(440px, 49dvh); }
body.course-space-active .ccw-chat-panel { top: auto; height: min(440px, 46dvh); }
.ccw-chat-npc .npc-head, .ccw-chat-npc .npc-form { flex-shrink: 0; }
@media (max-width: 720px) {
    .ccw-chat-npc .npc-dialogue.is-chat-embedded { gap: 5px; }
    .ccw-chat-npc .npc-log { min-height: 36px; }
    .ccw-chat-npc .npc-actions { max-height: 78px; overflow-y: auto; }
}