/* ============================================================
   NOSE 모바일 전용 스타일 (폰)
   - 데스크톱 UI 는 chat.html 인라인 CSS 그대로(회사 표준 유지).
   - 이 파일은 좁은 화면(@media)에서만 오버라이드.
   - 모바일 정책: PPT(슬라이드) 화면은 빼고 → 답변 텍스트 + 영상 중심.
     슬라이드는 발표 무대(PC 큰 스크린)용. 폰은 채팅앱처럼.
   ============================================================ */

@media (max-width: 820px) {

    /* ---------- 헤더: 콤팩트 ---------- */
    header {
        padding: 8px 12px !important;
        flex-wrap: wrap;
        gap: 6px;
    }
    header .brand .logo { font-size: 18px !important; }
    header .brand .subtitle { font-size: 11px !important; }
    header .meta { gap: 6px !important; flex-wrap: wrap; justify-content: flex-end; }
    header #providerBadge,
    header #modelBadge { display: none !important; }
    header #chatToggle { display: none !important; }   /* 채팅은 이미 메인이라 팝업 버튼 불필요 */
    header .lang-select { font-size: 12px !important; padding: 4px 6px !important; }
    header .tts-toggle,
    header .reset {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    /* ---------- PPT(슬라이드) 빼기 ---------- */
    section.slide-pane { display: none !important; }

    /* ---------- 채팅(AI 답변)을 메인 영역으로 상시 표시 ---------- */
    section.chat-pane {
        display: flex !important;
        position: static !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        transform: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #f7f9fc !important;
        z-index: auto !important;
        animation: none !important;
    }
    /* 채팅 팝업 잔재 무효화 */
    body.chat-expanded section.chat-pane {
        position: static !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .chat-drawer-header { display: none !important; }
    #chatBackdrop { display: none !important; }
    #messages { padding: 12px !important; overflow-y: auto !important; }

    /* ---------- 레이아웃: 채팅 메인 / 영상 뜨면 영상 위 + 채팅 아래 ---------- */
    main.split,
    main.split.presenting {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
    }
    section.video-pane { display: none !important; }
    main.split.video-active,
    main.split.presenting.video-active {
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr) !important;   /* 영상 / 답변 */
    }
    main.split.video-active section.video-pane,
    main.split.presenting.video-active section.video-pane {
        display: flex !important;
        padding: 6px !important;
        background: #000 !important;
    }

    /* ---------- 첫 화면(empty state) — 모바일 크기 ---------- */
    .empty { padding: 8vh 16px 24px !important; }
    .empty .hero { font-size: 48px !important; letter-spacing: 4px !important; }
    .empty .tagline { font-size: 16px !important; }
    .empty .mic-prompt { font-size: 12px !important; padding: 8px 16px !important; }
    .empty h2 { font-size: 12px !important; margin: 18px 0 10px !important; }
    .empty .sample { font-size: 12px !important; padding: 8px 12px !important; }
    .avatar-wrap.big { width: 120px !important; height: 150px !important; }

    /* AI 답변 버블 — 폰 가독성 */
    .msg { font-size: 15px !important; line-height: 1.7 !important; }
    .msg .content { font-size: 15px !important; }

    /* ---------- 하단 입력바: 터치 친화 ---------- */
    footer.bottom-bar { padding: 8px !important; }
    .qa-strip { font-size: 11px !important; padding: 4px 8px !important; }
    .qa-strip .qa-q,
    .qa-strip .qa-a { max-width: 38vw; }
    .input-area { gap: 6px !important; }
    #input {
        font-size: 16px !important;   /* iOS 자동 줌 방지 */
        padding: 10px 12px !important;
    }
    .input-area .mic,
    .input-area .send,
    .input-area .stop {
        min-width: 48px;
        min-height: 44px;
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
}

/* 아주 좁은 폰 */
@media (max-width: 480px) {
    .empty .hero { font-size: 40px !important; }
    header .brand .subtitle { display: none !important; }
    .qa-strip .qa-q,
    .qa-strip .qa-a { max-width: 30vw; }
}