/* ==========================================
   1. 核心变量与 Material Design 3 调色板
   ========================================== */
:root {
    --md-sys-color-primary: #0061a4;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #d1e4ff;
    --md-sys-color-on-primary-container: #001d36;
    --md-sys-color-surface: #fdfbff;
    --md-sys-color-surface-variant: #e0e2ec;
    --md-sys-color-on-surface: #1a1c1e;
    --md-sys-color-on-surface-variant: #44474e;
    --md-sys-color-secondary-container: #d1e4ff;
    --md-sys-color-on-secondary-container: #001d36;
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-outline: #74777f;
    
    /* 圆角与阴影规范 */
    --md-sys-radius-small: 8px;
    --md-sys-radius-medium: 12px;
    --md-sys-radius-large: 16px;
    --md-sys-radius-extra-large: 28px;
    --md-sys-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/* ==========================================
   2. 全局基础样式
   ========================================== */
* { 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent; 
}

body {
    margin: 0; 
    padding: 0;
    font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    /* 解决移动端工具栏遮挡的核心：使用 dvh */
    height: 100vh;
    height: 100dvh; 
    overflow: hidden;
}

.app-shell { 
    display: flex; 
    width: 100vw; 
    height: 100%; 
}

/* ==========================================
   3. 侧边导航栏 (PC端布局)
   ========================================== */
.nav-rail {
    width: 80px; 
    background-color: var(--md-sys-color-surface-variant);
    display: flex; 
    flex-direction: column; 
    align-items: center;
    padding: 16px 0; 
    flex-shrink: 0; 
    border-right: 1px solid var(--md-sys-color-outline);
    transition: all 0.3s ease;
}

.nav-rail-top {
    margin-bottom: 32px;
}

/* 浮动操作按钮 FAB */
.fab {
    width: 56px; 
    height: 56px; 
    border-radius: var(--md-sys-radius-large);
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border: none; 
    cursor: pointer; 
    display: flex; 
    align-items: center;
    justify-content: center; 
    box-shadow: var(--md-sys-elevation-1);
    transition: box-shadow 0.2s;
}

.fab:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.nav-destinations { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
    width: 100%; 
}

.nav-item {
    display: flex; 
    flex-direction: column; 
    align-items: center;
    cursor: pointer; 
    width: 100%; 
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
}

.nav-item .material-symbols-rounded {
    padding: 4px 20px; 
    border-radius: 20px; 
    transition: background-color 0.3s, color 0.3s;
}

.nav-item.active .material-symbols-rounded {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.nav-label { 
    font-size: 12px; 
    margin-top: 4px; 
    font-weight: 500; 
}

.nav-bottom { 
    margin-top: auto; 
    padding-bottom: 16px; 
    width: 100%;
}

.logout-item {
    color: var(--md-sys-color-error);
}

/* ==========================================
   4. 主内容区域与 AppBar
   ========================================== */
.content-main { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    min-width: 0; 
    background-color: var(--md-sys-color-surface);
}

.app-bar {
    height: 64px; 
    padding: 0 24px; 
    display: flex; 
    align-items: center;
    justify-content: space-between; 
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
    flex-shrink: 0;
}

.title-group {
    display: flex;
    flex-direction: column;
}

.title-group h1 { 
    font-size: 20px; 
    margin: 0; 
    font-weight: 400; 
}

.status-chip { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 13px; 
    margin-top: 4px; 
}

.status-dot { 
    width: 8px; 
    height: 8px; 
    background-color: #34a853; 
    border-radius: 50%; 
}

/* 顶部操作按钮修复（解决灰色方块） */
.action-icon-btn { 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    padding: 0; 
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; 
    color: var(--md-sys-color-on-surface);
    transition: background-color 0.2s;
}

.action-icon-btn:hover { 
    background-color: rgba(0,0,0,0.08); 
}

.action-icon-btn .material-symbols-rounded {
    font-size: 24px;
}

/* ==========================================
   5. 消息流区域样式 (修复 9c575f 的一言难尽)
   ========================================== */
.message-view {
    flex: 1; 
    overflow-y: auto; 
    padding: 24px; 
    display: flex;
    flex-direction: column; 
    gap: 4px; /* 紧凑排列 */
    -webkit-overflow-scrolling: touch;
}

/* 消息包装器 */
.msg-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    max-width: 75%; /* 宽屏下不铺满 */
    min-width: 80px; /* 防止超短消息缩成点 */
    align-self: flex-start;
}

.msg-wrapper.is-me {
    align-self: flex-end;
    align-items: flex-end;
}

/* 气泡主体 */
.msg-bubble {
    padding: 10px 16px;
    font-size: 15px;
    line-height: 1.5;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    /* MD3 不对称圆角：左侧消息 */
    border-radius: 4px 18px 18px 18px; 
}

.is-me .msg-bubble {
    /* 修复 9c575f：使用明亮的 Primary Container 配色 */
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    /* MD3 不对称圆角：右侧消息 */
    border-radius: 18px 4px 18px 18px;
}

/* 消息元信息（昵称等） */
.sender-info {
    font-size: 11px;
    margin-bottom: 4px;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.7;
}

.is-me .sender-info {
    text-align: right;
}

/* 撤回按钮修复 */
.recall-btn {
    background: none;
    border: none;
    color: var(--md-sys-color-primary);
    font-size: 11px;
    cursor: pointer;
    margin-top: 4px;
    padding: 2px 4px;
    opacity: 0; /* 默认隐藏，交互后显示 */
    transition: opacity 0.2s;
}

.msg-wrapper:hover .recall-btn {
    opacity: 0.8;
}

/* ==========================================
   6. 底部输入区域
   ========================================== */
.input-area { 
    padding: 16px 24px 24px; 
    background-color: var(--md-sys-color-surface);
    flex-shrink: 0;
}

.input-container {
    background-color: var(--md-sys-color-surface-variant);
    border-radius: var(--md-sys-radius-extra-large);
    display: flex; 
    align-items: center; 
    padding: 4px 8px 4px 20px;
}

#chat-input {
    flex: 1; 
    border: none; 
    background: transparent; 
    padding: 12px 0;
    font-size: 16px; 
    outline: none;
    color: var(--md-sys-color-on-surface);
}

.send-button {
    width: 48px; 
    height: 48px; 
    border-radius: 50%;
    background-color: var(--md-sys-color-primary); 
    color: white;
    border: none; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: transform 0.2s;
}

.send-button:active {
    transform: scale(0.9);
}

/* ==========================================
   7. 移动端响应式深度适配 (包含 Edge 修复)
   ========================================== */
@media (max-width: 600px) {
    /* 整体布局转为上下结构 */
    .app-shell {
        flex-direction: column-reverse;
    }

    /* 侧边栏转底部导航栏 */
    .nav-rail {
        width: 100%;
        height: auto;
        flex-direction: row;
        padding: 0;
        border-right: none;
        border-top: 1px solid var(--md-sys-color-outline);
        background-color: var(--md-sys-color-surface);
        /* 核心：避开 Edge 按钮挡住的部分 */
        padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
    }

    .nav-rail-top {
        display: none; /* 移动端 FAB 另行处理或隐藏 */
    }

    .nav-destinations {
        flex-direction: row;
        gap: 0;
    }

    .nav-item {
        flex: 1;
        padding: 8px 0;
    }

    /* 顶部 AppBar 紧凑化 */
    .app-bar {
        padding: 0 16px;
        height: 56px;
    }

    .action-icon-btn {
        width: 48px; /* 增大触点 */
        height: 48px;
    }

    /* 消息区域适配 */
    .message-view {
        padding: 12px;
    }

    .msg-wrapper {
        max-width: 85%; /* 手机端气泡可以更宽 */
    }

    /* 输入栏适配 */
    .input-area {
        padding: 8px 12px 12px;
    }
}

/* ==========================================
   8. 动画与交互
   ========================================== */
.loading-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    opacity: 0.6;
}

#md3-toast {
    position: fixed; 
    bottom: 100px; 
    left: 50%; 
    transform: translateX(-50%);
    background-color: #313033; 
    color: white; 
    padding: 12px 24px;
    border-radius: 4px; 
    font-size: 14px; 
    display: none; 
    z-index: 200;
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

.room-card {
    display: flex; 
    align-items: center; 
    padding: 16px; 
    margin-bottom: 12px;
    background: var(--md-sys-color-surface-variant); 
    border-radius: var(--md-sys-radius-medium); 
    cursor: pointer; 
    transition: background 0.2s;
}

.room-card:hover { 
    background: #e0e2ec; 
}

/* ==========================================
   9. MD3 Dialog 弹窗样式
   ========================================== */
.dialog-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: none; /* 默认隐藏 */
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.md3-dialog {
    background-color: var(--md-sys-color-surface);
    width: 90%;
    max-width: 320px;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: dialog-zoom 0.2s ease-out;
}

@keyframes dialog-zoom {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.dialog-title {
    margin: 0 0 16px 0;
    font-size: 24px;
    font-weight: 400;
    color: var(--md-sys-color-on-surface);
}

.md3-text-field {
    position: relative;
    margin-bottom: 24px;
}

#new-nickname-input {
    width: 100%;
    border: none;
    border-bottom: 2px solid var(--md-sys-color-outline);
    padding: 8px 0;
    font-size: 16px;
    background: transparent;
    outline: none;
    transition: border-color 0.2s;
}

#new-nickname-input:focus {
    border-bottom-color: var(--md-sys-color-primary);
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.text-button {
    background: none;
    border: none;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--md-sys-color-primary);
    cursor: pointer;
    border-radius: 20px;
    transition: background 0.2s;
}

.text-button:hover {
    background-color: rgba(0, 97, 164, 0.08);
}

.primary-text {
    font-weight: 700;
}