/* ========================================================================== */
/* 基础重置与 Body (Base Reset & Body) */
/* ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* --- FIX: 新增，用于 Firefox 浏览器 --- */
    scrollbar-width: thin;
    scrollbar-color: var(--brand-bg) var(--surface-1-bg);
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    color: var(--text-color);
    font-family: var(--font-family-base), var(--font-family-serif);
    line-height: var(--line-height-base);
    background: var(--surface-1-bg);
}

/* ========================================================================== */
/* 通用布局 (General Layout) */
/* ========================================================================== */
.app-container {
    display: flex;
    width: 100%;
    height: 90vh;
    height: 90dvh;
    max-width: var(--max-app-width);
    max-height: 90dvh;
    overflow: hidden;
    background-color: var(--surface-2-bg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-lg);
    position: relative;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: var(--sidebar-width);
    background-color: var(--panel-bg-color);
    border-inline-end: var(--border-width-standard) solid var(--border-color);
    position: relative;
}

.chat-area {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: var(--chat-bg-color);
}

.details-panel {
    display: none; /* Controlled by JS/LayoutUIManager */
    flex-direction: column;
    flex-shrink: 0;
    width: var(--details-panel-width);
    min-width: var(--details-panel-width);
    background-color: var(--panel-bg-color);
    border-inline-start: var(--border-width-standard) solid var(--border-color);
}


/* ========================================================================== */
/* 可复用组件: 头部 (Reusable Components: Headers) */
/* ========================================================================== */

.sidebar-header,
.chat-header-main,
.details-header {
    display: flex;
    align-items: center;
    height: var(--header-height);
    min-height: var(--header-height);
    padding-inline: var(--spacing-4);
    border-bottom: var(--border-width-standard) solid var(--border-color);
    background: var(--header-bg-color);
}

/* ========================================================================== */
/* 可复用组件: 按钮 (Reusable Components: Buttons) */
/* ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2) var(--spacing-4);
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    margin: var(--spacing-1);
    transition: background-color var(--transition-duration-normal) var(--transition-timing-function-ease-out),
    color var(--transition-duration-normal) var(--transition-timing-function-ease-out),
    box-shadow var(--transition-duration-normal) var(--transition-timing-function-ease-out),
    opacity var(--transition-duration-normal) var(--transition-timing-function-ease-out),
    transform var(--transition-duration-fast) var(--transition-timing-function-ease-out);
}

.btn-primary,
.btn.btn-action-themed {
    background-color: var(--brand-bg);
    color: var(--text-on-brand);
}

.btn-secondary {
    background-color: var(--secondary-btn-bg);
    color: var(--text-on-secondary-btn);
}

.btn-danger {
    background-color: var(--danger-bg);
    color: var(--text-on-danger);
}

.btn-success {
    background-color: var(--success-bg);
    color: var(--text-on-success);
}

.menu-btn,
.back-to-list-btn,
.header-action-btn {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-color-light);
    transition: color var(--transition-duration-normal) var(--transition-timing-function-ease-out),
    background-color var(--transition-duration-normal) var(--transition-timing-function-ease-out);
}

.menu-btn {
    padding: var(--spacing-2);
    margin-inline-end: var(--spacing-2);
    font-size: var(--font-size-icon-lg);
}

.header-action-btn {
    padding: var(--spacing-2);
    font-size: var(--font-size-xxl);
}

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-btn-size);
    height: var(--icon-btn-size);
    margin-inline: 2px;
    padding: var(--spacing-2);
    border: none;
    border-radius: var(--border-radius-circle);
    background: none;
    cursor: pointer;
    color: var(--text-color-light);
    font-size: var(--font-size-icon);
    transition: background-color var(--transition-duration-normal) var(--transition-timing-function-ease-out),
    color var(--transition-duration-normal) var(--transition-timing-function-ease-out);
}

/* ========================================================================== */
/* 可复用组件: 输入控件 (Reusable Components: Inputs) */
/* ========================================================================== */

.search-bar {
    border: var(--border-width-standard) solid var(--border-color);
    border-radius: var(--border-radius-pill);
    background-color: var(--input-bg-color);
    color: var(--text-primary);
    flex-grow: 1;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-duration-normal) var(--transition-timing-function-ease-out),
    box-shadow var(--transition-duration-normal) var(--transition-timing-function-ease-out);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.custom-select {
    position: relative;
    flex-grow: 1;
    min-width: 150px;
    border: var(--border-width-standard) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--surface-2-bg);
    color: var(--text-color);
    font-family: var(--font-family-base), var(--font-family-serif);
    user-select: none;
    transition: border-color var(--transition-duration-normal) ease-out, box-shadow var(--transition-duration-normal) ease-out;
}

.custom-select .selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2) var(--spacing-3);
    cursor: pointer;
}

.custom-select .selected::after {
    margin-inline-start: 5px;
    color: var(--text-color-light);
    content: '▼';
    font-size: 0.8em;
    transition: transform 0.25s ease-in-out;
}

.custom-select.open .selected::after {
    transform: rotate(180deg);
}

.custom-select .options {
    position: absolute;
    z-index: var(--z-index-dropdown);
    inset-block-start: calc(100% + 5px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    display: none;
    max-height: 200px;
    overflow-y: auto;
    border: var(--border-width-standard) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background-color: var(--surface-2-bg);
    box-shadow: var(--box-shadow-md);
}

.custom-select.open .options {
    display: block;
}

.custom-select .option {
    padding: var(--spacing-2) var(--spacing-3);
    cursor: pointer;
    transition: background-color var(--transition-duration-normal) ease-out, color var(--transition-duration-normal) ease-out;
}

.custom-select .option:hover {
    background-color: var(--brand-bg);
    color: var(--text-on-brand);
}

.custom-select .option.active-option {
    background-color: var(--surface-hover-bg);
    font-weight: var(--font-weight-bold);
}

/* ========================================================================== */
/* 可复用组件: 头像 (Reusable Components: Avatars) */
/* ========================================================================== */

.chat-list-avatar,
.chat-avatar-main,
.details-avatar,
.video-call-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--border-radius-circle);
    background-color: var(--primary-color);
    color: var(--text-color-inverted);
    font-weight: var(--font-weight-bold);
    transition: background-color var(--transition-duration-slow) ease-out, color var(--transition-duration-slow) ease-out;
}

.avatar-image {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-circle);
    object-fit: cover;
}

/* ========================================================================== */
/* 模态框与覆盖层 (Modals & Overlays) */
/* ========================================================================== */

.modal-like {
    position: fixed;
    z-index: var(--z-index-modal);
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-5);
    background-color: var(--modal-backdrop-bg);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-duration-slow) ease-in-out, visibility 0s linear var(--transition-duration-slow);
}

.modal-like[style*="display: flex"], .modal-like[style*="display: block"] {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--transition-duration-slow) ease-in-out, visibility 0s linear 0s;
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    padding: var(--spacing-5);
    border-radius: var(--border-radius-md);
    background-color: var(--surface-2-bg);
    box-shadow: 0 5px 15px rgba(var(--black-rgb), 0.3);
    transform: scale(0.95);
    transition: transform var(--transition-duration-slow) ease-out;
}

.modal-like[style*="display: flex"] .modal-content, .modal-like[style*="display: block"] .modal-content {
    transform: scale(1);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: var(--border-width-standard) solid var(--border-color);
}

.modal-header h2 {
    font-size: var(--font-size-xxl);
}

.close-modal-btn {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-color-light);
    font-size: var(--font-size-icon-lg);
    transition: color var(--transition-duration-normal) ease-out;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding-top: 20px;
    margin-top: 20px;
    border-top: var(--border-width-standard) solid var(--border-color);
}

.modal-body .settings-section {
    margin-bottom: var(--spacing-5);
}

.modal-body .settings-section > h3 {
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.modal-body .settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-base);
}

.modal-body .settings-item .setting-control-group {
    display: flex;
    gap: var(--spacing-2);
}

.modal-body .settings-item label {
    flex-shrink: 0;
    font-weight: var(--font-weight-medium);
}

#mainMenuModal .settings-item label {
    width: 110px;
    text-align: end;
}

.modal-body .settings-item input[type="text"], .modal-body .settings-item input[type="password"], .modal-body .settings-item input[type="number"] {
    flex-grow: 1;
    min-width: 0;
}

.modal-body input[type="text"], .modal-body input[type="password"], .modal-body input[type="number"], .modal-body textarea {
    width: 100%;
    padding: var(--spacing-2);
    margin-bottom: 10px;
    border: var(--border-width-standard) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--surface-2-bg);
    color: var(--text-primary);
    transition: border-color var(--transition-duration-normal) ease-out, box-shadow var(--transition-duration-normal) ease-out;
}

.modal-body textarea {
    min-height: 80px;
}

#mainMenuModal .settings-section .collapsible-content .collapsible-content > p {
    margin-bottom: var(--spacing-3);
    font-size: 0.9em;
    color: var(--text-color-light);
    line-height: 1.5;
}

#mainMenuModal .settings-section .collapsible-content .collapsible-content > .manual-connect-step {
    margin-bottom: var(--spacing-3);
}

#mainMenuModal .settings-section .collapsible-content .collapsible-content > .manual-connect-step .btn {
    width: 100%;
    margin-bottom: var(--spacing-2);
}

#mainMenuModal .settings-section .collapsible-content .collapsible-content > .manual-connect-step .btn:last-child {
    margin-bottom: 0;
}

#mainMenuModal .settings-section .collapsible-content .collapsible-content > .manual-connect-step textarea#modalSdpText {
    margin-bottom: var(--spacing-2);
}

.loading-overlay {
    position: fixed;
    z-index: var(--z-index-loading-overlay);
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--chat-bg-color);
    color: var(--text-color-inverted);
    transition: opacity var(--transition-duration-slow) ease-in-out, visibility 0s linear var(--transition-duration-slow);
}

.loading-overlay[style*="display: flex"] {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    border: 5px solid rgba(var(--text-on-brand-rgb), 0.3);
    border-top: 5px solid var(--brand-bg);
    border-radius: var(--border-radius-circle);
    animation: spin var(--animation-duration-spin) linear infinite;
}

.loading-text {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
}

/* ========================================================================== */
/* 视频/语音通话 UI (Video/Audio Call UI) */
/* ========================================================================== */

#callingModal .modal-content, .video-call-request .modal-content {
    text-align: center;
}

#callingModal .video-call-avatar {
    width: var(--avatar-size-xl);
    height: var(--avatar-size-xl);
    font-size: 50px;
}

.video-call-request .video-call-avatar {
    width: var(--avatar-size-lg);
    height: var(--avatar-size-lg);
    font-size: 40px;
}

.video-call-request-buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.video-call-container-main {
    position: fixed;
    z-index: var(--z-index-modal-video);
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--video-call-backdrop-bg);
    transition: border-radius var(--transition-duration-slow) ease-in-out,
    box-shadow var(--transition-duration-slow) ease-in-out,
    border-color var(--transition-duration-slow) ease-in-out;
}

.video-call-container-main .video-streams {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-call-container-main #remoteVideo {
    width: 100%;
    height: 100%;
    background-color: #2c2c2c;
    /* --- MODIFIED: 确保视频内容完整，不裁剪 --- */
    object-fit: contain;
}

.video-call-container-main #localVideo {
    position: absolute;
    z-index: 2;
    inset-block-end: 80px;
    inset-inline-end: 20px;
    width: 120px;
    height: 180px;
    border: 2px solid var(--surface-2-bg);
    border-radius: var(--border-radius-md);
    background-color: #2c2c2c;
    /* --- MODIFIED: 确保视频内容完整，不裁剪 --- */
    object-fit: contain;
    transition: width var(--transition-duration-slow) ease-in-out, height var(--transition-duration-slow) ease-in-out, inset-block-end var(--transition-duration-slow) ease-in-out, inset-inline-end var(--transition-duration-slow) ease-in-out, opacity var(--transition-duration-slow) ease-in-out;
}

.video-call-container-main .video-call-controls {
    position: absolute;
    inset-block-end: 20px;
    display: flex;
    gap: 15px;
    padding: 10px;
    border-radius: 25px;
    background-color: var(--video-call-ui-bg);
    transition: bottom var(--transition-duration-slow) ease-in-out, padding var(--transition-duration-slow) ease-in-out, gap var(--transition-duration-slow) ease-in-out;
}

.video-call-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: var(--border-radius-circle);
    box-shadow: 0 2px 5px rgba(var(--black-rgb), 0.3);
    cursor: pointer;
    font-size: var(--font-size-xxl);
    transition: background-color var(--transition-duration-normal) ease-out, color var(--transition-duration-normal) ease-out, width var(--transition-duration-slow) ease-in-out, height var(--transition-duration-slow) ease-in-out, font-size var(--transition-duration-slow) ease-in-out, transform var(--transition-duration-normal) ease-out;
}

.video-call-button.end-call {
    background: var(--danger-bg);
    color: var(--text-on-danger);
}

.video-call-button.mute-audio, .video-call-button.toggle-camera, .video-call-button.audio-only, .video-call-button.toggle-pip {
    background: var(--surface-2-bg);
    color: var(--text-primary);
}

.call-status-indicator {
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--border-radius-sm);
    font-size: 0.8em;
    color: var(--text-color-inverted);
    margin-left: var(--spacing-2);
    background-color: rgba(var(--black-rgb), 0.2);
    align-self: center;
    transition: background-color var(--transition-duration-slow) ease, color var(--transition-duration-slow) ease;
}

.call-status-indicator.quality-level-0 {
    background-color: var(--audio-quality-level-0-bg);
}

.call-status-indicator.quality-level-1 {
    background-color: var(--audio-quality-level-1-bg);
}

.call-status-indicator.quality-level-2 {
    background-color: var(--audio-quality-level-2-bg);
}

.call-status-indicator.quality-level-3 {
    background-color: var(--audio-quality-level-3-bg);
}

.call-status-indicator.quality-level-4 {
    background-color: var(--audio-quality-level-4-bg);
}

.call-status-indicator.quality-high-range {
    background-color: var(--success-bg);
}

.call-status-indicator.quality-medium-range {
    background-color: var(--info-bg);
}

.call-status-indicator.quality-low-range {
    background-color: var(--warning-bg);
}

/* ========================================================================== */
/* 通知 (Notifications) */
/* ========================================================================== */

.notification-container {
    position: fixed;
    z-index: var(--z-index-notification);
    inset-block-start: 20px;
    inset-inline-end: 20px;
    max-width: 350px;
}

.notification {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: var(--spacing-4);
    border-radius: var(--border-radius-md);
    border-inline-start: 4px solid var(--brand-bg);
    background: var(--surface-2-bg);
    box-shadow: var(--box-shadow-md);
    animation: notification-in var(--transition-duration-slow) ease-out;
    transition: transform var(--transition-duration-slow) ease-in-out, opacity var(--transition-duration-slow) ease-in-out;
}

.notification-icon {
    margin-inline-end: var(--spacing-3);
    font-size: var(--font-size-xl);
}

.notification-message {
    flex: 1;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

.notification-close {
    padding-inline: 5px;
    border: none;
    background: none;
    cursor: pointer;
    color: #999;
    font-size: var(--font-size-xxl);
    transition: color var(--transition-duration-normal) ease-out;
}

.notification-close:hover {
    color: var(--danger-bg);
}

/* ========================================================================== */
/* 小型 UI 组件 (Small UI Components) */
/* ========================================================================== */

.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

.switch input {
    width: 0;
    height: 0;
    opacity: 0;
}

.slider {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background-color: rgb(var(--disabled-rgb));
    cursor: pointer;
    transition: background-color var(--transition-duration-normal) ease-out;
}

.slider::before {
    position: absolute;
    inset-block-end: 3px;
    inset-inline-start: 3px;
    width: 18px;
    height: 18px;
    border-radius: var(--border-radius-circle);
    background-color: rgb(var(--white-rgb));
    content: "";
    transition: transform var(--transition-duration-normal) ease-out;
}

.collapsible-container {
    display: grid;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows var(--transition-duration-slow) ease-in-out;
}

.collapsible-container.active {
    grid-template-rows: auto 1fr;
}

.collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--spacing-2);
    margin-bottom: 10px;
    border-bottom: var(--border-width-standard) solid var(--border-color);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    transition: color var(--transition-duration-normal) ease-out, border-color var(--transition-duration-normal) ease-out;
    grid-row: 1;
    grid-column: 1;
}

.collapsible-header .collapse-icon {
    margin-inline-start: 5px;
    font-size: 0.9em;
    transition: transform 0.25s ease-in-out;
}

.collapsible-content {
    overflow: hidden;
    min-height: 0;
    grid-row: 2;
    grid-column: 1;
}

/* ========================================================================== */
/* 截图编辑器 (Screenshot Editor) */
/* ========================================================================== */

.screenshot-editor-modal {
    background-color: var(--screenshot-editor-backdrop-bg);
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    z-index: var(--z-index-modal-screenshot);
}

.screenshot-editor-toolbar {
    display: flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--screenshot-editor-toolbar-bg);
    color: var(--text-color-inverted);
    flex-shrink: 0;
    border-bottom: var(--border-width-standard) solid #444;
}

.screenshot-tool-btn {
    background: none;
    border: var(--border-width-standard) solid transparent;
    color: var(--text-color-inverted);
    font-size: var(--font-size-xxl);
    padding: var(--spacing-2);
    margin-right: var(--spacing-2);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: background-color var(--transition-duration-normal) ease-out, border-color var(--transition-duration-normal) ease-out, opacity var(--transition-duration-normal) ease-out;
}

.screenshot-tool-btn:hover:not(.active) {
    background-color: rgba(var(--white-rgb), 0.1);
}

.screenshot-tool-btn.active {
    background-color: var(--brand-bg);
    border-color: var(--brand-bg-dark);
}

.screenshot-tool-color-picker {
    width: 30px;
    height: 30px;
    padding: 0;
    border: var(--border-width-standard) solid #555;
    border-radius: var(--border-radius-sm);
    background-color: transparent;
    cursor: pointer;
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-3);
    vertical-align: middle;
}

.screenshot-tool-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.screenshot-tool-color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

.screenshot-tool-color-picker::-moz-color-swatch {
    border: none;
    border-radius: 3px;
}

.toolbar-spacer {
    flex-grow: 1;
}

#confirmScreenshotEditBtn, #cancelScreenshotEditBtn {
    padding: var(--spacing-2) var(--spacing-3);
    margin-left: var(--spacing-2);
}

.screenshot-canvas-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: var(--spacing-3);
}

#screenshotEditorCanvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: crosshair;
    box-shadow: 0 0 10px rgba(var(--black-rgb), 0.5);
}

/* ========================================================================== */
/* 右键菜单 (Context Menu) */
/* ========================================================================== */

.custom-context-menu {
    position: fixed;
    z-index: var(--z-index-context-menu);
    background-color: var(--surface-2-bg);
    border: var(--border-width-standard) solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 10px rgba(var(--black-rgb), 0.2);
    padding: var(--spacing-1) 0;
    min-width: 120px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--transition-duration-fast) ease-out, transform var(--transition-duration-fast) ease-out;
}

.custom-context-menu[style*="display: block"] {
    opacity: 1;
    transform: translateY(0);
}

.context-menu-button {
    display: block;
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    border: none;
    background: none;
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    font-size: var(--font-size-base);
    transition: background-color var(--transition-duration-fast) ease-out, color var(--transition-duration-fast) ease-out;
}

.context-menu-button:hover {
    background-color: var(--surface-hover-bg);
    color: var(--brand-bg);
}

/* ========================================================================== */
/* 杂项 (Miscellaneous) */
/* ========================================================================== */

.wechat-pay {
    max-width: 180px;
    margin: 5px auto 10px auto;
    display: block;
    border: var(--border-width-standard) solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

/* ========================================================================== */
/* 组件状态: 悬停 (Component States: Hover) */
/* ========================================================================== */

.menu-btn:hover, .header-action-btn:hover, .close-modal-btn:hover {
    color: var(--brand-bg);
}

.search-bar:hover {
    border-color: var(--border-color-strong);
}

.icon-btn:hover {
    background-color: var(--surface-hover-bg);
    color: var(--brand-bg);
}

.btn-primary:hover:not(:disabled), .btn.btn-action-themed:hover:not(:disabled) {
    background-color: var(--brand-bg-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(var(--black-rgb), 0.1);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--secondary-btn-dark-bg);
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--danger-bg-dark);
}

.btn-success:hover:not(:disabled) {
    background-color: var(--success-bg-dark);
}

.collapsible-header:hover {
    color: var(--brand-bg);
}

/* ========================================================================== */
/* 组件状态: 聚焦 (Component States: Focus) */
/* ========================================================================== */

.search-bar:focus, .modal-body input[type="text"]:focus, .modal-body input[type="password"]:focus, .modal-body input[type="number"]:focus, .modal-body textarea:focus, select.custom-select-native:focus, .custom-select:focus-within {
    outline: none;
    border-color: var(--brand-bg);
    box-shadow: 0 0 0 var(--border-width-focus) rgba(var(--brand-rgb), 0.2);
}

input:focus + .slider {
    box-shadow: 0 0 0 var(--border-width-focus) rgba(var(--brand-rgb), 0.2);
}

/* ========================================================================== */
/* 组件状态: 激活 (Component States: Active) */
/* ========================================================================== */

.collapsible-header.active {
    border-bottom-color: var(--brand-bg);
    color: var(--brand-bg);
}

.collapsible-header.active .collapse-icon {
    transform: rotate(90deg);
}

.video-call-button.active {
    background: var(--brand-bg);
    color: var(--text-on-brand);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--box-shadow-inset);
}

/* ========================================================================== */
/* 组件状态: 选中 (Component States: Checked) */
/* ========================================================================== */

input:checked + .slider {
    background-color: var(--brand-bg);
}

input:checked + .slider::before {
    transform: translateX(22px);
}

/* ========================================================================== */
/* 组件状态: 禁用 (Component States: Disabled) */
/* ========================================================================== */

.btn:disabled, .header-action-btn:disabled, .icon-btn:disabled, .screenshot-tool-btn:disabled {
    background: var(--disabled-bg) !important;
    box-shadow: none !important;
    color: var(--text-disabled) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

.icon-btn:disabled, .screenshot-tool-btn:disabled {
    background-color: transparent !important;
}

#videoCallButtonMain:disabled, #audioCallButtonMain:disabled, #screenShareButtonMain:disabled {
    display: none !important;
}

/* ========================================================================== */
/* 状态修饰符 (State Modifiers) */
/* ========================================================================== */

.online-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-inline-start: 6px;
    border-radius: var(--border-radius-circle);
    background-color: var(--success-bg);
    box-shadow: 0 0 3px var(--success-bg);
    vertical-align: middle;
}

.notification.notification-success {
    border-left-color: var(--success-bg);
}

.notification.notification-warning {
    border-left-color: var(--warning-bg);
}

.notification.notification-error {
    border-left-color: var(--danger-bg);
}

.notification-hide {
    transform: translateX(400px);
    opacity: 0;
}

.video-call-container-main.audio-only-mode .video-streams {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="%23cccccc"><path d="M12 3c-4.97 0-9 4.03-9 9v7c0 1.1.9 2 2 2h4v-8H5v-1c0-3.87 3.13-7 7-7s7 3.13 7 7v1h-4v8h4c1.1 0 2-.9 2-2v-7c0-4.97-4.03-9-9-9z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-color: #222;
}

.video-call-container-main.audio-only-mode #localVideo, .video-call-container-main.screen-sharing-mode #localVideo {
    opacity: 0;
    pointer-events: none;
}

.video-call-container-main.pip-mode {
    position: fixed;
    z-index: var(--z-index-pip);
    display: flex;
    flex-direction: column;
    width: clamp(240px, 25vw, 360px);
    height: auto;
    overflow: hidden;
    border: 2px solid var(--brand-bg);
    border-radius: var(--border-radius-md);
    background-color: #2c2c2c;
    box-shadow: 0 4px 12px rgba(var(--black-rgb), 0.3);
    cursor: grab;
    aspect-ratio: 16 / 9;
}

.video-call-container-main.pip-mode .video-streams {
    flex-grow: 1;
    min-height: 0;
}

.video-call-container-main.pip-mode #localVideo {
    inset-block-end: var(--spacing-2);
    inset-inline-end: var(--spacing-2);
    display: block !important;
    opacity: 1;
    pointer-events: auto;
    width: 30%;
    height: auto;
    border: 1px solid rgba(var(--text-on-brand-rgb), 0.5);
    border-radius: var(--border-radius-sm);
    aspect-ratio: 16 / 9;
}

.video-call-container-main.pip-mode .video-call-controls {
    position: relative;
    inset-block-end: auto;
    flex-shrink: 0;
    justify-content: space-around;
    gap: 5px;
    padding: 6px;
    border-radius: 0;
    background-color: rgba(var(--black-rgb), 0.6);
}

.video-call-container-main.pip-mode .video-call-controls .video-call-button {
    width: 36px;
    height: 36px;
    margin-inline: 2px;
    font-size: var(--font-size-lg);
}

.modal-like.video-viewer {
    background-color: var(--video-call-backdrop-bg);
}

.modal-close-button.top-right {
    position: absolute;
    top: 10px;
    right: 15px;
    background: rgba(30, 30, 30, 0.7);
    color: rgb(var(--white-rgb));
    border: none;
    border-radius: var(--border-radius-circle);
    width: 35px;
    height: 35px;
    font-size: var(--font-size-xxl);
    line-height: 35px;
    text-align: center;
    cursor: pointer;
    z-index: 1003;
    transition: background-color var(--transition-duration-normal) ease-out;
    font-weight: var(--font-weight-bold);
}

.modal-close-button.top-right:hover {
    background-color: rgba(var(--accent-danger-rgb), 0.8);
}

#theme-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998; /* 介于内容和加载/通知层之间 */
    background-color: var(--surface-2-bg); /* 初始背景色 */
    opacity: 0;
    pointer-events: none; /* 不可交互 */
    transition: opacity 0.25s ease-in-out;
}

#theme-transition-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* ========================================================================== */
/* 动画 (Animations) */
/* ========================================================================== */

@keyframes tts-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.7;
    }
    70% {
        transform: scale(1.6);
        opacity: 0;
    }
    100% {
        transform: scale(0.95);
        opacity: 0;
    }
}

@keyframes notification-in {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes blink-animation {
    50% {
        opacity: 0;
    }
}

@keyframes tab-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================================================== */
/* 模态框内的选项卡 (Tabs inside Modals) */
/* ========================================================================== */

.menu-tabs {
    display: flex;
    border-bottom: var(--border-width-standard) solid var(--border-color);
    margin-bottom: var(--spacing-4);
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

.menu-tab-item {
    padding: var(--spacing-2) var(--spacing-3);
    border: none;
    border-bottom: 3px solid transparent;
    background: none;
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--text-color-light);
    transition: color var(--transition-duration-normal) ease-out, border-color var(--transition-duration-normal) ease-out;
}

.menu-tab-item:hover {
    color: var(--text-color);
}

.menu-tab-item.active {
    color: var(--brand-bg);
    border-bottom-color: var(--brand-bg);
    font-weight: var(--font-weight-semibold);
}

.menu-tab-content {
    display: none;
}

.menu-tab-content.active {
    display: block;
    animation: tab-fade-in var(--transition-duration-slow) ease-out;
}

/* ========================================================================== */
/* 特定元素微调 (Specific Element Tweaks) */
/* ========================================================================== */

#mainMenuModal .modal-content {
    max-height: 95vh;
}

.api-model-input-container {
    flex-grow: 1;
    min-width: 0;
    display: flex;
}

.api-model-input-container > input {
    width: 100%;
    padding: var(--spacing-2);
    border: var(--border-width-standard) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--surface-2-bg);
    color: var(--text-primary);
    transition: border-color var(--transition-duration-normal) ease-out, box-shadow var(--transition-duration-normal) ease-out;
    margin-bottom: 0;
}

.api-model-input-container > input:focus {
    outline: none;
    border-color: var(--brand-bg);
    box-shadow: 0 0 0 var(--border-width-focus) rgba(var(--brand-rgb), 0.2);
}

.call-status-indicators-container {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.video-call-container-main #audioQualityIndicator,
.video-call-container-main #videoQualityIndicator {
    display: none; /* Controlled by JS */
    margin: 0;
}

#newContactGroupModal #newGroupIdInput {
    margin-top: 10px;
}

#openSourceInfoModal .modal-body {
    text-align: left;
}

#openSourceInfoModal img[src$="/contact.png"] {
    max-width: 150px;
    margin: 10px auto;
    display: block;
    border: var(--border-width-standard) solid var(--border-color);
}

#openSourceInfoModal .modal-body p:has(> #openSourceModalTimer) {
    font-size: 0.9em;
    color: var(--text-color-light);
}

.screenshot-editor-toolbar #markColorPicker {
    display: none;
}

/* ========================================================================== */
/* 表情与贴图面板 (Emoji & Sticker Panel) */
/* ========================================================================== */

.emoji-sticker-panel {
    position: absolute;
    bottom: calc(100% - var(--spacing-2));
    left: 0;
    width: 320px;
    max-height: 300px;
    display: none;
    flex-direction: column;
    background-color: var(--surface-2-bg);
    border: var(--border-width-standard) solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-md);
    z-index: var(--z-index-dropdown);
    overflow: hidden;
}

.emoji-sticker-panel .menu-tabs {
    flex-shrink: 0;
}

.emoji-sticker-panel .menu-tab-content {
    display: none;
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--spacing-2);
}

.emoji-sticker-panel .menu-tab-content.active {
    display: flex;
    flex-direction: column;
}

.emoji-grid, .sticker-grid {
    display: grid;
    gap: var(--spacing-1);
}

.emoji-grid {
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
}

.sticker-grid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
}

.emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-1);
    font-size: var(--font-size-icon);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-duration-normal) ease-out;
}

.emoji-item:hover {
    background-color: var(--surface-hover-bg);
}

.sticker-item {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-1);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    background-color: var(--panel-bg-color);
    transition: background-color var(--transition-duration-normal) ease-out, box-shadow var(--transition-duration-normal) ease-out;
}

.sticker-item:hover {
    background-color: var(--surface-hover-bg);
    box-shadow: 0 0 5px rgba(var(--black-rgb), 0.1);
}

.sticker-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
}

#stickerTabContent {
    flex-direction: column;
}

#stickerTabContent .sticker-grid {
    flex-grow: 1;
}

#stickerTabContent #addStickerBtn {
    flex-shrink: 0;
    margin-top: var(--spacing-2);
}

/* ========================================================================== */
/* 记忆书管理模态框 (Memory Book Management Modal) */
/* ========================================================================== */

.memory-set-list-item-modal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2) var(--spacing-3);
    border: var(--border-width-standard) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-2);
    background-color: var(--panel-bg-color);
    transition: background-color var(--transition-duration-normal) ease-out;
}

.memory-set-list-item-modal:hover {
    background-color: var(--surface-hover-bg);
}

.memory-set-name-modal {
    font-weight: var(--font-weight-medium);
    flex-grow: 1;
    margin-right: var(--spacing-3);
}

.memory-set-actions-modal {
    display: flex;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

#memorySetFormContainerModal {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    border: var(--border-width-standard) dashed var(--border-color);
    border-radius: var(--border-radius-md);
    background-color: var(--panel-bg-color);
}

#memorySetFormContainerModal h4 {
    margin-top: 0;
}

#memorySetFormContainerModal input.form-control {
    width: 100%;
    padding: var(--spacing-2);
    margin-bottom: 10px;
    border: var(--border-width-standard) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--surface-2-bg);
    color: var(--text-primary);
    transition: border-color var(--transition-duration-normal) ease-out, box-shadow var(--transition-duration-normal) ease-out;
}

#memorySetFormContainerModal input.form-control:focus {
    outline: none;
    border-color: var(--brand-bg);
    box-shadow: 0 0 0 var(--border-width-focus) rgba(var(--brand-rgb), 0.2);
}

/* ========================================================================== */
/* 滚动条样式 (Scrollbar Styles) - FIX: 全面更新样式 */
/* ========================================================================== */

/* 适用于 Webkit 内核浏览器, 例如 Chrome, Safari, Edge */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background-color: var(--surface-1-bg); /* 使用面板背景色作为轨道颜色 */
}

::-webkit-scrollbar-thumb {
    background-color: var(--brand-bg); /* 使用主题品牌色作为滑块颜色 */
    border-radius: var(--border-radius-pill);
    border: 2px solid var(--surface-1-bg); /* 创建内边距效果，让滑块看起来更精致 */
    transition: background-color var(--transition-duration-fast) ease-out;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-bg-dark); /* 悬停时使用更深的品牌色 */
}

::-webkit-scrollbar-corner {
    background-color: transparent; /* 隐藏右下角的交汇处背景 */
}


/* ========================================================================== */
/* 响应式设计 (Responsive Design) */
/* ========================================================================== */

@media screen and (max-width: 900px) {
    .app-container.show-details .details-panel {
        position: absolute;
        z-index: var(--z-index-details-panel);
        inset-block-start: 0;
        inset-inline-end: 0;
        display: flex;
        height: 100%;
        box-shadow: -2px 0 10px rgba(var(--black-rgb), 0.15);
    }
}

@media screen and (max-width: 768px) {
    .app-container {
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .sidebar-nav {
        width: 100%;
        height: 100%;
        border-inline-end: none;
    }

    .chat-area {
        display: none;
        width: 100%;
        height: 100%;
    }

    .app-container.chat-view-active .sidebar-nav {
        display: none;
    }

    .app-container.chat-view-active .chat-area {
        display: flex;
    }

    .details-panel {
        max-width: 300px;
    }

    .app-container.show-details .details-panel {
        display: flex;
    }

    .video-call-container-main #localVideo {
        width: 90px !important;
        height: 135px !important;
        inset-block-end: 70px !important;
        inset-inline-end: 10px !important;
    }

    .video-call-container-main .video-call-controls {
        gap: 10px !important;
    }

    .video-call-button {
        width: 45px !important;
        height: 45px !important;
        font-size: var(--font-size-xl) !important;
    }

    .screenshot-editor-toolbar {
        padding: var(--spacing-1) var(--spacing-2);
        overflow-x: auto;
    }

    .screenshot-tool-btn {
        font-size: var(--font-size-xl);
        padding: var(--spacing-1);
    }

    .screenshot-tool-color-picker {
        width: 28px;
        height: 28px;
        margin-right: var(--spacing-2);
    }

    #confirmScreenshotEditBtn, #cancelScreenshotEditBtn {
        padding: var(--spacing-1) var(--spacing-2);
        font-size: var(--font-size-sm);
    }

    .screenshot-canvas-container {
        padding: var(--spacing-1);
    }
}