/* ═══════════════════════════════════════════════════════════════════
   chat-room.css — 채팅방 신규/추가 스타일 (v=20260430k)
   [STUDY 2026-04-30k] 모바일 바텀 네비 [팀채팅|핀공지] 추가
   [STUDY 2026-04-27o] 채팅 모듈화 — 기본 스타일은 regional-teams.css 유지
   여기서는 신규 기능 스타일(필터색깔/핀공지사이드바/나필터)만 추가
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 임무1: 필터별 색깔 강조 ─── */

/* 팀장 필터 활성: 골드 */
.rt-chat-filter[data-filter-type="leader"].active {
    background: linear-gradient(135deg, #D4AF37 0%, #F0C040 100%) !important;
    color: #3a2a00 !important;
    border-color: transparent !important;
}

/* 나 필터 활성: 밝은 흰색 */
.rt-chat-filter[data-filter-type="me"].active {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%) !important;
    color: #1a1a2e !important;
    border-color: rgba(155,142,132,0.5) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

/* 팀원 드롭다운 select 활성 시 (기본 라벤더핑크 유지) */
.rt-chat-filter[data-filter-type="all"].active {
    background: linear-gradient(135deg, #B8A6E8 0%, #FFC4D1 100%);
    color: #fff;
    border-color: transparent;
}

/* 팀장 메시지: 좌측 끝 골드 바 + 버블 골드 톤 (필터 무관, 팀장 메시지에 항상 적용) */
/* ★ [임무3 2026-04-27q] 말상자 좌측 끝 골드 강조 바 */
.rt-chat-msg.leader-msg {
    border-left: 3px solid #D4AF37;
    padding-left: 8px;
    margin-left: 0 !important;
}
.rt-chat-msg.leader-msg .rt-chat-msg-name {
    color: #B8860B;
    font-weight: 700;
}
.rt-chat-msg.leader-msg .rt-chat-msg-bubble {
    background: linear-gradient(135deg, #FFF4D6 0%, #FFE9A0 100%);
    color: #5a3e00;
    border: 1px solid rgba(212,175,55,0.4);
}

/* ─── 임무2: 핀공지 사이드바 아이템 스타일 ─── */

.rt-chat-sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.rt-sidebar-pin-item {
    background: #fff;
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 8px;
    padding: 8px 10px 8px 10px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.rt-sidebar-pin-sender {
    font-size: 10px;
    font-weight: 700;
    color: #B8956A;
    margin-bottom: 2px;
}

.rt-sidebar-pin-text {
    font-size: 11px;
    color: #3a3028;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.4;
    padding-right: 18px;
}

.rt-sidebar-pin-time {
    font-size: 9px;
    color: #a08670;
    margin-top: 3px;
}

.rt-sidebar-pin-unpin {
    position: absolute;
    top: 6px;
    right: 6px;
    background: none;
    border: none;
    color: #c05540;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.45;
    padding: 0;
    line-height: 1;
    transition: opacity 0.15s;
}

.rt-sidebar-pin-unpin:hover { opacity: 1; }

/* ─── 필터바 "나" 버튼 표시 보장 ─── */
.rt-chat-filter[data-filter="me"] {
    display: inline-flex;
}

/* ─── [임무3 2026-04-27q] 핀공지 3탭 nav ─── */
.rt-pin-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 8px 4px;
    background: var(--sumi-card, #fff);
    border-bottom: 1px solid var(--sumi-border, #e8dfd1);
    flex-shrink: 0;
}

.rt-pin-tab {
    flex: 1;
    padding: 5px 4px;
    font-size: 10px;
    font-weight: 500;
    color: #8a6a3a;
    background: none;
    border: 1px solid var(--sumi-border, #e8dfd1);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rt-pin-tab.active {
    background: linear-gradient(135deg, #D4AF37 0%, #F0C040 100%);
    color: #3a2a00;
    border-color: transparent;
    font-weight: 700;
}

.rt-pin-tab:not(.active):hover {
    background: rgba(212,175,55,0.1);
}

.rt-pin-tab-cnt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.12);
    border-radius: 8px;
    padding: 0 4px;
    min-width: 14px;
    height: 14px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    margin-left: 2px;
}

.rt-pin-tab.active .rt-pin-tab-cnt {
    background: rgba(58,42,0,0.18);
}

.rt-pin-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 8px;
    overflow-y: auto;
    flex: 1;
}

/* ─── [STUDY 2026-04-30k] 모바일 전용 바텀 네비 [팀채팅 | 핀공지] ─── */

/* PC에서는 바텀 네비 숨김 */
.rt-tcm-bottom-nav {
    display: none;
}

/* 모바일(768px 이하)에서만 표시 */
@media (max-width: 768px) {
    /* 모달 패널이 바텀 네비 높이를 확보하도록 */
    .rt-chat-panel {
        padding-bottom: 46px;
        box-sizing: border-box;
    }

    /* 바텀 네비 컨테이너 */
    .rt-tcm-bottom-nav {
        display: flex;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 46px;
        background: #faf8f3;
        border-top: 1px solid rgba(184,166,232,0.25);
        z-index: 10;
        border-radius: 0 0 10px 10px;
        overflow: hidden;
    }

    /* 각 탭 */
    .rt-tcm-bottom-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px 4px 4px;
        transition: background 0.15s;
        position: relative;
    }

    .rt-tcm-bottom-tab::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 12%;
        right: 12%;
        height: 2px;
        border-radius: 2px 2px 0 0;
        background: transparent;
        transition: background 0.2s;
    }

    .rt-tcm-bottom-tab.active::after {
        background: linear-gradient(90deg, #B8A6E8 0%, #FFC4D1 100%);
    }

    .rt-tcm-bottom-tab-icon {
        font-size: 15px;
        line-height: 1;
    }

    .rt-tcm-bottom-tab-label {
        font-size: 10px;
        font-weight: 500;
        color: #9a8a7a;
        transition: color 0.15s, font-weight 0.15s;
    }

    .rt-tcm-bottom-tab.active .rt-tcm-bottom-tab-label {
        color: #7a5fad;
        font-weight: 700;
    }

    .rt-tcm-bottom-tab:not(.active):hover {
        background: rgba(184,166,232,0.08);
    }

    /* rt-chat-panel이 position:relative여야 바텀 네비 absolute 포지션 적용 */
    .rt-chat-panel {
        position: relative;
    }
}