/**
 * 聊天消息样式（非侵入式扩展）
 * 用于聊天窗口中的消息显示和好友列表
 */

/* 消息项容器 */
.mdc-chat-drawer__message-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    padding: 0 16px;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 自己的消息 */
.mdc-chat-drawer__message-item--self {
    align-items: flex-end;
}

.mdc-chat-drawer__message-item--self .mdc-chat-drawer__message-content {
    flex-direction: row-reverse;
}

.mdc-chat-drawer__message-item--self .mdc-chat-drawer__message-bubble {
    background: linear-gradient(135deg, #1976d2, #1565c0);
    color: #ffffff;
    border-radius: 12px;
}

/* 对方的消息 */
.mdc-chat-drawer__message-item--other {
    align-items: flex-start;
}

.mdc-chat-drawer__message-item--other .mdc-chat-drawer__message-content {
    flex-direction: row;
}

.mdc-chat-drawer__message-item--other .mdc-chat-drawer__message-bubble {
    background: #f5f5f5;
    color: #333333;
    border-radius: 12px;
}

/* 消息内容容器 */
.mdc-chat-drawer__message-content {
    display: flex;
    align-items: flex-start;
    column-gap: 10px;
    max-width: 70%;
    min-width: 120px;
}

.mdc-chat-drawer__message-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mdc-chat-drawer__message-item--self .mdc-chat-drawer__message-main {
    align-items: flex-end;
}

.mdc-chat-drawer__message-item--other .mdc-chat-drawer__message-main {
    align-items: flex-start;
}

/* 消息头像 */
.mdc-chat-drawer__message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0;
    object-fit: cover;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mdc-chat-drawer__message-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.mdc-chat-drawer__message-avatar .material-symbols-outlined {
    font-size: 24px;
    color: #999999;
}

/* 消息气泡 */
.mdc-chat-drawer__message-bubble {
    padding: 10px 14px;
    box-shadow: none;
    word-wrap: break-word;
    word-break: break-all;
    position: relative;
}

/* 微信风格气泡小尾巴（仅改形状，不改颜色） */
.mdc-chat-drawer__message-item--other .mdc-chat-drawer__message-bubble::before {
    content: '';
    position: absolute;
    top: 12px;
    left: -6px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 7px solid #f5f5f5;
}

.mdc-chat-drawer__message-item--self .mdc-chat-drawer__message-bubble::after {
    content: '';
    position: absolute;
    top: 12px;
    right: -6px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 7px solid #1565c0;
}

/* 消息名称 */
.mdc-chat-drawer__message-name {
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 0;
    font-weight: 500;
}

.mdc-chat-drawer__message-item--self .mdc-chat-drawer__message-name {
    color: #5f6368;
    text-align: right;
}

.mdc-chat-drawer__message-item--other .mdc-chat-drawer__message-name {
    color: #666666;
    text-align: left;
}

/* 消息文本 */
.mdc-chat-drawer__message-text {
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.mdc-chat-drawer__message-text img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 4px 0;
}

.mdc-chat-drawer__message-text a {
    color: inherit;
    text-decoration: underline;
}

.mdc-chat-drawer__message-item--self .mdc-chat-drawer__message-text a {
    color: rgba(255, 255, 255, 0.9);
}

/* 消息时间 */
.mdc-chat-drawer__message-date {
    font-size: 11px;
    color: #999999;
    text-align: center;
    margin: 8px 0;
    padding: 0 16px;
}

/* 已读状态（气泡外） */
.mdc-chat-drawer__message-state {
    font-size: 10px;
    opacity: 0.62;
    margin-top: 0;
    display: inline-block;
    color: #9aa0a6;
}

.mdc-chat-drawer__message-item--self .mdc-chat-drawer__message-state {
    text-align: right;
    align-self: flex-end;
    padding-right: 2px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .mdc-chat-drawer__message-content {
        max-width: 85%;
    }
    
    .mdc-chat-drawer__message-item--self .mdc-chat-drawer__message-bubble {
        max-width: 100%;
    }
    
    .mdc-chat-drawer__message-avatar {
        width: 32px;
        height: 32px;
    }
}

/* 消息列表容器优化 */
.mdc-chat-drawer__chat-list {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    padding: 8px 0;
}

.mdc-chat-drawer__chat-list::-webkit-scrollbar {
    width: 6px;
}

.mdc-chat-drawer__chat-list::-webkit-scrollbar-track {
    background: transparent;
}

.mdc-chat-drawer__chat-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.mdc-chat-drawer__chat-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* 空状态优化 */
.mdc-chat-drawer__chat-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #999999;
    text-align: center;
}

.mdc-chat-drawer__chat-list-empty .material-symbols-outlined {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.mdc-chat-drawer__chat-list-empty p {
    font-size: 14px;
    margin: 0;
}

/* ========== 好友列表样式 ========== */

/* 好友整卡样式 */
.mdc-chat-drawer__friend-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    margin: 4px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.mdc-chat-drawer__friend-item:hover {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

/* 好友头像容器（带在线状态） */
.mdc-chat-drawer__friend-avatar {
    position: relative;
    margin-right: 12px;
}

/* 好友在线状态指示器 */
.mdc-chat-drawer__friend-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.mdc-chat-drawer__friend-status--online {
    background-color: #4caf50;
    animation: pulse 2s infinite;
}

.mdc-chat-drawer__friend-status--away {
    background-color: #ff9800;
}

.mdc-chat-drawer__friend-status--offline {
    background-color: #9e9e9e;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* 好友分组标签 */
.mdc-chat-drawer__friend-group {
    font-size: 11px;
    color: #999999;
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
}

/* ========== 最近会话列表项（Material Design 3） ========== */
.mdc-chat-drawer__session-tile {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 12px;
    min-height: 72px;
    box-sizing: border-box;
    margin: 0 8px 6px;
    padding: 12px 12px;
    border-radius: var(--md-sys-shape-corner-medium, 12px);
    font-family: var(--md-sys-typescale-body-large-font, inherit);
    cursor: pointer;
    outline: none;
    color: var(--md-sys-color-on-surface, #1c1c1c);
    background-color: var(--md-sys-color-surface-container-low, #f7f7f7);
    border: 1px solid transparent;
    box-shadow: var(--md-sys-elevation-level0, none);
    transition:
        background-color 0.2s cubic-bezier(0.2, 0, 0, 1),
        box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1),
        border-color 0.2s cubic-bezier(0.2, 0, 0, 1),
        transform 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.mdc-chat-drawer__session-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--md-sys-color-on-surface, #1c1c1c);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.mdc-chat-drawer__session-tile:hover {
    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px rgba(0, 0, 0, 0.12));
    border-color: var(--md-sys-color-outline-variant, #bdbdbd);
}

.mdc-chat-drawer__session-tile:hover::before {
    opacity: 0.06;
}

.mdc-chat-drawer__session-tile:focus-visible {
    border-color: var(--md-sys-color-primary, #1976d2);
    box-shadow: 0 0 0 2px var(--md-sys-color-primary-container, #d0e4ff);
}

.mdc-chat-drawer__session-tile:active {
    transform: scale(0.99);
}

.mdc-chat-drawer__session-tile:active::before {
    opacity: 0.1;
}

/* 外层：容纳头像圆与右下角未读角标（微信式，角标可略超出圆轮廓） */
.mdc-chat-drawer__session-tile__avatar {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mdc-chat-drawer__session-tile__avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-surface-container-high, #ececec);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.08));
}

.mdc-chat-drawer__session-tile__avatar-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mdc-chat-drawer__session-tile__avatar-icon {
    font-size: 28px !important;
    color: var(--md-sys-color-on-surface-variant, #424242);
    opacity: 0.85;
}

.mdc-chat-drawer__session-tile__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.mdc-chat-drawer__session-tile__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.mdc-chat-drawer__session-tile__title {
    font-size: var(--md-sys-typescale-label-large-size, 14px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    color: var(--md-sys-color-on-surface, #1c1c1c);
}

.mdc-chat-drawer__session-tile__meta {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--md-sys-color-on-surface-variant, #424242);
    opacity: 0.85;
}

.mdc-chat-drawer__session-tile__bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 1.25em;
}

.mdc-chat-drawer__session-tile__preview {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 400;
    color: var(--md-sys-color-on-surface-variant, #424242);
    opacity: 0.92;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 会话列表未读：默认（预留）；头像上使用 --avatar 修饰符 */
.mdc-chat-drawer__session-tile__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    margin-left: auto;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    background: var(--md-sys-color-error, #b00020);
    color: var(--md-sys-color-on-error, #ffffff);
    border: 2px solid var(--md-sys-color-surface, #ffffff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* 微信式：数字角标叠在「会话列表」头像右上角 */
.mdc-chat-drawer__session-tile__badge--avatar {
	position: absolute;
	right: -4px;
	top: -2px;
	bottom: auto;
	margin-left: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	font-size: 10px;
	z-index: 2;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .mdc-chat-drawer__session-tile,
:root.theme-dark .mdc-chat-drawer__session-tile {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--md-sys-color-on-surface, #e8e8e8);
}

[data-theme="dark"] .mdc-chat-drawer__session-tile:hover,
:root.theme-dark .mdc-chat-drawer__session-tile:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .mdc-chat-drawer__session-tile__avatar-inner,
:root.theme-dark .mdc-chat-drawer__session-tile__avatar-inner {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .mdc-chat-drawer__session-tile__meta,
:root.theme-dark .mdc-chat-drawer__session-tile__meta {
    color: rgba(255, 255, 255, 0.65);
}

[data-theme="dark"] .mdc-chat-drawer__session-tile__preview,
:root.theme-dark .mdc-chat-drawer__session-tile__preview {
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .mdc-chat-drawer__session-tile__badge,
:root.theme-dark .mdc-chat-drawer__session-tile__badge {
	border-color: rgba(28, 28, 28, 0.9);
}

/* 抽屉左侧「最近」图标未读总数字 */
.mdc-chat-drawer__sidebar-unread {
	position: absolute;
	top: -4px;
	right: -4px;
	z-index: 2;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	box-sizing: border-box;
	font-size: 9px;
	font-weight: 700;
	line-height: 14px;
	text-align: center;
	border-radius: 8px;
	background: var(--md-sys-color-error, #b00020);
	color: var(--md-sys-color-on-error, #ffffff);
	border: 2px solid var(--md-sys-color-surface-container, #f7f3f9);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	display: none;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.mdc-chat-drawer__sidebar-unread:not(:empty) {
	display: inline-flex;
}

/* 会话列表容器与 MD3 列表内边距协调 */
.mdc-chat-drawer__chat-list:has(.mdc-chat-drawer__session-tile) {
    padding: 10px 4px 12px;
}

/* 好友签名样式 */
.mdc-chat-drawer__chat-item-message {
    color: #999999;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 最近会话：覆盖上一段好友列表用的灰色小字（同 class 名复用） */
.mdc-chat-drawer__session-tile .mdc-chat-drawer__chat-item-message {
    color: var(--md-sys-color-on-surface-variant, #424242);
    font-size: 13px;
    line-height: 1.35;
    opacity: 0.92;
}

/* 好友粉丝数 */
.mdc-chat-drawer__friend-fans {
    font-size: 11px;
    color: #999999;
    margin-left: auto;
}

/* 好友操作按钮容器 */
.mdc-chat-drawer__friend-actions {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

.mdc-chat-drawer__friend-item:hover .mdc-chat-drawer__friend-actions {
    opacity: 1;
}

/* 好友操作按钮 */
.mdc-chat-drawer__friend-action-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mdc-chat-drawer__friend-action-btn:hover {
    background: #e0e0e0;
    transform: scale(1.1);
}

.mdc-chat-drawer__friend-action-btn .material-symbols-outlined {
    font-size: 16px;
    color: #666666;
}

.mdc-chat-drawer__friend-action-btn--danger:hover {
    background: #ffebee;
}

.mdc-chat-drawer__friend-action-btn--danger .material-symbols-outlined {
    color: #d32f2f;
}

/* 好友备注输入框 */
.mdc-chat-drawer__friend-note {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding: 8px;
    background: #f9f9f9;
    border-radius: 8px;
}

.mdc-chat-drawer__friend-note-input {
    flex: 1;
    padding: 6px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
}

.mdc-chat-drawer__friend-note-input:focus {
    border-color: #1976d2;
}

.mdc-chat-drawer__friend-note-save {
    padding: 6px 16px;
    background: #1976d2;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}

.mdc-chat-drawer__friend-note-save:hover {
    background: #1565c0;
}

/* ========== 好友管理标签页样式 ========== */

.mdc-chat-drawer__tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    background: #ffffff;
    padding: 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mdc-chat-drawer__tabs::-webkit-scrollbar {
    height: 4px;
}

.mdc-chat-drawer__tabs::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.mdc-chat-drawer__tab {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: #666666;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
    position: relative;
}

.mdc-chat-drawer__tab:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #1976d2;
}

.mdc-chat-drawer__tab.active {
    color: #1976d2;
    border-bottom-color: #1976d2;
    font-weight: 500;
}

.mdc-chat-drawer__tab .material-symbols-outlined {
    font-size: 18px;
}

.mdc-chat-drawer__tab span:not(.material-symbols-outlined) {
    font-size: 14px;
}

/* 响应式：移动端好友列表 */
@media (max-width: 768px) {
    .mdc-chat-drawer__friend-status {
        width: 10px;
        height: 10px;
        border-width: 1.5px;
    }
    
    .mdc-chat-drawer__friend-group {
        font-size: 10px;
        padding: 1px 4px;
    }
    
    .mdc-chat-drawer__friend-actions {
        opacity: 1; /* 移动端始终显示操作按钮 */
    }
    
    .mdc-chat-drawer__friend-action-btn {
        width: 32px;
        height: 32px;
    }
    
    .mdc-chat-drawer__tab {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .mdc-chat-drawer__tab .material-symbols-outlined {
        font-size: 16px;
    }
    
    .mdc-chat-drawer__tab span:not(.material-symbols-outlined) {
        display: none; /* 移动端只显示图标 */
    }
}

/* ===== 登录表单抽屉（从底部上拉） ===== */

/* 登录表单抽屉遮罩层 */
.mdc-login-drawer-scrim {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mdc-login-drawer-scrim--open {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 登录表单抽屉容器 */
.mdc-login-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 90vh;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    border-radius: 24px 24px 0 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12), 0 -4px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mdc-login-drawer--open {
    transform: translateY(0);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.15), 0 -6px 20px rgba(0, 0, 0, 0.1);
}

/* 登录表单抽屉头部 */
.mdc-login-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    position: relative;
}

.mdc-login-drawer__header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.1) 80%, transparent 100%);
}

.mdc-login-drawer__title {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mdc-login-drawer__title::before {
    content: '';
    width: 4px;
    height: 22px;
    background: linear-gradient(180deg, #1976d2 0%, #1565c0 100%);
    border-radius: 2px;
}

.mdc-login-drawer__close {
    color: #666666;
    background: rgba(0, 0, 0, 0.04);
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: 40px;
    height: 40px;
    position: relative;
    overflow: hidden;
}

.mdc-login-drawer__close::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.mdc-login-drawer__close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #333333;
    transform: scale(1.05);
}

.mdc-login-drawer__close:hover::before {
    width: 100%;
    height: 100%;
}

.mdc-login-drawer__close:active {
    transform: scale(0.95);
}

.mdc-login-drawer__close .material-symbols-outlined {
    font-size: 22px;
    position: relative;
    z-index: 1;
}

/* 登录表单抽屉内容区域 */
.mdc-login-drawer__content {
    flex: 1;
    overflow-y: auto;
    padding: 28px 24px;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
}

/* 登录抽屉提示：7.统一提示框 第三个样式 — 信息提示 .fixed-messages .alert-info */
.mdc-login-drawer__message {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 10px 0;
    padding: 12px 15px 12px 40px;
    border-radius: 4px;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.mdc-login-drawer__message::before {
    display: none;
}

.mdc-login-drawer__message .material-symbols-outlined {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #0c5460;
}

.mdc-login-drawer__message p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    color: #0c5460;
}

/* 登录表单 */
.mdc-login-drawer__form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 登录表单字段：Material Design 3 Outlined 文本字段样式 */
.mdc-login-drawer__field-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 错误位置高亮：标注有误的输入项 */
.mdc-login-drawer__field-wrap--error .mdc-text-field__input {
    border-color: #c62828 !important;
    border-width: 2px;
    box-shadow: 0 0 0 1px rgba(198, 40, 40, 0.3);
}
.mdc-login-drawer__field-wrap--error .mdc-login-drawer__field-label {
    color: #c62828 !important;
}
[data-theme="dark"] .mdc-login-drawer__field-wrap--error .mdc-text-field__input,
:root.theme-dark .mdc-login-drawer__field-wrap--error .mdc-text-field__input {
    border-color: #cf6679 !important;
    box-shadow: 0 0 0 1px rgba(207, 102, 121, 0.4);
}
[data-theme="dark"] .mdc-login-drawer__field-wrap--error .mdc-login-drawer__field-label,
:root.theme-dark .mdc-login-drawer__field-wrap--error .mdc-login-drawer__field-label {
    color: #cf6679 !important;
}

/* 验证码区域错误高亮 */
.mdc-login-drawer__captcha.mdc-login-drawer__field-wrap--error input,
.mdc-login-drawer__captcha.mdc-login-drawer__field-wrap--error .mdc-text-field__input {
    border-color: #c62828 !important;
    border-width: 2px;
    box-shadow: 0 0 0 1px rgba(198, 40, 40, 0.3);
}
[data-theme="dark"] .mdc-login-drawer__captcha.mdc-login-drawer__field-wrap--error input,
:root.theme-dark .mdc-login-drawer__captcha.mdc-login-drawer__field-wrap--error input {
    border-color: #cf6679 !important;
    box-shadow: 0 0 0 1px rgba(207, 102, 121, 0.4);
}

.mdc-login-drawer__field-label {
    font-family: var(--md-sys-typescale-label-large-font, 'Roboto', sans-serif);
    font-size: var(--md-sys-typescale-label-large-size, 14px);
    font-weight: var(--md-sys-typescale-label-large-weight, 500);
    line-height: var(--md-sys-typescale-label-large-line-height, 20px);
    color: var(--md-sys-color-on-surface-variant, #424242);
    margin: 0;
    display: block;
    letter-spacing: 0.1px;
}

.mdc-login-drawer__field {
    width: 100%;
    position: relative;
}

.mdc-login-drawer__field .mdc-text-field {
    width: 100%;
    /* 容器提供外框，input 无内框，避免双层 */
    border: 1px solid var(--md-sys-color-outline, #757575);
    border-radius: var(--md-sys-shape-corner-small, 8px);
    background-color: var(--md-sys-color-surface, #ffffff);
    min-height: 48px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.mdc-login-drawer__field .mdc-text-field:hover {
    border-color: var(--md-sys-color-on-surface, #1c1c1c);
}
.mdc-login-drawer__field .mdc-text-field:focus-within {
    border-color: var(--md-sys-color-primary, #1976d2);
    border-width: 2px;
}

/* MD3 Outlined text field：input 无边框，仅容器有外框 */
.mdc-login-drawer__field .mdc-text-field__input {
    font-family: var(--md-sys-typescale-body-large-font, 'Roboto', sans-serif);
    font-size: var(--md-sys-typescale-body-large-size, 16px);
    font-weight: var(--md-sys-typescale-body-large-weight, 400);
    line-height: var(--md-sys-typescale-body-large-line-height, 24px);
    letter-spacing: 0.15px;
    color: var(--md-sys-color-on-surface, #1c1c1c);
    padding: 14px 16px;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: color 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.mdc-login-drawer__field .mdc-text-field__input:focus {
    outline: none;
}

.mdc-login-drawer__field .mdc-text-field__input::placeholder {
    color: var(--md-sys-color-on-surface-variant, #424242);
    opacity: 0.7;
}

.mdc-login-drawer__field .mdc-text-field__input:disabled {
    background-color: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.04));
    border-color: var(--md-sys-color-outline-variant, #bdbdbd);
    color: var(--md-sys-color-on-surface-variant, #424242);
    opacity: 0.38;
}

/* 验证码区域（MD3 风格） */
.mdc-login-drawer__captcha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    background-color: transparent;
    border: none;
}
/* responsive chip：验证码整体一行 */
.mdc-login-drawer__captcha .mdc-captcha-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
/* 输入框+图标容器（图标在输入框内右侧） */
.mdc-login-drawer__captcha .mdc-captcha-input-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 1;
    min-width: 120px;
    max-width: 160px;
    height: 48px;
    padding: 0 44px 0 16px;
    background-color: var(--md-sys-color-surface-container, #f5f5f5);
    border: 1px solid var(--md-sys-color-outline-variant, #bdbdbd);
    border-radius: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mdc-login-drawer__captcha .mdc-captcha-input-wrap:focus-within {
    border-color: var(--md-sys-color-primary, #1976d2);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}
.mdc-login-drawer__captcha .mdc-captcha-input {
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 15px;
    color: var(--md-sys-color-on-surface, #1c1b1f);
    outline: none;
}
.mdc-login-drawer__captcha .mdc-captcha-input::placeholder {
    color: var(--md-sys-color-on-surface-variant, #49454f);
    opacity: 0.7;
}
/* ✓/✗ 图标在输入框内右侧 */
.mdc-login-drawer__captcha .mdc-captcha-icon,
.mdc-login-drawer__captcha #ccaptcha {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    pointer-events: none;
}
.mdc-login-drawer__captcha .mdc-captcha-icon-img,
.mdc-login-drawer__captcha #ccaptcha img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
}
/* 验证码图片（刷新可点） */
.mdc-login-drawer__captcha .mdc-captcha-img {
    flex-shrink: 0;
    height: 48px;
    border-radius: 8px;
    border: 1px solid var(--md-sys-color-outline-variant, #bdbdbd);
    cursor: pointer;
    object-fit: contain;
    background: var(--md-sys-color-surface-container-high, #ece6f0);
}
.mdc-login-drawer__captcha .mdc-captcha-img:hover {
    border-color: var(--md-sys-color-primary, #1976d2);
}
/* 深色主题 */
[data-theme="dark"] .mdc-login-drawer__captcha .mdc-captcha-input-wrap,
:root.theme-dark .mdc-login-drawer__captcha .mdc-captcha-input-wrap {
    background-color: var(--md-sys-color-surface-container, #2d2d2d);
    border-color: var(--md-sys-color-outline-variant, #444);
}
[data-theme="dark"] .mdc-login-drawer__captcha .mdc-captcha-input,
:root.theme-dark .mdc-login-drawer__captcha .mdc-captcha-input {
    color: var(--md-sys-color-on-surface, #e6e1e5);
}
[data-theme="dark"] .mdc-login-drawer__captcha .mdc-captcha-img,
:root.theme-dark .mdc-login-drawer__captcha .mdc-captcha-img {
    background: var(--md-sys-color-surface-container, #2d2d2d);
    border-color: var(--md-sys-color-outline-variant, #444);
}

/* 登录表单操作按钮 */
.mdc-login-drawer__actions {
    margin-top: 12px;
}

.mdc-login-drawer__submit {
    width: 100%;
    height: 52px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 24px;
}

.mdc-login-drawer__submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.mdc-login-drawer__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(25, 118, 210, 0.4);
}

.mdc-login-drawer__submit:hover::before {
    left: 100%;
}

.mdc-login-drawer__submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}

.mdc-login-drawer__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.mdc-login-drawer__submit .mdc-button__label {
    position: relative;
    z-index: 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    text-align: center !important;
    flex: 1 1 auto !important;
}

/* 登录表单底部链接 */
.mdc-login-drawer__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 14px;
}

.mdc-login-drawer__link {
    color: #1976d2;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.mdc-login-drawer__link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 12px;
    right: 12px;
    height: 2px;
    background: #1976d2;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.mdc-login-drawer__link:hover {
    color: #1565c0;
    background: rgba(25, 118, 210, 0.08);
}

.mdc-login-drawer__link:hover::after {
    transform: scaleX(1);
}

.mdc-login-drawer__separator {
    color: #bdbdbd;
    font-weight: 300;
    user-select: none;
}

/* 登录错误提示（左侧 48px 条，文字需左内边距避免被遮挡） */
.mdc-login-drawer__error {
    padding: 14px 16px 14px 56px;
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #c62828;
    border-radius: 6px;
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(198, 40, 40, 0.1);
    border: 1px solid rgba(198, 40, 40, 0.2);
    position: relative;
    overflow: hidden;
}

.mdc-login-drawer__error::before {
    content: '\26A0';
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 100%;
    background: linear-gradient(180deg, #d32f2f 0%, #c62828 100%);
    border-radius: 6px 0 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

/* 深色主题：完全按 MD3 深色规范，支持多种主题选择器并带 fallback */
[data-theme="dark"] .mdc-login-drawer,
:root.theme-dark .mdc-login-drawer,
body.theme-dark .mdc-login-drawer,
.theme-dark .mdc-login-drawer {
    background: var(--md-sys-color-surface, #121212) !important;
    background-color: var(--md-sys-color-surface, #121212) !important;
    color: var(--md-sys-color-on-surface, #f5f5f5) !important;
    border-top: 1px solid var(--md-sys-color-outline-variant, #6a6a6a);
}

/* 深色：抽屉头部 — 去掉浅色渐变，统一深色表面 */
[data-theme="dark"] .mdc-login-drawer__header,
:root.theme-dark .mdc-login-drawer__header,
body.theme-dark .mdc-login-drawer__header,
.theme-dark .mdc-login-drawer__header {
    background: var(--md-sys-color-surface, #121212) !important;
    background-color: var(--md-sys-color-surface, #121212) !important;
    border-bottom: 1px solid var(--md-sys-color-outline-variant, #6a6a6a) !important;
}

[data-theme="dark"] .mdc-login-drawer__header::after,
:root.theme-dark .mdc-login-drawer__header::after,
body.theme-dark .mdc-login-drawer__header::after,
.theme-dark .mdc-login-drawer__header::after {
    background: linear-gradient(90deg, transparent 0%, var(--md-sys-color-outline-variant, #6a6a6a) 20%, var(--md-sys-color-outline-variant, #6a6a6a) 80%, transparent 100%) !important;
}

[data-theme="dark"] .mdc-login-drawer__title,
:root.theme-dark .mdc-login-drawer__title,
body.theme-dark .mdc-login-drawer__title,
.theme-dark .mdc-login-drawer__title {
    color: var(--md-sys-color-on-surface, #f5f5f5) !important;
}

[data-theme="dark"] .mdc-login-drawer__title::before,
:root.theme-dark .mdc-login-drawer__title::before,
body.theme-dark .mdc-login-drawer__title::before,
.theme-dark .mdc-login-drawer__title::before {
    background: linear-gradient(180deg, #82b1ff 0%, #448aff 100%);
}

[data-theme="dark"] .mdc-login-drawer__close,
:root.theme-dark .mdc-login-drawer__close,
body.theme-dark .mdc-login-drawer__close,
.theme-dark .mdc-login-drawer__close {
    color: var(--md-sys-color-on-surface-variant, #e8e8e8) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .mdc-login-drawer__close:hover,
:root.theme-dark .mdc-login-drawer__close:hover,
body.theme-dark .mdc-login-drawer__close:hover,
.theme-dark .mdc-login-drawer__close:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--md-sys-color-on-surface, #f5f5f5) !important;
}

[data-theme="dark"] .mdc-login-drawer__close::before,
:root.theme-dark .mdc-login-drawer__close::before,
body.theme-dark .mdc-login-drawer__close::before,
.theme-dark .mdc-login-drawer__close::before {
    background: var(--md-sys-color-on-surface, #f5f5f5);
    opacity: 0.08;
}

[data-theme="dark"] .mdc-login-drawer__close .material-symbols-outlined,
:root.theme-dark .mdc-login-drawer__close .material-symbols-outlined,
body.theme-dark .mdc-login-drawer__close .material-symbols-outlined,
.theme-dark .mdc-login-drawer__close .material-symbols-outlined {
    color: inherit !important;
}

[data-theme="dark"] .mdc-login-drawer__content,
:root.theme-dark .mdc-login-drawer__content,
body.theme-dark .mdc-login-drawer__content,
.theme-dark .mdc-login-drawer__content {
    background-color: var(--md-sys-color-surface, #121212) !important;
    color: var(--md-sys-color-on-surface, #f5f5f5) !important;
}

/* MD3 深色：登录抽屉输入框容器 — 边框和背景在容器上 */
[data-theme="dark"] .mdc-login-drawer__field .mdc-text-field,
:root.theme-dark .mdc-login-drawer__field .mdc-text-field,
[data-theme="dark"] #loginDrawer .mdc-login-drawer__field .mdc-text-field,
:root.theme-dark #loginDrawer .mdc-login-drawer__field .mdc-text-field {
    border-color: var(--md-sys-color-outline, #a0a0a0) !important;
    background-color: var(--md-sys-color-surface-container, #1e1e1e) !important;
}
[data-theme="dark"] .mdc-login-drawer__field .mdc-text-field:focus-within,
:root.theme-dark .mdc-login-drawer__field .mdc-text-field:focus-within {
    border-color: var(--md-sys-color-primary) !important;
}

/* MD3 深色：input 无边框，仅文字颜色 */
[data-theme="dark"] #loginDrawer .mdc-text-field__input,
[data-theme="dark"] .mdc-login-drawer .mdc-text-field__input,
:root.theme-dark #loginDrawer .mdc-text-field__input,
:root.theme-dark .mdc-login-drawer .mdc-text-field__input {
    color: var(--md-sys-color-on-surface, #f5f5f5) !important;
    -webkit-text-fill-color: var(--md-sys-color-on-surface, #f5f5f5) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] #loginDrawer .mdc-text-field__input::placeholder,
[data-theme="dark"] .mdc-login-drawer .mdc-text-field__input::placeholder,
:root.theme-dark #loginDrawer .mdc-text-field__input::placeholder,
:root.theme-dark .mdc-login-drawer .mdc-text-field__input::placeholder,
body.theme-dark #loginDrawer .mdc-text-field__input::placeholder,
body.theme-dark .mdc-login-drawer .mdc-text-field__input::placeholder,
.theme-dark #loginDrawer .mdc-text-field__input::placeholder,
.theme-dark .mdc-login-drawer .mdc-text-field__input::placeholder {
    color: var(--md-sys-color-on-surface-variant, #e8e8e8) !important;
    opacity: 0.85 !important;
}

[data-theme="dark"] .mdc-login-drawer__field-label,
:root.theme-dark .mdc-login-drawer__field-label,
body.theme-dark .mdc-login-drawer__field-label,
.theme-dark .mdc-login-drawer__field-label {
    color: var(--md-sys-color-on-surface-variant, #e8e8e8) !important;
}

/* 信息提示框：深色/浅色样式一致，!important 覆盖深色主题继承 */
[data-theme="dark"] .mdc-login-drawer__message,
:root.theme-dark .mdc-login-drawer__message,
body.theme-dark .mdc-login-drawer__message,
.theme-dark .mdc-login-drawer__message {
    background: #d1ecf1 !important;
    color: #0c5460 !important;
    border: 1px solid #bee5eb !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}
[data-theme="dark"] .mdc-login-drawer__message p,
[data-theme="dark"] .mdc-login-drawer__message .material-symbols-outlined,
:root.theme-dark .mdc-login-drawer__message p,
:root.theme-dark .mdc-login-drawer__message .material-symbols-outlined,
body.theme-dark .mdc-login-drawer__message p,
body.theme-dark .mdc-login-drawer__message .material-symbols-outlined,
.theme-dark .mdc-login-drawer__message p,
.theme-dark .mdc-login-drawer__message .material-symbols-outlined {
    color: #0c5460 !important;
}

[data-theme="dark"] .mdc-login-drawer__captcha,
:root.theme-dark .mdc-login-drawer__captcha {
    background-color: var(--md-sys-color-surface-variant);
    border-color: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
}

/* MD3 深色：主按钮 — 蓝色主色（与登录场景一致） */
[data-theme="dark"] .mdc-login-drawer__submit,
:root.theme-dark .mdc-login-drawer__submit {
    background: linear-gradient(135deg, #448aff 0%, #2979ff 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(68, 138, 255, 0.35);
}

[data-theme="dark"] .mdc-login-drawer__submit .mdc-button__label,
:root.theme-dark .mdc-login-drawer__submit .mdc-button__label {
    color: #ffffff !important;
}

[data-theme="dark"] .mdc-login-drawer__submit:hover,
:root.theme-dark .mdc-login-drawer__submit:hover {
    box-shadow: 0 6px 16px rgba(68, 138, 255, 0.45);
    color: #ffffff !important;
}

[data-theme="dark"] .mdc-login-drawer__footer,
:root.theme-dark .mdc-login-drawer__footer {
    border-top-color: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
}

/* MD3 深色：链接使用蓝色主色 */
[data-theme="dark"] .mdc-login-drawer__link,
:root.theme-dark .mdc-login-drawer__link {
    color: #82b1ff;
}

[data-theme="dark"] .mdc-login-drawer__link:hover,
:root.theme-dark .mdc-login-drawer__link:hover {
    color: #b3c7ff;
    background-color: rgba(130, 177, 255, 0.12);
}

[data-theme="dark"] .mdc-login-drawer__link::after,
:root.theme-dark .mdc-login-drawer__link::after {
    background-color: #82b1ff;
}

[data-theme="dark"] .mdc-login-drawer__separator,
:root.theme-dark .mdc-login-drawer__separator {
    color: var(--md-sys-color-outline-variant);
}

/* MD3 深色：错误提示 — 覆盖浅色渐变，与抽屉整体深色一致 */
[data-theme="dark"] .mdc-login-drawer__error,
:root.theme-dark .mdc-login-drawer__error,
body.theme-dark .mdc-login-drawer__error,
.theme-dark .mdc-login-drawer__error {
    background: var(--md-sys-color-error, #cf6679) !important;
    background-color: var(--md-sys-color-error, #cf6679) !important;
    color: var(--md-sys-color-on-error-container, #fdeaea) !important;
    border: 1px solid var(--md-sys-color-outline-variant, #6a6a6a) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .mdc-login-drawer__error::before,
:root.theme-dark .mdc-login-drawer__error::before,
body.theme-dark .mdc-login-drawer__error::before,
.theme-dark .mdc-login-drawer__error::before {
    background: var(--md-sys-color-error-container, #8b0000) !important;
    background-color: var(--md-sys-color-error-container, #8b0000) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mdc-login-drawer__error {
        background: #cf6679 !important;
        background-color: #cf6679 !important;
        color: #fdeaea !important;
        border: 1px solid #6a6a6a !important;
        box-shadow: none !important;
    }
    :root:not([data-theme="light"]) .mdc-login-drawer__error::before {
        background: #8b0000 !important;
        background-color: #8b0000 !important;
    }
}

/* ========== 会员登录页 #dform 深色模式（MD3 规范） ========== */
/* 当使用响应式头部且 data-theme="dark" 时，覆盖默认登录页样式 */
[data-theme="dark"] .m .login-main,
[data-theme="dark"] .login-body,
:root.theme-dark .m .login-main,
:root.theme-dark .login-body {
    background-color: var(--md-sys-color-surface, #121212) !important;
    color: var(--md-sys-color-on-surface, #f5f5f5) !important;
}

[data-theme="dark"] .login-head ul li a,
:root.theme-dark .login-head ul li a {
    color: var(--md-sys-color-on-surface-variant, #e8e8e8) !important;
}

[data-theme="dark"] .login-head ul li.on a,
:root.theme-dark .login-head ul li.on a {
    color: var(--md-sys-color-primary, #82b1ff) !important;
}

/* 会员登录页 #dform 输入框深色：data-theme 或 系统深色 时均为深色背景，避免用户名框仍为白底 */
[data-theme="dark"] #dform .input-user,
[data-theme="dark"] #dform .input-pass,
[data-theme="dark"] #dform .input-mob,
[data-theme="dark"] #dform .input-code,
[data-theme="dark"] #dform input[type="text"],
[data-theme="dark"] #dform input[type="password"],
:root.theme-dark #dform .input-user,
:root.theme-dark #dform .input-pass,
:root.theme-dark #dform .input-mob,
:root.theme-dark #dform .input-code,
:root.theme-dark #dform input[type="text"],
:root.theme-dark #dform input[type="password"] {
    background-color: var(--md-sys-color-surface-container, #1e1e1e) !important;
    background-image: none !important;
    color: var(--md-sys-color-on-surface, #f5f5f5) !important;
    -webkit-text-fill-color: var(--md-sys-color-on-surface, #f5f5f5) !important;
    /* 不设 border：MD3 输入框由容器 .mdc-text-field--outlined 提供外框，input 无内层边框 */
}
/* 系统深色且未强制浅色时，#dform 输入框也使用深色，避免用户名框白底；补全 placeholder/focus */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #dform .input-user,
    :root:not([data-theme="light"]) #dform .input-pass,
    :root:not([data-theme="light"]) #dform .input-mob,
    :root:not([data-theme="light"]) #dform .input-code,
    :root:not([data-theme="light"]) #dform input[type="text"],
    :root:not([data-theme="light"]) #dform input[type="password"] {
        background-color: #1e1e1e !important;
        background-image: none !important;
        color: #f5f5f5 !important;
        -webkit-text-fill-color: #f5f5f5 !important;
        /* 不设 border：MD3 由容器提供外框 */
    }
    :root:not([data-theme="light"]) #dform .input-user::placeholder,
    :root:not([data-theme="light"]) #dform .input-pass::placeholder,
    :root:not([data-theme="light"]) #dform .input-mob::placeholder,
    :root:not([data-theme="light"]) #dform .input-code::placeholder {
        color: #b0b0b0 !important;
        opacity: 0.9 !important;
    }
    :root:not([data-theme="light"]) #dform .input-user:focus,
    :root:not([data-theme="light"]) #dform .input-pass:focus,
    :root:not([data-theme="light"]) #dform .input-mob:focus,
    :root:not([data-theme="light"]) #dform .input-code:focus {
        border-color: #82b1ff !important;
        box-shadow: 0 0 0 1px rgba(130, 177, 255, 0.4) !important;
    }
}

[data-theme="dark"] #dform .input-user::placeholder,
[data-theme="dark"] #dform .input-pass::placeholder,
[data-theme="dark"] #dform .input-mob::placeholder,
[data-theme="dark"] #dform .input-code::placeholder,
:root.theme-dark #dform .input-user::placeholder,
:root.theme-dark #dform .input-pass::placeholder,
:root.theme-dark #dform .input-mob::placeholder,
:root.theme-dark #dform .input-code::placeholder {
    color: var(--md-sys-color-on-surface-variant, #b0b0b0) !important;
    opacity: 0.9 !important;
}

[data-theme="dark"] #dform .input-user:focus,
[data-theme="dark"] #dform .input-pass:focus,
[data-theme="dark"] #dform .input-mob:focus,
[data-theme="dark"] #dform .input-code:focus,
:root.theme-dark #dform .input-user:focus,
:root.theme-dark #dform .input-pass:focus,
:root.theme-dark #dform .input-mob:focus,
:root.theme-dark #dform .input-code:focus {
    border-color: #82b1ff !important;
    box-shadow: 0 0 0 1px rgba(130, 177, 255, 0.4) !important;
}

[data-theme="dark"] #dform .btn-blue.login-btn,
[data-theme="dark"] #dform input.btn-blue[type="submit"],
:root.theme-dark #dform .btn-blue.login-btn,
:root.theme-dark #dform input.btn-blue[type="submit"] {
    background: linear-gradient(135deg, #448aff 0%, #2979ff 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

[data-theme="dark"] .login-body .t_c,
[data-theme="dark"] .login-body .f_gray,
[data-theme="dark"] .login-body .f_gray a.b,
:root.theme-dark .login-body .t_c,
:root.theme-dark .login-body .f_gray,
:root.theme-dark .login-body .f_gray a.b {
    color: var(--md-sys-color-on-surface-variant, #e8e8e8) !important;
}

[data-theme="dark"] .login-body .f_gray a.b:hover,
:root.theme-dark .login-body .f_gray a.b:hover {
    color: #82b1ff !important;
}

[data-theme="dark"] .login-oauth a img,
:root.theme-dark .login-oauth a img {
    opacity: 0.9;
}

/* 新登录页：深色模式下文本与容器色调对齐 MD3 变量 */
[data-theme="dark"] .login-container,
:root.theme-dark .login-container {
    background-color: var(--md-sys-color-surface-container, #1e1e1e) !important;
    color: var(--md-sys-color-on-surface, #f5f5f5) !important;
    box-shadow:
        0 0 40px rgba(0, 188, 212, 0.55),
        0 0 80px rgba(0, 229, 255, 0.45),
        0 16px 32px rgba(0, 0, 0, 0.6);
}

/* 重要文本：标题、标签、激活 tab、社交按钮文字等 */
[data-theme="dark"] .login-header h1,
[data-theme="dark"] .login-header p,
[data-theme="dark"] .login-form-group label,
[data-theme="dark"] .login-tabs .login-tab.active,
[data-theme="dark"] .login-social-btn,
[data-theme="dark"] .login-social-btn span,
:root.theme-dark .login-header h1,
:root.theme-dark .login-header p,
:root.theme-dark .login-form-group label,
:root.theme-dark .login-tabs .login-tab.active,
:root.theme-dark .login-social-btn,
:root.theme-dark .login-social-btn span {
    color: var(--md-sys-color-on-surface, #f5f5f5) !important;
}

/* 次要文本：说明、页脚、分隔线等 */
[data-theme="dark"] .login-tabs .login-tab,
[data-theme="dark"] .login-remember,
[data-theme="dark"] .login-footer,
[data-theme="dark"] .login-footer span,
[data-theme="dark"] .login-divider span,
[data-theme="dark"] .login-user-empty,
[data-theme="dark"] .login-user-domain,
:root.theme-dark .login-tabs .login-tab,
:root.theme-dark .login-remember,
:root.theme-dark .login-footer,
:root.theme-dark .login-footer span,
:root.theme-dark .login-divider span,
:root.theme-dark .login-user-empty,
:root.theme-dark .login-user-domain {
    color: var(--md-sys-color-on-surface-variant, #e8e8e8) !important;
}

/* 页脚链接（立即注册、员工账号）与主色一致 */
[data-theme="dark"] .login-footer a,
:root.theme-dark .login-footer a {
    color: var(--md-sys-color-primary, #80deea) !important;
}
[data-theme="dark"] .login-footer a:hover,
:root.theme-dark .login-footer a:hover {
    color: var(--md-sys-color-primary-hover, #4dd0e1) !important;
}

/* 忘记密码链接与主色一致 */
[data-theme="dark"] .login-forgot,
:root.theme-dark .login-forgot {
    color: var(--md-sys-color-primary, #80deea) !important;
}
[data-theme="dark"] .login-forgot:hover,
:root.theme-dark .login-forgot:hover {
    color: var(--md-sys-color-primary-hover, #4dd0e1) !important;
}

/* 输入框前缀图标采用次要文本色，避免过暗 */
[data-theme="dark"] .login-input-wrapper i,
:root.theme-dark .login-input-wrapper i {
    color: var(--md-sys-color-on-surface-variant, #e8e8e8) !important;
}

/* 仅在手机版显示登录表单抽屉（PC版也可以显示，但样式会调整） */
@media (min-width: 768px) {
    .mdc-login-drawer {
        max-width: 400px;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        border-radius: 16px 16px 0 0;
    }
    
    .mdc-login-drawer--open {
        transform: translateX(-50%) translateY(0);
    }
}

/* 仅清除登录页验证码区域的蓝色卡片样式（保留输入框与验证码图） */
.login-captcha-wrapper.mdc-primary-container-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.login-form-group:has(.login-captcha-wrapper) .login-captcha-hint {
    color: var(--md-sys-color-on-surface-variant, #424242) !important;
}
:root[data-theme="dark"] .login-form-group:has(.login-captcha-wrapper) .login-captcha-hint,
:root.theme-dark .login-form-group:has(.login-captcha-wrapper) .login-captcha-hint {
    color: var(--md-sys-color-on-surface-variant, #e8e8e8) !important;
}

/* 仅清除注册页验证码+验证问题区域的蓝色卡片样式（保留表单项与布局） */
.register-verify-section.mdc-primary-container-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.register-verify-section .register-captcha-label,
.register-verify-section .register-captcha-hint,
.register-verify-section .register-captcha-hint-inline,
.register-verify-section label .reg-verify-icon {
    color: var(--md-sys-color-on-surface-variant, #424242) !important;
}
:root[data-theme="dark"] .register-verify-section .register-captcha-label,
:root.theme-dark .register-verify-section .register-captcha-label,
:root[data-theme="dark"] .register-verify-section .register-captcha-hint,
:root.theme-dark .register-verify-section .register-captcha-hint,
:root[data-theme="dark"] .register-verify-section .register-captcha-hint-inline,
:root.theme-dark .register-verify-section .register-captcha-hint-inline,
:root[data-theme="dark"] .register-verify-section label .reg-verify-icon,
:root.theme-dark .register-verify-section label .reg-verify-icon {
    color: var(--md-sys-color-on-surface-variant, #e8e8e8) !important;
}

/* 注册页选填字段标示 */
.register-optional-tag {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--md-sys-color-on-surface-variant, #757575);
}
:root[data-theme="dark"] .register-optional-tag,
:root.theme-dark .register-optional-tag {
    color: var(--md-sys-color-on-surface-variant, #9e9e9e);
}

/* 注册页错误提示文本高亮（仅在有内容时显示，未输入时不显示提示框） */
#reg-form .mdc-field-error:empty,
#reg-form #dagree:empty,
#reg-form #register-general-error:empty {
    display: none !important;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
}
/* 必填星号（label 内 .mdc-field-error）：仅红色，无框 */
#reg-form label .mdc-field-error {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    font-size: inherit;
    font-weight: inherit;
}
#reg-form .mdc-field-error:not(:empty),
#reg-form #dagree:not(:empty),
#reg-form #register-general-error:not(:empty) {
    display: block;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    /* 浅色模式：与深色同款结构，使用稍浅的红色块背景 */
    border-left: 3px solid #EF5350;
    background: rgba(239, 154, 154, 0.16);
    color: var(--md-sys-color-error, #b3261e);
    font-size: 13px;
    font-weight: 500;
}
/* 错误提示框样式不应用于 label 内的必填星号 */
#reg-form label .mdc-field-error:not(:empty) {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    font-size: inherit;
    font-weight: inherit;
}
:root[data-theme="dark"] #reg-form .mdc-field-error:not(:empty),
:root.theme-dark #reg-form .mdc-field-error:not(:empty),
:root[data-theme="dark"] #reg-form #dagree:not(:empty),
:root.theme-dark #reg-form #dagree:not(:empty),
:root[data-theme="dark"] #reg-form #register-general-error:not(:empty),
:root.theme-dark #reg-form #register-general-error:not(:empty) {
    background: rgba(239, 154, 154, 0.20);
    border-left-color: #EF9A9A;
    color: #FFECEC;
}

/* 登录页错误提示：与注册页一致，仅在有内容时显示高亮框，未输入时不占位 */
#dform .login-field-error:empty {
    display: none !important;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
}
#dform .login-field-error:not(:empty) {
    display: block;
    margin-top: 10px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    border-left: 3px solid var(--md-sys-color-error, #b3261e);
    background: rgba(179, 38, 30, 0.08);
    color: var(--md-sys-color-error, #b3261e);
    font-size: 13px;
    font-weight: 500;
}
/* 验证码区域：提示文字与错误框之间的间距 */
.login-form-group:has(.login-captcha-wrapper) .login-captcha-hint {
    margin-top: 10px;
    margin-bottom: 4px;
}
:root[data-theme="dark"] #dform .login-field-error:not(:empty),
:root.theme-dark #dform .login-field-error:not(:empty) {
    background: rgba(239, 154, 154, 0.20);
    border-left-color: #EF9A9A;
    color: #FFECEC;
}
#login-global-error:empty {
    display: none !important;
}

/* 登录/注册页：错误时输入框容器高亮（红框），与登录页同款，与定位到错误字段配合 */
#dform .mdc-text-field.invalid,
#dform .login-input-wrapper.invalid,
#reg-form .mdc-text-field.invalid,
#reg-form .login-input-wrapper.invalid,
#reg-form .register-captcha-wrapper .mdc-text-field.invalid,
#reg-form .register-question-wrapper .mdc-text-field.invalid {
    border-color: var(--md-sys-color-error, #b3261e) !important;
    background: rgba(179, 38, 30, 0.06) !important;
    box-shadow: 0 0 0 1px rgba(179, 38, 30, 0.3) !important;
}
/* 协议勾选区域高亮（文本 + 选框一起的高亮框）
   只依赖 JS 添加的 .invalid 类，作用于所有注册页 */
.register-agree.invalid label {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    border: 1px solid #EF5350 !important; /* 浅色模式：与提示条同色系的红框 */
    background: rgba(239, 154, 154, 0.10) !important;
}
:root[data-theme="dark"] #dform .mdc-text-field.invalid,
:root.theme-dark #dform .mdc-text-field.invalid,
:root[data-theme="dark"] #dform .login-input-wrapper.invalid,
:root.theme-dark #dform .login-input-wrapper.invalid,
:root[data-theme="dark"] #reg-form .mdc-text-field.invalid,
:root.theme-dark #reg-form .mdc-text-field.invalid,
:root[data-theme="dark"] #reg-form .login-input-wrapper.invalid,
:root.theme-dark #reg-form .login-input-wrapper.invalid,
:root[data-theme="dark"] #reg-form .register-captcha-wrapper .mdc-text-field.invalid,
:root.theme-dark #reg-form .register-captcha-wrapper .mdc-text-field.invalid,
:root[data-theme="dark"] #reg-form .register-question-wrapper .mdc-text-field.invalid,
:root.theme-dark #reg-form .register-question-wrapper .mdc-text-field.invalid {
    border-color: #EF9A9A !important;
    background: rgba(239, 154, 154, 0.12) !important;
    box-shadow: 0 0 0 1px rgba(239, 154, 154, 0.4) !important;
}
:root[data-theme="dark"] .register-agree.invalid label,
:root.theme-dark .register-agree.invalid label {
    border-color: #EF9A9A !important;
    background: rgba(239, 154, 154, 0.20) !important;
    color: #FFECEC !important;
}

/* 注册页密码规则提示（Password requirement indicator） */
#reg-form .register-pwd-requirements {
    margin-top: 8px;
    margin-bottom: 4px;
}
/* 密码项容器：为下拉提供定位基准 */
#reg-form .register-form-group.register-pwd-field-wrap {
    position: relative;
}
/* 下拉形式：仅聚焦密码框时显示，绝对定位浮在顶层，不顶开下方表单项 */
#reg-form .register-pwd-requirements-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    width: max-content;
    max-width: 100%;
    margin-top: 4px;
    margin-bottom: 0;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
    background: var(--md-sys-color-surface-container-low, #f7f2fa);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 100;
}
#reg-form .register-pwd-requirements-dropdown.show {
    display: block;
}
:root[data-theme="dark"] #reg-form .register-pwd-requirements-dropdown,
:root.theme-dark #reg-form .register-pwd-requirements-dropdown {
    border-color: var(--md-sys-color-outline-variant, #49454f);
    background: var(--md-sys-color-surface-container-low, #2b2930);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
#reg-form .register-pwd-requirements-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--md-sys-color-on-surface-variant, #5f5f5f);
}
#reg-form .register-pwd-req {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0;
}
#reg-form .register-pwd-req .req-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    flex-shrink: 0;
    box-sizing: border-box;
}
#reg-form .register-pwd-req.met .req-icon {
    border: none;
    background: var(--md-sys-color-primary, #1976d2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}
#reg-form .register-pwd-req.met {
    color: var(--md-sys-color-primary, #1976d2);
}
:root[data-theme="dark"] #reg-form .register-pwd-req.met,
:root.theme-dark #reg-form .register-pwd-req.met {
    color: var(--md-sys-color-primary, #8ab4f8);
}
:root[data-theme="dark"] #reg-form .register-pwd-req.met .req-icon,
:root.theme-dark #reg-form .register-pwd-req.met .req-icon {
    background-color: var(--md-sys-color-primary, #8ab4f8);
}

/* ==================================================================
 * 移动端：聊天抽屉为「列表/好友」时保留全站底部导航（类微信）
 * body 类由 footer 内 sanxioSyncChatDrawerSiteTabsClass() 切换
 * ================================================================== */
@media (max-width: 767px) {
	body.sanxio-chat-drawer-site-tabs {
		--sanxio-site-bottom-clearance: calc(64px + max(0px, env(safe-area-inset-bottom, 0px)));
	}

	body.sanxio-chat-drawer-site-tabs .mdc-chat-drawer--open {
		height: calc(100vh - var(--sanxio-site-bottom-clearance)) !important;
		max-height: calc(100vh - var(--sanxio-site-bottom-clearance)) !important;
		min-height: min(50vh, calc(100vh - var(--sanxio-site-bottom-clearance) - 80px)) !important;
		bottom: var(--sanxio-site-bottom-clearance) !important;
	}

	body.sanxio-chat-drawer-site-tabs .mdc-chat-drawer-scrim--visible {
		bottom: var(--sanxio-site-bottom-clearance);
	}

	body.sanxio-chat-drawer-site-tabs #bottomNavigation.mdc-bottom-navigation {
		z-index: 1102 !important;
	}
}