/* 消息中心页面样式 */

/* 消息页面需要占满整个content-area */
#messages-page.active {
    height: 100%;
    display: flex !important;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

#messages-page .main-content {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.messages-full-container {
    flex: 1;
    display: flex;
    gap: 20px;
    padding: 20px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* 左侧区域 - 与账户设置页面一致 */
.messages-left {
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
    height: 100%;
    min-height: 0;
}

/* 消息导航按钮 - 与账户设置导航按钮样式一致 */
.messages-nav-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #e8e8e8;
    border-radius: 15px;
    padding: 8px;
    flex: 1;
    min-height: 0;
    position: relative;
    --indicator-top: 0px;
    --indicator-height: 0px;
}

/* 滑动背景指示器 - 垂直方向 */
.messages-nav-buttons::before {
    content: '';
    position: absolute;
    left: 8px;
    top: var(--indicator-top, 8px);
    width: calc(100% - 16px);
    height: var(--indicator-height, 0px);
    background: #3d3d3d;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}

.messages-nav-button {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    transition: color 0.3s ease;
    position: relative;
    z-index: 1;
    text-align: center;
    white-space: nowrap;
}

.messages-nav-button:hover {
    color: #333;
}

.messages-nav-button.active {
    color: white;
    font-weight: 500;
}

/* 右侧消息列表区域 - 与账户设置右侧区域一致 */
.messages-right {
    flex: 1;
    background: white;
    border-radius: 15px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.messages-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* 表格样式 */
.messages-table {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.messages-table-header {
    background: #fafafa;
    flex-shrink: 0;
    border-bottom: 1px solid #d0d0d0;
}

.messages-table-header table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.messages-table-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.messages-table-body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

/* 自定义滚动条样式 */
.messages-table-body::-webkit-scrollbar {
    width: 8px;
}

.messages-table-body::-webkit-scrollbar-track {
    background: transparent;
}

.messages-table-body::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 4px;
}

.messages-table-body::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
}

.messages-table-header th {
    padding: 16px 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #999;
    white-space: nowrap;
}

.messages-table-header th:first-child {
    padding-left: 24px;
    width: 40px;
}

/* 消息列表的列宽 - 6列 */
.messages-table-6col .messages-table-header th:nth-child(1),
.messages-table-6col .messages-item td:nth-child(1) {
    width: 4%;
}

.messages-table-6col .messages-table-header th:nth-child(2),
.messages-table-6col .messages-item td:nth-child(2) {
    width: 10%;
}

.messages-table-6col .messages-table-header th:nth-child(3),
.messages-table-6col .messages-item td:nth-child(3) {
    width: 14%;
}

.messages-table-6col .messages-table-header th:nth-child(4),
.messages-table-6col .messages-item td:nth-child(4) {
    width: 46%;
}

.messages-table-6col .messages-table-header th:nth-child(5),
.messages-table-6col .messages-item td:nth-child(5) {
    width: 18%;
}

.messages-table-6col .messages-table-header th:nth-child(6),
.messages-table-6col .messages-item td:nth-child(6) {
    width: 8%;
}

/* 内容列（第4列）内容靠左显示，但标题居中 */
.messages-table-6col .messages-item td:nth-child(4) {
    text-align: left;
}

/* 使用记录列表的列宽 - 8列 */
.messages-table-8col .messages-table-header th:nth-child(1),
.messages-table-8col .messages-item td:nth-child(1) {
    width: 6%;
}

.messages-table-8col .messages-table-header th:nth-child(2),
.messages-table-8col .messages-item td:nth-child(2) {
    width: 15%;
}

.messages-table-8col .messages-table-header th:nth-child(3),
.messages-table-8col .messages-item td:nth-child(3) {
    width: 18%;
}

.messages-table-8col .messages-table-header th:nth-child(4),
.messages-table-8col .messages-item td:nth-child(4) {
    width: 10%;
}

.messages-table-8col .messages-table-header th:nth-child(5),
.messages-table-8col .messages-item td:nth-child(5) {
    width: 18%;
}

.messages-table-8col .messages-table-header th:nth-child(6),
.messages-table-8col .messages-item td:nth-child(6) {
    width: 12%;
}

.messages-table-8col .messages-table-header th:nth-child(7),
.messages-table-8col .messages-item td:nth-child(7) {
    width: 10%;
}

.messages-table-8col .messages-table-header th:nth-child(8),
.messages-table-8col .messages-item td:nth-child(8) {
    width: 11%;
}

.messages-item {
    cursor: pointer;
    border-bottom: none;
}

.messages-item:hover td {
    background: #fafafa;
}

.messages-item.selected {
    background: transparent;
}

.messages-item.unread td {
    background: #f0f9ff;
}

.messages-item.unread:hover td {
    background: #e3f2fd;
}

.messages-item td {
    padding: 16px 12px;
    font-size: 14px;
    color: #333;
    vertical-align: middle;
    text-align: center;
    transition: background-color 0.2s;
}

/* 所有单元格默认都有圆角，但只在选中时显示背景色 */
.messages-item td:first-child {
    padding-left: 24px;
    width: 40px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

.messages-item td:last-child {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

/* 选中时，单元格显示背景色（优先级最高） */
.messages-item.selected td {
    background: #FFD580 !important;
}

/* 表格中的按钮单元格 */
.messages-item td button {
    margin: 0;
}

/* 复选框样式 */
.messages-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3d3d3d;
    margin: 0;
}

.messages-checkbox:checked {
    accent-color: #3d3d3d;
}

.messages-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 100px;
}

.messages-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

.messages-content {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

.messages-content.expanded {
    white-space: normal;
}

.messages-time {
    font-size: 13px;
    color: #999;
    white-space: nowrap;
}

.messages-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    min-width: 80px;
}

.messages-status.read {
    background: #f0f0f0;
    color: #999;
}

.messages-status.unread {
    background: #e3f2fd;
    color: #1976d2;
}

.messages-type.system {
    background: #e3f2fd;
    color: #1976d2;
}

.messages-type.recharge {
    background: #e8f5e9;
    color: #388e3c;
}

.messages-type.usage {
    background: #fff3e0;
    color: #f57c00;
}

.messages-type.notice {
    background: #fce4ec;
    color: #c2185b;
}

.messages-actions {
    margin-top: 8px;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
}

.messages-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
    min-width: 80px;
}

.messages-btn-primary {
    background: #87CEEB !important;
    color: white !important;
}

.messages-btn-primary:hover {
    background: #6BB6D6 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(135, 206, 235, 0.3);
}

.messages-btn-disabled {
    background: #e0e0e0 !important;
    color: #999 !important;
    cursor: not-allowed !important;
}

.messages-btn:disabled {
    background: #e0e0e0 !important;
    color: #999 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.messages-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    color: #999;
    background: white;
    flex: 1;
    min-height: 0;
}

.messages-empty-state p {
    font-size: 18px;
    margin-bottom: 10px;
}

.messages-empty-state small {
    font-size: 14px;
    color: #bbb;
}

/* 使用记录样式 */
.usage-record-item {
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 15px;
    transition: all 0.3s;
}

.usage-record-item:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-color: #87CEEB;
}

.usage-record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.usage-record-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.usage-record-time {
    font-size: 14px;
    color: #999;
}

.usage-record-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.usage-record-detail {
    font-size: 14px;
    color: #666;
}

.usage-record-detail strong {
    color: #333;
}

.usage-record-download {
    margin-top: 15px;
    text-align: left;
}

.usage-record-download-btn {
    padding: 8px 20px;
    background: #87CEEB;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.usage-record-download-btn:hover {
    background: #6BB6D6;
}

.usage-record-download-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.usage-record-expired {
    color: #999;
    font-size: 14px;
    font-style: italic;
}

/* 响应式设计 - 已迁移至 responsive.css */

/* ==================== 深色模式适配 ==================== */

/* 容器背景 */
body.dark-mode .messages-full-container {
    background: #1a1a1a;
}

body.dark-mode .messages-right {
    background: #2a2a2a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 导航按钮 */
body.dark-mode .messages-nav-buttons {
    background: #333;
}

body.dark-mode .messages-nav-buttons::before {
    background: #555;
}

body.dark-mode .messages-nav-button {
    color: #999;
}

body.dark-mode .messages-nav-button:hover {
    color: #e0e0e0;
}

body.dark-mode .messages-nav-button.active {
    color: white;
}

/* 表格样式 */
body.dark-mode .messages-table-header {
    background: #333;
    border-bottom-color: #444;
}

body.dark-mode .messages-table-header th {
    color: #999;
}

body.dark-mode .messages-item td {
    color: #e0e0e0;
}

body.dark-mode .messages-item:hover td {
    background: #333;
}

body.dark-mode .messages-item.unread td {
    background: #2a3a4a;
}

body.dark-mode .messages-item.unread:hover td {
    background: #3a4a5a;
}

body.dark-mode .messages-item.selected td {
    background: #4a3a1a !important;
}

/* 滚动条 */
body.dark-mode .messages-table-body::-webkit-scrollbar-thumb {
    background: #555;
}

body.dark-mode .messages-table-body::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* 消息内容 */
body.dark-mode .messages-title {
    color: #e0e0e0;
}

body.dark-mode .messages-content {
    color: #999;
}

body.dark-mode .messages-time {
    color: #777;
}

/* 状态标签 */
body.dark-mode .messages-status.read {
    background: #333;
    color: #999;
}

body.dark-mode .messages-status.unread {
    background: #1a3a5a;
    color: #6BB6D6;
}

/* 类型标签 */
body.dark-mode .messages-type.system {
    background: #1a3a5a;
    color: #6BB6D6;
}

body.dark-mode .messages-type.recharge {
    background: #1a3a2a;
    color: #4caf50;
}

body.dark-mode .messages-type.usage {
    background: #3a2a1a;
    color: #ffb74d;
}

body.dark-mode .messages-type.notice {
    background: #3a1a2a;
    color: #f48fb1;
}

/* 空状态 */
body.dark-mode .messages-empty-state {
    background: #2a2a2a;
    color: #999;
}

body.dark-mode .messages-empty-state small {
    color: #666;
}

/* 使用记录 */
body.dark-mode .usage-record-item {
    border-color: #444;
    background: #333;
}

body.dark-mode .usage-record-item:hover {
    border-color: #87CEEB;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode .usage-record-title {
    color: #e0e0e0;
}

body.dark-mode .usage-record-time {
    color: #777;
}

body.dark-mode .usage-record-details {
    border-top-color: #444;
}

body.dark-mode .usage-record-detail {
    color: #999;
}

body.dark-mode .usage-record-detail strong {
    color: #e0e0e0;
}

body.dark-mode .usage-record-download-btn:disabled {
    background: #444;
    color: #666;
}