* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #F4F6F9;
    color: #333;
    min-height: 100vh;
}

.token-registration-banner{position:relative;display:flex;align-items:center;width:100%;height:112px;margin:0;overflow:hidden;background:#f7f8ff;border-bottom:1px solid #e6e9ff}.token-registration-banner img{width:100%;height:100%;object-fit:cover;object-position:center}.token-banner-cta{position:absolute;right:5.5%;top:18%;width:14%;height:64%;border:0;background:transparent;cursor:pointer;color:transparent}.token-banner-cta:focus-visible,.token-banner-close:focus-visible{outline:3px solid rgba(73,90,235,.55);outline-offset:3px}.token-banner-close{position:absolute;right:1.2%;top:24%;width:4%;height:54%;border:0;background:transparent;cursor:pointer;color:transparent}
.token-registration-banner[hidden]{display:none !important}

/* 主容器 - 左右布局 */
.container {
    width: 100%;
    height: 100vh;
    background: #F4F6F9;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    margin: 0;
    display: flex;
    flex-direction: row;
}

.container.sidebar-collapsed .sidebar {
    width: 0;
    max-width: 0;
    flex-basis: 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.container.sidebar-collapsed .main-content {
    margin: 6px;
}

.container.sidebar-collapsed .input-center-wrapper,
.container.sidebar-collapsed .input-container,
.container.sidebar-collapsed .result-container,
.container.sidebar-collapsed .result-actions,
.container.sidebar-collapsed .question-display,
.container.sidebar-collapsed .ai-display {
    width: min(1180px, calc(100vw - 96px));
    max-width: min(1180px, calc(100vw - 96px));
}

.container.sidebar-collapsed .result-title,
.container.sidebar-collapsed .result-text {
    max-width: min(1120px, calc(100vw - 140px));
}

/* 弹出窗口模式 */
.popup-mode .container {
    width: 100%;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

/* 左侧边栏 */
.sidebar {
    width: 220px;
    max-width: 220px;
    flex-basis: 220px;
    background: #F4F6F9;
    color: #333;
    display: flex;
    flex-direction: column;
    flex: 0 0 220px;
    position: relative;
    z-index: 1; /* 确保在对话框遮罩层之上 */
    transition: flex-basis 0.28s cubic-bezier(0.22, 1, 0.36, 1), max-width 0.28s cubic-bezier(0.22, 1, 0.36, 1), width 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, padding 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    min-height: 0;
    overflow: visible;
}

/* Logo区域 */
.logo-section {
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
}

.logo-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 20px;
}

.logo-icon {
    width: 80%;
    height: auto;
    max-height: 42px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 12px;
    object-fit: contain;
    content: url('../icons/logo.png');
    /* 默认使用浅色logo */
}

.logo-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 4px;
    color: #333;
}

.logo-subtitle {
    font-size: 12px;
    opacity: 0.7;
    color: #666;
}

/* 快捷操作区域 */
.quick-actions-sidebar {
    flex: 1;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.action-buttons-vertical {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 14px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.sidebar-action-btn[hidden] {
    display: none !important;
}

.help-action-btn,
.announcement-btn {
    display: none !important;
}

.sidebar-history-panel {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #e3e8ef;
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
    gap: 8px;
}

.sidebar-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-history-header h2 {
    margin: 0;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.sidebar-history-search-wrap {
    position: relative;
}

.sidebar-history-search {
    width: 100%;
    height: 32px;
    border: 1px solid #d8e0eb;
    border-radius: 7px;
    padding: 0 10px;
    background: #ffffff;
    color: #24324a;
    font-size: 12px;
    outline: none;
}

.sidebar-history-search:focus {
    border-color: #0f63e6;
    box-shadow: 0 0 0 3px rgba(15, 99, 230, 0.12);
}

.sidebar-history-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: #c9d4e3 transparent;
}

.sidebar-history-list::-webkit-scrollbar {
    width: 6px;
}

.sidebar-history-list::-webkit-scrollbar-thumb {
    background: #c9d4e3;
    border-radius: 999px;
}

.sidebar-history-item {
    position: relative;
    margin-bottom: 7px;
}

.sidebar-history-open {
    width: 100%;
    min-height: 40px;
    padding: 10px 28px 10px 10px;
    border: 1px solid #e3e8ef;
    border-radius: 7px;
    background: #ffffff;
    color: #24324a;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-history-item.is-top .sidebar-history-open {
    border-color: #b8d6c4;
    background: #f7fbf5;
}

.sidebar-history-item.is-active .sidebar-history-open {
    border-color: #4f46e5;
    background: #eef2ff;
    box-shadow: inset 3px 0 0 #4f46e5, 0 4px 12px rgba(79, 70, 229, 0.14);
}

.sidebar-history-item.is-switching .sidebar-history-open {
    cursor: progress;
}

.sidebar-history-item.is-switching .sidebar-history-open::after {
    position: absolute;
    right: 30px;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(79, 70, 229, .2);
    border-top-color: #4f46e5;
    border-radius: 50%;
    content: '';
    animation: bicbot-file-spin .7s linear infinite;
}

.sidebar-history-open:hover {
    border-color: #a9bfdd;
    background: #f8fbff;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.sidebar-history-pin-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 4px;
    padding: 2px 6px;
    border-radius: 5px;
    background: #dff3e5;
    color: #167044;
    font-size: 11px;
    font-weight: 800;
    line-height: 14px;
}

.sidebar-history-question {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-history-question {
    font-size: 12px;
    font-weight: 700;
    color: #1f2a44;
}

.sidebar-history-item.is-running .sidebar-history-open {
    border-color: rgba(79, 111, 212, 0.42);
    background: linear-gradient(135deg, #f8faff 0%, #eef3ff 100%);
    box-shadow: inset 3px 0 0 #4f6fd4, 0 4px 12px rgba(64, 91, 171, 0.09);
}

.sidebar-history-running {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    color: #4562b6;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.sidebar-history-running-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4f6fd4;
    box-shadow: 0 0 0 0 rgba(79, 111, 212, 0.35);
    animation: sidebar-history-running-pulse 1.35s ease-out infinite;
}

@keyframes sidebar-history-running-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(79, 111, 212, 0.38);
    }

    70%,
    100% {
        box-shadow: 0 0 0 6px rgba(79, 111, 212, 0);
    }
}

.profile-center-content .profile-recharge-records-panel {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.profile-recharge-records-refresh {
    align-self: flex-start;
    min-width: 84px;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--qa-brand-500) 24%, var(--qa-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--qa-brand-500) 7%, var(--qa-surface));
    color: var(--qa-brand-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.profile-recharge-records-refresh:not(:disabled):hover {
    border-color: color-mix(in srgb, var(--qa-brand-500) 42%, var(--qa-border));
    background: color-mix(in srgb, var(--qa-brand-500) 12%, var(--qa-surface));
    box-shadow: 0 5px 12px color-mix(in srgb, var(--qa-brand-500) 12%, transparent);
}

.profile-recharge-records-refresh-icon {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-recharge-records-search-btn {
    min-width: 84px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.profile-recharge-records-query-spinner {
    display: none;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
}

.profile-recharge-records-search-btn[aria-busy="true"],
.profile-recharge-records-refresh[aria-busy="true"] {
    cursor: wait;
    opacity: .76;
}

.profile-recharge-records-search-btn[aria-busy="true"] .profile-recharge-records-query-spinner {
    display: inline-block;
    animation: profile-recharge-records-refresh-spin 700ms linear infinite;
}

.profile-recharge-records-refresh[aria-busy="true"] .profile-recharge-records-refresh-icon {
    animation: profile-recharge-records-refresh-spin 700ms linear infinite;
}

@keyframes profile-recharge-records-refresh-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .profile-recharge-records-search-btn[aria-busy="true"] .profile-recharge-records-query-spinner,
    .profile-recharge-records-refresh[aria-busy="true"] .profile-recharge-records-refresh-icon {
        animation: none;
    }
}

.profile-recharge-records-list {
    display: grid;
    gap: 12px;
}

.profile-recharge-record-card {
    overflow: hidden;
    border: 1px solid var(--qa-border);
    border-radius: 16px;
    background: var(--qa-surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.profile-recharge-record-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--qa-border) 76%, transparent);
    background: color-mix(in srgb, var(--qa-brand-500) 4%, var(--qa-surface));
}

.profile-recharge-record-card > header > div,
.profile-recharge-record-grid > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.profile-recharge-record-card span {
    color: var(--qa-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.profile-recharge-record-card time,
.profile-recharge-record-card strong {
    color: var(--qa-text);
    font-size: 12px;
    font-weight: 700;
}

.profile-record-token {
    text-align: right;
}

.profile-record-token strong {
    color: #0f8f5f;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.profile-record-token strong small {
    font-size: 10px;
    font-weight: 700;
}

.profile-recharge-record-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.profile-recharge-record-grid > div {
    padding: 14px 18px;
}

.profile-recharge-record-grid > div:nth-child(odd) {
    border-right: 1px solid color-mix(in srgb, var(--qa-border) 76%, transparent);
}

.profile-recharge-record-grid > div:nth-child(n + 3) {
    border-top: 1px solid color-mix(in srgb, var(--qa-border) 76%, transparent);
}

.profile-recharge-record-grid small {
    color: var(--qa-text-muted);
    font-size: 10px;
}

.profile-recharge-record-grid code {
    color: var(--qa-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.profile-recharge-records-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--qa-border);
    border-radius: 16px;
    background: var(--qa-surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.profile-recharge-records-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    table-layout: fixed;
}

.profile-recharge-records-table th,
.profile-recharge-records-table td {
    padding: 14px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--qa-border) 75%, transparent);
    color: var(--qa-text);
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    vertical-align: middle;
}

.profile-recharge-records-table th {
    background: color-mix(in srgb, var(--qa-brand-500) 4%, var(--qa-surface));
    color: var(--qa-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.profile-recharge-records-table tbody tr:last-child td {
    border-bottom: 0;
}

.profile-recharge-records-table tbody tr {
    transition: background-color 160ms ease;
}

.profile-recharge-records-table tbody tr:hover {
    background: color-mix(in srgb, var(--qa-brand-500) 3%, transparent);
}

.profile-recharge-records-table .is-numeric {
    text-align: right;
}

.profile-recharge-records-table td > small,
.profile-recharge-records-table td > span {
    display: block;
}

.profile-recharge-records-table td > small {
    margin-top: 3px;
    color: var(--qa-text-muted);
    font-size: 10px;
}

.profile-record-main {
    overflow: hidden;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-recharge-token-amount {
    color: #0f8f5f;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.profile-recharge-records-table code,
.profile-record-id {
    color: var(--qa-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.profile-recharge-records-skeleton {
    display: grid;
    gap: 10px;
}

.profile-recharge-records-skeleton .profile-token-skeleton {
    min-height: 64px;
    border-radius: 12px;
}

.profile-recharge-records-empty-icon {
    font-size: 18px;
    font-weight: 800;
}

.profile-recharge-records-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-recharge-records-search {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.profile-recharge-records-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--qa-border);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background: var(--qa-surface);
    color: var(--qa-text);
    outline: none;
}

.profile-recharge-records-search input:focus {
    border-color: var(--qa-brand-500);
    box-shadow: inset 0 0 0 1px var(--qa-brand-500);
}

.profile-recharge-records-search .profile-secondary-btn {
    min-width: 72px;
    border-radius: 0 10px 10px 0;
}

.profile-recharge-records-toolbar > .profile-primary-btn {
    min-width: 76px;
    white-space: nowrap;
}

.profile-recharge-records-list {
    gap: 0;
    overflow: hidden;
    min-height: 104px;
    border: 1px solid var(--qa-border);
    border-radius: 14px;
    background: var(--qa-surface);
}

.profile-recharge-records-list-head,
.profile-recharge-record-row {
    display: grid;
    grid-template-columns: 116px minmax(120px, 1fr) minmax(80px, .65fr) 84px 100px minmax(180px, 1.25fr);
    align-items: center;
    gap: 12px;
}

.profile-recharge-records-list-head {
    min-height: 42px;
    padding: 0 14px;
    border-bottom: 1px solid var(--qa-border);
    background: color-mix(in srgb, var(--qa-brand-500) 4%, var(--qa-surface));
    color: var(--qa-text-muted);
    font-size: 10px;
    font-weight: 700;
}

.profile-recharge-record-row {
    min-height: 68px;
    padding: 10px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--qa-border) 76%, transparent);
    color: var(--qa-text);
    font-size: 11px;
}

.profile-recharge-record-row:last-child {
    border-bottom: 0;
}

.profile-recharge-record-row > * {
    min-width: 0;
}

.profile-recharge-record-row > div {
    display: grid;
    gap: 3px;
}

.profile-recharge-record-row strong,
.profile-recharge-record-row code,
.profile-recharge-record-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-recharge-record-row code {
    color: var(--qa-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10px;
}

.profile-recharge-record-row small {
    color: var(--qa-text-muted);
    font-size: 9px;
}

.profile-order-details {
    align-content: center;
    gap: 6px !important;
}

.profile-order-detail {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.profile-order-detail-label {
    color: var(--qa-text-tertiary);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

.profile-recharge-record-row .profile-order-detail-value {
    display: block;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    line-height: 1.35;
    user-select: text;
}

.profile-recharge-record-row .profile-record-token {
    color: #0f8f5f;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: left;
}

.profile-token-value.is-compact {
    max-width: 100%;
    white-space: nowrap;
}

.profile-token-overview .profile-token-balance-exact {
    display: block;
    width: 100%;
    min-width: 0;
    color: rgba(255, 255, 255, .76);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: clamp(9px, .72vw, 11px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.profile-token-overview .profile-metric-card.is-balance-increasing {
    animation: profile-token-balance-pulse 1100ms cubic-bezier(.2, .8, .2, 1);
}

.profile-token-increase-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 3px 7px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    animation: profile-token-increase-rise 1100ms ease-out both;
    pointer-events: none;
}

.profile-recharge-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    padding: 3px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--qa-brand-500) 7%, transparent);
    color: var(--qa-text-secondary);
    font-size: 11px;
}

.profile-recharge-search-result button {
    border: 0;
    background: transparent;
    color: var(--qa-brand-700);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.profile-order-details {
    cursor: help;
    border-radius: 6px;
}

.profile-order-details:focus-visible {
    outline: 2px solid var(--qa-brand-500);
    outline-offset: 3px;
}

/* Final auth-dialog reference override. This stays last because popup.css has legacy auth rules later in the file. */
@media (min-width: 641px) {
    .bicbot-login-overlay {
        padding: 72px;
        background:
            radial-gradient(ellipse 46% 34% at 8% 10%, rgba(175, 184, 255, .9) 0%, rgba(194, 202, 255, .48) 35%, transparent 74%),
            radial-gradient(ellipse 56% 34% at 92% 90%, rgba(196, 204, 255, .72) 0%, transparent 70%),
            radial-gradient(ellipse 74% 34% at 50% 51%, rgba(255, 255, 255, .93), transparent 72%),
            linear-gradient(145deg, #c6ccff 0%, #edf0ff 45%, #d5dcff 100%);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .bicbot-login-overlay::before,
    .bicbot-login-overlay::after {
        display: none;
    }

    .bicbot-login-dialog {
        width: min(1000px, calc(100vw - 144px));
        height: min(1000px, calc(100dvh - 144px));
        max-height: min(1000px, calc(100dvh - 144px));
        overflow: auto;
        border: 1px solid rgba(255, 255, 255, .88);
        border-radius: 40px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 34px 90px rgba(76, 88, 171, .23), 0 10px 28px rgba(67, 74, 144, .1);
    }

    .bicbot-login-dialog::before {
        bottom: -13px;
        left: -34px;
        width: 278px;
        height: 348px;
        border: 0;
        border-radius: 0;
        background: url("../icons/auth-glass-tower-v1.png") left bottom / contain no-repeat;
        box-shadow: none;
        opacity: .27;
        transform: none;
    }

    .bicbot-login-dialog > .dialog-header {
        min-height: 160px;
        padding: 51px 76px 27px 183px;
    }

    .bicbot-login-dialog > .dialog-header h3 {
        min-height: 70px;
        color: #273861;
        font-size: 39px;
        font-weight: 760;
        letter-spacing: -.04em;
    }

    .bicbot-login-dialog > .dialog-header h3::before {
        top: -2px;
        left: -108px;
        width: 78px;
        height: 78px;
        border-radius: 19px;
        box-shadow: 0 13px 26px rgba(72, 82, 216, .17);
    }

    .bicbot-login-dialog > .dialog-header h3::after {
        bottom: -14px;
        color: #7889b1;
        font-size: 19px;
        letter-spacing: .005em;
    }

    .bicbot-login-dialog > .dialog-header .close-btn {
        top: 56px;
        right: 61px;
        width: 48px;
        min-width: 48px;
        height: 48px;
        color: #53678e;
        font-size: 40px;
    }

    .bicbot-login-form {
        box-sizing: border-box;
        width: min(724px, calc(100% - 250px));
        margin: 0 0 0 20%;
        gap: 52px;
        padding: 35px 0 72px;
    }

    .bicbot-auth-method-tabs {
        gap: 8px;
        padding: 8px;
        border-color: #e1e6f8;
        border-radius: 19px;
        background: #f3f5ff;
    }

    .bicbot-auth-method-tab {
        min-height: 76px;
        border-radius: 13px;
        color: #7789b1;
        font-size: 21px;
        font-weight: 700;
    }

    .bicbot-auth-method-tab.is-active {
        background: linear-gradient(115deg, #535af4 0%, #6756f5 100%);
        box-shadow: 0 10px 20px rgba(79, 75, 231, .23);
    }

    .bicbot-login-field {
        gap: 16px;
        color: #32466f;
        font-size: 22px;
        font-weight: 700;
    }

    .bicbot-login-field input {
        box-sizing: border-box;
        height: 80px;
        border-color: #e3e8f5;
        border-radius: 16px;
        box-shadow: 0 7px 16px rgba(61, 76, 142, .055);
        color: #31436a;
        font-size: 21px;
    }

    .bicbot-login-field input:focus {
        border-color: #9ba7f2;
        box-shadow: 0 0 0 3px rgba(96, 98, 235, .13), 0 7px 16px rgba(61, 76, 142, .06);
    }

    .bicbot-auth-phone-field > input,
    .bicbot-auth-code-field .bicbot-code-row input {
        padding-left: 68px;
        background-color: rgba(255, 255, 255, .92);
        background-repeat: no-repeat;
        background-position: 24px center;
        background-size: 29px 29px;
    }

    .bicbot-auth-phone-field > input {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7096' stroke-width='1.8'%3E%3Crect x='6.5' y='2.8' width='11' height='18.4' rx='1.8'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
    }

    .bicbot-auth-code-field .bicbot-code-row input {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7096' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5c0 4.7-2.9 8.1-7 10-4.1-1.9-7-5.3-7-10V6l7-3Z'/%3E%3Cpath d='m9.2 11.8 1.8 1.8 3.9-4'/%3E%3C/svg%3E");
    }

    .bicbot-code-row {
        grid-template-columns: minmax(0, 1fr) 214px;
        gap: 12px;
    }

    .bicbot-code-btn {
        width: 214px;
        height: 80px;
        border-color: #bec4ff;
        border-radius: 16px;
        color: #4e56e7;
        background: #fafbff;
        font-size: 20px;
        box-shadow: none;
    }

    .bicbot-legal-consent {
        min-height: 30px;
        margin-top: -18px;
        gap: 12px;
        color: #6f81a7;
        font-size: 18px;
        line-height: 27px;
    }

    .bicbot-legal-consent input {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
        margin-top: 0;
    }

    .bicbot-login-assist {
        margin-top: -30px;
        color: #7788ac;
        font-size: 18px;
    }

    .bicbot-login-actions {
        gap: 22px;
        margin-top: -28px;
        padding-top: 0;
    }

    .bicbot-login-actions .bicbot-secondary-btn,
    .bicbot-login-actions .bicbot-primary-btn {
        min-width: 0;
        min-height: 77px;
        border-radius: 15px;
        font-size: 24px;
        font-weight: 720;
    }

    .bicbot-login-actions .bicbot-secondary-btn {
        width: 258px;
    }

    .bicbot-login-actions .bicbot-primary-btn {
        width: 286px;
        box-shadow: 0 12px 22px rgba(76, 73, 230, .25);
    }
}

@keyframes profile-token-balance-pulse {
    0% { transform: scale(1); box-shadow: 0 8px 24px rgba(53, 91, 208, .2); }
    45% { transform: scale(1.018); box-shadow: 0 14px 34px rgba(53, 91, 208, .36); }
    100% { transform: scale(1); }
}

@keyframes profile-token-increase-rise {
    0% { opacity: 0; transform: translateY(8px) scale(.9); }
    24%, 70% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-9px) scale(.96); }
}

/* Foreground contact modal and avatar cleanup overrides. */
.contact-binding-overlay {
    z-index: 14100 !important;
}

.profile-account-hero .profile-account-avatar {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.28), transparent 30%),
        linear-gradient(145deg, #5d7cf0 0%, #4664dc 72%, #344eb9 100%);
    border: 5px solid #eef2ff;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #eef2ff, 0 14px 24px rgba(57, 82, 190, .22);
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    text-shadow: 0 1px 1px rgba(20, 35, 100, .18);
}

.profile-account-hero .profile-account-avatar::after {
    position: absolute;
    width: 9px;
    height: 9px;
    margin: 43px 0 0 43px;
    content: '';
    background: #19bd89;
    border: 3px solid #fff;
    border-radius: 50%;
}

.profile-account-hero {
    grid-template-columns: 64px minmax(0, 1fr) auto;
}

.contact-binding-overlay .contact-binding-dialog {
    position: relative;
    z-index: 1;
}

@media (max-width: 720px) {
    .profile-account-hero {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .profile-account-hero .profile-account-avatar {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }

    .profile-account-hero .profile-account-avatar::after {
        margin: 36px 0 0 36px;
    }
}

/* Final cascade guard: profile redesign rules must win over legacy popup rules. */
.profile-center-dialog .profile-center-container { width:min(1100px,100%) !important; height:min(90vh,780px) !important; max-height:780px !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; border:0 !important; border-radius:18px !important; background:#fff !important; box-shadow:0 12px 32px rgba(16,24,40,.1) !important; }
.profile-center-dialog .profile-center-header { min-height:82px !important; padding:20px 28px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; background:#fff !important; border-bottom:1px solid #f0f1f5 !important; }
.profile-center-layout { min-height:0 !important; display:flex !important; flex:1 1 auto !important; overflow:hidden !important; background:#f6f7f9 !important; }
.profile-center-tabs { width:240px !important; min-width:240px !important; padding:16px 14px !important; display:flex !important; flex-direction:column !important; gap:6px !important; background:#fff !important; border-right:1px solid #f0f1f5 !important; }
.profile-tab-btn { min-height:48px !important; width:100% !important; padding:12px 14px !important; display:flex !important; align-items:center !important; gap:12px !important; color:#5e6278 !important; background:transparent !important; border:0 !important; border-radius:10px !important; font-size:14px !important; font-weight:550 !important; text-align:left !important; }
.profile-tab-btn.active,.profile-tab-btn[aria-selected="true"] { color:#4f6af6 !important; background:#eef2ff !important; }
.profile-tab-glyph,.profile-tab-glyph svg { width:18px !important; height:18px !important; flex:0 0 18px !important; }
.profile-tab-glyph svg { fill:none !important; stroke:currentColor !important; stroke-linecap:round !important; stroke-linejoin:round !important; stroke-width:1.7 !important; }
.profile-center-content { min-width:0 !important; min-height:0 !important; flex:1 1 auto !important; padding:28px 32px !important; overflow-x:hidden !important; overflow-y:auto !important; background:#f6f7f9 !important; }
.profile-token-metrics { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:16px !important; }
.profile-metric-card,.profile-token-section,.profile-purchase-card,.profile-redeem-card,.profile-setting-item,.profile-detail-list,.profile-empty-state { background:#fff !important; border:1px solid #f0f1f5 !important; border-radius:14px !important; box-shadow:0 1px 2px rgba(16,24,40,.04) !important; }
.profile-metric-card { min-height:120px !important; padding:20px !important; }
.profile-metric-card.is-primary { background:linear-gradient(135deg,#4f6af6 0%,#3d57e0 100%) !important; border-color:transparent !important; box-shadow:0 8px 24px rgba(79,106,246,.2) !important; }
.profile-token-section { margin-top:24px !important; padding:24px !important; }
.profile-token-chart { min-height:220px !important; height:220px !important; border-radius:10px !important; background:#fff !important; }
.profile-token-table-wrap,.profile-recharge-records-list { border:1px solid #f0f1f5 !important; border-radius:10px !important; overflow-x:auto !important; }
.profile-token-table th,.profile-recharge-records-list-head { background:#f1f5f9 !important; color:#5e6278 !important; }
.profile-recharge-layout { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:20px !important; }
.profile-account-hero { background:linear-gradient(135deg,#1a1f36 0%,#2d3561 50%,#4f6af6 100%) !important; border-radius:14px !important; }
.profile-status-badge,.profile-setting-badge { color:#1c7a53 !important; background:#ecfdf5 !important; }
.profile-primary-btn { min-height:44px !important; color:#fff !important; background:#4f6af6 !important; border-color:#4f6af6 !important; border-radius:10px !important; }
.profile-secondary-btn { min-height:44px !important; color:#1a1f36 !important; background:#fff !important; border-color:#e6e8ef !important; border-radius:10px !important; }
.profile-danger-btn { min-height:44px !important; color:#ef4444 !important; background:#fef2f2 !important; border-color:#fecaca !important; border-radius:10px !important; }
@media (max-width:900px) { .profile-token-metrics { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } .profile-recharge-layout { grid-template-columns:1fr !important; } }
@media (max-width:768px) {
    .profile-center-dialog { padding:0 !important; align-items:flex-end !important; }
    .profile-center-dialog .profile-center-container { width:100% !important; height:94dvh !important; max-height:94dvh !important; border-radius:20px 20px 0 0 !important; }
    .profile-center-layout { display:block !important; overflow:hidden !important; }
    .profile-center-tabs { width:100% !important; min-width:0 !important; padding:10px 14px !important; flex-direction:row !important; overflow-x:auto !important; overflow-y:hidden !important; border-right:0 !important; border-bottom:1px solid #f0f1f5 !important; }
    .profile-tab-btn { width:auto !important; min-width:max-content !important; min-height:44px !important; padding:10px 12px !important; font-size:13px !important; white-space:nowrap !important; }
    .profile-center-content { height:calc(94dvh - 145px) !important; padding:20px 16px 28px !important; }
    .profile-token-metrics { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .profile-recharge-layout { grid-template-columns:1fr !important; }
    .profile-recharge-records-toolbar,.profile-token-intro,.profile-recharge-records-intro,.profile-recharge-intro { flex-direction:column !important; align-items:stretch !important; }
    .profile-account-hero { grid-template-columns:52px minmax(0,1fr) !important; }
    .profile-account-hero > .profile-status-badge { grid-column:2 !important; justify-self:start !important; }
    .profile-setting-item,.profile-credential-setup { align-items:flex-start !important; grid-template-columns:42px minmax(0,1fr) !important; flex-direction:column !important; }
    .profile-setting-item > button,.profile-credential-setup > button { width:100% !important; }
}
@media (max-width:480px) { .profile-center-content { padding:18px 14px 26px !important; } .profile-token-metrics { grid-template-columns:1fr !important; } .profile-recharge-records-search { min-width:0 !important; flex-direction:column !important; } .profile-recharge-records-search button,.profile-recharge-records-toolbar > .profile-primary-btn { width:100% !important; } .profile-ecode-input-row { flex-direction:column !important; } .profile-ecode-input-row button { width:100% !important; } }

/* Responsive QA pass: keep the composer and auth flows usable on touch screens. */
@media (max-width: 1024px) {
    .sidebar {
        width: 248px;
    }

    .main-content {
        min-width: 0;
    }

    .content-area,
    .result-section,
    .input-center-wrapper {
        min-width: 0;
    }

    .result-text,
    .question-text {
        overflow-wrap: anywhere;
    }

    .result-text pre {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 768px) {
    body {
        min-width: 0;
        overflow-x: hidden;
    }

    .container {
        min-height: 100dvh;
        height: auto;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 40;
        width: min(84vw, 300px);
        height: 100dvh;
        transform: translateX(-102%);
        transition: transform 220ms ease;
        box-shadow: 18px 0 44px rgba(32, 44, 72, 0.16);
    }

    .container:not(.sidebar-collapsed) .sidebar {
        transform: translateX(0);
    }

    .sidebar-backdrop:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 30;
        display: block;
        background: rgba(20, 28, 45, 0.28);
        backdrop-filter: blur(2px);
    }

    .main-content {
        width: 100%;
        min-height: 100dvh;
    }

    .sidebar-toggle-btn {
        top: 16px;
        left: 16px;
        z-index: 45;
        width: 44px;
        height: 44px;
    }

    .selector-row {
        padding: 16px 16px 0 76px;
    }

    .selector-right {
        gap: 8px;
    }

    .language-select,
    .settings-button {
        min-height: 44px;
        max-width: 45vw;
    }

    .input-center-wrapper {
        width: min(100% - 32px, 660px);
        margin: 0 auto;
    }

    .input-header {
        padding-top: 20px;
    }

    .input-container {
        width: 100%;
    }

    .composer-agent-group {
        display: flex;
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .composer-agent-group::-webkit-scrollbar {
        display: none;
    }

    .composer-agent-btn {
        flex: 0 0 auto;
        min-height: 44px;
        white-space: nowrap;
    }

    .question-input {
        min-height: 116px;
        max-height: 32dvh;
        font-size: 16px;
        line-height: 1.6;
    }

    .composer-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
        gap: 10px;
    }

    .composer-toolbar-primary,
    .composer-toolbar-actions {
        min-width: 0;
    }

    .composer-toolbar-primary {
        flex: 1 1 100%;
    }

    .composer-toolbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .composer-tool-btn,
    .composer-send-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .result-section {
        padding: 0 16px;
    }

    .question-display,
    .ai-display,
    .result-text {
        max-width: 100%;
    }

    .question-display,
    .result-text {
        padding: 14px;
    }

    .result-text table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    .result-text img {
        max-width: 100%;
        height: auto;
    }

    .dialog-overlay {
        padding: 16px;
        align-items: center;
    }

    .dialog-container {
        width: min(100%, 560px);
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
    }

    .bicbot-login-dialog {
        width: min(100%, 520px);
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
    }

    .bicbot-code-row {
        align-items: stretch;
    }

    .bicbot-code-row input {
        min-width: 0;
    }

    .bicbot-code-btn,
    .bicbot-login-actions button {
        min-height: 44px;
    }
}

/* History title preview floats outside the scrollable sidebar. */
.sidebar-history-tooltip {
    position: fixed;
    z-index: 1700;
    width: max-content;
    min-width: 216px;
    max-width: min(328px, calc(100vw - 24px));
    padding: 12px;
    color: var(--qa-text-primary, #273550);
    background: var(--qa-bg-surface, #fff);
    border: 1px solid color-mix(in srgb, var(--qa-border-strong, #d6dce8) 76%, #fff);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(28, 39, 65, .13), 0 2px 7px rgba(28, 39, 65, .06);
    pointer-events: none;
    animation: sidebar-history-tooltip-in 150ms cubic-bezier(.2, .8, .2, 1) both;
}

.sidebar-history-tooltip[hidden] { display: none !important; }

.sidebar-history-tooltip::before {
    position: absolute;
    top: 15px;
    width: 10px;
    height: 10px;
    content: '';
    background: var(--qa-bg-surface, #fff);
    border: solid color-mix(in srgb, var(--qa-border-strong, #d6dce8) 76%, #fff);
    transform: rotate(45deg);
}

.sidebar-history-tooltip[data-side="right"]::before {
    left: -5px;
    border-width: 0 0 1px 1px;
}

.sidebar-history-tooltip[data-side="left"]::before {
    right: -5px;
    border-width: 1px 1px 0 0;
}

.sidebar-history-tooltip-title {
    display: block;
    color: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.sidebar-history-tooltip-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 0 0;
    padding: 6px 8px;
    color: var(--qa-text-tertiary, #8994aa);
    background: color-mix(in srgb, var(--qa-bg-muted, #f5f7fa) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--qa-border, #e5e9f2) 72%, transparent);
    border-radius: 8px;
    font-size: 11px;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
}

.sidebar-history-tooltip-label { white-space: nowrap; }

.sidebar-history-tooltip-time {
    color: var(--qa-brand-700, #4548d8);
    font-weight: 650;
    white-space: nowrap;
}

@keyframes sidebar-history-tooltip-in {
    from { opacity: 0; transform: translateY(3px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (hover: none) {
    .sidebar-history-tooltip { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-history-tooltip { animation: none; }
}

/* Personal center redesign: aligned with personal-center-redesign.html. */
:root {
    --profile-bg-page: #f6f7f9;
    --profile-bg-card: #ffffff;
    --profile-bg-hover: #f8f9fb;
    --profile-bg-secondary: #f1f5f9;
    --profile-accent: #4f6af6;
    --profile-accent-hover: #3d57e0;
    --profile-accent-light: #eef2ff;
    --profile-border: #e6e8ef;
    --profile-border-light: #f0f1f5;
    --profile-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
    --profile-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.06);
    --profile-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.1);
    --profile-radius-sm: 6px;
    --profile-radius-md: 10px;
    --profile-radius-lg: 14px;
    --profile-radius-xl: 18px;
}

.profile-center-dialog {
    padding: 24px;
    background: rgba(26, 31, 54, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.profile-center-dialog .profile-center-container {
    width: min(1100px, 100%);
    height: min(90vh, 780px);
    max-height: 780px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--profile-bg-card);
    border: 0;
    border-radius: var(--profile-radius-xl);
    box-shadow: var(--profile-shadow-lg);
}

.profile-center-dialog .profile-center-header {
    min-height: 82px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--profile-bg-card);
    border-bottom: 1px solid var(--profile-border-light);
}

.profile-center-eyebrow,
.profile-panel-kicker {
    margin: 0 0 2px;
    color: var(--profile-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 16px;
    text-transform: uppercase;
}

.profile-center-dialog .profile-center-header h3 {
    margin: 0;
    color: #1a1f36;
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 28px;
}

.profile-center-dialog .profile-center-header .close-btn {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border: 1px solid var(--profile-border);
    border-radius: var(--profile-radius-md);
    color: #5e6278;
    background: var(--profile-bg-card);
}

.profile-center-dialog .profile-center-header .close-btn:hover,
.profile-center-dialog .profile-center-header .close-btn:focus-visible {
    color: #1a1f36;
    background: var(--profile-bg-hover);
    border-color: #8e92a4;
}

.profile-center-layout {
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
    background: var(--profile-bg-page);
}

.profile-center-tabs {
    width: 240px;
    min-width: 240px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    background: var(--profile-bg-card);
    border-right: 1px solid var(--profile-border-light);
}

.profile-tab-btn {
    min-height: 48px;
    width: 100%;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #5e6278;
    background: transparent;
    border: 0;
    border-radius: var(--profile-radius-md);
    font-size: 14px;
    font-weight: 550;
    line-height: 20px;
    text-align: left;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

.profile-tab-btn:hover {
    color: #1a1f36;
    background: var(--profile-bg-hover);
}

.profile-tab-btn:focus-visible {
    outline: 3px solid rgba(79, 106, 246, .22);
    outline-offset: 2px;
}

.profile-tab-btn.active,
.profile-tab-btn[aria-selected="true"] {
    color: var(--profile-accent);
    background: var(--profile-accent-light);
}

.profile-tab-btn:active {
    transform: scale(.985);
}

.profile-tab-glyph {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-grid;
    place-items: center;
}

.profile-tab-glyph svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.profile-center-content {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    padding: 28px 32px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--profile-bg-page);
}

.profile-center-content > [hidden] {
    display: none !important;
}

.profile-center-content > section {
    animation: profile-tab-enter .22s ease-out both;
}

@keyframes profile-tab-enter {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.profile-token-intro,
.profile-recharge-records-intro,
.profile-recharge-intro {
    min-width: 0;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.profile-token-intro h3,
.profile-recharge-records-intro h3,
.profile-recharge-intro h3 {
    margin: 2px 0 6px;
    color: #1a1f36;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 30px;
}

.profile-token-intro p,
.profile-recharge-records-intro p,
.profile-recharge-intro p,
.profile-section-heading p {
    max-width: 680px;
    margin: 0;
    color: #5e6278;
    font-size: 14px;
    line-height: 21px;
}

.profile-token-metrics {
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.profile-metric-card {
    min-width: 0;
    min-height: 120px;
    padding: 20px;
    overflow: hidden;
    background: var(--profile-bg-card);
    border: 1px solid var(--profile-border-light);
    border-radius: var(--profile-radius-lg);
    box-shadow: var(--profile-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.profile-metric-card:hover {
    box-shadow: var(--profile-shadow-md);
    transform: translateY(-2px);
}

.profile-metric-card > span:first-child,
.profile-metric-card > small {
    color: #5e6278;
    font-size: 13px;
    line-height: 18px;
}

.profile-metric-card > strong {
    display: block;
    margin: 9px 0 4px;
    color: #1a1f36;
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -.04em;
    line-height: 31px;
}

.profile-metric-card.is-primary {
    color: #fff;
    background: linear-gradient(135deg, #4f6af6 0%, #3d57e0 100%);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(79, 106, 246, .2);
}

.profile-metric-card.is-primary > span:first-child,
.profile-metric-card.is-primary > small,
.profile-metric-card.is-primary > strong {
    color: #fff;
}

.profile-metric-card.is-primary > strong {
    font-size: 30px;
}

.profile-token-balance-exact {
    display: block;
    color: rgba(255, 255, 255, .66) !important;
    font-size: 11px !important;
}

.profile-token-increase-badge {
    display: inline-flex;
    margin-left: 6px;
    padding: 3px 7px;
    color: #1c7a53;
    background: #ecfdf5;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
}

.profile-token-section {
    min-width: 0;
    margin-top: 24px;
    padding: 24px;
    background: var(--profile-bg-card);
    border: 1px solid var(--profile-border-light);
    border-radius: var(--profile-radius-lg);
    box-shadow: var(--profile-shadow-sm);
}

.profile-section-heading {
    min-height: 40px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-section-heading h3 {
    margin: 0 0 4px;
    color: #1a1f36;
    font-size: 16px;
    font-weight: 650;
    line-height: 22px;
}

.profile-token-chart {
    min-height: 220px;
    height: 220px;
    padding: 30px 18px 13px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 9px;
    background: linear-gradient(to bottom, transparent 0, transparent 44px, #f0f1f5 45px, transparent 46px),
        linear-gradient(to bottom, transparent 0, transparent 99px, #f0f1f5 100px, transparent 101px),
        linear-gradient(to bottom, transparent 0, transparent 154px, #f0f1f5 155px, transparent 156px),
        #fff;
    border-radius: var(--profile-radius-md);
}

.profile-chart-column {
    min-width: 0;
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    gap: 8px;
}

.profile-chart-column strong {
    position: absolute;
    top: max(6px, calc(100% - var(--bar-height) - 32px));
    color: #5e6278;
    font-size: 9px;
    line-height: 12px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
}

.profile-chart-column:hover strong,
.profile-chart-column:focus-within strong {
    opacity: 1;
    transform: translateY(0);
}

.profile-chart-column i {
    width: min(30px, 74%);
    min-height: 4px;
    background: var(--profile-accent-light);
    border-radius: 6px 6px 0 0;
    box-shadow: inset 0 -2px rgba(79, 106, 246, .05);
    transition: filter .2s ease, transform .2s ease;
    transform-origin: bottom;
}

.profile-chart-column:nth-child(12n) i,
.profile-chart-column:hover i {
    background: var(--profile-accent);
}

.profile-chart-column:hover i {
    filter: brightness(.96);
    transform: scaleX(1.08);
}

.profile-chart-column small {
    color: #8e92a4;
    font-size: 10px;
    line-height: 14px;
}

.profile-token-table-wrap,
.profile-recharge-records-list {
    overflow-x: auto;
    background: var(--profile-bg-card);
    border: 1px solid var(--profile-border-light);
    border-radius: var(--profile-radius-md);
}

.profile-token-table {
    min-width: 720px;
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.profile-token-table th {
    padding: 12px 16px;
    color: #5e6278;
    background: var(--profile-bg-secondary);
    border-bottom: 1px solid var(--profile-border);
    font-size: 12px;
    font-weight: 550;
    text-align: left;
}

.profile-token-table td {
    padding: 14px 16px;
    color: #1a1f36;
    border-bottom: 1px solid var(--profile-border-light);
    vertical-align: middle;
}

.profile-token-table tbody tr:last-child td {
    border-bottom: 0;
}

.profile-token-table tbody tr:hover td {
    background: var(--profile-bg-hover);
}

.profile-token-pagination {
    min-height: 52px;
    padding-top: 16px;
    color: #5e6278;
    font-size: 13px;
}

.profile-secondary-btn,
.profile-primary-btn,
.profile-danger-btn {
    min-height: 44px;
    padding: 9px 16px;
    border-radius: var(--profile-radius-md);
    font-size: 14px;
    font-weight: 550;
}

.profile-primary-btn {
    color: #fff;
    background: var(--profile-accent);
    border: 1px solid var(--profile-accent);
    box-shadow: 0 4px 10px rgba(79, 106, 246, .16);
}

.profile-primary-btn:hover,
.profile-primary-btn:focus-visible {
    background: var(--profile-accent-hover);
    border-color: var(--profile-accent-hover);
}

.profile-secondary-btn {
    color: #1a1f36;
    background: #fff;
    border: 1px solid var(--profile-border);
}

.profile-secondary-btn:hover,
.profile-secondary-btn:focus-visible {
    background: var(--profile-bg-hover);
    border-color: #8e92a4;
}

.profile-danger-btn {
    color: #ef4444;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.profile-danger-btn:hover,
.profile-danger-btn:focus-visible {
    background: #fee2e2;
}

.profile-empty-state {
    max-width: 560px;
    margin: 52px auto;
    padding: 34px 28px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--profile-border-light);
    border-radius: var(--profile-radius-lg);
    box-shadow: var(--profile-shadow-sm);
}

.profile-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    color: var(--profile-accent);
    background: var(--profile-accent-light);
    border-radius: 14px;
    font-size: 18px;
    font-weight: 700;
}

.profile-empty-state h3 {
    margin: 0 0 8px;
    color: #1a1f36;
    font-size: 18px;
}

.profile-empty-state p {
    margin: 0 auto 20px;
    max-width: 420px;
    color: #5e6278;
    font-size: 14px;
    line-height: 21px;
}

.profile-recharge-records-toolbar {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-recharge-records-search {
    min-width: 260px;
    display: flex;
    flex: 1 1 auto;
    gap: 10px;
}

.profile-recharge-records-search input,
.profile-ecode-input-row input,
.profile-page-size,
.profile-account-panel input {
    min-height: 44px;
    padding: 10px 14px;
    color: #1a1f36;
    background: #fff;
    border: 1px solid var(--profile-border);
    border-radius: var(--profile-radius-md);
    font-size: 14px;
}

.profile-recharge-records-search input {
    min-width: 0;
    flex: 1 1 auto;
}

.profile-recharge-records-search input:focus,
.profile-ecode-input-row input:focus,
.profile-account-panel input:focus {
    outline: none;
    border-color: var(--profile-accent);
    box-shadow: 0 0 0 3px rgba(79, 106, 246, .12);
}

.profile-recharge-records-list {
    overflow: hidden;
}

.profile-recharge-records-list-head,
.profile-recharge-record-row {
    display: grid;
    grid-template-columns: 1.15fr 1.2fr .8fr .75fr .95fr 1.15fr;
    gap: 16px;
    align-items: center;
}

.profile-recharge-records-list-head {
    min-width: 820px;
    padding: 12px 16px;
    color: #5e6278;
    background: var(--profile-bg-secondary);
    border-bottom: 1px solid var(--profile-border);
    font-size: 12px;
}

.profile-recharge-record-row {
    min-width: 820px;
    padding: 16px;
    color: #1a1f36;
    border-bottom: 1px solid var(--profile-border-light);
    font-size: 13px;
}

.profile-recharge-record-row:last-child {
    border-bottom: 0;
}

.profile-recharge-record-row:hover {
    background: var(--profile-bg-hover);
}

.profile-recharge-record-row strong {
    font-weight: 600;
}

.profile-recharge-record-row small,
.profile-order-detail-label,
.profile-purchase-hint,
.profile-recharge-card-heading p,
.profile-recharge-safe {
    color: #8e92a4;
    font-size: 12px;
    line-height: 18px;
}

.profile-record-token {
    color: #10b981 !important;
}

.profile-recharge-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.profile-purchase-card,
.profile-redeem-card {
    min-width: 0;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--profile-border-light);
    border-radius: var(--profile-radius-lg);
    box-shadow: var(--profile-shadow-sm);
}

.profile-recharge-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.profile-recharge-step {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--profile-accent);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 650;
}

.profile-recharge-card-heading h4 {
    margin: 0 0 4px;
    color: #1a1f36;
    font-size: 16px;
    font-weight: 650;
}

.profile-purchase-qr {
    width: min(180px, 64%);
    aspect-ratio: 1;
    margin: 20px auto 16px;
    padding: 8px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--profile-border);
    border-radius: var(--profile-radius-md);
}

.profile-purchase-qr-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.profile-purchase-qr-fallback {
    display: grid;
    gap: 5px;
    color: #8e92a4;
    text-align: center;
}

.profile-purchase-qr-fallback strong {
    color: #5e6278;
    font-size: 13px;
}

.profile-purchase-qr-fallback small {
    font-size: 11px;
}

.profile-purchase-hint {
    margin: 0;
    text-align: center;
}

.profile-ecode-guide {
    margin-bottom: 18px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #5e6278;
    background: var(--profile-bg-secondary);
    border-radius: var(--profile-radius-md);
    font-size: 12px;
}

.profile-ecode-input-row {
    display: flex;
    gap: 10px;
}

.profile-ecode-input-row input {
    min-width: 0;
    flex: 1 1 auto;
}

.profile-ecode-preview,
.profile-recharge-result {
    padding: 20px;
    background: #fff;
    border: 1px solid var(--profile-border);
    border-radius: var(--profile-radius-md);
}

.profile-ecode-preview.is-available {
    border-color: #bfe5d5;
    box-shadow: inset 3px 0 #10b981;
}

.profile-ecode-token strong,
.profile-recharge-result-token strong {
    color: var(--profile-accent);
}

.profile-account-hero {
    min-width: 0;
    margin-bottom: 20px;
    padding: 24px;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    color: #fff;
    background: linear-gradient(135deg, #1a1f36 0%, #2d3561 50%, #4f6af6 100%);
    border-radius: var(--profile-radius-lg);
    box-shadow: 0 8px 24px rgba(79, 106, 246, .2);
}

.profile-account-avatar {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255,255,255,.16);
    border: 2px solid rgba(255,255,255,.5);
    border-radius: 50%;
    font-size: 24px;
    font-weight: 650;
}

.profile-account-hero h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 20px;
}

.profile-account-hero p {
    margin: 0;
    color: rgba(255,255,255,.7);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.profile-status-badge,
.profile-setting-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    color: #1c7a53;
    background: #ecfdf5;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.profile-detail-list {
    margin: 0 0 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--profile-border-light);
    border-radius: var(--profile-radius-lg);
    box-shadow: var(--profile-shadow-sm);
}

.profile-detail-list > div {
    min-height: 56px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--profile-border-light);
}

.profile-detail-list > div:last-child {
    border-bottom: 0;
}

.profile-detail-list dt {
    color: #5e6278;
    font-size: 14px;
}

.profile-detail-list dd {
    max-width: 70%;
    margin: 0;
    color: #1a1f36;
    font-size: 14px;
    font-weight: 550;
    overflow-wrap: anywhere;
    text-align: right;
}

.profile-settings-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-setting-item {
    min-width: 0;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--profile-border-light);
    border-radius: var(--profile-radius-lg);
    box-shadow: var(--profile-shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
}

.profile-setting-item:hover {
    box-shadow: var(--profile-shadow-md);
    transform: translateY(-1px);
}

.profile-setting-item h3 {
    margin: 0 0 4px;
    color: #1a1f36;
    font-size: 15px;
    font-weight: 650;
}

.profile-setting-item p {
    max-width: 560px;
    margin: 0;
    color: #5e6278;
    font-size: 13px;
    line-height: 20px;
}

.profile-credential-setup {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
}

.profile-credential-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--profile-accent);
    background: var(--profile-accent-light);
    border-radius: var(--profile-radius-md);
}

.profile-credential-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

.profile-setting-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-danger-setting {
    background: #fffafa;
    border-color: #fee2e2;
}

@media (max-width: 900px) {
    .profile-center-content {
        padding: 24px;
    }

    .profile-token-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-recharge-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .profile-center-dialog {
        padding: 0;
        align-items: flex-end;
    }

    .profile-center-dialog .profile-center-container {
        width: 100%;
        height: 94dvh;
        max-height: 94dvh;
        border-radius: 20px 20px 0 0;
    }

    .profile-center-dialog .profile-center-header {
        min-height: 72px;
        padding: 16px 18px;
    }

    .profile-center-layout {
        display: block;
        overflow: hidden;
    }

    .profile-center-tabs {
        width: 100%;
        min-width: 0;
        padding: 10px 14px;
        display: flex;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: 1px solid var(--profile-border-light);
        scrollbar-width: none;
    }

    .profile-center-tabs::-webkit-scrollbar {
        display: none;
    }

    .profile-tab-btn {
        width: auto;
        min-width: max-content;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    .profile-tab-glyph {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    .profile-tab-glyph svg {
        width: 16px;
        height: 16px;
    }

    .profile-center-content {
        height: calc(94dvh - 145px);
        padding: 20px 16px 28px;
    }

    .profile-token-intro,
    .profile-recharge-records-intro,
    .profile-recharge-intro {
        flex-direction: column;
        gap: 12px;
    }

    .profile-token-intro h3,
    .profile-recharge-records-intro h3,
    .profile-recharge-intro h3 {
        font-size: 20px;
        line-height: 28px;
    }

    .profile-token-section {
        padding: 18px 16px;
    }

    .profile-token-chart {
        min-width: 560px;
    }

    .profile-token-section:has(.profile-token-chart) {
        overflow-x: auto;
    }

    .profile-recharge-records-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-recharge-records-search {
        min-width: 0;
    }

    .profile-account-hero {
        grid-template-columns: 52px minmax(0, 1fr);
        padding: 20px;
    }

    .profile-account-avatar {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    .profile-account-hero > .profile-status-badge {
        grid-column: 2;
        justify-self: start;
    }

    .profile-setting-item,
    .profile-credential-setup {
        align-items: flex-start;
        grid-template-columns: 42px minmax(0, 1fr);
        flex-direction: column;
    }

    .profile-credential-setup > .profile-primary-btn,
    .profile-setting-item > .profile-primary-btn,
    .profile-setting-item > .profile-secondary-btn,
    .profile-setting-item > .profile-danger-btn {
        width: 100%;
    }

    .profile-credential-setup > .profile-primary-btn {
        grid-column: 2;
    }
}

@media (max-width: 480px) {
    .profile-center-dialog .profile-center-header h3 {
        font-size: 18px;
    }

    .profile-center-content {
        height: calc(94dvh - 145px);
        padding: 18px 14px 26px;
    }

    .profile-token-metrics {
        grid-template-columns: 1fr;
    }

    .profile-metric-card {
        min-height: 100px;
    }

    .profile-recharge-records-search {
        flex-direction: column;
    }

    .profile-recharge-records-search button,
    .profile-recharge-records-toolbar > .profile-primary-btn {
        width: 100%;
    }

    .profile-purchase-card,
    .profile-redeem-card {
        padding: 18px 16px;
    }

    .profile-ecode-input-row {
        flex-direction: column;
    }

    .profile-ecode-input-row button {
        width: 100%;
    }

    .profile-detail-list > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .profile-detail-list dd {
        max-width: 100%;
        text-align: left;
    }

    .profile-empty-state {
        margin: 24px auto;
        padding: 26px 18px;
    }
}

/* Contact binding/change flow */
.contact-binding-overlay {
    z-index: 1200;
    padding: 18px;
    background: rgba(24, 31, 49, .52);
    backdrop-filter: blur(7px);
}

.contact-binding-dialog {
    width: min(560px, calc(100vw - 28px));
    max-height: min(760px, calc(100dvh - 32px));
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 24px;
    background: #f7f8fc;
    box-shadow: 0 28px 80px rgba(19, 28, 50, .28);
}

.contact-binding-dialog .dialog-header {
    min-height: 92px;
    padding: 22px 26px;
    background: #fff;
    border-bottom: 1px solid #edf0f5;
}

.contact-dialog-kicker,
.contact-flow-eyebrow {
    color: #5b75e8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.contact-binding-dialog .dialog-header h3 {
    margin: 5px 0 0;
    color: #17213b;
    font-size: 23px;
    letter-spacing: -.03em;
}

.contact-binding-body {
    padding: 24px;
    overflow-y: auto;
}

.contact-flow-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: #a1aabe;
    font-size: 12px;
    font-weight: 650;
}

.contact-flow-steps span {
    padding: 8px 11px;
    border-radius: 999px;
    background: #eef1f7;
}

.contact-flow-steps span.is-active {
    color: #4563dc;
    background: #e9eeff;
}

.contact-flow-steps i {
    width: 24px;
    height: 1px;
    background: #d9deeb;
}

.contact-flow-card {
    padding: 20px;
    background: #fff;
    border: 1px solid #e8ebf2;
    border-radius: 17px;
    box-shadow: 0 8px 22px rgba(35, 46, 71, .045);
}

.contact-flow-card + .contact-flow-card {
    margin-top: 14px;
}

.contact-flow-card h4 {
    margin: 6px 0 17px;
    color: #263249;
    font-size: 14px;
    line-height: 21px;
}

.contact-auth-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.contact-auth-option {
    min-width: 0;
    padding: 12px 11px;
    color: #68758e;
    background: #fafbfe;
    border: 1px solid #e4e8f1;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
}

.contact-auth-option strong,
.contact-auth-option small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-auth-option strong { color: #33405a; font-size: 12px; }
.contact-auth-option small { margin-top: 5px; color: #9aa4b7; font-size: 10px; }
.contact-auth-option.is-active { background: #eef2ff; border-color: #9cafef; box-shadow: 0 0 0 3px rgba(84, 112, 231, .08); }
.contact-auth-option.is-active strong { color: #4d6be2; }

.contact-code-entry,
.contact-new-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    margin-top: 16px;
}

.contact-code-entry label,
.contact-new-entry label {
    display: grid;
    gap: 7px;
    color: #6f7c94;
    font-size: 12px;
    font-weight: 650;
}

.contact-code-entry input,
.contact-new-entry input {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    color: #263249;
    background: #fff;
    border: 1px solid #dfe4ee;
    border-radius: 10px;
    font: inherit;
    font-weight: 500;
    outline: 0;
}

.contact-code-entry input:focus,
.contact-new-entry input:focus { border-color: #617be7; box-shadow: 0 0 0 3px rgba(84,112,231,.12); }

.contact-password-input-wrap {
    position: relative;
    display: block;
}

.contact-password-visibility-toggle {
    position: absolute;
    top: 50%;
    right: 40px;
    z-index: 1;
    display: inline-flex;
    width: 28px;
    height: 28px;
    padding: 0;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #667085;
    cursor: pointer;
}

.contact-password-visibility-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.contact-password-visibility-toggle:hover,
.contact-password-visibility-toggle:focus-visible,
.contact-password-visibility-toggle.is-visible {
    color: #3154d6;
    background: #edf1ff;
    outline: none;
}

.contact-binding-dialog .contact-code-entry .contact-password-input-wrap input {
    padding-right: 76px;
}

.contact-password-input-wrap .contact-password-rule-wrap {
    right: 8px;
}

.contact-password-input-wrap .contact-password-rule-wrap .bicbot-password-rule-popover {
    top: auto;
    right: 0;
    bottom: calc(100% + 10px);
}

.contact-identity-verify { grid-column: 1 / -1; justify-self: end; }
.contact-flow-error,
.contact-flow-success { margin-bottom: 14px; padding: 11px 13px; border-radius: 10px; font-size: 12px; line-height: 18px; }
.contact-flow-error { color: #b94754; background: #fff2f3; border: 1px solid #ffd7db; }
.contact-flow-success { color: #17724b; background: #effbf5; border: 1px solid #c8eedb; }

@media (max-width: 520px) {
    .contact-binding-overlay { padding: 0; align-items: flex-end; }
    .contact-binding-dialog { width: 100%; max-height: 94dvh; border-radius: 22px 22px 0 0; }
    .contact-binding-dialog .dialog-header { padding: 18px 18px; }
    .contact-binding-body { padding: 18px 16px 26px; }
    .contact-auth-options { grid-template-columns: 1fr; }
    .contact-auth-option { padding: 11px 12px; }
    .contact-code-entry, .contact-new-entry { grid-template-columns: 1fr; }
    .contact-code-entry button, .contact-new-entry button { width: 100%; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .profile-center-content > section,
    .profile-tab-btn,
    .profile-metric-card,
    .profile-setting-item,
    .profile-chart-column strong,
    .profile-chart-column i {
        animation: none;
        transition: none;
    }
}

@media (max-width: 480px) {
    .selector-row {
        padding-right: 12px;
        padding-left: 70px;
    }

    .selector-right {
        width: 100%;
    }

    .language-switcher {
        min-width: 0;
        flex: 1 1 auto;
    }

    .language-select {
        width: 100%;
        max-width: none;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .settings-button {
        flex: 0 0 auto;
        padding: 8px 12px;
    }

    .input-center-wrapper {
        width: calc(100% - 24px);
    }

    .input-header {
        padding-top: 14px;
    }

    .input-title {
        font-size: 28px;
    }

    .input-subtitle {
        max-width: 100%;
        padding: 0 8px;
        line-height: 1.55;
    }

    .input-container {
        border-radius: 16px;
    }

    .question-input {
        min-height: 104px;
    }

    .composer-toolbar-actions {
        align-items: center;
    }

    .char-count {
        margin-right: auto;
    }

    .result-section {
        padding: 0 12px;
    }

    .result-actions {
        flex-wrap: wrap;
    }

    .dialog-overlay,
    .bicbot-login-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .dialog-container,
    .bicbot-login-dialog {
        width: 100%;
        max-height: 94dvh;
        border-radius: 20px 20px 0 0;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .dialog-header {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .bicbot-login-form {
        padding: 16px;
    }

    .bicbot-auth-method-tabs {
        grid-template-columns: 1fr;
    }

    .bicbot-login-actions {
        position: sticky;
        bottom: 0;
        margin: 8px -16px -16px;
        padding: 12px 16px max(12px, env(safe-area-inset-bottom));
        background: var(--qa-bg-surface, #fff);
        border-top: 1px solid var(--qa-border, #e5e9f2);
    }

    .bicbot-login-actions button {
        flex: 1 1 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar {
        transition: none;
    }
}

/* The event handler owns mobile drawer state with .is-open; keep it closed by default. */
@media (max-width: 768px) {
    .container:not(.sidebar-collapsed) .sidebar {
        transform: translateX(-102%);
    }

    .container .sidebar.is-open {
        transform: translateX(0);
    }
}

.profile-recharge-records-list-skeleton {
    min-height: 68px;
    border-bottom: 1px solid var(--qa-border);
    border-radius: 0;
}

@media (max-width: 720px) {
    .profile-recharge-records-panel {
        gap: 16px;
    }

    .profile-recharge-record-card > header {
        align-items: flex-start;
    }

    .profile-recharge-record-grid {
        grid-template-columns: 1fr;
    }

    .profile-recharge-record-grid > div:nth-child(odd) {
        border-right: 0;
    }

    .profile-recharge-record-grid > div + div {
        border-top: 1px solid color-mix(in srgb, var(--qa-border) 76%, transparent);
    }

    .profile-recharge-records-toolbar {
        align-items: stretch;
    }

    .profile-recharge-records-toolbar > .profile-primary-btn {
        min-width: 68px;
    }

    .profile-recharge-records-list-head {
        display: none;
    }

    .profile-recharge-record-row {
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 12px;
        padding: 14px;
    }

    .profile-recharge-record-row > *::before {
        display: block;
        margin-bottom: 4px;
        color: var(--qa-text-muted);
        content: attr(data-label);
        font-size: 9px;
        font-weight: 700;
    }

    .profile-recharge-record-row > :last-child {
        grid-column: 1 / -1;
    }
}

/* Auth dialogs opened from the profile center must remain the foreground modal. */
.dialog-overlay.bicbot-login-overlay {
    z-index: 14100;
}

body .bicbot-slider-overlay {
    z-index: 14200;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-history-running-dot {
        animation: none;
    }

    .profile-token-overview .profile-metric-card.is-balance-increasing,
    .profile-token-increase-badge {
        animation: none;
    }
}

/* Token compact values, recharge search feedback, and post-recharge balance motion. */
.profile-token-overview .profile-metric-card.is-balance-increasing {
    animation: profile-token-balance-pulse 1100ms cubic-bezier(.2, .8, .2, 1);
}

.profile-token-increase-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    animation: profile-token-increase-rise 1100ms ease-out both;
}

.profile-recharge-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-order-details:focus-visible {
    outline: 2px solid var(--qa-brand-500);
    outline-offset: 3px;
}

@keyframes profile-token-balance-pulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.018); }
    100% { transform: scale(1); }
}

@keyframes profile-token-increase-rise {
    0% { opacity: 0; transform: translateY(8px); }
    25%, 70% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-9px); }
}

/* Reference-aligned authentication composition: a quiet lavender canvas and near-square panel. */
@media (min-width: 641px) {
    .bicbot-login-overlay {
        padding: 72px;
        background:
            radial-gradient(ellipse 46% 34% at 8% 10%, rgba(175, 184, 255, .9) 0%, rgba(194, 202, 255, .48) 35%, transparent 74%),
            radial-gradient(ellipse 56% 34% at 92% 90%, rgba(196, 204, 255, .72) 0%, transparent 70%),
            radial-gradient(ellipse 74% 34% at 50% 51%, rgba(255, 255, 255, .93), transparent 72%),
            linear-gradient(145deg, #c6ccff 0%, #edf0ff 45%, #d5dcff 100%);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .bicbot-login-overlay::before,
    .bicbot-login-overlay::after {
        display: none;
    }

    .bicbot-login-dialog {
        width: min(1000px, calc(100vw - 144px));
        height: min(1000px, calc(100dvh - 144px));
        max-height: min(1000px, calc(100dvh - 144px));
        overflow: auto;
        border: 1px solid rgba(255, 255, 255, .88);
        border-radius: 40px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 34px 90px rgba(76, 88, 171, .23), 0 10px 28px rgba(67, 74, 144, .1);
    }

    .bicbot-login-dialog::before {
        bottom: -13px;
        left: -34px;
        width: 278px;
        height: 348px;
        border: 0;
        border-radius: 0;
        background: url("../icons/auth-glass-tower-v1.png") left bottom / contain no-repeat;
        box-shadow: none;
        opacity: .27;
        transform: none;
    }

    .bicbot-login-dialog > .dialog-header {
        min-height: 160px;
        padding: 51px 76px 27px 183px;
    }

    .bicbot-login-dialog > .dialog-header h3 {
        min-height: 70px;
        color: #273861;
        font-size: 39px;
        font-weight: 760;
        letter-spacing: -.04em;
    }

    .bicbot-login-dialog > .dialog-header h3::before {
        top: -2px;
        left: -108px;
        width: 78px;
        height: 78px;
        border-radius: 19px;
        box-shadow: 0 13px 26px rgba(72, 82, 216, .17);
    }

    .bicbot-login-dialog > .dialog-header h3::after {
        bottom: -14px;
        color: #7889b1;
        font-size: 19px;
        letter-spacing: .005em;
    }

    .bicbot-login-dialog > .dialog-header .close-btn {
        top: 56px;
        right: 61px;
        width: 48px;
        min-width: 48px;
        height: 48px;
        color: #53678e;
        font-size: 40px;
    }

    .bicbot-login-form {
        box-sizing: border-box;
        width: min(724px, calc(100% - 250px));
        margin: 0 0 0 20%;
        gap: 52px;
        padding: 35px 0 72px;
    }

    .bicbot-auth-method-tabs {
        gap: 8px;
        padding: 8px;
        border-color: #e1e6f8;
        border-radius: 19px;
        background: #f3f5ff;
    }

    .bicbot-auth-method-tab {
        min-height: 76px;
        border-radius: 13px;
        color: #7789b1;
        font-size: 21px;
        font-weight: 700;
    }

    .bicbot-auth-method-tab.is-active {
        background: linear-gradient(115deg, #535af4 0%, #6756f5 100%);
        box-shadow: 0 10px 20px rgba(79, 75, 231, .23);
    }

    .bicbot-login-field {
        gap: 16px;
        color: #32466f;
        font-size: 22px;
        font-weight: 700;
    }

    .bicbot-login-field input {
        box-sizing: border-box;
        height: 80px;
        border-color: #e3e8f5;
        border-radius: 16px;
        box-shadow: 0 7px 16px rgba(61, 76, 142, .055);
        color: #31436a;
        font-size: 21px;
    }

    .bicbot-login-field input:focus {
        border-color: #9ba7f2;
        box-shadow: 0 0 0 3px rgba(96, 98, 235, .13), 0 7px 16px rgba(61, 76, 142, .06);
    }

    .bicbot-auth-phone-field > input,
    .bicbot-auth-code-field .bicbot-code-row input {
        padding-left: 68px;
        background-color: rgba(255, 255, 255, .92);
        background-repeat: no-repeat;
        background-position: 24px center;
        background-size: 29px 29px;
    }

    .bicbot-auth-phone-field > input {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7096' stroke-width='1.8'%3E%3Crect x='6.5' y='2.8' width='11' height='18.4' rx='1.8'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
    }

    .bicbot-auth-code-field .bicbot-code-row input {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7096' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5c0 4.7-2.9 8.1-7 10-4.1-1.9-7-5.3-7-10V6l7-3Z'/%3E%3Cpath d='m9.2 11.8 1.8 1.8 3.9-4'/%3E%3C/svg%3E");
    }

    .bicbot-code-row {
        grid-template-columns: minmax(0, 1fr) 214px;
        gap: 12px;
    }

    .bicbot-code-btn {
        width: 214px;
        height: 80px;
        border-color: #bec4ff;
        border-radius: 16px;
        color: #4e56e7;
        background: #fafbff;
        font-size: 20px;
        box-shadow: none;
    }

    .bicbot-legal-consent {
        min-height: 30px;
        margin-top: -18px;
        gap: 12px;
        color: #6f81a7;
        font-size: 18px;
        line-height: 27px;
    }

    .bicbot-legal-consent input {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
        margin-top: 0;
    }

    .bicbot-login-assist {
        margin-top: -30px;
        color: #7788ac;
        font-size: 18px;
    }

    .bicbot-login-actions {
        gap: 22px;
        margin-top: -28px;
        padding-top: 0;
    }

    .bicbot-login-actions .bicbot-secondary-btn,
    .bicbot-login-actions .bicbot-primary-btn {
        min-width: 0;
        min-height: 77px;
        border-radius: 15px;
        font-size: 24px;
        font-weight: 720;
    }

    .bicbot-login-actions .bicbot-secondary-btn {
        width: 258px;
    }

    .bicbot-login-actions .bicbot-primary-btn {
        width: 286px;
        box-shadow: 0 12px 22px rgba(76, 73, 230, .25);
    }
}

/* Final profile-center polish: stable information columns and deliberate hierarchy. */
.profile-center-dialog .profile-center-container {
    width: min(1120px, calc(100vw - 40px));
    height: min(760px, calc(100dvh - 40px));
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(25, 34, 53, .22), 0 8px 24px rgba(25, 34, 53, .08);
}

.profile-center-dialog .profile-center-header {
    min-height: 92px;
    padding: 20px 30px;
    background: #fff;
    border-bottom: 1px solid #edf0f5;
}

.profile-center-dialog .profile-center-header h3 {
    color: #17213b;
    font-size: 25px;
    letter-spacing: -.03em;
}

.profile-center-dialog .profile-center-content {
    padding: 34px 40px 44px;
    background: #f7f8fb;
}

.profile-profile-intro {
    margin-bottom: 22px;
}

.profile-profile-intro .profile-panel-kicker {
    color: #5373ef;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .12em;
}

.profile-profile-intro h3 {
    margin: 6px 0 0;
    color: #17213b;
    font-size: 30px;
    line-height: 38px;
    letter-spacing: -.04em;
}

.profile-profile-intro p {
    margin: 7px 0 0;
    color: #8993a8;
    font-size: 13px;
    line-height: 20px;
}

.profile-account-panel {
    gap: 18px;
}

.profile-account-hero {
    min-height: 150px;
    padding: 28px 30px;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 18px;
    background: #fff !important;
    border: 1px solid #edf0f5;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(35, 46, 71, .06);
}

.profile-account-avatar {
    width: 64px;
    height: 64px;
    color: #fff;
    background: linear-gradient(145deg, #5b79ed, #3f5ee2);
    border: 5px solid #eef2ff;
    box-shadow: 0 10px 22px rgba(73, 99, 224, .22);
    font-size: 25px;
}

.profile-account-identity {
    min-width: 0;
}

.profile-account-identity h3 {
    overflow: hidden;
    font-size: 19px;
    line-height: 26px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-account-identity p {
    overflow: hidden;
    margin-top: 6px;
    color: #8a94a8 !important;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-status-badge {
    min-height: 30px;
    padding: 5px 12px;
    color: #15966e;
    background: #effbf6;
    border: 1px solid #ccefe1;
    font-size: 12px;
}

.profile-binding-card,
.profile-account-details {
    background: #fff !important;
    border: 1px solid #edf0f5;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(35, 46, 71, .045);
}

.profile-binding-row {
    min-height: 76px;
    padding: 16px 24px;
    grid-template-columns: minmax(120px, .55fr) minmax(0, 1fr) auto;
    gap: 18px;
}

.profile-binding-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #77839a;
    font-size: 13px;
    font-weight: 600;
}

.profile-binding-icon-small {
    color: #8c98ae;
    font-size: 15px;
}

.profile-binding-row strong {
    min-width: 0;
    overflow: hidden;
    color: #263249;
    font-size: 14px;
    font-weight: 650;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-binding-row strong i {
    margin-right: 8px;
}

.profile-link-btn {
    min-height: 32px;
    padding: 5px 8px;
    color: #5272e8;
    border-radius: 8px;
}

.profile-link-btn:hover,
.profile-link-btn:focus-visible {
    background: #eff3ff;
}

.profile-account-panel .profile-account-details {
    margin: 0 !important;
}

.profile-account-panel .profile-account-details > div {
    min-height: 70px !important;
    padding: 16px 24px !important;
    grid-template-columns: minmax(120px, .55fr) minmax(0, 1fr) !important;
    gap: 18px !important;
}

.profile-account-details dt {
    color: #77839a;
    font-size: 13px;
    font-weight: 600;
}

.profile-account-details dd {
    min-width: 0;
    justify-content: flex-start;
    color: #263249;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
}

.profile-account-details dd .profile-status-dot {
    flex: 0 0 8px;
    margin-right: 8px;
}

.profile-action-row-end {
    margin-top: 2px;
}

.profile-token-range-btn:not(:disabled) {
    cursor: pointer;
}

.profile-token-range-btn:not(:disabled):hover {
    color: var(--qa-brand-600);
    background: color-mix(in srgb, var(--qa-brand-50) 78%, #fff);
}

.profile-token-range-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--qa-brand-500) 45%, transparent);
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .profile-center-dialog .profile-center-container {
        width: min(100vw - 24px, 680px);
    }

    .profile-center-dialog .profile-center-content {
        padding: 26px 22px 34px;
    }

    .profile-account-hero {
        grid-template-columns: 56px minmax(0, 1fr);
        padding: 22px;
    }

    .profile-account-avatar {
        width: 56px;
        height: 56px;
    }

    .profile-account-hero > .profile-status-badge {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 480px) {
    .profile-center-dialog .profile-center-container {
        width: 100%;
        height: 94dvh;
        border-radius: 22px 22px 0 0;
    }

    .profile-center-dialog .profile-center-content {
        padding: 24px 16px 30px;
    }

    .profile-profile-intro h3 {
        font-size: 25px;
        line-height: 32px;
    }

    .profile-binding-row,
    .profile-account-panel .profile-account-details > div {
        grid-template-columns: 1fr auto !important;
        gap: 8px !important;
        padding: 14px 16px !important;
    }

    .profile-binding-row strong {
        grid-column: 2;
        grid-row: 1;
        max-width: 52vw;
        text-align: right;
    }

    .profile-binding-row .profile-link-btn {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }

    .profile-account-panel .profile-account-details > div {
        min-height: 62px !important;
    }

    .profile-account-details dd {
        justify-content: flex-end;
        text-align: right;
    }
}

/* Token trend visual shell; range data will be connected when the API contract is provided. */
.profile-token-chart-shell {
    position: relative;
    padding-top: 48px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--qa-border);
    border-radius: 14px;
}
.profile-token-range-tabs {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    padding: 4px;
    display: inline-flex;
    gap: 2px;
    background: #f1f4f8;
    border-radius: 10px;
}
.profile-token-range-btn {
    min-width: 66px;
    min-height: 32px;
    padding: 5px 10px;
    color: var(--qa-text-secondary);
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
}
.profile-token-range-btn.is-active { color: var(--qa-brand-600); background: #ffffff; box-shadow: 0 1px 3px rgba(30, 41, 59, .08); }
.profile-token-chart-shell .profile-token-chart {
    min-height: 214px;
    height: 214px;
    padding: 20px 16px 12px;
    border: 0;
    border-radius: 0;
    background:
        repeating-linear-gradient(to bottom, transparent 0, transparent 46px, #edf1f8 47px),
        #ffffff;
}
.profile-token-chart-shell .profile-chart-column { gap: 7px; }
.profile-token-chart-shell .profile-chart-column i { width: min(26px, 74%); background: #edf1ff; box-shadow: none; border-radius: 5px 5px 1px 1px; }
.profile-token-chart-shell .profile-chart-column:last-child i { background: var(--qa-brand-500); }
.profile-token-chart-shell .profile-chart-column small { color: var(--qa-text-tertiary); font-size: 10px; }
.profile-token-chart-stats {
    min-height: 72px;
    padding: 14px 24px 16px;
    display: flex;
    align-items: flex-start;
    gap: 32px;
    border-top: 1px solid var(--qa-border);
}
.profile-token-chart-stats div { display: grid; gap: 5px; }
.profile-token-chart-stats span { color: var(--qa-text-tertiary); font-size: 11px; }
.profile-token-chart-stats strong { color: var(--qa-text-primary); font-size: 16px; font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
    .profile-token-range-tabs { position: static; margin: -28px 14px 12px auto; width: fit-content; }
    .profile-token-chart-shell { padding-top: 12px; }
    .profile-token-chart-shell .profile-token-chart { min-height: 184px; height: 184px; padding-right: 10px; padding-left: 10px; }
    .profile-token-chart-shell .profile-chart-column small { font-size: 8px; }
    .profile-token-chart-stats { gap: 16px; padding-right: 14px; padding-left: 14px; overflow-x: auto; }
}

/* Profile center visual refinement: reference-aligned desktop panels */
.profile-center-dialog .profile-center-container {
    width: min(1180px, calc(100vw - 40px));
    max-width: 1180px;
    height: min(820px, calc(100dvh - 40px));
    max-height: none;
}

.profile-center-dialog .profile-center-layout {
    grid-template-columns: 244px minmax(0, 1fr);
}

.profile-center-dialog .profile-center-tabs {
    padding: 22px 18px;
    gap: 8px;
    background: #ffffff;
}

.profile-center-dialog .profile-tab-btn {
    min-height: 48px;
    padding: 11px 16px;
    border-radius: 13px;
    font-size: 15px;
}

.profile-center-dialog .profile-center-content {
    padding: 38px 44px 44px;
    background: #f6f7f9;
}

.profile-token-hero {
    position: relative;
    min-height: 238px;
    padding: 30px 34px;
    display: grid;
    grid-template-columns: minmax(280px, 1.15fr) 136px minmax(220px, .9fr) minmax(120px, 160px);
    align-items: center;
    gap: 24px;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(112deg, #1c2344 0%, #313d82 52%, #526cf2 100%);
    border-radius: 18px;
    box-shadow: 0 18px 32px rgba(57, 80, 188, 0.18);
}

.profile-token-hero--no-ring {
    grid-template-columns: minmax(300px, 1fr) minmax(150px, 180px) minmax(180px, 220px);
}

.profile-token-hero::before,
.profile-token-hero::after {
    position: absolute;
    content: '';
    pointer-events: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
}

.profile-token-hero::before { width: 300px; height: 300px; right: -90px; top: -165px; }
.profile-token-hero::after { width: 250px; height: 250px; right: 25px; bottom: -180px; }

.profile-token-hero > * { position: relative; z-index: 1; }
.profile-token-hero-balance { min-width: 0; display: grid; gap: 7px; }
.profile-token-hero-label { color: rgba(255,255,255,.68); font-size: 13px; font-weight: 600; }
.profile-token-hero-balance .profile-token-hero-amount {
    display: block;
    min-width: 0;
    font-size: clamp(38px, 4vw, 52px);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -.055em;
    white-space: nowrap;
}
.profile-token-hero-exact {
    color: rgba(255,255,255,.58);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    letter-spacing: 0;
    white-space: nowrap;
}
.profile-token-hero-badge { width: fit-content; margin-top: 9px; padding: 8px 13px; color: #6ce4ba; background: rgba(42, 207, 151, .16); border-radius: 999px; font-size: 12px; font-weight: 650; }

.profile-token-hero-ring {
    width: 136px;
    height: 136px;
    display: grid;
    place-items: center;
    background: conic-gradient(#67e1b5 var(--profile-token-used), rgba(255,255,255,.16) 0);
    border-radius: 50%;
}
.profile-token-hero-ring::before { position: absolute; width: 106px; height: 106px; content: ''; background: #303b78; border-radius: 50%; }
.profile-token-hero-ring span { position: relative; z-index: 1; display: grid; text-align: center; }
.profile-token-hero-ring strong { font-size: 25px; line-height: 1.1; }
.profile-token-hero-ring small { color: rgba(255,255,255,.55); font-size: 11px; }

.profile-token-hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.profile-token-hero-stats div { display: grid; gap: 4px; min-width: 0; }
.profile-token-hero-stats span, .profile-token-hero-stats small { color: rgba(255,255,255,.58); font-size: 11px; }
.profile-token-hero-stats strong { font-size: 20px; line-height: 1.1; }
.profile-token-hero-action { align-self: center; min-width: 92px; color: #ffffff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
.profile-token-hero-action:hover { color: #ffffff; background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.4); }

.profile-token-overview .profile-token-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profile-token-overview .profile-metric-card { min-height: 130px; padding: 20px 22px; }

.profile-recharge-records-panel { min-width: 0; }
.profile-recharge-records-list { overflow-x: auto; border: 1px solid var(--qa-border); border-radius: 16px; background: #ffffff; box-shadow: 0 8px 20px rgba(42,51,64,.04); }
.profile-recharge-records-list-head,
.profile-recharge-record-row { min-width: 920px; grid-template-columns: 150px minmax(150px, 1fr) minmax(90px, .7fr) 110px 140px minmax(190px, 1.15fr); }
.profile-recharge-records-list-head { padding: 14px 18px; color: var(--qa-text-tertiary); background: #f2f5f9; font-size: 11px; font-weight: 700; }
.profile-recharge-record-row { min-height: 104px; padding: 17px 18px; align-items: center; border-top: 1px solid #edf0f4; }
.profile-recharge-record-row:hover { background: #fafbff; }
.profile-recharge-record-row time { color: var(--qa-text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.profile-recharge-record-row > div { min-width: 0; }
.profile-recharge-record-row > div > strong { display: block; color: var(--qa-text-primary); font-size: 14px; }
.profile-recharge-record-row > div > small { display: block; margin-top: 7px; color: var(--qa-text-tertiary); font-size: 11px; }
.profile-recharge-record-row > strong { color: #13b881; font-size: 15px; font-variant-numeric: tabular-nums; }
.profile-order-details { display: grid; gap: 5px; min-width: 0; }
.profile-order-detail { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 7px; align-items: center; }
.profile-order-detail-label { color: var(--qa-text-tertiary); font-size: 10px; }
.profile-order-detail-value { min-width: 0; overflow: hidden; color: var(--qa-text-secondary); font-family: inherit; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.profile-profile-intro { margin-bottom: 28px; }
.profile-profile-intro h3 { margin: 5px 0 0; color: var(--qa-text-primary); font-size: 28px; line-height: 34px; }
.profile-profile-intro p { margin: 7px 0 0; color: var(--qa-text-tertiary); font-size: 13px; }
.profile-account-panel { display: grid; gap: 16px; }
.profile-account-hero { min-height: 170px; padding: 28px 32px; background: #ffffff; border: 1px solid var(--qa-border); border-radius: 16px; box-shadow: 0 8px 20px rgba(42,51,64,.04); }
.profile-account-avatar { width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(145deg,#5f62f5,#8d39e7); font-size: 34px; box-shadow: 0 5px 0 rgba(255,255,255,.7), 0 12px 22px rgba(90,81,221,.2); }
.profile-account-identity h3 { font-size: 20px; }
.profile-account-identity p { margin-top: 7px; font-size: 13px; }
.profile-status-badge { color: #12b981; background: #e9fbf4; border-color: #c8f3e2; }
.profile-status-badge.is-disabled { color: var(--qa-danger); background: #fff1f2; border-color: #fecdd3; }
.profile-profile-loading-mark { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px; }
.profile-binding-card, .profile-account-details { overflow: hidden; background: #ffffff; border: 1px solid var(--qa-border); border-radius: 16px; box-shadow: 0 8px 20px rgba(42,51,64,.035); }
.profile-binding-row { min-height: 60px; padding: 14px 22px; display: grid; grid-template-columns: 1fr minmax(180px, 1.25fr) auto; gap: 18px; align-items: center; border-bottom: 1px solid #edf0f4; }
.profile-binding-row:last-child { border-bottom: 0; }
.profile-binding-label { display: flex; align-items: center; gap: 9px; color: var(--qa-text-secondary); font-size: 14px; }
.profile-binding-icon-small { width: 22px; color: var(--qa-text-tertiary); font-size: 18px; text-align: center; }
.profile-binding-row strong { color: var(--qa-text-primary); font-size: 14px; text-align: right; }
.profile-binding-row strong i, .profile-status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: #16bd87; border-radius: 50%; }
.profile-binding-row strong.is-muted { color: var(--qa-text-tertiary); }
.profile-binding-row strong.is-muted i { background: #a2a8b8; }
.profile-link-btn { padding: 4px 0; color: var(--qa-brand-600); background: transparent; border: 0; font-size: 13px; font-weight: 650; cursor: pointer; }
.profile-account-details { margin: 0 !important; }
.profile-account-details > div { min-height: 58px !important; padding: 14px 22px !important; grid-template-columns: minmax(0, 1fr) auto auto !important; gap: 18px !important; }
.profile-account-details dd { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.profile-account-details dd small { padding: 5px 9px; color: var(--qa-brand-600); background: var(--qa-brand-50); border-radius: 999px; font-size: 11px; font-weight: 650; }
.profile-account-details .profile-status-dot { margin: 0 0 0 0; }

@media (max-width: 820px) {
    .profile-token-hero { grid-template-columns: minmax(0, 1fr) 138px; }
    .profile-token-hero--no-ring { grid-template-columns: minmax(0, 1fr) minmax(150px, 180px); }
    .profile-token-hero-stats { grid-column: 1 / -1; }
    .profile-token-hero-action { position: absolute; right: 22px; top: 22px; }
}

@media (max-width: 480px) {
    .profile-center-dialog .profile-center-container { width: 100%; height: 94dvh; }
    .profile-center-dialog .profile-center-content { padding: 22px 16px 30px; }
    .profile-token-hero { grid-template-columns: 1fr; min-height: 0; padding: 24px 22px; gap: 20px; }
    .profile-token-hero-action { position: static; width: 100%; }
    .profile-token-hero-ring { margin: 0 auto; }
    .profile-token-hero-stats { gap: 14px; }
    .profile-token-overview .profile-token-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-token-overview .profile-metric-card { min-height: 108px; padding: 15px; }
    .profile-binding-row { grid-template-columns: 1fr auto; gap: 8px; padding: 13px 15px; }
    .profile-binding-row strong { grid-column: 2; grid-row: 1; }
    .profile-binding-row .profile-link-btn { grid-column: 2; grid-row: 2; justify-self: end; }
    .profile-account-hero { grid-template-columns: auto minmax(0,1fr); padding: 22px; }
    .profile-account-hero > .profile-status-badge { grid-column: 1 / -1; justify-self: start; }
}

/* Resolve legacy profile-center rules after the redesign cascade. */
.profile-account-hero {
    color: var(--qa-text-primary) !important;
    background: #ffffff !important;
}
.profile-account-avatar { border-radius: 50% !important; }
.profile-binding-card { display: flex !important; flex-direction: column !important; padding: 0 !important; }
.profile-binding-row { width: 100%; flex: 0 0 auto; }
.profile-account-identity h3, .profile-account-identity p { color: var(--qa-text-primary) !important; }
.profile-account-identity p { color: var(--qa-text-tertiary) !important; }

@media (max-width: 768px) {
    .profile-binding-card { display: flex !important; }
    .profile-binding-row { grid-template-columns: 1fr auto !important; }
    .profile-account-details > div { grid-template-columns: minmax(0, 1fr) auto !important; gap: 10px !important; }
}

/* Recharge records: keep every field visible without a horizontal scroller. */
.profile-recharge-records-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
}
.profile-recharge-records-search { min-width: 0; width: 100%; }
.profile-recharge-records-refresh {
    min-width: 82px;
    min-height: 38px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 10px;
    white-space: nowrap;
}
.profile-recharge-records-refresh-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.profile-recharge-records-list { overflow-x: hidden !important; }
.profile-recharge-records-list-head,
.profile-recharge-record-row {
    min-width: 0 !important;
    grid-template-columns: 132px minmax(130px, 1fr) minmax(86px, .7fr) 96px 118px minmax(156px, 1.05fr) !important;
}
.profile-recharge-records-list-head { padding-right: 14px; padding-left: 14px; }
.profile-recharge-record-row { padding-right: 14px; padding-left: 14px; }
.profile-recharge-record-row time { white-space: nowrap; }
.profile-order-details { min-width: 0; overflow: hidden; }
.profile-order-detail-value { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 760px) {
    .profile-recharge-records-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .profile-recharge-records-search { grid-column: 1 / -1; }
    .profile-recharge-records-refresh,
    .profile-recharge-records-toolbar > .profile-primary-btn { width: 100%; }
    .profile-recharge-records-list-head { display: none; }
    .profile-recharge-record-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 13px 16px;
        min-height: 0;
        padding: 17px 16px;
    }
    .profile-recharge-record-row > * {
        min-width: 0;
        display: block;
    }
    .profile-recharge-record-row > *::before {
        display: block;
        margin-bottom: 5px;
        color: var(--qa-text-tertiary);
        content: attr(data-label);
        font-size: 10px;
        font-weight: 600;
    }
    .profile-recharge-record-row > time { grid-column: 1 / -1; }
    .profile-recharge-record-row > strong { text-align: left; }
    .profile-recharge-record-row > .profile-order-details { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--qa-border); }
    .profile-order-detail { grid-template-columns: 38px minmax(0, 1fr); }
}

/* Token usage details: fit the complete table in the content area. */
.profile-token-table-wrap { overflow-x: hidden !important; }
.profile-token-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
}
.profile-token-table th,
.profile-token-table td {
    max-width: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.profile-token-table th:nth-child(1), .profile-token-table td:nth-child(1) { width: 17%; }
.profile-token-table th:nth-child(2), .profile-token-table td:nth-child(2) { width: 17%; }
.profile-token-table th:nth-child(3), .profile-token-table td:nth-child(3) { width: 34%; }
.profile-token-table th:nth-child(n+4), .profile-token-table td:nth-child(n+4) { width: 10.66%; }
.profile-token-table .profile-token-session,
.profile-token-table .profile-token-question { max-width: none; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 640px) {
    .profile-token-table,
    .profile-token-table thead,
    .profile-token-table tbody,
    .profile-token-table tr,
    .profile-token-table td { display: block; }
    .profile-token-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .profile-token-table tbody tr {
        padding: 14px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px 16px;
        border-bottom: 1px solid var(--qa-border);
    }
    .profile-token-table tbody tr:last-child { border-bottom: 0; }
    .profile-token-table td {
        width: auto !important;
        max-width: none;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
    }
    .profile-token-table td::before {
        display: block;
        margin-bottom: 4px;
        color: var(--qa-text-tertiary);
        font-size: 10px;
        font-weight: 650;
    }
    .profile-token-table td:nth-child(1)::before { content: '时间'; }
    .profile-token-table td:nth-child(2)::before { content: '会话'; }
    .profile-token-table td:nth-child(3)::before { content: '问题'; }
    .profile-token-table td:nth-child(4)::before { content: '输入'; }
    .profile-token-table td:nth-child(5)::before { content: '输出'; }
    .profile-token-table td:nth-child(6)::before { content: '合计'; }
    .profile-token-table td:nth-child(3), .profile-token-table td:nth-child(6) { grid-column: 1 / -1; }
    .profile-token-table .profile-token-session,
    .profile-token-table .profile-token-question { max-width: none; white-space: normal; }
}

/* Recharge history: compact list, unified search control, and bounded pagination. */
.profile-center-content .profile-recharge-records-panel {
    align-content: start;
    gap: 18px;
}

.profile-recharge-records-panel .profile-token-intro {
    margin-bottom: 2px;
}

.profile-recharge-records-intro {
    min-height: 0;
}

.profile-recharge-records-intro h3 {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
}

.profile-recharge-records-intro p {
    margin-top: 3px;
    font-size: 11px;
    line-height: 17px;
}

.profile-recharge-records-toolbar {
    gap: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.profile-recharge-records-search {
    height: 38px;
    overflow: hidden;
    border: 1px solid var(--qa-border-strong);
    border-radius: 10px;
    background: var(--qa-surface);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.profile-recharge-records-search:focus-within {
    border-color: var(--qa-brand-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--qa-brand-500) 14%, transparent);
}

.profile-recharge-records-search input {
    height: 36px;
    padding: 0 15px 3px;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    outline: none !important;
    font-size: 13px;
    line-height: 1;
}

.profile-recharge-records-search input::placeholder {
    color: var(--qa-text-tertiary);
}

.profile-recharge-records-search .profile-secondary-btn {
    min-width: 78px;
    min-height: 36px;
    padding: 0 16px 3px;
    border: 0;
    border-left: 1px solid var(--qa-border);
    border-radius: 0;
    background: color-mix(in srgb, var(--qa-brand-500) 7%, var(--qa-surface));
    color: var(--qa-brand-700);
    font-weight: 700;
    line-height: 1;
}

.profile-recharge-records-search .profile-secondary-btn:hover {
    background: color-mix(in srgb, var(--qa-brand-500) 13%, var(--qa-surface));
}

.profile-recharge-records-toolbar > .profile-primary-btn {
    min-width: 82px;
    min-height: 38px;
    padding: 0 18px;
    border-radius: 10px;
    box-shadow: 0 7px 16px color-mix(in srgb, var(--qa-brand-500) 22%, transparent);
    font-weight: 700;
}

.profile-recharge-records-list {
    min-height: 48px;
    border-color: color-mix(in srgb, var(--qa-border) 86%, var(--qa-brand-500));
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.035);
}

.profile-recharge-records-list-head {
    min-height: 48px;
    padding: 0 16px;
    background: color-mix(in srgb, var(--qa-brand-500) 5%, var(--qa-surface));
    color: var(--qa-text-secondary);
    font-size: 10px;
    letter-spacing: 0.025em;
}

.profile-recharge-record-row {
    min-height: 72px;
    padding: 11px 16px;
    transition: background-color 150ms ease;
}

.profile-recharge-record-row:hover {
    background: color-mix(in srgb, var(--qa-brand-500) 3%, var(--qa-surface));
}

.profile-token-pagination.profile-recharge-records-pagination {
    min-height: 46px;
    padding: 6px 8px 6px 12px;
    border: 1px solid color-mix(in srgb, var(--qa-border) 86%, var(--qa-brand-500));
    border-radius: 14px;
    background: color-mix(in srgb, var(--qa-brand-500) 2%, var(--qa-bg-canvas));
}

.profile-token-pagination.profile-recharge-records-pagination > span {
    color: var(--qa-text-secondary);
    font-weight: 600;
}

.profile-token-pagination.profile-recharge-records-pagination > div {
    gap: 6px;
}

.profile-token-pagination.profile-recharge-records-pagination button {
    min-width: 64px;
    min-height: 32px;
    padding: 4px 10px;
    border-radius: 9px;
    background: var(--qa-surface);
    font-size: 12px;
}

.profile-token-pagination.profile-recharge-records-pagination button:not(:disabled):hover {
    border-color: var(--qa-brand-500);
    background: color-mix(in srgb, var(--qa-brand-500) 7%, var(--qa-surface));
    color: var(--qa-brand-700);
}

.profile-token-pagination.profile-recharge-records-pagination button:disabled {
    border-color: color-mix(in srgb, var(--qa-border) 72%, transparent);
    background: color-mix(in srgb, var(--qa-bg-canvas) 82%, var(--qa-surface));
    color: var(--qa-text-tertiary);
    opacity: 0.58;
}

.profile-pagination-controls,
.profile-pagination-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-page-size {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--qa-text-tertiary);
    font-size: 11px;
    white-space: nowrap;
}

.profile-page-size select {
    width: 58px;
    height: 32px;
    padding: 0 22px 0 9px;
    border: 1px solid var(--qa-border);
    border-radius: 8px;
    background-color: var(--qa-surface);
    color: var(--qa-text-secondary);
    cursor: pointer;
    font-size: 11px;
    outline: none;
}

.profile-page-size select:focus {
    border-color: var(--qa-brand-500);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--qa-brand-500) 12%, transparent);
}

@media (max-width: 720px) {
    .profile-recharge-records-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 8px;
    }

    .profile-recharge-records-toolbar > .profile-primary-btn {
        min-width: 68px;
        padding-inline: 12px;
    }

    .profile-recharge-records-search .profile-secondary-btn {
        min-width: 64px;
        padding-inline: 10px;
    }

    .profile-token-pagination.profile-recharge-records-pagination {
        align-items: center;
        flex-direction: row;
    }

    .profile-token-pagination.profile-recharge-records-pagination > div {
        flex: 0 0 auto;
    }

    .profile-token-pagination.profile-recharge-records-pagination button {
        flex: 0 0 auto;
        min-width: 62px;
    }

    .profile-pagination-controls {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .profile-page-size {
        flex: 0 0 auto;
    }
}

.sidebar-history-menu-toggle {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #98a2b3;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.sidebar-history-menu-toggle:hover,
.sidebar-history-menu-toggle[aria-expanded="true"] {
    background: #eef4ff;
    color: #3456a3;
}

.sidebar-history-menu {
    position: fixed;
    z-index: 13010;
    min-width: 84px;
    padding: 6px;
    border: 1px solid #e3e8ef;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.sidebar-history-menu[hidden] {
    display: none;
}

.sidebar-history-menu button {
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #24324a;
    cursor: pointer;
    font-size: 12px;
    line-height: 16px;
    text-align: left;
}

.sidebar-history-menu button:hover {
    background: #f5f7fb;
}

.sidebar-history-menu .sidebar-history-top {
    color: #167044;
}

.sidebar-history-menu .sidebar-history-top:hover {
    background: #ecfdf3;
}

.sidebar-history-menu .sidebar-history-delete {
    color: #b42318;
}

.sidebar-history-menu .sidebar-history-delete:hover {
    background: #fee4e2;
}

.sidebar-history-empty,
.sidebar-history-more {
    padding: 12px 8px;
    color: #98a2b3;
    font-size: 12px;
    text-align: center;
}

/* 版本信息样式 */
.version-info {
    padding: 16px;
    border-top: 1px solid #e9ecef;
    margin-top: auto;
    text-align: center;
    position: relative;
    z-index: 10001; /* 确保在对话框之上显示 */
}

.version-text {
    font-size: 12px;
    color: #666;
    margin: 0;
    font-weight: 500;
    margin-bottom: 12px;
}

.update-icon {
    width: 14px;
    height: 14px;
    margin-left: 4px;
    cursor: pointer;
    vertical-align: middle;
    transition: opacity 0.2s ease;
    display: inline-block; /* 改为inline-block以便z-index生效 */
    position: relative;
    z-index: 10001; /* 确保在对话框之上显示 */
}

.update-icon:hover {
    opacity: 0.8;
}

/* 仓库链接样式 */
.repo-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.repo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.7;
}

.repo-link:hover {
    transform: scale(1.1);
    opacity: 1;
}

.repo-link:active {
    transform: scale(0.95);
}

.repo-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

/* 联系方式图标样式 */
.contact-link-wrapper {
    position: relative;
    display: inline-flex;
}

.contact-link {
    cursor: pointer;
}

.contact-icon {
    color: #666;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.contact-link:hover .contact-icon {
    opacity: 1;
    color: #333;
}

/* 二维码弹窗样式 */
.qr-code-popup {
    position: absolute;
    bottom: calc(100% + 14px);
    left: -128px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 14px 16px;
    display: none;
    z-index: 1000;
    width: 356px;
    max-width: calc(100vw - 28px);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(-8px);
    pointer-events: none;
    white-space: normal;
    text-align: center;
}

.contact-link-wrapper:hover .qr-code-popup {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* 添加小箭头指向图标 */
.qr-code-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 140px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid white;
}

/* 二维码容器 */
.qr-code-container {
    display: flex;
    flex-direction: row;
    gap: 14px;
    align-items: flex-start;
    justify-content: center;
}

.qr-code-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 148px;
    min-width: 0;
}

.qr-code-image {
    width: 104px;
    height: 104px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.qr-code-label {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    margin: 0;
    text-align: center;
    line-height: 1.35;
    width: 100%;
    min-height: 36px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sidebar-action-btn,
.help-action-btn,
.announcement-btn,
.help-btn-sidebar {
    background: transparent;
    border: 1px solid transparent;
    color: #333;
    padding: 8px 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    text-decoration: none;
}

.sidebar-action-btn:hover,
.help-action-btn:hover,
.announcement-btn:hover,
.help-btn-sidebar:hover {
    background: #ffffff;
    border-color: #d7e3f4;
    transform: translateX(4px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: #333;
    text-decoration: none;
}

.sidebar-action-btn.active {
    background: transparent;
    border-color: transparent;
    color: #0b4fb8;
    box-shadow: none;
}

.sidebar-action-btn:active,
.help-action-btn:active,
.announcement-btn:active,
.help-btn-sidebar:active {
    transform: translateX(2px);
}

.action-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.action-text {
    flex: 1;
}

/* 使用说明按钮样式 */
.help-action-btn {
    margin-top: auto;
    border-top: 1px solid #e9ecef;
}

/* 客服中心：侧栏入口与双卡片弹窗 */
.customer-support-action-btn .action-icon {
    color: #416ff1;
}

.customer-support-dialog[hidden] {
    display: none;
}

.customer-support-dialog {
    position: fixed;
    z-index: 12000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
}

.customer-support-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(22, 37, 75, .25);
    backdrop-filter: blur(7px);
}

.customer-support-panel {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    overflow: hidden;
    border: 1px solid rgba(225, 232, 247, .92);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 72px rgba(29, 48, 98, .2);
}

.customer-support-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 25px 32px;
    background: linear-gradient(115deg, #f5f8ff, #fff);
}

.customer-support-header-icon,
.customer-support-card-icon {
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 800;
}

.customer-support-header-icon {
    width: 39px;
    height: 39px;
    color: #31446d;
    background: #fff;
    box-shadow: 0 4px 14px rgba(55, 82, 144, .12);
}

.customer-support-header strong,
.customer-support-header small {
    display: block;
}

.customer-support-header strong {
    color: #1f355f;
    font-size: 21px;
}

.customer-support-header small,
.customer-support-card > small {
    color: #8290aa;
    font-size: 12px;
}

.customer-support-close {
    position: absolute;
    z-index: 2;
    top: 17px;
    right: 18px;
    width: 31px;
    height: 31px;
    border: 0;
    border-radius: 50%;
    color: #6f7f9d;
    background: transparent;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.customer-support-close:hover { background: #eef3ff; color: #315eea; }

.customer-support-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    padding: 31px 40px 38px;
}

.customer-support-card {
    min-height: 352px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 21px 25px;
    border: 1px solid #dbe5ff;
    border-radius: 11px;
}

.customer-support-wechat-card { border-color: #d1f0dc; }

.customer-support-card-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 13px;
    color: #416ff1;
    background: #edf3ff;
    border: 1px solid #d9e5ff;
    font-size: 28px;
}

.customer-support-card-icon.wechat { color: #12ae45; background: #eafaf0; border-color: #cdeed8; }
.customer-support-card h3 { margin: 0; color: #3a69e9; font-size: 18px; }
.customer-support-wechat-card h3 { color: #20a34c; }
.customer-support-card p { margin: 5px 0 0; color: #7384a4; font-size: 13px; }
.customer-support-phone { margin: auto 0 25px; color: #3f6df0; font-size: 26px; font-weight: 750; letter-spacing: .5px; text-decoration: none; }
.customer-support-card img { width: 130px; height: 130px; object-fit: cover; margin: 13px 0; }
.customer-support-card-button { width: 100%; margin-top: auto; padding: 9px; border-radius: 7px; border: 1px solid #cfddff; color: #3765ec; background: #f4f7ff; cursor: pointer; font-size: 13px; }
.customer-support-card-button.wechat { color: #169a40; border-color: #ccefd8; background: #effbf3; }
.customer-support-card > small { margin-top: 9px; }

@media (max-width: 620px) {
    .customer-support-dialog { padding: 12px; }
    .customer-support-header { padding: 21px 23px; }
    .customer-support-cards { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
    .customer-support-card { min-height: 300px; }
}

/* 公告按钮样式 */
.announcement-btn {
    text-decoration: none;
}

/* 帮助按钮区域 */
.help-section {
    padding: 20px;
    border-top: 1px solid #e9ecef;
}

.help-btn-sidebar {
    padding: 12px 16px;
    border-radius: 8px;
    gap: 12px;
    width: 100%;
    font-size: 14px;
}

.help-icon {
    font-size: 16px;
}

.help-text {
    flex: 1;
}

/* 底部小图标区域 */
.bottom-icons-section {
    padding: 12px 20px;
    border-top: 1px solid #e9ecef;
    margin-top: auto;
}

.bottom-icons-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    align-items: center;
}

.bottom-icon-btn {
    background: transparent;
    border: none;
    color: #9ca3af;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    font-size: 14px;
    opacity: 0.7;
}

.bottom-icon-btn:hover {
    background: rgba(156, 163, 175, 0.1);
    color: #6b7280;
    opacity: 1;
    transform: none;
}

.bottom-icon-btn:active {
    transform: none;
    background: rgba(156, 163, 175, 0.15);
}

.bottom-icon {
    font-size: 14px;
    line-height: 1;
}

/* 右侧主内容区域 */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin: 12px;
    min-height: 0;
    position: relative;
    transition: margin 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-toggle-btn {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 36px;
    height: 36px;
    border: 1px solid #d6deea;
    border-radius: 8px;
    background: #ffffff;
    color: #24324a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sidebar-toggle-btn:hover {
    background: #f8fbff;
    border-color: #0f63e6;
    box-shadow: 0 6px 18px rgba(15, 99, 230, 0.15);
}

.sidebar-toggle-btn:active {
    transform: translateY(1px);
}

.sidebar-toggle-icon {
    position: relative;
    width: 18px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 4px;
}

.sidebar-toggle-icon::before {
    content: '';
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 5px;
    width: 2px;
    background: currentColor;
}

.container.sidebar-collapsed .sidebar-toggle-icon::before {
    left: auto;
    right: 5px;
}

/* 顶部工具栏 */
.top-toolbar {
    background: transparent;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #e9ecef;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
    box-shadow: none;
}

.toolbar-left {
    display: flex;
    align-items: center;
}

.page-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

/* 内容区域 */
.content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding: 24px;
    padding-bottom: 60px;
    position: relative;
    min-height: 0;
    height: calc(100vh - 24px - 24px - 60px);
}

.composer-drop-overlay {
    position: absolute;
    z-index: 80;
    inset: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #3047ad;
    background:
        linear-gradient(145deg, rgba(247, 249, 255, 0.97), rgba(236, 241, 255, 0.95));
    border: 2px dashed rgba(75, 102, 219, 0.58);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(48, 71, 173, 0.18);
    pointer-events: none;
    backdrop-filter: blur(6px);
}

.composer-drop-overlay[hidden] {
    display: none;
}

.composer-drop-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: #fff;
    background: linear-gradient(145deg, #5d72d8, #3f57c0);
    border-radius: 15px;
    box-shadow: 0 10px 24px rgba(63, 87, 192, 0.25);
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
}

.composer-drop-overlay strong {
    font-size: 17px;
    font-weight: 750;
}

.composer-drop-overlay small {
    color: #65709c;
    font-size: 12px;
}

.content-area.is-file-dragging .input-container {
    border-color: rgba(75, 102, 219, 0.5);
}

/* 无结果时的居中布局 */
.content-area.no-result {
    justify-content: flex-start;
    align-items: stretch;
}

/* 有结果时的布局 */
.content-area.has-result {
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 搜索区域 */
.search-section {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 24px;
    border: none;
    transition: all 0.3s ease;
}

/* 无结果时搜索区域布局 */
.content-area.no-result .search-section {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 有结果时搜索区域布局 */
.content-area.has-result .search-section {
    position: static;
    margin-bottom: 0;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 无结果时result-section隐藏 */
.content-area.no-result .result-section {
    display: none;
}

/* 有结果时result-section占据主要空间 */
.content-area.has-result .result-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    margin-bottom: 20px;
    min-height: 0;
    align-items: center;
    justify-content: flex-start;
}

/* 无结果时selector-row在顶部 */
.content-area.no-result .selector-row {
    flex-shrink: 0;
    margin-bottom: 0;
}

/* 输入区域居中包装器 */
.input-center-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* 无结果时input-center-wrapper垂直居中 */
.content-area.no-result .input-center-wrapper {
    flex: 1;
    justify-content: center;
}

/* 有结果时input-center-wrapper固定在底部 */
.content-area.has-result .input-center-wrapper {
    display: block;
    flex: none;
    margin-top: auto;
    margin-bottom: 20px;
}

/* 输入区域头部 */
.input-header {
    padding: 0 0 16px 0;
    text-align: center;
    margin-bottom: 6px;
    transition: all 0.3s ease;
}

/* 有结果时隐藏输入头部 */
.content-area.has-result .input-header {
    display: none;
}

/* 无结果时显示输入头部 */
.content-area.no-result .input-header {
    display: block;
}

.input-title {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 8px 0;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.input-subtitle {
    font-size: 14px;
    color: #7f8c8d;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.selector-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.selector-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    max-width: 50%;
}

.model-selector,
.knowledge-base-selector,
.parameter-rule-selector,
.language-select {
    display: flex;
    align-items: center;
    gap: 8px;
}

.model-selector label,
.knowledge-base-selector label,
.parameter-rule-selector label,
.language-select label {
    display: none;
}

.model-select,
.knowledge-base-select,
.parameter-rule-select,
.language-select {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 13px;
    background: white;
    color: #495057;
    transition: all 0.3s ease;
    min-width: 120px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px;
}

.model-select:focus,
.knowledge-base-select:focus,
.parameter-rule-select:focus,
.language-select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.model-select:hover,
.knowledge-base-select:hover,
.parameter-rule-select:hover,
.language-select:hover {
    border-color: #007bff;
    background-color: #f8f9fa;
}

.model-select option,
.knowledge-base-select option,
.parameter-rule-select option,
.language-select option {
    padding: 8px;
    font-size: 13px;
}

.selector-divider {
    color: #6c757d;
    font-size: 14px;
    font-weight: 300;
    margin: 0 4px;
}

.selector-right {
    display: flex;
    align-items: center;
}

.language-switcher {
    margin-right: 12px;
}

.language-select {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #495057;
    cursor: pointer;
    transition: all 0.3s ease;
}

.language-select:hover,
.language-select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

.settings-button {
    background: #f8f9fa;
    border: 1px solid #ced4da;
    color: #495057;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.settings-button:hover {
    background: #e9ecef;
    border-color: #007bff;
    color: #007bff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.settings-button:active {
    transform: translateY(0);
}

.settings-icon {
    font-size: 14px;
}

.login-button {
    min-width: 92px;
    justify-content: center;
    background: #ffffff;
    color: #0f172a;
    border-color: #cbd5e1;
}

.login-button:hover {
    background: #f8fbff;
    color: #0f63e6;
    border-color: #0f63e6;
}

.login-button.logged-in {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

/* 新的输入区域设计 */
.input-container {
    position: relative;
    width: 800px;
    max-width: 100%;
    margin: 0 auto;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.input-container:focus-within {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.question-input {
    width: 100%;
    padding: 16px 60px 16px 16px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    min-height: 80px;
    background: transparent;
    outline: none;
    transition: all 0.3s ease;
}

.question-input:focus {
    outline: none;
}

.question-input::placeholder {
    color: #6c757d;
    opacity: 0.8;
}

/* 字符计数显示 */
.character-count {
    position: absolute;
    bottom: 12px;
    left: 12px;
    font-size: 12px;
    color: #6c757d;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 10;
    transition: color 0.3s ease;
}

.character-count.warning {
    color: #ffc107;
}

.character-count.danger {
    color: #dc3545;
}

.composer-input-limit-notice {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 12px 8px;
    padding: 8px 10px;
    border: 1px solid #fed7aa;
    border-radius: 9px;
    color: #9a3412;
    background: #fff7ed;
    box-shadow: 0 3px 10px rgb(194 65 12 / 7%);
    font-size: 12px;
    line-height: 1.55;
    animation: composer-input-limit-enter .18s ease-out;
}

.composer-input-limit-notice::before {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #ffffff;
    background: #f97316;
    content: '!';
    font-size: 11px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

.composer-input-limit-notice[hidden] {
    display: none;
}

@keyframes composer-input-limit-enter {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 提问按钮 */
.ask-button {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 10;
}

.ask-button.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.ask-button.active:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.ask-button.active:active {
    transform: translateY(0);
}

.ask-button .button-text {
    display: none;
}

.ask-button .loading-spinner {
    display: none;
    animation: spin 1s linear infinite;
}

.ask-button.loading .loading-spinner {
    display: block;
}

.ask-button.loading .send-icon {
    display: none;
}

.send-icon {
    font-size: 18px;
    line-height: 1;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 结果区域 */
.result-section {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 400px;
    align-items: center;
    justify-content: flex-start;
}

.result-container {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    flex: 1;
    overflow-y: auto;
    animation: fadeIn 0.3s ease;
    min-height: 400px;
    max-height: calc(100vh - 300px);
    width: min(1040px, calc(100% - 48px));
    max-width: 1040px;
    margin: 0 auto;
    /* 减少布局抖动 */
    contain: layout style paint;
    will-change: scroll-position;
    /* 平滑滚动 */
    scroll-behavior: smooth;

    /* 自定义滚动条样式 */
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

/* Webkit浏览器的滚动条样式 */
.result-container::-webkit-scrollbar {
    width: 8px;
}

.result-container::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

.result-container::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
    border: 1px solid transparent;
    background-clip: content-box;
}

.result-container::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
    background-clip: content-box;
}

.result-container::-webkit-scrollbar-thumb:active {
    background: #6b7280;
    background-clip: content-box;
}

.result-title {
    display: none;
}

.result-text {
    line-height: 1.6;
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
    max-width: min(860px, 86%);
    /* 减少重排 */
    contain: layout style;
    /* 预分配空间 */
    min-height: 100px;
    margin: 8px auto 0 0;
    /* 平滑过渡 */
    transition: all 0.2s ease-out;
}

.error-state-card {
    display: flex;
    gap: 14px;
    width: min(720px, 100%);
    margin: 10px 0;
    padding: 18px 20px;
    border: 1px solid #f1c9c9;
    border-radius: 10px;
    background: #fffafa;
    color: #3f2a2a;
    box-shadow: 0 10px 26px rgba(112, 38, 38, 0.06);
}

.error-state-card--auth {
    border-color: #bfdbfe;
    background: #f8fbff;
    color: #1e3a5f;
    box-shadow: 0 10px 26px rgba(37, 99, 235, 0.07);
}

.error-state-card--token {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--qa-brand-500, #4f6fd4) 30%, #dbe4f8);
    background:
        linear-gradient(135deg, rgba(238, 243, 255, .98), rgba(250, 252, 255, .98));
    color: var(--qa-text-secondary, #526078);
    box-shadow: 0 14px 34px rgba(57, 82, 160, .10);
}

.error-state-card--token::after {
    position: absolute;
    top: -48px;
    right: -38px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: rgba(79, 111, 212, .08);
    content: "";
    pointer-events: none;
}

.error-state-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    margin-top: 1px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.error-state-card--auth .error-state-icon {
    background: #dbeafe;
    color: #1d4ed8;
}

.error-state-card--token .error-state-icon {
    background: linear-gradient(145deg, #5d7de0, #3e5fc5);
    color: #fff;
    box-shadow: 0 6px 14px rgba(62, 95, 197, .24);
    font-size: 13px;
}

.error-state-body {
    flex: 1;
    min-width: 0;
}

.error-state-title {
    color: #991b1b;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 6px;
}

.error-state-card--auth .error-state-title {
    color: #1d4ed8;
}

.error-state-card--token .error-state-title {
    color: var(--qa-text-primary, #273247);
    font-size: 16px;
}

.error-state-message {
    color: inherit;
    font-size: 14px;
    line-height: 1.6;
}

.error-state-detail {
    margin-top: 8px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.5;
}

.error-state-action {
    margin-top: 14px;
    border: 1px solid #2563eb;
    border-radius: 7px;
    background: #2563eb;
    color: #fff;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.error-state-action:hover {
    background: #1d4ed8;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
    transform: translateY(-1px);
}

.error-state-advice {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f1c9c9;
    color: #7f1d1d;
    font-size: 12px;
}

.error-state-advice-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.error-state-advice ul {
    margin: 0;
    padding-left: 18px;
}

.error-state-advice li {
    margin: 3px 0;
}

.result-text h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 20px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

.result-text h4 {
    font-size: 16px;
    font-weight: 600;
    color: #495057;
    margin: 1px 0 8px 0;
}

.result-text strong {
    font-weight: 600;
    color: #333;
}

.result-text em {
    font-style: italic;
    color: #6c757d;
}

.result-text code {
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #e83e8c;
    border: 1px solid #e9ecef;
}

.result-text pre {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    border: 1px solid #e9ecef;
    margin: 16px 0;
}

/* 代码块包装器样式 */
.result-text .code-block-wrapper {
    position: relative;
    margin: 16px 0;
}

.result-text .code-block-wrapper pre {
    background: #f8f9fa;
    padding: 16px;
    padding-right: 50px; /* 为复制按钮留出空间 */
    border-radius: 8px;
    overflow-x: auto;
    border: 1px solid #e9ecef;
    margin: 0;
}

/* 代码块复制按钮样式 */
.result-text .code-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.7;
    z-index: 10;
}

.result-text .code-copy-btn:hover {
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    border-color: #667eea;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.result-text .code-copy-icon {
    width: 14px;
    height: 14px;
    display: block;
}

.result-text .code-copy-btn:active {
    transform: scale(0.95);
}

/* 纯文本的pre标签样式 - 不显示背景和边框 */
.result-text pre.plain-text-pre {
    background: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
    margin: 0;
    overflow-x: visible;
}

.result-text pre code {
    background: none;
    padding: 0;
    border: none;
    color: #333;
}

.result-text blockquote {
    /* padding-left: 16px; */
    margin: 16px 0;
    color: #444;
}

.result-text hr {
    border: none;
    border-top: 1px solid #e9ecef;
    margin: 20px 0;
}

.result-text li {
    margin: 4px 0;
}

.result-text a {
    color: #007bff;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.result-text a:hover {
    border-bottom-color: #007bff;
}

.result-text p {
    margin: 12px 0;
    white-space: pre-line;
    /* 保持换行符 */
    line-height: 1.6;
    /* 改善换行后的行间距 */
}

/* 结果操作区域 */
.result-actions {
    border-top: 1px solid #e9ecef;
    padding-top: 16px;
    flex-shrink: 0;
    width: 100%;
    max-width: 800px;
}

.action-icons-row {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    align-items: center;
    padding-left: 10px;
}

.action-icon-btn {
    background: transparent !important;
    border: none;
    color: #9ca3af;
    padding: 6px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    font-size: 14px;
    opacity: 0.7;
}

.action-icon-btn:hover {
    background: #F8F8FA !important;
    color: #6b7280;
    opacity: 1;
    transform: none;
}

.action-icon-btn:active {
    transform: none;
    background: #F8F8FA !important;
}

.action-icon-btn.like-btn:hover {
    background: #F8F8FA !important;
    color: #28a745;
}

.action-icon-btn.dislike-btn:hover {
    background: #F8F8FA !important;
    color: #dc3545;
}

.action-icon-btn.export-btn:hover {
    background: #F8F8FA !important;
    color: #17a2b8;
}

.action-icon-btn.copy-btn:hover {
    background: #F8F8FA !important;
    color: #ffc107;
}

.action-icon-btn.clear-btn:hover {
    background: #F8F8FA !important;
    color: #dc3545;
}

.action-icon-btn.active {
    transform: none;
}

.action-icon-btn.like-btn.active {
    background: transparent !important;
    color: #28a745;
    opacity: 1;
}

.action-icon-btn.dislike-btn.active {
    background: transparent !important;
    color: #dc3545;
    opacity: 1;
}

/* 添加SVG图标的激活状态样式 */
.action-icon-btn.like-btn.active .action-icon-svg {
    filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%) !important;
}

.action-icon-btn.dislike-btn.active .action-icon-svg {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

/* 找到这些样式并修改 */
.action-icon-btn.like-btn.active {
    background: transparent !important;
    color: #28a745;
    /* 绿色 */
    opacity: 1;
}

.action-icon-btn.dislike-btn.active {
    background: transparent !important;
    color: #dc3545;
    /* 红色 */
    opacity: 1;
}

/* 深色模式下的样式也需要修改 */
@media (prefers-color-scheme: dark) {
    .action-icon-btn.like-btn.active {
        background: transparent !important;
        color: #28a745;
        opacity: 1;
    }

    .action-icon-btn.dislike-btn.active {
        background: transparent !important;
        color: #dc3545;
        opacity: 1;
    }
}

.action-icon {
    font-size: 14px;
    line-height: 1;
}

.action-icon-svg {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.4) contrast(1);
    transition: all 0.2s ease;
}

.action-icon-btn:hover .action-icon-svg {
    filter: brightness(0) saturate(100%) invert(30%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.3) contrast(1);
}

.action-icon-btn.like-btn:hover .action-icon-svg {
    filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}

.action-icon-btn.dislike-btn:hover .action-icon-svg {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.action-icon-btn.export-btn:hover .action-icon-svg {
    filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(180deg) brightness(118%) contrast(119%);
}

.action-icon-btn.copy-btn:hover .action-icon-svg {
    filter: brightness(0) saturate(100%) invert(83%) sepia(31%) saturate(638%) hue-rotate(359deg) brightness(103%) contrast(107%);
}

.action-icon-btn.clear-btn:hover .action-icon-svg {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.action-icon-btn.active .action-icon {
    animation: none;
}

/* 底部版本信息 */
.footer {
    background: white;
    border-radius: 0;
    border: none;
    border-top: 1px solid #e9ecef;
    padding: 16px 24px;
    text-align: center;
    flex-shrink: 0;
    margin: 0;
    box-shadow: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.version {
    font-size: 12px;
    color: #6c757d;
    margin: 0;
}

/* 回到顶部按钮 */
.back-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #007bff;
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    z-index: 1000;
}

.back-to-top-btn:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);
}

.back-to-top-btn:active {
    transform: translateY(0);
}

.back-to-top-icon {
    font-size: 20px;
    font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .sidebar-toggle-btn {
        display: none;
    }

    .container.sidebar-collapsed .sidebar {
        width: 100%;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
    }

    .container {
        flex-direction: column;
    }

    .popup-mode .container {
        width: 100%;
        min-height: 100vh;
        border-radius: 0;
    }

    .sidebar {
        width: 100%;
        flex-direction: row;
        padding: 12px;
        align-items: center;
        justify-content: space-between;
    }

    .logo-section {
        padding: 0;
        border-bottom: none;
        flex: 1;
    }

    .logo-content {
        flex-direction: row;
        text-align: left;
        gap: 12px;
    }

    .logo-icon {
        width: 40px;
        height: 28px;
        margin-bottom: 0;
    }

    .logo-title {
        font-size: 16px;
    }

    .logo-subtitle {
        font-size: 10px;
    }

    .quick-actions-sidebar {
        padding: 0;
        flex: none;
    }

    .action-buttons-vertical {
        flex-direction: row;
        gap: 4px;
        padding: 0;
    }

    .sidebar-action-btn,
    .help-btn-sidebar {
        padding: 8px 12px;
        font-size: 12px;
        gap: 6px;
    }

    .action-text {
        display: none;
    }

    .help-section {
        padding: 0;
        border-top: none;
        flex: none;
    }

    .help-text {
        display: none;
    }

    .bottom-icons-section {
        padding: 10px 16px;
    }

    .bottom-icons-row {
        gap: 4px;
    }

    .bottom-icon-btn {
        min-width: 28px;
        height: 28px;
        font-size: 12px;
        padding: 4px;
    }

    .main-content {
        flex: 1;
    }

    .content-area {
        padding: 16px;
    }

    .selector-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .search-section {
        padding: 16px;
        margin-bottom: 16px;
    }

    .result-container {
        padding: 16px;
    }

    .action-icons-row {
        gap: 8px;
        padding-left: 5px;
    }

    .action-icon-btn {
        min-width: 24px;
        height: 24px;
        font-size: 12px;
        padding: 4px;
        background: transparent !important;
    }

    .action-icon-svg {
        width: 14px;
        height: 14px;
    }

    .action-icon-btn:hover {
        background: #F8F8FA !important;
        color: #6b7280;
        opacity: 1;
    }

    .action-icon-btn.like-btn:hover {
        background: #F8F8FA !important;
        color: #28a745;
    }

    .action-icon-btn.dislike-btn:hover {
        background: #F8F8FA !important;
        color: #dc3545;
    }

    .action-icon-btn.export-btn:hover {
        background: #F8F8FA !important;
        color: #17a2b8;
    }

    .action-icon-btn.copy-btn:hover {
        background: #F8F8FA !important;
        color: #ffc107;
    }

    .action-icon-btn.clear-btn:hover {
        background: #F8F8FA !important;
        color: #dc3545;
    }
}

/* BICBOT generated files */
.bicbot-stream-files {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: min(100%, 560px);
    margin-top: 16px;
}

.bicbot-stream-file {
    min-width: 0;
    min-height: 66px;
    padding: 11px 12px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(84, 117, 216, 0.22);
    border-radius: 12px;
    color: var(--qa-text-900, #202939);
    background: linear-gradient(110deg, #ffffff 0%, #f7f9ff 100%);
    box-shadow:
        inset 3px 0 0 var(--qa-brand-500, #5475d8),
        0 7px 20px rgba(43, 63, 116, 0.09);
    text-align: left;
    cursor: pointer;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.bicbot-stream-file:hover {
    transform: translateY(-2px);
    border-color: var(--qa-brand-400, #7594ea);
    background: linear-gradient(110deg, #ffffff 0%, #f0f4ff 100%);
    box-shadow:
        inset 3px 0 0 var(--qa-brand-600, #4565c0),
        0 12px 28px rgba(62, 91, 170, 0.16);
}

.bicbot-stream-file:focus-visible {
    outline: 0;
    border-color: var(--qa-brand-500, #5475d8);
    box-shadow: var(--qa-focus-ring, 0 0 0 3px rgba(84, 117, 216, 0.2));
}

.bicbot-stream-file:disabled {
    cursor: progress;
}

.bicbot-stream-file-type {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--qa-brand-500, #5475d8);
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(145deg, #6f8ce5, #4565c0);
    box-shadow: 0 4px 10px rgba(69, 101, 192, 0.24);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.bicbot-stream-file-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.bicbot-stream-file-name {
    overflow: hidden;
    color: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bicbot-stream-file-status {
    overflow: hidden;
    color: var(--qa-text-500, #697386);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bicbot-stream-file-status::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: #22a06b;
    box-shadow: 0 0 0 3px rgba(34, 160, 107, 0.1);
    vertical-align: 1px;
}

.bicbot-stream-file-action {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--qa-brand-700, #3554a3);
    background: rgba(84, 117, 216, 0.13);
    font-size: 17px;
    font-weight: 700;
    transition: transform 160ms ease, background-color 160ms ease;
}

/* Generated report links */
.result-text-content a[href*="/.bic/web/chats/"][href*=".html"],
.result-text-content a[href*="/data/bic-qa/deploy/data/knowl/bic/web/chats/"][href*=".html"] {
    box-sizing: border-box;
    width: min(100%, 560px);
    min-height: 72px;
    margin: 18px 0 8px;
    padding: 12px 13px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    color: var(--qa-text-900, #202939) !important;
    background: linear-gradient(110deg, #ffffff 0%, #f4f7ff 100%);
    border: 1px solid rgba(84, 117, 216, 0.24);
    border-radius: 13px;
    box-shadow:
        inset 3px 0 0 var(--qa-brand-500, #5475d8),
        0 8px 22px rgba(43, 63, 116, 0.1);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
    text-decoration: none !important;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.result-text-content a[href*="/.bic/web/chats/"][href*=".html"]::before,
.result-text-content a[href*="/data/bic-qa/deploy/data/knowl/bic/web/chats/"][href*=".html"]::before {
    content: "HTML";
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(145deg, #6f8ce5, #4565c0);
    border-radius: 11px;
    box-shadow: 0 5px 12px rgba(69, 101, 192, 0.25);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.result-text-content a[href*="/.bic/web/chats/"][href*=".html"]::after,
.result-text-content a[href*="/data/bic-qa/deploy/data/knowl/bic/web/chats/"][href*=".html"]::after {
    content: attr(data-download-label);
    min-width: 66px;
    min-height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--qa-brand-700, #3554a3);
    background: rgba(84, 117, 216, 0.12);
    border: 1px solid rgba(84, 117, 216, 0.16);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.result-text-content a[href*="/.bic/web/chats/"][href*=".html"]:hover,
.result-text-content a[href*="/data/bic-qa/deploy/data/knowl/bic/web/chats/"][href*=".html"]:hover {
    transform: translateY(-2px);
    color: var(--qa-brand-700, #3554a3) !important;
    background: linear-gradient(110deg, #ffffff 0%, #edf2ff 100%);
    border-color: var(--qa-brand-400, #7594ea);
    box-shadow:
        inset 3px 0 0 var(--qa-brand-600, #4565c0),
        0 13px 30px rgba(62, 91, 170, 0.17);
}

.result-text-content a[href*="/.bic/web/chats/"][href*=".html"]:focus-visible,
.result-text-content a[href*="/data/bic-qa/deploy/data/knowl/bic/web/chats/"][href*=".html"]:focus-visible {
    outline: 0;
    border-color: var(--qa-brand-500, #5475d8);
    box-shadow: var(--qa-focus-ring, 0 0 0 3px rgba(84, 117, 216, 0.2));
}

.result-text-content a.is-downloading::after {
    color: var(--qa-brand-600, #4565c0);
    cursor: progress;
}

.result-text-content a.is-error::after {
    color: #b42318;
    background: #fff1f2;
    border-color: #fecaca;
}

@media (max-width: 560px) {
    .result-text-content a[href*="/.bic/web/chats/"][href*=".html"],
    .result-text-content a[href*="/data/bic-qa/deploy/data/knowl/bic/web/chats/"][href*=".html"] {
        min-height: 64px;
        padding: 10px;
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 9px;
    }

    .result-text-content a[href*="/.bic/web/chats/"][href*=".html"]::before,
    .result-text-content a[href*="/data/bic-qa/deploy/data/knowl/bic/web/chats/"][href*=".html"]::before {
        width: 38px;
        height: 38px;
        border-radius: 9px;
        font-size: 8px;
    }

    .result-text-content a[href*="/.bic/web/chats/"][href*=".html"]::after,
    .result-text-content a[href*="/data/bic-qa/deploy/data/knowl/bic/web/chats/"][href*=".html"]::after {
        min-width: 36px;
        padding: 0 8px;
    }
}

.result-text-content a.is-superseded-report-link {
    display: none !important;
}

.bicbot-stream-file:hover .bicbot-stream-file-action {
    transform: translateY(2px);
    background: rgba(84, 117, 216, 0.16);
}

.bicbot-stream-file.is-downloading .bicbot-stream-file-action {
    color: transparent;
}

.bicbot-stream-file.is-downloading .bicbot-stream-file-action::after {
    content: "";
    width: 13px;
    height: 13px;
    border: 2px solid rgba(84, 117, 216, 0.28);
    border-top-color: var(--qa-brand-600, #4565c0);
    border-radius: 50%;
    animation: bicbot-file-spin 700ms linear infinite;
}

.bicbot-stream-file.is-error {
    border-color: #efb4b4;
    background: #fff8f8;
}

.bicbot-stream-file.is-error .bicbot-stream-file-status,
.bicbot-stream-file.is-error .bicbot-stream-file-action {
    color: #b42318;
}

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

@media (max-width: 560px) {
    .bicbot-stream-files {
        grid-template-columns: minmax(0, 1fr);
    }

    .bicbot-stream-file {
        min-height: 62px;
        grid-template-columns: 38px minmax(0, 1fr) 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bicbot-stream-file,
    .bicbot-stream-file-action {
        transition: none;
    }

    .bicbot-stream-file:hover {
        transform: none;
    }
}

/* Chat attachment and answer metadata */
.user-message-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
}

.user-message-row .question-text {
    flex: 1 1 auto;
    min-width: 40px;
    text-align: left;
}

.sent-mode-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 22px;
    padding: 2px 7px;
    color: #4258b8;
    background: rgba(75, 102, 219, 0.09);
    border: 1px solid rgba(75, 102, 219, 0.2);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.sent-attachment-list {
    display: inline-flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.sent-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    max-width: 190px;
    min-height: 36px;
    padding: 4px 8px 4px 5px;
    color: var(--qa-text-secondary);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(75, 102, 219, 0.18);
    border-radius: 9px;
}

button.sent-attachment-chip {
    appearance: none;
    font: inherit;
    text-align: left;
}

.sent-attachment-chip.is-downloadable {
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.sent-attachment-chip.is-downloadable:hover:not(:disabled) {
    border-color: rgba(75, 102, 219, 0.42);
    box-shadow: 0 5px 14px rgba(49, 76, 190, 0.14);
    transform: translateY(-1px);
}

.sent-attachment-chip.is-downloadable:focus-visible {
    outline: 2px solid var(--qa-brand-500);
    outline-offset: 2px;
}

.sent-attachment-chip.is-downloading {
    cursor: wait;
    opacity: 0.76;
}

.sent-attachment-chip.is-error {
    border-color: rgba(215, 65, 65, 0.42);
}

.sent-attachment-type {
    display: inline-grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    overflow: hidden;
    color: #ffffff;
    background: var(--qa-brand-500);
    border-radius: 7px;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.02em;
}

.sent-attachment-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.sent-attachment-name {
    overflow: hidden;
    color: var(--qa-text-primary);
    font-size: 11px;
    font-weight: 650;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sent-attachment-size {
    color: var(--qa-text-tertiary);
    font-size: 9px;
    line-height: 12px;
}

.analysis-task-user-head {
    flex-wrap: wrap;
}

.analysis-task-user-attachments {
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.analysis-task-attachment {
    gap: 7px;
    width: auto;
    max-width: 190px;
    min-height: 38px;
    padding: 5px 9px 5px 5px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(31, 36, 50, 0.05);
}

.analysis-task-attachment-type {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 8px;
}

.analysis-task-attachment-name {
    font-size: 11px;
    line-height: 14px;
}

.analysis-task-attachment-size {
    font-size: 9px;
    line-height: 12px;
}

.composer-attachment-card.is-pending {
    border-color: var(--qa-brand-200);
}

.composer-attachment-card.is-pending .composer-attachment-status {
    color: var(--qa-brand-600);
}

.composer-attachment-card.is-valid {
    border-color: rgba(34, 197, 94, 0.38);
}

.composer-attachment-card.is-valid .composer-attachment-status {
    color: #16803c;
}

.composer-attachment-card.is-invalid {
    border-color: var(--qa-danger);
    background: #fff7f7;
}

.composer-attachment-card.is-invalid .composer-attachment-status {
    color: var(--qa-danger);
    font-weight: 650;
}

.result-answer-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-height: 20px;
    margin: 8px 2px 0;
    color: var(--qa-text-tertiary);
    font-size: 12px;
    line-height: 18px;
}

.result-answer-meta[hidden] {
    display: none;
}

.bicbot-message-meta {
    margin-top: 6px;
    color: var(--qa-text-tertiary);
    font-size: 11px;
    line-height: 16px;
    text-align: right;
}

@media (max-width: 768px) {
    .question-content {
        max-width: 94%;
    }

    .sent-attachment-list {
        max-width: 55%;
    }

    .sent-attachment-chip,
    .analysis-task-attachment {
        max-width: min(160px, 100%);
    }

    .analysis-user-question {
        max-width: 100%;
    }
}

/* Compact analysis task messages */
.analysis-task-user-message {
    width: min(88%, 760px);
    margin-bottom: 14px;
}

.analysis-task-user-head {
    min-width: 0;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 0;
}

.analysis-task-user-head .analysis-task-mode-badge,
.analysis-task-user-head .analysis-task-demo-badge {
    flex: 0 0 auto;
}

.analysis-user-question {
    min-width: 0;
    max-width: 430px;
    margin: 0 0 0 2px;
    overflow: hidden;
    font-size: 14px;
    line-height: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analysis-task-user-attachments {
    margin-top: 8px;
}

.analysis-task-card {
    margin: 0 auto 18px 0;
    padding: 14px 16px;
    border-radius: 16px 16px 16px 5px;
}

.analysis-task-stage {
    margin-top: 3px;
}

.analysis-task-progress {
    margin-top: 12px;
}

.analysis-task-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
}

.analysis-task-meta-copy {
    min-width: 0;
}

.analysis-task-meta .analysis-task-timing {
    margin-top: 0;
}

.analysis-task-meta .analysis-task-demo-note {
    margin-top: 3px;
}

.analysis-task-actions {
    flex: 0 0 auto;
    margin-top: 0;
}

.analysis-task-cancel,
.analysis-task-retry {
    min-height: 32px;
    padding: 5px 12px;
}

@media (max-width: 768px) {
    .analysis-task-user-message {
        width: 96%;
    }

    .analysis-user-question {
        max-width: min(42vw, 240px);
    }

    .analysis-task-meta {
        gap: 10px;
    }
}

/* BIC-QA Async Analysis Tasks */
.analysis-task-message-list {
    width: min(100%, 920px);
    margin: 0 auto;
    padding: 24px 18px 132px;
}

.analysis-task-message-list[hidden] {
    display: none;
}

.analysis-task-user-message {
    width: min(78%, 680px);
    margin: 0 0 18px auto;
    padding: 0;
    color: var(--qa-text-primary, #172033);
}

.analysis-task-user-head,
.analysis-task-card-head,
.analysis-task-user-attachments,
.analysis-task-progress,
.analysis-task-actions {
    display: flex;
    align-items: center;
}

.analysis-task-user-head {
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 8px;
}

.analysis-task-mode-badge,
.analysis-task-demo-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
}

.analysis-task-mode-badge {
    color: var(--qa-brand-700, #7133d5);
    background: var(--qa-brand-50, #f7f2ff);
    border: 1px solid var(--qa-brand-100, #eadcff);
}

.analysis-task-demo-badge {
    color: #8b5c00;
    background: #fff7dc;
    border: 1px solid #f5d881;
}

.analysis-user-question {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.analysis-task-user-attachments {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.analysis-task-attachment {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: min(250px, 100%);
    padding: 9px 11px;
    text-align: left;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--qa-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(31, 36, 50, 0.06);
}

.analysis-task-attachment-type,
.analysis-task-result-file-type {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    color: #fff;
    background: linear-gradient(145deg, #4b66db, #7451c9);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
}

.analysis-task-attachment-copy,
.analysis-task-result-file-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.analysis-task-attachment-name,
.analysis-task-result-file-name {
    overflow: hidden;
    color: var(--qa-text-primary, #172033);
    font-size: 13px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analysis-task-attachment-size,
.analysis-task-result-file-meta {
    color: var(--qa-text-tertiary, #7c8497);
    font-size: 11px;
}

.analysis-task-card {
    position: relative;
    width: min(82%, 720px);
    margin: 0 auto 26px 0;
    padding: 18px;
    overflow: hidden;
    color: var(--qa-text-primary, #172033);
    background:
        linear-gradient(135deg, rgba(247, 249, 255, .96), rgba(255, 255, 255, .98));
    border: 1px solid #dfe5f0;
    border-radius: 18px 18px 18px 5px;
    box-shadow: 0 14px 38px rgba(29, 42, 76, .08);
}

.analysis-task-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #4968dc, #7a57c9);
}

.analysis-task-card.is-completed::before {
    background: #25a66b;
}

.analysis-task-card.is-failed::before,
.analysis-task-card.is-cancelled::before {
    background: #cb4c59;
}

.analysis-task-card-head {
    justify-content: space-between;
    gap: 12px;
}

.analysis-task-card-title {
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -.01em;
}

.analysis-task-stage {
    display: block;
    margin-top: 5px;
    color: var(--qa-text-secondary, #596174);
    font-size: 12px;
}

.analysis-task-progress {
    gap: 12px;
    margin-top: 16px;
}

.analysis-task-progress-track {
    position: relative;
    height: 8px;
    flex: 1;
    overflow: hidden;
    background: #e8ecf4;
    border-radius: 999px;
}

.analysis-task-progress-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #4968dc, #7a57c9);
    border-radius: inherit;
    transition: width .45s cubic-bezier(.2, .8, .2, 1);
}

.analysis-task-progress-value {
    width: 40px;
    color: #41527e;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    text-align: right;
}

.analysis-task-timing {
    margin: 9px 0 0;
    color: var(--qa-text-secondary, #626b7d);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.analysis-task-demo-note {
    margin: 7px 0 0;
    color: #8b6a24;
    font-size: 11px;
}

.analysis-task-answer-card {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid #e7eaf1;
}

.analysis-task-answer-title {
    margin: 0 0 8px;
    color: #38425a;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .05em;
}

.analysis-task-answer {
    color: #252d3e;
    font-size: 14px;
    line-height: 1.72;
    overflow-wrap: anywhere;
}

.analysis-task-answer p {
    margin: 0 0 9px;
}

.analysis-task-answer-heading {
    margin: 14px 0 8px;
    color: #20283a;
    font-size: 15px;
    line-height: 1.4;
}

.analysis-task-answer-heading:first-child {
    margin-top: 0;
}

.analysis-task-answer-quote {
    margin: 9px 0 12px;
    padding: 8px 11px;
    color: #59657d;
    background: #f1f4fa;
    border-left: 3px solid #7588da;
    border-radius: 0 8px 8px 0;
}

.analysis-task-answer-list {
    margin: 6px 0 10px;
    padding-left: 20px;
}

.analysis-task-answer-list li {
    margin: 4px 0;
}

.analysis-task-answer-code {
    margin: 10px 0 12px;
    padding: 12px 14px;
    overflow: auto;
    color: #dbe5ff;
    background: #20283a;
    border-radius: 10px;
    font: 12px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre;
}

.analysis-task-result-files {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 9px;
    margin-top: 14px;
}

.analysis-task-result-file {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    color: inherit;
    text-align: left;
    background: #fff;
    border: 1px solid #dfe4ee;
    border-radius: 12px;
    cursor: pointer;
    transition:
        transform var(--qa-motion-fast, .16s),
        border-color var(--qa-motion-fast, .16s),
        box-shadow var(--qa-motion-fast, .16s);
}

.analysis-task-result-file:hover {
    border-color: var(--qa-brand-400, #8d6bdb);
    box-shadow: 0 10px 24px rgba(58, 67, 100, .1);
    transform: translateY(-1px);
}

.analysis-task-result-file:focus-visible,
.analysis-task-cancel:focus-visible,
.analysis-task-retry:focus-visible,
.analysis-task-settings button:focus-visible,
.analysis-task-settings input:focus-visible,
.analysis-task-settings select:focus-visible {
    outline: 2px solid var(--qa-brand-500, #7350c8);
    outline-offset: 2px;
}

.analysis-task-actions {
    justify-content: flex-end;
    margin-top: 12px;
}

.analysis-task-cancel,
.analysis-task-retry {
    min-height: 34px;
    padding: 6px 13px;
    color: #526078;
    background: #fff;
    border: 1px solid #d8deea;
    border-radius: 9px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
}

.analysis-task-retry {
    color: #fff;
    background: #536dd9;
    border-color: #536dd9;
}

.analysis-task-error {
    margin: 12px 0 0;
    padding: 9px 11px;
    color: #a73543;
    background: #fff1f2;
    border: 1px solid #f0c5ca;
    border-radius: 9px;
    font-size: 12px;
}

.analysis-task-settings {
    position: absolute;
    z-index: 24;
    right: 12px;
    bottom: calc(100% + 12px);
    width: min(380px, calc(100vw - 40px));
    padding: 16px;
    color: #20283a;
    background: rgba(255, 255, 255, .98);
    border: 1px solid #dfe4ee;
    border-radius: 16px;
    box-shadow: 0 22px 54px rgba(24, 32, 56, .18);
    backdrop-filter: blur(16px);
}

.analysis-task-settings[hidden] {
    display: none;
}

.input-container:has(.analysis-task-settings:not([hidden])) {
    z-index: 30;
    overflow: visible;
}

.analysis-task-settings-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.analysis-task-settings h3 {
    margin: 0;
    font-size: 15px;
}

.analysis-task-settings-head p {
    margin: 4px 0 0;
    color: #6e7687;
    font-size: 12px;
    line-height: 1.45;
}

.analysis-task-settings-close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    color: #6b7383;
    background: #f5f6f9;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.analysis-task-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.analysis-task-settings-grid label {
    display: grid;
    gap: 6px;
    color: #5e6677;
    font-size: 11px;
    font-weight: 650;
}

.analysis-task-settings input[type="email"],
.analysis-task-settings select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    color: #252d3e;
    background: #fafbfc;
    border: 1px solid #d9dee8;
    border-radius: 9px;
}

.analysis-task-settings-terms {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    color: #697184;
    font-size: 11px;
    line-height: 1.45;
}

.analysis-task-settings-save {
    width: 100%;
    min-height: 38px;
    margin-top: 12px;
    color: #fff;
    background: #536dd9;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .analysis-task-message-list {
        padding: 16px 10px 360px;
    }

    .analysis-task-user-message,
    .analysis-task-card {
        width: 94%;
    }

    .analysis-task-settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .analysis-task-progress-fill,
    .analysis-task-result-file {
        transition: none;
    }
}

.analysis-file-preview {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(15, 20, 34, .58);
    backdrop-filter: blur(5px);
}

.analysis-file-preview[hidden] {
    display: none;
}

.analysis-file-preview-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(960px, 94vw);
    height: min(720px, 88vh);
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 20px;
    box-shadow: 0 30px 90px rgba(7, 12, 27, .32);
}

.analysis-file-preview-head,
.analysis-file-preview-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    background: #fff;
}

.analysis-file-preview-head {
    border-bottom: 1px solid #e5e9f1;
}

.analysis-file-preview-kicker {
    display: block;
    margin-bottom: 3px;
    color: #6a57b1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.analysis-file-preview-head h2 {
    max-width: min(680px, 70vw);
    margin: 0;
    overflow: hidden;
    color: #20283a;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#closeAnalysisFilePreview {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #636c7e;
    background: #f3f5f8;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 22px;
}

.analysis-file-preview-body {
    min-height: 0;
    overflow: auto;
    background: #f4f6fa;
}

.analysis-file-preview-text {
    min-height: 100%;
    margin: 0;
    padding: 24px;
    color: #293246;
    font: 13px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.analysis-file-preview-image {
    display: block;
    width: auto;
    max-width: calc(100% - 40px);
    height: auto;
    max-height: calc(100% - 40px);
    margin: 20px auto;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(33, 42, 63, .14);
}

.analysis-file-preview-pdf {
    width: 100%;
    height: 100%;
    border: 0;
}

.analysis-file-preview-unsupported {
    display: grid;
    place-items: center;
    min-height: 100%;
    padding: 32px;
    color: #626b7d;
    text-align: center;
}

.analysis-file-preview-foot {
    justify-content: flex-end;
    border-top: 1px solid #e5e9f1;
}

#downloadAnalysisFile {
    min-height: 38px;
    padding: 8px 16px;
    color: #fff;
    background: #536dd9;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 600px) {
    .analysis-file-preview {
        padding: 0;
    }

    .analysis-file-preview-panel {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }
}

.analysis-task-toast-region {
    position: fixed;
    z-index: 1400;
    right: 20px;
    top: 20px;
    display: grid;
    width: min(340px, calc(100vw - 40px));
    gap: 10px;
    pointer-events: none;
}

.analysis-task-toast {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 13px 15px;
    color: #fff;
    text-align: left;
    background: rgba(29, 38, 64, .96);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 13px;
    box-shadow: 0 16px 42px rgba(8, 14, 30, .28);
    cursor: pointer;
    pointer-events: auto;
}

.analysis-task-toast-title {
    font-size: 13px;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.error-state-card--token .error-state-action {
    min-height: 40px;
    padding: 8px 18px;
    border-color: var(--qa-brand-600, #3e5fc5);
    border-radius: 9px;
    background: var(--qa-brand-600, #3e5fc5);
    box-shadow: 0 7px 16px rgba(62, 95, 197, .22);
    font-weight: 700;
}

.error-state-card--token .error-state-action:hover {
    background: var(--qa-brand-700, #3452ad);
    transform: translateY(-1px);
}

.error-state-action:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--qa-brand-500, #4f6fd4) 30%, transparent);
    outline-offset: 3px;
}

.analysis-task-toast-copy {
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
}

.analysis-task-history-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-left: 7px;
    padding: 2px 7px;
    color: #fff;
    background: #e05263;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
}

.analysis-task-card:focus {
    outline: 3px solid rgba(83, 109, 217, .35);
    outline-offset: 4px;
}

@media (max-width: 480px) {
    .sidebar {
        padding: 8px;
    }

    .logo-content {
        gap: 8px;
    }

    .logo-icon {
        width: 32px;
        height: 22px;
    }

    .logo-title {
        font-size: 14px;
    }

    .logo-subtitle {
        font-size: 9px;
    }

    .sidebar-action-btn,
    .help-btn-sidebar {
        padding: 6px 8px;
        font-size: 11px;
        gap: 4px;
    }

    .bottom-icons-section {
        padding: 8px 12px;
    }

    .bottom-icons-row {
        gap: 3px;
    }

    .bottom-icon-btn {
        min-width: 24px;
        height: 24px;
        font-size: 11px;
        padding: 3px;
    }

    .content-area {
        padding: 12px;
    }

    .search-section {
        padding: 12px;
    }

    .result-container {
        padding: 12px;
    }

    .top-toolbar {
        padding: 12px 16px;
    }

    .page-title {
        font-size: 16px;
    }

    .footer {
        padding: 12px 16px;
    }

    .action-icons-row {
        gap: 6px;
        padding-left: 5px;
    }

    .action-icon-btn {
        min-width: 20px;
        height: 20px;
        font-size: 11px;
        padding: 3px;
        background: transparent !important;
    }

    .action-icon-svg {
        width: 12px;
        height: 12px;
    }

    .action-icon-btn:hover {
        background: #F8F8FA !important;
        color: #6b7280;
        opacity: 1;
    }

    .action-icon-btn.like-btn:hover {
        background: rgba(40, 167, 69, 0.08) !important;
        color: #28a745;
    }

    .action-icon-btn.dislike-btn:hover {
        background: rgba(220, 53, 69, 0.08) !important;
        color: #dc3545;
    }

    .action-icon-btn.export-btn:hover {
        background: #F8F8FA !important;
        color: #17a2b8;
    }

    .action-icon-btn.copy-btn:hover {
        background: #F8F8FA !important;
        color: #ffc107;
    }

    .action-icon-btn.clear-btn:hover {
        background: #F8F8FA !important;
        color: #dc3545;
    }
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-5px);
    }

    60% {
        transform: translateY(-3px);
    }
}

/* 对话框样式保持不变 */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.dialog-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    max-height: 90%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dialog-header {
    background: #f8f9fa;
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dialog-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.bicbot-dialog-container {
    width: min(980px, calc(100vw - 32px));
    height: min(760px, calc(100vh - 32px));
    display: flex;
    flex-direction: column;
}

.bicbot-header {
    align-items: flex-start;
}

.bicbot-subtitle {
    margin: 6px 0 0;
    color: #687386;
    font-size: 13px;
    line-height: 1.5;
}

.bicbot-status {
    margin: 0 24px 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f4f7fb;
    color: #5d6a7d;
    font-size: 13px;
    border: 1px solid #e4eaf2;
}

.bicbot-status-ok {
    background: #effaf4;
    color: #23784d;
    border-color: #c9ebd8;
}

.bicbot-status-error {
    background: #fff1f0;
    color: #b42318;
    border-color: #ffd2cc;
}

.bicbot-status-loading {
    background: #eef5ff;
    color: #1257b7;
    border-color: #c8dcff;
}

.bicbot-content {
    min-height: 0;
    padding: 0 24px 24px;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
}

.bicbot-messages {
    min-height: 260px;
    flex: 1;
    overflow: auto;
    padding: 18px;
    border: 1px solid #e5ebf3;
    border-radius: 10px;
    background: #f8fbff;
}

.bicbot-message {
    max-width: 84%;
    margin-bottom: 14px;
}

.bicbot-message-user {
    margin-left: auto;
}

.bicbot-message-role {
    margin-bottom: 6px;
    color: #6a7485;
    font-size: 12px;
}

.bicbot-message-user .bicbot-message-role {
    text-align: right;
}

.bicbot-message-body {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.7;
    padding: 12px 14px;
    border-radius: 10px;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #e2e8f0;
}

.bicbot-message-user .bicbot-message-body {
    background: #0f63e6;
    border-color: #0f63e6;
    color: #ffffff;
}

.bicbot-interleaved-stream {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.bicbot-interleaved-stream .bicbot-thinking-panel,
.bicbot-thinking-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #c7d9f5;
    border-radius: 12px;
    background: linear-gradient(135deg, #f4f8ff 0%, #fbfdff 100%);
    box-shadow: 0 5px 16px rgb(51 100 177 / 8%);
}

.bicbot-thinking-panel.is-streaming {
    border-color: #8cb5ee;
    animation: bicbot-thinking-pulse 1.8s ease-in-out infinite;
}

.bicbot-thinking-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    gap: 9px;
    padding: 7px 12px;
    border: 0;
    background: transparent;
    color: #275a9d;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.bicbot-thinking-toggle::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b82f6;
    box-shadow: 0 0 0 4px rgb(59 130 246 / 14%);
    content: '';
}

.bicbot-thinking-toggle::after {
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: '';
    transform: rotate(45deg) translateY(-2px);
    transition: transform .18s ease;
}

.bicbot-thinking-panel.is-expanded .bicbot-thinking-toggle::after {
    transform: rotate(225deg) translate(-2px, -1px);
}

.bicbot-thinking-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bicbot-thinking-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: min(32vh, 240px);
    max-height: min(32dvh, 240px);
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 13px 12px 30px;
    color: #50647d;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #a8bedf transparent;
}

.bicbot-interleaved-content {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.bicbot-thinking-content :is(a, code, span),
.bicbot-interleaved-content :is(a, code, span) {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.bicbot-thinking-content :is(pre, table),
.bicbot-interleaved-content :is(pre, table) {
    max-width: 100%;
    overflow-x: auto;
}

.bicbot-thinking-content::-webkit-scrollbar { width: 6px; }
.bicbot-thinking-content::-webkit-scrollbar-thumb { background: #a8bedf; border-radius: 999px; }

.bicbot-thinking-content[hidden] {
    display: none;
}

.bicbot-stream-error {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: 9px;
    background: #fff5f5;
    color: #b42318;
    font-size: 13px;
    line-height: 1.55;
}

@keyframes bicbot-thinking-pulse {
    0%, 100% { box-shadow: 0 5px 16px rgb(51 100 177 / 8%); }
    50% { box-shadow: 0 7px 22px rgb(59 130 246 / 20%); }
}

@media (max-width: 640px) {
    .bicbot-interleaved-stream { gap: 7px; }
    .bicbot-thinking-toggle { padding-inline: 11px; }
    .bicbot-thinking-content { max-height: min(34vh, 220px); max-height: min(34dvh, 220px); padding-left: 25px; }
}

@media (max-height: 760px) {
    .bicbot-thinking-content { max-height: min(28vh, 190px); max-height: min(28dvh, 190px); }
}

@media (prefers-reduced-motion: reduce) {
    .bicbot-thinking-panel,
    .bicbot-thinking-toggle::after { animation: none; transition: none; }
}

.bicbot-input-shell {
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #ffffff;
    padding: 12px;
}

.bicbot-input {
    width: 100%;
    min-height: 92px;
    resize: vertical;
    border: 0;
    outline: none;
    font-size: 14px;
    line-height: 1.6;
    color: #162033;
    font-family: inherit;
}

.bicbot-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #edf1f6;
}

.bicbot-primary-btn,
.bicbot-secondary-btn {
    min-width: 88px;
    height: 36px;
    padding: 0 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    border: 1px solid transparent;
}

.bicbot-primary-btn {
    background: #0f63e6;
    color: #ffffff;
}

.bicbot-primary-btn:hover {
    background: #0c54c6;
}

.bicbot-secondary-btn {
    background: #ffffff;
    color: #24324a;
    border-color: #d5deea;
}

.bicbot-secondary-btn:hover {
    background: #f5f8fc;
}

.selector-left {
    display: none;
}

.selector-row {
    justify-content: flex-end;
}


.bicbot-account-dialog {
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
}

.bicbot-account-content {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bicbot-account-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid #e6edf5;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
}

.bicbot-account-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    background: #e8f7ef;
    color: #16834a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}

.bicbot-account-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bicbot-account-name {
    color: #1f2937;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.bicbot-account-status {
    color: #5f6f86;
    font-size: 13px;
    line-height: 1.4;
}

.bicbot-account-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.bicbot-danger-btn {
    background: #dc3545;
    color: #ffffff;
    border-color: #dc3545;
}

.bicbot-danger-btn:hover {
    background: #bb2d3b;
    border-color: #b02a37;
}

.bicbot-account-actions .bicbot-danger-btn {
    min-width: 96px;
}

.bicbot-account-actions .bicbot-secondary-btn {
    min-width: 112px;
}

.bicbot-login-dialog {
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: visible;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.24);
}

.bicbot-login-overlay {
    z-index: 12000;
    padding: 16px;
    background: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(1px);
}

.bicbot-login-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 24px;
}

.bicbot-auth-method-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border-color, #dce4ef);
    border-radius: 12px;
    background: var(--secondary-bg, #f5f7fa);
}

.bicbot-auth-method-tab {
    min-height: 38px;
    border: 0;
    border-radius: 9px;
    color: var(--text-secondary, #667085);
    background: transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.bicbot-auth-method-tab.is-active {
    color: var(--primary-color, #1769e0);
    background: var(--card-bg, #fff);
    box-shadow: 0 3px 12px rgba(25, 55, 95, .1);
}

.bicbot-legal-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    color: var(--text-secondary, #667085);
    background: var(--secondary-bg, #f7f9fc);
    border: 1px solid var(--border-color, #e1e6ef);
    border-radius: 10px;
    font-size: 12px;
    line-height: 19px;
    cursor: pointer;
}

.bicbot-legal-consent input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 1px 0 0;
    accent-color: var(--primary-color, #1769e0);
}

.bicbot-legal-consent a {
    color: var(--primary-color, #1769e0);
    font-weight: 650;
    text-decoration: none;
}

.bicbot-legal-consent a:hover,
.bicbot-legal-consent a:focus-visible {
    text-decoration: underline;
}

.bicbot-legal-status {
    margin: -4px 2px 0;
    color: #d92d20;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

.bicbot-login-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #344054;
    font-size: 14px;
    font-weight: 600;
}

#bicbotLoginDialog[data-mode="reset"] .bicbot-reset-only {
    order: 1;
}

#bicbotLoginDialog[data-mode="reset"] .bicbot-password-field {
    order: 2;
}

#bicbotLoginDialog[data-mode="reset"] #bicbotLoginError,
#bicbotLoginDialog[data-mode="reset"] #bicbotLoginHint,
#bicbotLoginDialog[data-mode="reset"] .bicbot-login-actions {
    order: 3;
}

.bicbot-login-field input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    color: #101828;
    font: inherit;
    font-weight: 400;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bicbot-password-input-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.bicbot-password-input-wrap input {
    padding-right: 42px;
}

.bicbot-password-visibility-wrap,
.bicbot-password-input-wrap--with-rule {
    position: relative;
}

.bicbot-password-visibility-wrap input {
    padding-right: 46px;
}

.bicbot-password-input-wrap--with-rule input {
    padding-right: 76px;
}

.bicbot-password-visibility-toggle {
    position: absolute;
    top: 50%;
    right: 9px;
    z-index: 21;
    display: inline-flex;
    width: 26px;
    height: 26px;
    padding: 0;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #667085;
    cursor: pointer;
}

.bicbot-password-input-wrap--with-rule .bicbot-password-visibility-toggle {
    right: 40px;
}

.bicbot-password-visibility-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.bicbot-password-visibility-toggle:hover,
.bicbot-password-visibility-toggle:focus-visible,
.bicbot-password-visibility-toggle.is-visible {
    color: #3154d6;
    background: #edf1ff;
    outline: none;
}

.bicbot-password-rule-wrap {
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.bicbot-password-rule-btn {
    width: 24px;
    height: 24px;
    border: 1px solid #b8c4d4;
    border-radius: 50%;
    background: #f8fbff;
    color: #4c5f76;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    cursor: help;
}

.bicbot-password-rule-btn:hover,
.bicbot-password-rule-btn:focus-visible {
    border-color: #0f63e6;
    background: #eef5ff;
    color: #0f63e6;
    outline: none;
}

.bicbot-password-rule-wrap:hover,
.bicbot-password-rule-wrap:focus-within,
.bicbot-password-rule-wrap.is-open {
    z-index: 80;
}

.bicbot-password-rule-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 90;
    display: none;
    width: min(320px, calc(100vw - 64px));
    padding: 12px 14px;
    border: 1px solid #c7d5ef;
    border-radius: 10px;
    background: #fbfcff;
    box-shadow: 0 14px 34px rgba(30, 55, 100, 0.16);
    color: #344054;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

.bicbot-password-rule-popover strong {
    display: block;
    margin-bottom: 6px;
    color: #101828;
    font-size: 13px;
    font-weight: 700;
}

.bicbot-password-rule-popover ol {
    margin: 0;
    padding-left: 18px;
}

.bicbot-password-rule-popover li + li {
    margin-top: 4px;
}

.bicbot-password-rule-popover li::marker {
    color: #5270d5;
}

.bicbot-login-field :is(input, textarea, select)[aria-invalid="true"],
.contact-binding-dialog :is(input, textarea, select)[aria-invalid="true"] {
    border-color: #e27872 !important;
    background: #fffafa !important;
    box-shadow: 0 0 0 3px rgba(210, 70, 61, 0.1) !important;
}

.bicbot-login-field :is(input, textarea, select)[aria-invalid="true"]:focus,
.contact-binding-dialog :is(input, textarea, select)[aria-invalid="true"]:focus {
    border-color: #cf4f49 !important;
    box-shadow: 0 0 0 3px rgba(207, 79, 73, 0.16) !important;
}

.contact-password-rule-hint {
    display: block;
    margin-top: 7px;
    color: #6e7c94;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.55;
}

.contact-field-error {
    width: 100%;
    margin: 6px 0 0;
    color: var(--qa-danger, #b42318);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.45;
}

.bicbot-password-rule-wrap:hover .bicbot-password-rule-popover,
.bicbot-password-rule-wrap:focus-within .bicbot-password-rule-popover,
.bicbot-password-rule-wrap.is-open .bicbot-password-rule-popover {
    display: block;
}

.bicbot-change-password-dialog .bicbot-password-rules-wrap .bicbot-password-rule-popover {
    top: auto;
    bottom: calc(100% + 10px);
}

/* The username editor shares this compact dialog shell.  Its rule popover
 * must open upward as well, otherwise it is clipped by the dialog footer. */
.bicbot-change-password-dialog .bicbot-username-rule-wrap .bicbot-password-rule-popover {
    top: auto;
    bottom: calc(100% + 10px);
}

/* Reset-password fields sit near the bottom of a scroll-constrained auth
 * dialog. Open their help upward so the complete rule card stays visible. */
#bicbotLoginDialog[data-mode="reset"] .bicbot-password-rules-wrap .bicbot-password-rule-popover {
    top: auto;
    bottom: calc(100% + 10px);
}

.bicbot-login-field input:focus {
    border-color: #0f63e6;
    box-shadow: 0 0 0 3px rgba(15, 99, 230, 0.14);
}

.bicbot-login-error {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff1f0;
    color: #b42318;
    border: 1px solid #ffd2cc;
    font-size: 13px;
}


.bicbot-required {
    color: #dc3545;
    margin-left: 3px;
}

.bicbot-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 10px;
    align-items: center;
}

.bicbot-code-row input {
    min-width: 0;
}

.bicbot-code-btn {
    width: 112px;
    height: 42px;
    padding: 0 10px;
    white-space: nowrap;
}

.bicbot-slider-overlay {
    position: fixed;
    inset: 0;
    z-index: 13000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(17, 24, 39, 0.54);
    backdrop-filter: blur(2px);
}

.bicbot-slider-dialog {
    position: relative;
    width: min(386px, calc(100vw - 32px));
    padding: 26px 24px 22px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(208, 213, 221, 0.8);
    text-align: center;
}

.bicbot-slider-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: #f2f4f7;
    color: #667085;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.bicbot-slider-close:hover {
    background: #e4e7ec;
    color: #344054;
}

.bicbot-slider-shield {
    position: relative;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: linear-gradient(145deg, #e8f1ff, #f6fbff);
    border: 1px solid #cfe0ff;
}

.bicbot-slider-shield-core {
    position: absolute;
    inset: 13px 16px 12px;
    border-radius: 5px 5px 11px 11px;
    background: #0f63e6;
    box-shadow: inset 0 -8px 0 rgba(255, 255, 255, 0.16);
}

.bicbot-slider-shield-core::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -10px;
    width: 16px;
    height: 14px;
    border: 3px solid #0f63e6;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    transform: translateX(-50%);
}

.bicbot-slider-dialog h4 {
    margin: 0;
    color: #101828;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
}

.bicbot-slider-subtitle {
    margin: 8px 0 16px;
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
}

.bicbot-puzzle-stage {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.bicbot-puzzle-image,
.bicbot-puzzle-piece {
    background-color: #d7ecff;
    background-image:
        radial-gradient(circle at 22% 28%, rgba(255, 255, 255, 0.86) 0 16px, transparent 17px),
        radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.78) 0 11px, transparent 12px),
        linear-gradient(145deg, rgba(20, 184, 166, 0.78) 0 30%, transparent 31%),
        linear-gradient(25deg, transparent 0 44%, rgba(22, 163, 74, 0.82) 45% 58%, transparent 59%),
        linear-gradient(150deg, transparent 0 52%, rgba(15, 99, 230, 0.85) 53% 69%, transparent 70%),
        linear-gradient(135deg, #b7e0ff 0%, #e3f5ff 44%, #f7fbff 100%);
    background-repeat: no-repeat;
    background-size: 292px 150px;
}

.bicbot-puzzle-image {
    position: relative;
    width: 292px;
    height: 150px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #d0d5dd;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.bicbot-puzzle-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 42%),
        radial-gradient(circle at 72% 72%, rgba(16, 24, 40, 0.16), transparent 34%);
}

.bicbot-puzzle-hole,
.bicbot-puzzle-piece {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 9px;
}

.bicbot-puzzle-hole {
    z-index: 1;
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed rgba(15, 23, 42, 0.38);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.38),
        inset 0 8px 18px rgba(15, 23, 42, 0.28);
}

.bicbot-puzzle-hole::before,
.bicbot-puzzle-piece::before {
    content: "";
    position: absolute;
    top: 13px;
    right: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.bicbot-puzzle-hole::before {
    background: rgba(255, 255, 255, 0.46);
    border: 1px dashed rgba(15, 23, 42, 0.36);
    box-shadow: inset 0 4px 10px rgba(15, 23, 42, 0.22);
}

.bicbot-puzzle-piece {
    left: 12px;
    z-index: 2;
    border: 2px solid #ffffff;
    box-shadow: 0 9px 18px rgba(15, 23, 42, 0.26);
    transition: box-shadow 0.16s ease;
}

.bicbot-puzzle-piece::before {
    background: inherit;
    background-size: inherit;
    background-position: inherit;
    border: 2px solid #ffffff;
    border-left: none;
    box-shadow: 6px 4px 12px rgba(15, 23, 42, 0.12);
}

.bicbot-puzzle-piece-resetting {
    transition: left 0.18s ease;
}

.bicbot-puzzle-piece-snapped {
    box-shadow: 0 0 0 3px rgba(23, 160, 93, 0.22), 0 9px 18px rgba(15, 23, 42, 0.18);
}

.bicbot-slider-track {
    position: relative;
    height: 46px;
    overflow: hidden;
    border-radius: 10px;
    background: #f2f4f7;
    border: 1px solid #d0d5dd;
    user-select: none;
}

.bicbot-slider-progress {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #d7e7ff, #b8d4ff);
    transition: width 0.16s ease;
}

.bicbot-slider-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667085;
    font-size: 13px;
    font-weight: 600;
}

.bicbot-slider-handle {
    position: absolute;
    left: 0;
    top: 0;
    width: 46px;
    height: 44px;
    border: none;
    border-radius: 9px;
    background: #0f63e6;
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(15, 99, 230, 0.24);
    cursor: grab;
    touch-action: none;
    transition: box-shadow 0.16s ease, background 0.16s ease;
}

.bicbot-slider-handle:active {
    cursor: grabbing;
    box-shadow: 0 5px 14px rgba(15, 99, 230, 0.32);
}

.bicbot-slider-handle:focus-visible {
    outline: 3px solid rgba(15, 99, 230, 0.24);
    outline-offset: 2px;
}

.bicbot-slider-status {
    min-height: 18px;
    margin: 12px 0 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
}

.bicbot-human-dialog .bicbot-slider-status[data-state="warning"] {
    padding: 7px 9px;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    color: #9a3412;
    background: #fff7ed;
}

.bicbot-human-dialog .bicbot-slider-status[data-state="error"] {
    padding: 7px 9px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #b42318;
    background: #fff5f5;
}

.bicbot-human-dialog .bicbot-slider-status[data-state="loading"] {
    color: var(--qa-brand-600, #3456a3);
}

.bicbot-slider-verified .bicbot-slider-shield {
    background: #ecfdf3;
    border-color: #abefc6;
}

.bicbot-slider-verified .bicbot-slider-shield-core,
.bicbot-slider-verified .bicbot-slider-shield-core::before,
.bicbot-slider-verified .bicbot-slider-handle {
    background: #17a05d;
    border-color: #17a05d;
}

.bicbot-slider-verified .bicbot-slider-progress {
    background: linear-gradient(90deg, #dcfae6, #abefc6);
}

.bicbot-slider-verified .bicbot-puzzle-hole {
    border-color: rgba(23, 160, 93, 0.72);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.44),
        0 0 0 3px rgba(23, 160, 93, 0.18);
}

.bicbot-slider-verified .bicbot-slider-status {
    color: #16834a;
    font-weight: 700;
}

.bicbot-login-assist {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: -1px 0 0;
    padding: 12px 2px 0;
    border-top: 1px solid var(--border-color, #e4eaf2);
    color: #5f6f86;
    font-size: 13px;
    line-height: 1.5;
}

.bicbot-register-prompt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.bicbot-login-assist.bicbot-login-hint-reset {
    justify-content: center;
}

.bicbot-login-assist.is-phone-login {
    justify-content: flex-end;
}

.bicbot-link-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: #0f63e6;
    font: inherit;
    font-weight: 700;
    min-height: 28px;
    padding: 4px 6px;
    margin: 0;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.2;
}

.bicbot-forgot-btn {
    color: #667085;
    font-weight: 600;
    white-space: nowrap;
}

.bicbot-link-btn:hover {
    color: #0c54c6;
    background: rgba(15, 99, 230, 0.08);
    text-decoration: underline;
}

.bicbot-link-btn:focus-visible {
    outline: 2px solid rgba(15, 99, 230, 0.35);
    outline-offset: 2px;
}

.bicbot-change-password-dialog .dialog-header {
    background: #fbfcff;
}

.bicbot-change-password-dialog .bicbot-login-form {
    padding-top: 22px;
}

.bicbot-username-status,
.bicbot-password-status,
.bicbot-email-status,
.bicbot-code-status {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #667085;
}

.bicbot-login-field [data-validation-state="error"] {
    color: var(--qa-danger, #b42318);
    font-weight: 650;
}

.bicbot-username-status.error,
.bicbot-password-status.error,
.bicbot-email-status.error,
.bicbot-code-status.error {
    color: #b42318;
}

.bicbot-username-status-error {
    color: #b42318;
}

.bicbot-password-status-error {
    color: #b42318;
}

.bicbot-email-status-error {
    color: #b42318;
}

/* Phone authentication emits state classes in the `is-*` form. */
.bicbot-email-status.is-error {
    color: var(--qa-danger, #b42318);
    font-weight: 650;
}

.bicbot-email-status.is-success,
.bicbot-email-status.is-ok {
    color: var(--qa-success, #16834a);
}

.bicbot-email-status.is-checking {
    color: var(--qa-text-secondary, #667085);
}

.bicbot-code-status-error {
    color: #b42318;
}

.bicbot-username-status.ok,
.bicbot-password-status.ok,
.bicbot-email-status.ok,
.bicbot-code-status.ok {
    color: #16834a;
}

.bicbot-login-actions .bicbot-secondary-btn,
.bicbot-login-actions .bicbot-primary-btn {
    min-width: 104px;
}

@media (max-width: 480px) {
    .bicbot-login-overlay {
        padding: 12px;
    }

    .bicbot-login-form {
        padding: 20px 18px;
    }

    .bicbot-code-row {
        grid-template-columns: 1fr;
    }

    .bicbot-code-btn {
        width: 100%;
    }

    .bicbot-login-actions {
        flex-direction: column-reverse;
    }

    .bicbot-login-actions .bicbot-secondary-btn,
    .bicbot-login-actions .bicbot-primary-btn {
        width: 100%;
    }

    .bicbot-account-actions {
        flex-direction: column;
    }

    .bicbot-account-actions .bicbot-secondary-btn,
    .bicbot-account-actions .bicbot-primary-btn {
        width: 100%;
    }
}

.bicbot-login-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

/* Authentication dialog: luminous BIC-QA treatment shared by sign-in, registration, and reset. */
.bicbot-login-overlay {
    isolation: isolate;
    padding: 32px;
    background:
        radial-gradient(circle at 8% 14%, rgba(132, 142, 255, .55), transparent 31%),
        radial-gradient(circle at 92% 86%, rgba(178, 190, 255, .46), transparent 33%),
        linear-gradient(135deg, rgba(91, 102, 205, .62), rgba(225, 229, 255, .76) 48%, rgba(151, 165, 249, .5));
    backdrop-filter: blur(10px) saturate(112%);
    -webkit-backdrop-filter: blur(10px) saturate(112%);
}

.bicbot-login-overlay::before,
.bicbot-login-overlay::after {
    position: fixed;
    z-index: -1;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.bicbot-login-overlay::before {
    top: 8%;
    left: -170px;
    box-shadow: 0 0 100px 30px rgba(199, 206, 255, .4);
}

.bicbot-login-overlay::after {
    right: -148px;
    bottom: -152px;
    box-shadow: 0 0 90px 22px rgba(255, 255, 255, .26);
}

.bicbot-login-dialog {
    position: relative;
    width: min(740px, calc(100vw - 64px));
    max-height: min(840px, calc(100dvh - 64px));
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 30px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 32px 90px rgba(44, 55, 132, .28), 0 10px 30px rgba(55, 63, 125, .12);
    scrollbar-color: #b8c2f5 transparent;
    animation: bicbot-auth-dialog-in .32s cubic-bezier(.2, .8, .2, 1) both;
}

.bicbot-login-dialog::before {
    position: absolute;
    bottom: 30px;
    left: 23px;
    z-index: 0;
    width: 110px;
    height: 154px;
    border: 1px solid rgba(113, 126, 246, .16);
    border-radius: 23px 23px 12px 12px;
    background:
        linear-gradient(150deg, transparent 0 20%, rgba(116, 127, 249, .12) 21% 42%, transparent 43%),
        repeating-linear-gradient(0deg, rgba(122, 135, 246, .11) 0 1px, transparent 1px 23px),
        linear-gradient(135deg, rgba(155, 169, 255, .18), rgba(255, 255, 255, 0));
    box-shadow: 18px 13px 0 -1px rgba(119, 132, 249, .06), 36px 26px 0 -2px rgba(119, 132, 249, .04);
    content: "";
    opacity: .9;
    pointer-events: none;
    transform: perspective(180px) rotateY(14deg) rotateX(2deg);
}

.bicbot-login-dialog > * {
    position: relative;
    z-index: 1;
}

.bicbot-login-dialog > .dialog-header {
    position: relative;
    min-height: 132px;
    padding: 29px 92px 26px 122px;
    border: 0;
    background: transparent;
}

.bicbot-login-dialog > .dialog-header h3 {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    margin: 0;
    color: #26375f;
    font-size: clamp(26px, 3vw, 32px);
    font-weight: 760;
    letter-spacing: -.035em;
    line-height: 1.15;
}

.bicbot-login-dialog > .dialog-header h3::before {
    position: absolute;
    top: 0;
    left: -78px;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: url("../icons/icon.svg") center / cover no-repeat;
    box-shadow: 0 10px 22px rgba(72, 82, 216, .2);
    content: "";
}

.bicbot-login-dialog > .dialog-header h3::after {
    position: absolute;
    bottom: -21px;
    left: 0;
    color: #7788b2;
    content: var(--auth-tagline, "智能运维 · 高效稳定");
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
}

.bicbot-login-dialog > .dialog-header .close-btn {
    position: absolute;
    top: 30px;
    right: 31px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    color: #52658c;
    background: transparent;
    font-size: 31px;
    font-weight: 300;
    line-height: 1;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.bicbot-login-dialog > .dialog-header .close-btn:hover,
.bicbot-login-dialog > .dialog-header .close-btn:focus-visible {
    color: #3f4fc7;
    background: #eef0ff;
    outline: none;
    transform: rotate(8deg);
}

.bicbot-login-form {
    gap: 19px;
    padding: 14px 64px 48px;
}

.bicbot-auth-method-tabs {
    gap: 5px;
    padding: 6px;
    border-color: #e1e6f8;
    border-radius: 16px;
    background: #f5f7fe;
    box-shadow: inset 0 1px 2px rgba(71, 84, 166, .05);
}

.bicbot-auth-method-tab {
    min-height: 54px;
    border-radius: 11px;
    color: #7484aa;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.bicbot-auth-method-tab.is-active {
    color: #fff;
    background: linear-gradient(115deg, #4b55ee 0%, #6755f6 100%);
    box-shadow: 0 8px 18px rgba(79, 75, 231, .27);
}

.bicbot-auth-method-tab:not(.is-active):hover,
.bicbot-auth-method-tab:not(.is-active):focus-visible {
    color: #4c5bdd;
    background: rgba(255, 255, 255, .78);
    outline: none;
}

.bicbot-login-field {
    gap: 9px;
    color: #33466e;
    font-size: 16px;
    font-weight: 700;
}

.bicbot-required {
    color: #ff5266;
}

.bicbot-login-field input {
    height: 54px;
    padding: 0 17px;
    border-color: #e0e5f4;
    border-radius: 13px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 5px 14px rgba(61, 76, 142, .06);
    color: #293a5f;
    font-size: 16px;
}

.bicbot-login-field input::placeholder {
    color: #9aa8c5;
}

.bicbot-login-field input:focus {
    border-color: #6c6af3;
    box-shadow: 0 0 0 4px rgba(95, 91, 241, .14), 0 6px 15px rgba(61, 76, 142, .08);
}

.bicbot-password-input-wrap input {
    padding-right: 48px;
}

.bicbot-code-row {
    grid-template-columns: minmax(0, 1fr) 142px;
    gap: 12px;
}

.bicbot-code-btn {
    width: 142px;
    height: 54px;
    border: 1px solid #b7bcff;
    border-radius: 13px;
    color: #4d55e7;
    background: #f9faff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 5px 12px rgba(95, 91, 241, .07);
}

.bicbot-code-btn:hover:not(:disabled),
.bicbot-code-btn:focus-visible {
    border-color: #706df6;
    color: #fff;
    background: #625ff2;
    outline: none;
}

.bicbot-legal-consent {
    gap: 10px;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    color: #6b7da5;
    background: transparent;
    font-size: 14px;
    line-height: 21px;
}

.bicbot-legal-consent input {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
    margin-top: 1px;
    accent-color: #5a5bf1;
}

.bicbot-legal-consent a,
.bicbot-link-btn {
    color: #4c55e8;
}

.bicbot-remember-me {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -2px;
    color: #526583;
    font-size: 14px;
    line-height: 20px;
}

.bicbot-remember-me input {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    margin: 0;
    accent-color: #5a5bf1;
}

.bicbot-remember-me label {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 7px;
    cursor: pointer;
}

.bicbot-remember-me label > span { color: #415575; font-weight: 650; }
.bicbot-remember-me label > small { color: #8493ac; font-size: 12px; }

.bicbot-login-assist {
    min-height: 27px;
    margin: -4px 0 0;
    padding: 0;
    border: 0;
    color: #7080a5;
    font-size: 14px;
}

.bicbot-link-btn {
    border-radius: 8px;
    font-weight: 700;
}

.bicbot-forgot-btn {
    color: #7181a6;
}

.bicbot-link-btn:hover {
    color: #3f48dc;
    background: #eef0ff;
    text-decoration: none;
}

.bicbot-login-actions {
    justify-content: flex-end;
    gap: 16px;
    padding-top: 12px;
}

.bicbot-login-actions .bicbot-secondary-btn,
.bicbot-login-actions .bicbot-primary-btn {
    min-width: 166px;
    min-height: 54px;
    border-radius: 13px;
    font-size: 17px;
    font-weight: 720;
    transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.bicbot-login-actions .bicbot-secondary-btn {
    border-color: #d7deef;
    color: #42557e;
    background: #fff;
}

.bicbot-login-actions .bicbot-primary-btn {
    border: 0;
    background: linear-gradient(115deg, #4850ea 0%, #6d5af5 100%);
    box-shadow: 0 10px 20px rgba(76, 73, 230, .26);
}

.bicbot-login-actions .bicbot-secondary-btn:hover,
.bicbot-login-actions .bicbot-secondary-btn:focus-visible {
    border-color: #9ca7e6;
    background: #f8f9ff;
    outline: none;
    transform: translateY(-1px);
}

.bicbot-login-actions .bicbot-primary-btn:hover:not(:disabled),
.bicbot-login-actions .bicbot-primary-btn:focus-visible {
    background: linear-gradient(115deg, #4048dc 0%, #624eea 100%);
    box-shadow: 0 14px 26px rgba(76, 73, 230, .34);
    outline: none;
    transform: translateY(-2px);
}

@keyframes bicbot-auth-dialog-in {
    from { opacity: 0; transform: translateY(18px) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
    .bicbot-login-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .bicbot-login-overlay::before,
    .bicbot-login-overlay::after {
        display: none;
    }

    .bicbot-login-dialog {
        width: 100%;
        max-height: 92dvh;
        border-radius: 24px 24px 0 0;
    }

    .bicbot-login-dialog::before {
        display: none;
    }

    .bicbot-login-dialog > .dialog-header {
        min-height: 112px;
        padding: 24px 64px 20px 89px;
    }

    .bicbot-login-dialog > .dialog-header h3 {
        min-height: 42px;
        font-size: 24px;
    }

    .bicbot-login-dialog > .dialog-header h3::before {
        left: -61px;
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .bicbot-login-dialog > .dialog-header h3::after {
        bottom: -17px;
        font-size: 13px;
    }

    .bicbot-login-dialog > .dialog-header .close-btn {
        top: 22px;
        right: 18px;
    }

    .bicbot-login-form {
        gap: 15px;
        padding: 10px 20px max(26px, env(safe-area-inset-bottom));
    }

    .bicbot-login-actions {
        gap: 10px;
        padding-top: 6px;
    }

    .bicbot-login-actions .bicbot-secondary-btn,
    .bicbot-login-actions .bicbot-primary-btn {
        min-width: 0;
        min-height: 50px;
    }
}

/* Registration has six fields, so it needs a denser vertical rhythm than the
 * sign-in and reset flows. Keep the complete action area visible on common
 * laptop viewports while retaining the dialog's overflow fallback. */
@media (min-width: 641px) {
    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-dialog {
        height: auto;
        max-height: min(760px, calc(100dvh - 40px));
        scroll-padding-block: 20px;
    }

    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-dialog > .dialog-header {
        min-height: 108px;
        padding: 22px 82px 18px 112px;
    }

    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-dialog > .dialog-header h3 {
        min-height: 46px;
        font-size: clamp(24px, 2.5vw, 29px);
    }

    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-dialog > .dialog-header h3::before {
        left: -70px;
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-dialog > .dialog-header h3::after {
        bottom: -17px;
        font-size: 14px;
    }

    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-dialog > .dialog-header .close-btn {
        top: 21px;
        right: 27px;
    }

    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-form {
        gap: 12px;
        padding: 6px 64px 30px;
    }

    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-field {
        gap: 5px;
        font-size: 14px;
    }

    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-field input,
    #bicbotLoginDialog[data-mode="reset"] .bicbot-code-btn {
        height: 48px;
        border-radius: 12px;
        font-size: 15px;
    }

    #bicbotLoginDialog[data-mode="reset"] :is(.bicbot-username-status, .bicbot-password-status, .bicbot-email-status, .bicbot-code-status) {
        margin-top: 3px;
        line-height: 1.3;
    }

    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-actions {
        padding-top: 4px;
    }

    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-actions .bicbot-secondary-btn,
    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-actions .bicbot-primary-btn {
        min-height: 48px;
        font-size: 16px;
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-login-dialog {
        height: auto;
        max-height: min(840px, calc(100dvh - 40px));
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-login-dialog > .dialog-header {
        min-height: 108px;
        padding: 22px 82px 18px 112px;
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-login-dialog > .dialog-header h3 {
        min-height: 46px;
        font-size: clamp(24px, 2.5vw, 29px);
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-login-dialog > .dialog-header h3::before {
        left: -70px;
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-login-dialog > .dialog-header h3::after {
        bottom: -17px;
        font-size: 14px;
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-login-dialog > .dialog-header .close-btn {
        top: 21px;
        right: 27px;
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-login-form {
        gap: 12px;
        padding: 6px 64px 28px;
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-login-field {
        gap: 5px;
        font-size: 14px;
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-login-field input,
    #bicbotLoginDialog[data-mode="register"] .bicbot-code-btn {
        height: 48px;
        border-radius: 12px;
        font-size: 15px;
    }

    #bicbotLoginDialog[data-mode="register"] :is(.bicbot-username-status, .bicbot-password-status, .bicbot-email-status, .bicbot-code-status) {
        margin-top: 3px;
        line-height: 1.3;
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-legal-consent {
        font-size: 13px;
        line-height: 18px;
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-login-assist {
        min-height: 24px;
        font-size: 13px;
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-login-actions {
        padding-top: 4px;
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-login-actions .bicbot-secondary-btn,
    #bicbotLoginDialog[data-mode="register"] .bicbot-login-actions .bicbot-primary-btn {
        min-height: 48px;
        font-size: 16px;
    }
}

@media (min-width: 641px) and (max-height: 780px) {
    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-dialog {
        max-height: calc(100dvh - 24px);
    }

    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-dialog > .dialog-header {
        min-height: 94px;
        padding-top: 16px;
        padding-bottom: 14px;
    }

    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-form {
        gap: 9px;
        padding-top: 2px;
        padding-bottom: 22px;
    }

    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-field input,
    #bicbotLoginDialog[data-mode="reset"] .bicbot-code-btn {
        height: 44px;
    }

    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-actions .bicbot-secondary-btn,
    #bicbotLoginDialog[data-mode="reset"] .bicbot-login-actions .bicbot-primary-btn {
        min-height: 44px;
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-login-dialog {
        max-height: calc(100dvh - 24px);
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-login-dialog > .dialog-header {
        min-height: 94px;
        padding-top: 16px;
        padding-bottom: 14px;
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-login-form {
        gap: 9px;
        padding-top: 2px;
        padding-bottom: 22px;
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-login-field input,
    #bicbotLoginDialog[data-mode="register"] .bicbot-code-btn {
        height: 44px;
    }

    #bicbotLoginDialog[data-mode="register"] .bicbot-login-actions .bicbot-secondary-btn,
    #bicbotLoginDialog[data-mode="register"] .bicbot-login-actions .bicbot-primary-btn {
        min-height: 44px;
    }
}

@media (max-width: 768px) {
    .bicbot-dialog-container {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    .bicbot-status {
        margin: 0 14px 12px;
    }

    .bicbot-content {
        padding: 0 14px 14px;
    }

    .bicbot-messages {
        min-height: 220px;
        padding: 12px;
    }

    .bicbot-message {
        max-width: 94%;
    }

    .bicbot-actions {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .bicbot-primary-btn,
    .bicbot-secondary-btn {
        min-width: 0;
        padding: 0 10px;
    }
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: #e9ecef;
    color: #333;
}

.dialog-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0 2px;
    font-size: inherit;
    color: #0d6efd;
    cursor: pointer;
    text-decoration: underline;
}

.link-button:hover,
.link-button:focus {
    color: #084298;
    outline: none;
}

.link-button:focus-visible {
    outline: 2px solid rgba(13, 110, 253, 0.4);
    border-radius: 2px;
    outline-offset: 2px;
}

.policy-dialog-container {
    width: min(720px, calc(100% - 40px));
    max-width: 720px;
    min-height: 60vh;
    max-height: 80vh;
}

.policy-dialog-content {
    line-height: 1.7;
    color: #333;
}

.policy-dialog-content h4 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 16px;
    color: #0b7285;
}

.policy-dialog-content ol,
.policy-dialog-content ul {
    padding-left: 20px;
    margin: 12px 0;
}

.policy-dialog-content li {
    margin-bottom: 12px;
}

.policy-dialog-content p {
    margin: 8px 0;
}

.policy-dialog-content strong {
    color: #0b7285;
}

.history-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.clear-btn,
.export-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.clear-btn {
    background: #dc3545;
    display: none !important;
}

.clear-btn:hover {
    background: #c82333;
}

.export-btn {
    background: #28a745;
}

.export-btn:hover {
    background: #218838;
}

.history-list {
    max-height: 400px;
    overflow-y: auto;
}

.history-list-items {
    margin-bottom: 12px;
}

/* 历史记录分页 */
.history-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    margin-top: 8px;
    border-top: 1px solid #e9ecef;
}

.history-pagination-info {
    font-size: 13px;
    color: #6c757d;
}

.history-pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-pagination-prev,
.history-pagination-next {
    padding: 6px 12px;
    font-size: 13px;
    color: #495057;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
}

.history-pagination-prev:hover:not(:disabled),
.history-pagination-next:hover:not(:disabled) {
    background: #e9ecef;
    border-color: #adb5bd;
}

.history-pagination-prev:disabled,
.history-pagination-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.history-page-nums {
    display: flex;
    align-items: center;
    gap: 4px;
}

.history-page-btn {
    min-width: 28px;
    padding: 4px 8px;
    font-size: 13px;
    color: #495057;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
}

.history-page-btn:hover {
    background: #e9ecef;
}

.history-page-btn.active {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

.history-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.history-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bicbot-history-dialog .dialog-container {
    width: min(720px, calc(100vw - 40px));
    max-height: min(760px, calc(100vh - 40px));
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 56px rgba(15, 23, 42, 0.28);
}

.bicbot-history-dialog .dialog-header {
    padding: 20px 24px;
    background: #ffffff;
}

.bicbot-history-dialog .dialog-header h3 {
    font-size: 20px;
    color: #24324a;
}

.bicbot-history-dialog .dialog-content {
    padding: 18px 24px 20px;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #f7f9fc;
}

.bicbot-history-dialog .history-list {
    max-height: none;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bicbot-history-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid #e4eaf2;
    border-radius: 10px;
    background: #ffffff;
}

.bicbot-history-filter-field {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    color: #344054;
    font-size: 14px;
    font-weight: 700;
}

.bicbot-history-title-filter {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #d6deea;
    border-radius: 7px;
    color: #1f2937;
    font: inherit;
    font-weight: 400;
    outline: none;
    background: #ffffff;
}

.bicbot-history-title-filter:focus {
    border-color: #0f63e6;
    box-shadow: 0 0 0 3px rgba(15, 99, 230, 0.12);
}

.bicbot-history-dialog .history-action-btn {
    height: 34px;
    min-width: 64px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    background: #0f63e6;
}

.bicbot-history-dialog .history-action-btn:hover {
    background: #0c54c6;
}

.bicbot-history-dialog .delete-single-btn {
    background: #e5484d;
}

.bicbot-history-dialog .delete-single-btn:hover {
    background: #c92f35;
}

.bicbot-delete-confirm-overlay {
    z-index: 13000;
    padding: 16px;
}

.bicbot-delete-confirm-dialog {
    width: min(430px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    border-radius: 12px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.28);
}

.bicbot-delete-confirm-dialog .dialog-header {
    padding: 18px 20px;
    background: #ffffff;
}

.bicbot-delete-confirm-dialog .dialog-header h3 {
    color: #1f2937;
    font-size: 18px;
}

.bicbot-delete-confirm-content {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
    background: #ffffff;
}

.bicbot-delete-confirm-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff1f2;
    color: #c71f37;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.sidebar-rename-icon {
    background: #eef4ff;
    color: #3456a3;
    font-size: 18px;
}

.bicbot-delete-confirm-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bicbot-delete-confirm-message,
.bicbot-delete-confirm-warning {
    margin: 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
}

.bicbot-delete-confirm-title {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #f1c8ce;
    border-radius: 8px;
    background: #fff7f8;
    color: #1f2937;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.sidebar-rename-input {
    width: 100%;
    height: 40px;
    padding: 9px 11px;
    border: 1px solid #cfd8e6;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2937;
    font-size: 14px;
    line-height: 20px;
    outline: none;
}

.sidebar-rename-input:focus {
    border-color: #4c6fff;
    box-shadow: 0 0 0 3px rgba(76, 111, 255, 0.14);
}

.bicbot-delete-confirm-warning {
    color: #b42335;
}

.bicbot-delete-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 20px 20px;
    background: #ffffff;
}

.bicbot-delete-confirm-actions .bicbot-secondary-btn,
.bicbot-delete-confirm-actions .bicbot-primary-btn {
    min-width: 92px;
    height: 36px;
    border-radius: 8px;
}

@media (max-width: 480px) {
    .bicbot-delete-confirm-content {
        grid-template-columns: 1fr;
    }

    .bicbot-delete-confirm-actions {
        flex-direction: column-reverse;
    }

    .bicbot-delete-confirm-actions .bicbot-secondary-btn,
    .bicbot-delete-confirm-actions .bicbot-primary-btn {
        width: 100%;
    }
}

.bicbot-history-body {
    min-height: 0;
    overflow: hidden;
}

.bicbot-history-list-items {
    max-height: min(440px, calc(100vh - 300px));
    overflow-y: auto;
    padding-right: 4px;
}

.bicbot-history-list-items::-webkit-scrollbar {
    width: 8px;
}

.bicbot-history-list-items::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.bicbot-history-item {
    padding: 18px 20px;
    margin-bottom: 12px;
    border: 1px solid #e4eaf2;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.bicbot-history-item.is-top {
    border-color: #b8d6c4;
    background: #fbfef9;
}

.bicbot-history-item.is-active {
    border-color: #4f46e5;
    background: #eef2ff;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14), 0 10px 24px rgba(15, 23, 42, 0.08);
}

.bicbot-history-item.is-switching {
    cursor: progress;
    opacity: .78;
}

.bicbot-history-item:hover {
    border-color: #c8d7ee;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.bicbot-history-item .history-header {
    margin-bottom: 12px;
    gap: 12px;
}

.bicbot-history-item .history-time {
    color: #667085;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bicbot-history-item .history-actions {
    flex-wrap: nowrap;
    gap: 8px;
}

.bicbot-history-title {
    margin: 0 0 14px;
    color: #1f2937;
    font-size: 16px;
    line-height: 1.5;
}

.bicbot-history-title strong {
    margin-right: 4px;
}

.bicbot-history-title-text {
    word-break: break-word;
}

.bicbot-rename-row {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    padding: 10px;
    border: 1px solid #dbe7f6;
    border-radius: 9px;
    background: #f8fbff;
}

.bicbot-rename-label {
    color: #344054;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.bicbot-rename-input {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #c9d6e8;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2937;
    font: inherit;
    font-size: 14px;
    line-height: 36px;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.bicbot-rename-input:focus {
    border-color: #0f63e6;
    box-shadow: 0 0 0 3px rgba(15, 99, 230, 0.12);
}

.bicbot-history-dialog .bicbot-history-rename-save,
.bicbot-history-dialog .bicbot-history-rename-cancel {
    min-width: 58px;
    height: 36px;
}

.bicbot-history-dialog .bicbot-history-rename-cancel {
    background: #64748b;
}

.bicbot-history-dialog .bicbot-history-rename-cancel:hover {
    background: #475569;
}

.bicbot-history-item .history-meta {
    margin-top: 0;
    gap: 10px;
}

.bicbot-history-item .history-meta span {
    min-width: 0;
    max-width: 100%;
    padding: 5px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bicbot-history-pagination {
    margin-top: 0;
    padding: 12px;
    border: 1px solid #e4eaf2;
    border-radius: 10px;
    background: #ffffff;
}

.bicbot-history-pagination-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.bicbot-history-pagination-row,
.bicbot-history-page-nums {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.bicbot-history-page-size-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #667085;
    font-size: 13px;
}

.bicbot-history-page-size {
    height: 28px;
    border: 1px solid #d6deea;
    border-radius: 6px;
    background: #ffffff;
}

.bicbot-history-dialog .pagination-btn,
.bicbot-history-dialog .history-page-btn {
    height: 30px;
    border-radius: 7px;
}

@media (max-width: 720px) {
    .bicbot-rename-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .bicbot-history-dialog .bicbot-history-rename-save,
    .bicbot-history-dialog .bicbot-history-rename-cancel {
        width: 100%;
    }
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.history-time {
    font-size: 12px;
    color: #6c757d;
}

.history-actions {
    display: flex;
    gap: 8px;
}

.history-action-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
}

.copy-btn {
    background: #28a745;
}

.copy-btn:hover {
    background: #218838;
}

.delete-history-btn,
.delete-single-btn {
    background: #dc3545;
}

.delete-history-btn:hover,
.delete-single-btn:hover {
    background: #c82333;
}

.continue-conversation-btn {
    background: #17a2b8;
}

.continue-conversation-btn:hover {
    background: #138496;
}

.history-question {
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.history-answer {
    color: #6c757d;
    font-size: 14px;
    line-height: 1.5;
    max-height: 60px;
    overflow: hidden;
    position: relative;
}

.history-answer.expanded {
    max-height: none;
}

.expand-btn {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    font-size: 12px;
    padding: 4px 0;
    margin-top: 8px;
    text-decoration: underline;
}

.expand-btn:hover {
    color: #0056b3;
}

.history-meta {
    margin-top: 12px;
    font-size: 12px;
    color: #6c757d;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.empty-history {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.empty-history-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-history-text {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 8px;
}

.empty-history-subtext {
    font-size: 14px;
    opacity: 0.8;
}

.bicbot-history-auth-required {
    width: 360px;
    height: 190px;
    max-width: calc(100vw - 64px);
    margin: 28px auto;
    padding: 24px 22px;
    border: 1px solid #e5edf7;
    border-radius: 14px;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
    box-shadow: 0 10px 28px rgba(15, 99, 230, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
}

.bicbot-history-auth-required::before {
    content: '!';
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #eef5ff;
    color: #0f63e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
}

.bicbot-history-auth-title {
    color: #24324a;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    word-break: break-word;
}

.bicbot-history-login-btn {
    min-width: 120px;
    height: 38px;
    padding: 0 20px;
    border-radius: 8px;
}

@media (max-width: 480px) {
    .bicbot-history-auth-required {
        width: 100%;
        height: 190px;
        max-width: none;
        margin: 18px 0;
        padding: 20px 16px;
    }
}

.history-full-content {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    margin-top: 12px;
}

.history-full-question {
    font-weight: 500;
    color: #333;
    margin-bottom: 12px;
}

.history-full-answer {
    color: #6c757d;
    line-height: 1.6;
}

.history-model,
.history-knowledge-base,
.history-url {
    display: inline-block;
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 8px;
}

/* 问题显示区域 */
.question-display {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    padding: 10px 0 8px;
    border-radius: 0;
}

/* 问题头部区域 */
.question-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 6px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: #4CAF50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    margin-right: 12px;
    flex-shrink: 0;
    overflow: hidden;
}

.avatar-img {
    width: 70%;
    height: 70%;
    object-fit: cover;
    border-radius: 50%;
}

.question-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.question-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.question-time {
    font-size: 12px;
    color: #888;
    font-weight: 400;
}

.question-content {
    position: relative;
    max-width: min(700px, 78%);
    margin-left: auto;
    width: fit-content;
    padding: 11px 40px 11px 14px;
    border: 1px solid #d8e9ff;
    border-radius: 8px 8px 2px 8px;
    background: #eef6ff;
    box-shadow: 0 4px 12px rgba(15, 99, 230, 0.08);
}

.question-label {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

.question-text {
    font-size: 14px;
    color: #1f2a44;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    /* 保持换行和空格 */
    display: block;
}

/* AI助手显示区域 */
.ai-display {
    display: none !important;
}

.ai-header {
    display: flex;
    align-items: flex-start;
}

.ai-avatar {
    width: 32px;
    height: 32px;
    background: #2196F3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    margin-right: 12px;
    flex-shrink: 0;
    overflow: hidden;
}

.ai-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ai-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.ai-time {
    font-size: 12px;
    color: #888;
    font-weight: 400;
}

/* 表格样式 */
.table-container {
    margin: 20px 0;
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.result-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 14px;
    min-width: 400px;
}

.result-table th {
    background: #f8f9fa;
    color: #495057;
    font-weight: 600;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
    border-right: 1px solid #dee2e6;
}

.result-table th:last-child {
    border-right: none;
}

.result-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    vertical-align: top;
    word-wrap: break-word;
    max-width: 200px;
    white-space: pre-line;
    /* 保持换行符 */
    line-height: 1.4;
    /* 改善换行后的行间距 */
}

.result-table td:last-child {
    border-right: none;
}

.result-table tr:last-child td {
    border-bottom: none;
}

.result-table tr:hover {
    background-color: #f8f9fa;
}

.result-table tbody tr:nth-child(even) {
    background-color: #fafbfc;
}

.result-table tbody tr:nth-child(even):hover {
    background-color: #f1f3f4;
}

/* 响应式表格 */
@media (max-width: 768px) {
    .table-container {
        margin: 16px 0;
    }

    .result-table {
        font-size: 13px;
        min-width: 300px;
    }

    .result-table th,
    .result-table td {
        padding: 8px 12px;
        max-width: 150px;
    }

    /* 移动端问题显示区域优化 */
    .question-display {
        max-width: 100%;
        /* 在移动端允许占满宽度 */
        min-width: 150px;
        /* 调整最小宽度 */
        padding: 8px 12px;
        /* 减少内边距 */
    }

    .question-text {
        font-size: 13px;
        /* 稍微减小字体 */
    }

    /* 移动端头像优化 */
    .user-avatar,
    .ai-avatar {
        width: 28px;
        height: 28px;
    }

    .avatar-img {
        width: 70%;
        height: 70%;
        object-fit: cover;
        border-radius: 50%;
    }
}

@media (max-width: 480px) {
    .result-table {
        font-size: 12px;
        min-width: 250px;
    }

    .result-table th,
    .result-table td {
        padding: 6px 8px;
        max-width: 120px;
    }

    /* 小屏幕问题显示区域进一步优化 */
    .question-display {
        min-width: 120px;
        padding: 6px 10px;
    }

    .question-text {
        font-size: 12px;
    }

    /* 小屏幕头像优化 */
    .user-avatar,
    .ai-avatar {
        width: 24px;
        height: 24px;
    }

    .avatar-img {
        width: 70%;
        height: 70%;
        object-fit: cover;
        border-radius: 50%;
    }
}

/* 多轮对话容器样式 */
.conversation-container {
    margin-bottom: 28px;
}

.resultListShow {
    width: 100%;
}

.copy-question-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.72);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.question-content:hover .copy-question-btn {
    opacity: 1;
}

.copy-question-btn:hover {
    background: #ffffff;
}

.copy-question-btn .copy-icon {
    width: 14px;
    height: 14px;
}

.container:not(.sidebar-collapsed) .input-center-wrapper,
.container:not(.sidebar-collapsed) .input-container,
.container:not(.sidebar-collapsed) .result-container,
.container:not(.sidebar-collapsed) .result-actions,
.container:not(.sidebar-collapsed) .question-display,
.container:not(.sidebar-collapsed) .ai-display {
    width: min(1040px, calc(100% - 48px));
    max-width: 1040px;
}

.container:not(.sidebar-collapsed) .result-text {
    max-width: min(900px, 86%);
}

.conversation-container:last-child {
    margin-bottom: 0;
}

/* 参考知识库样式 */
.result-text-knowlist {
    margin-top: 16px;
}

.kb-image-section {
    margin-bottom: 16px;
}

.kb-image-title {
    margin-bottom: 8px;
    font-weight: 600;
    color: #111827;
    font-size: 14px;
}

.kb-image-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kb-image-thumbnail-wrapper {
    position: relative;
    cursor: pointer;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s;
    width: 80px;
    height: 80px;
}

.kb-image-thumbnail-wrapper:hover {
    border-color: #3b82f6;
    transform: scale(1.05);
}

.kb-image-error {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
}

.cankao-list {
    margin-top: 12px;
    font-weight: 600;
    color: #111827;
}

.kb-list {
    margin-top: 8px;
}

.kb-item {
    margin: 6px 0;
    line-height: 1.6;
    color: #374151;
}

.kb-item a {
    color: #2563eb;
    text-decoration: none;
}

.kb-item a:hover {
    text-decoration: underline;
}

.kb-full {
    margin-top: 6px;
    padding: 8px;
    background: #f9fafb;
    border-radius: 6px;
    border-left: 3px solid #93c5fd;
    white-space: pre-wrap;
    color: #374151;
}

/* 深色主题支持 */
@media (prefers-color-scheme: dark) {
    body {
        background: #1a202c;
        color: #e2e8f0;
    }

    .container {
        background: #1a202c;
    }

    .popup-mode .container {
        background: #1a202c;
    }

    /* 侧边栏深色模式 */
    .sidebar {
        background: #2d3748;
        color: #e2e8f0;
    }

    .logo-section {
        border-bottom-color: #4a5568;
    }

    .logo-icon {
        content: url('../icons/logo_dark.png');
        /* 深色模式下使用深色logo */
    }

    .logo-title {
        color: #e2e8f0;
    }

    .logo-subtitle {
        color: #a0aec0;
    }

    .version-info {
        border-top-color: #4a5568;
    }

    .version-text {
        color: #a0aec0;
    }

    .sidebar-action-btn,
    .help-action-btn,
    .announcement-btn,
    .help-btn-sidebar {
        background: transparent;
        border-color: transparent;
        color: #e2e8f0;
    }

    .sidebar-action-btn:hover,
    .help-action-btn:hover,
    .announcement-btn:hover,
    .help-btn-sidebar:hover {
        background: #2d3748;
        border-color: #667eea;
        color: #e2e8f0;
        text-decoration: none;
    }

    .help-section {
        border-top-color: #4a5568;
    }

    .bottom-icons-section {
        border-top-color: #4a5568;
    }

    .bottom-icon-btn {
        color: #a0aec0;
    }

    .bottom-icon-btn:hover {
        background: rgba(160, 174, 192, 0.1);
        color: #e2e8f0;
    }

    .bottom-icon-btn:active {
        background: rgba(160, 174, 192, 0.15);
    }

    /* 主内容区域深色模式 */
    .main-content {
        background: #2d3748;
        border-color: #4a5568;
    }

    .top-toolbar {
        border-bottom-color: #4a5568;
    }

    .page-title {
        color: #e2e8f0;
    }

    .content-area {
        background: transparent;
    }

    /* 输入区域深色模式 */
    .input-title {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .input-subtitle {
        color: #a0aec0;
    }

    .model-select,
    .knowledge-base-select,
    .parameter-rule-select,
    .language-select {
        background: #4a5568;
        border-color: #718096;
        color: #e2e8f0;
    }

    .model-select:focus,
    .knowledge-base-select:focus,
    .parameter-rule-select:focus,
    .language-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
    }

    .model-select:hover,
    .knowledge-base-select:hover,
    .parameter-rule-select:hover,
    .language-select:hover {
        border-color: #667eea;
        background-color: #2d3748;
    }

    .model-select option,
    .knowledge-base-select option,
    .parameter-rule-select option,
    .language-select option {
        background: #4a5568;
        color: #e2e8f0;
    }

    .selector-divider {
        color: #a0aec0;
    }

    .settings-button {
        background: #4a5568;
        border-color: #718096;
        color: #e2e8f0;
    }

    .settings-button:hover {
        background: #2d3748;
        border-color: #667eea;
        color: #667eea;
    }

    /* 输入容器深色模式 */
    .input-container {
        background: #4a5568;
        border-color: #718096;
    }

    .input-container:focus-within {
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
    }

    .question-input {
        background: transparent;
        color: #e2e8f0;
    }

    .question-input::placeholder {
        color: #a0aec0;
    }

    .ask-button {
        background: #718096;
        color: #a0aec0;
    }

    .ask-button.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    /* 结果区域深色模式 */
    .result-title {
        color: #e2e8f0;
        border-bottom-color: #4a5568;
    }

    .result-text {
        color: #e2e8f0;
        background: none !important;
    }

    .result-text h3 {
        color: #e2e8f0;
        border-bottom-color: #4a5568;
    }

    .result-text h4 {
        color: #a0aec0;
    }

    .result-text strong {
        color: #e2e8f0;
    }

    .result-text em {
        color: #a0aec0;
    }

    .result-text code {
        background: #2d3748;
        color: #90cdf4;
        border-color: #4a5568;
    }

    .result-text pre {
        background: #2d3748;
        border-color: #4a5568;
    }

    .result-text pre code {
        background: none;
        color: #e2e8f0;
    }

    .result-text blockquote {
        color: #a0aec0;
    }

    .result-text hr {
        border-top-color: #4a5568;
    }

    .result-text a {
        color: #90cdf4;
    }

    .result-text a:hover {
        border-bottom-color: #90cdf4;
    }

    /* 结果操作区域深色模式 */
    .result-actions {
        border-top-color: #4a5568;
    }

    .action-icon-btn {
        color: #a0aec0;
    }

    .action-icon-btn:hover {
        background: #4a5568 !important;
        color: #e2e8f0;
    }

    .action-icon-btn.like-btn.active {
        background: transparent !important;
        color: #4CAF50;
        opacity: 1;
    }

    .action-icon-btn.dislike-btn.active {
        background: transparent !important;
        color: #dc3545;
        opacity: 1;
    }

    /* 深色模式下的SVG激活状态 */
    .action-icon-btn.like-btn.active .action-icon-svg {
        filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(56deg) brightness(118%) contrast(119%) !important;
    }

    .action-icon-btn.dislike-btn.active .action-icon-svg {
        filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
    }

    .action-icon-btn.export-btn:hover {
        background: #4a5568 !important;
        color: #90cdf4;
    }

    .action-icon-btn.copy-btn:hover {
        background: #4a5568 !important;
        color: #f6e05e;
    }

    .action-icon-btn.clear-btn:hover {
        background: #4a5568 !important;
        color: #fc8181;
    }

    .action-icon-btn.like-btn.active {
        background: rgba(40, 167, 69, 0.3);
        color: #68d391;
    }

    .action-icon-btn.dislike-btn.active {
        background: rgba(220, 53, 69, 0.3);
        color: #fc8181;
    }

    /* SVG图标深色模式 */
    .action-icon-svg {
        filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.7) contrast(1);
    }

    .action-icon-btn:hover .action-icon-svg {
        filter: brightness(0) saturate(100%) invert(90%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.9) contrast(1);
    }

    .action-icon-btn.like-btn:hover .action-icon-svg {
        filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }

    .action-icon-btn.dislike-btn:hover .action-icon-svg {
        filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
    }

    .action-icon-btn.export-btn:hover .action-icon-svg {
        filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(180deg) brightness(118%) contrast(119%);
    }

    .action-icon-btn.copy-btn:hover .action-icon-svg {
        filter: brightness(0) saturate(100%) invert(83%) sepia(31%) saturate(638%) hue-rotate(359deg) brightness(103%) contrast(107%);
    }

    .action-icon-btn.clear-btn:hover .action-icon-svg {
        filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
    }

    /* 底部版本信息深色模式 */
    .footer {
        background: #2d3748;
        border-top-color: #4a5568;
    }

    .version {
        color: #a0aec0;
    }

    /* 回到顶部按钮深色模式 */
    .back-to-top-btn {
        background: #667eea;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .back-to-top-btn:hover {
        background: #5a6fd8;
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    }

    /* 滚动条深色模式 */
    .result-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .result-container::-webkit-scrollbar-thumb {
        background: #4a5568;
    }

    .result-container::-webkit-scrollbar-thumb:hover {
        background: #718096;
    }

    .result-container::-webkit-scrollbar-thumb:active {
        background: #a0aec0;
    }

    /* 对话框深色模式 */
    .dialog-container {
        background: #2d3748;
    }

    .dialog-header {
        background: #4a5568;
        border-bottom-color: #718096;
    }

    .dialog-header h3 {
        color: #e2e8f0;
    }

    .close-btn {
        color: #a0aec0;
    }

    .close-btn:hover {
        background: #2d3748;
        color: #e2e8f0;
    }

    .dialog-content {
        background: #2d3748;
        color: #e2e8f0;
    }

    .clear-btn,
    .export-btn {
        background: #4a5568;
        color: #e2e8f0;
    }

    .clear-btn {
        background: #e53e3e;
    }

    .clear-btn:hover {
        background: #c53030;
    }

    .export-btn {
        background: #38a169;
    }

    .export-btn:hover {
        background: #2f855a;
    }

    .history-item {
        background: #4a5568;
        border-color: #718096;
    }

    .history-item:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .history-time {
        color: #a0aec0;
    }

    .history-action-btn {
        background: #667eea;
        color: white;
    }

    .copy-btn {
        background: #38a169;
    }

    .copy-btn:hover {
        background: #2f855a;
    }

    .delete-history-btn {
        background: #e53e3e;
    }

    .delete-history-btn:hover {
        background: #c53030;
    }

    .history-question {
        color: #e2e8f0;
    }

    .history-answer {
        color: #a0aec0;
    }

    .expand-btn {
        color: #90cdf4;
    }

    .expand-btn:hover {
        color: #63b3ed;
    }

    .history-meta {
        color: #a0aec0;
    }

    .empty-history {
        color: #a0aec0;
    }

    .empty-history-text {
        color: #e2e8f0;
    }

    .empty-history-subtext {
        color: #a0aec0;
    }

    .bicbot-history-auth-required {
        background: linear-gradient(135deg, #2d3748 0%, #1f2937 100%);
        border-color: #4a5568;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
    }

    .bicbot-history-auth-title {
        color: #e2e8f0;
    }

    .history-full-content {
        background: #4a5568;
        border-color: #718096;
    }

    .history-full-question {
        color: #e2e8f0;
    }

    .history-full-answer {
        color: #a0aec0;
    }

    .history-model,
    .history-knowledge-base,
    .history-url {
        background: #2d3748;
        color: #a0aec0;
    }

    /* 问题显示区域深色模式 */
    .question-name {
        color: #e2e8f0;
    }

    .question-time {
        color: #a0aec0;
    }

    .question-label {
        color: #a0aec0;
    }

    .question-text {
        color: #e2e8f0;
    }

    .ai-name {
        color: #e2e8f0;
    }

    .ai-time {
        color: #a0aec0;
    }

    /* 表格深色模式 */
    .result-table {
        background: #4a5568;
    }

    .result-table th {
        background: #2d3748;
        color: #e2e8f0;
        border-bottom-color: #718096;
        border-right-color: #718096;
    }

    .result-table td {
        border-bottom-color: #718096;
        border-right-color: #718096;
        color: #e2e8f0;
    }

    .result-table tr:hover {
        background-color: #2d3748;
    }

    .result-table tbody tr:nth-child(even) {
        background-color: #3a4556;
    }

    .result-table tbody tr:nth-child(even):hover {
        background-color: #2d3748;
    }

    .cankao-list {
        color: #e2e8f0 !important;
    }

    /* 参考知识库深色模式 */
    .kb-image-title {
        color: #e2e8f0 !important;
    }

    .kb-image-thumbnail-wrapper {
        border-color: #4a5568;
    }

    .kb-image-thumbnail-wrapper:hover {
        border-color: #667eea;
    }

    .kb-image-error {
        background: #2d3748 !important;
        color: #a0aec0 !important;
    }

    .kb-item {
        color: #e2e8f0 !important;
    }

    .kb-item a {
        color: #90cdf4 !important;
    }

    .kb-item a:hover {
        color: #63b3ed !important;
    }

    .kb-full {
        background: #2d3748 !important;
        border-left-color: #667eea !important;
        color: #e2e8f0 !important;
    }
}

/* 问题复制按钮样式 */
.question-content {
    position: relative;
}

.copy-question-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.72);
    border: 0;
    padding: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
    opacity: 0;
}

.copy-question-btn:hover {
    background: #ffffff;
    opacity: 1;
}

.copy-icon {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.copy-question-btn:hover .copy-icon {
    opacity: 1;
}

/* 批量操作区域 */
.batch-actions {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.batch-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.select-all-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #495057;
    cursor: pointer;
}

.select-all-label input[type="checkbox"] {
    margin: 0;
}

.batch-delete-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.batch-delete-btn:hover:not(:disabled) {
    background: #c82333;
}

.batch-delete-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

/* 历史记录项中的复选框 */
.history-checkbox {
    margin-right: 8px;
    cursor: pointer;
}

/* 单独删除按钮 */
.delete-single-btn {
    background: #dc3545;
}

.delete-single-btn:hover {
    background: #c82333;
}

/* 批量操作区域 */
.batch-actions {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.batch-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.select-all-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #495057;
    cursor: pointer;
}

.select-all-label input[type="checkbox"] {
    margin: 0;
}

.batch-buttons {
    display: flex;
    gap: 8px;
}

.batch-export-btn {
    background: #28a745;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.batch-export-btn:hover:not(:disabled) {
    background: #218838;
}

.batch-export-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

.batch-delete-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.batch-delete-btn:hover:not(:disabled) {
    background: #c82333;
}

.batch-delete-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

/* 建议问题样式 */
.suggestion-container {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    margin: 8px 0 8px 0;
}

.suggestion-header {
    margin-bottom: 12px;
}

.suggestion-title {
    font-size: 14px;
    color: #495057;
    margin: 0;
    font-weight: 500;
}

.suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.suggestion-item {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.suggestion-item:hover {
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
}

.suggestion-text {
    flex: 1;
    font-size: 13px;
    color: #495057;
    line-height: 1.4;
    margin-right: 12px;
}

.suggestion-select-btn {
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.suggestion-select-btn:hover {
    background: #0056b3;
}

/* 保持原问题选项样式 */
.keep-original-item {
    border: 1px solid #28a745 !important;
    background: #f8fff9 !important;
}

.keep-original-item:hover {
    border-color: #1e7e34 !important;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.1) !important;
}

.continue-ask {
    color: #007bff;
    font-weight: 500;
    cursor: pointer;
}

.keep-original-btn {
    background: #28a745 !important;
}

.keep-original-btn:hover {
    background: #1e7e34 !important;
}

/* 建议问题按钮组样式 */
.suggestion-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.regenerate-btn {
    background: #ffc107 !important;
    color: #212529 !important;
}

.regenerate-btn:hover {
    background: #e0a800 !important;
}

/* 调整保持原问题选项的布局 - 保持在同一行 */
.keep-original-item {
    border: 1px solid #28a745 !important;
    background: #f8fff9 !important;
    /* 保持默认的 flex-direction: row */
    flex-direction: row !important;
    align-items: center !important;
}

.keep-original-item .suggestion-text {
    /* 调整文本的边距，给按钮留出空间 */
    margin-right: 12px;
    margin-bottom: 0;
    /* 让文本占据剩余空间 */
    flex: 1;
}

.keep-original-item .suggestion-buttons {
    /* 按钮组不需要占据全宽 */
    width: auto;
    /* 按钮组右对齐 */
    justify-content: flex-end;
    /* 确保按钮组不会换行 */
    flex-shrink: 0;
}

/* 继续问答按钮 - 蓝色主题 */
.regenerate-btn {
    background: transparent !important;
    color: #007bff !important;
    border: 1px solid #007bff !important;
}

.regenerate-btn:hover {
    background: #007bff !important;
    color: white !important;
}

/* 重新生成按钮 - 橙色主题 */
.keep-original-btn {
    background: transparent !important;
    color: #28a745 !important;
    border: 1px solid #28a745 !important;
}

.keep-original-btn:hover {
    background: #28a745 !important;
    color: white !important;
}

/* AWR分析对话框样式 */
.awr-dialog-container,
.inspection-dialog-container {
    min-width: 900px;
    max-width: 1200px;
    width: 95%;
}

.toolset-dialog-container {
    min-width: 900px;
    max-width: 1200px;
    width: 95%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    background: #f6f8fb;
    overflow: hidden;
}

/* 数据库类型描述提示样式 */
.database-description {
    margin-bottom: 8px;
    padding: 10px 14px;
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    color: #856404;
    font-size: 14px;
    line-height: 1.5;
    border-left: 4px solid #ffc107;
}

.awr-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 巡检诊断表单间距优化 */
#inspectionForm {
    gap: 28px;
}

#inspectionForm .form-group {
    margin-bottom: 0 !important;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.form-label.required::after {
    content: ' *';
    color: #dc3545;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.3s ease;
    background: white;
    color: #333;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.form-input:read-only {
    /* background: #f8f9fa; */
    color: #6c757d;
}

/* 邮箱验证状态样式 */
.form-input.input-valid {
    border-color: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
}

.form-input.input-valid:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
}

.form-input.input-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}

.form-input.input-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}

.email-error-message {
    display: none;
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.4;
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-description {
    font-size: 12px;
    color: #6c757d;
    margin: 0;
    margin-top: 4px;
    line-height: 1.4;
}

/* AWR分析时间提示 */
.awr-analysis-time-hint {
    padding: 10px 14px;
    background-color: #e3f2fd;
    border-left: 4px solid #2196f3;
    border-radius: 4px;
    color: #1976d2;
    font-size: 13px;
    font-weight: 500;
    margin-top: 8px;
    margin-bottom: 8px;
}

/* 文件上传容器 */
.file-upload-container {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.file-display-input {
    flex: 1;
    min-width: 0;
}

.file-input-hidden {
    display: none;
}

.file-upload-btn {
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.file-upload-btn:hover {
    background: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.file-upload-btn:active {
    transform: translateY(0);
}

/* 表单操作按钮 */
.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid #e9ecef;
}

.toolset-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 2px;
}

.toolset-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.toolset-section-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.toolset-manager-table-wrap {
    flex: 1;
    min-height: 430px;
    border: 1px solid #e5e9f0;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(31, 45, 61, 0.06);
}

.toolset-manager-table {
    min-width: 100%;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    display: table;
}

.toolset-manager-table col.toolset-col-tool-name { width: 15%; }
.toolset-manager-table col.toolset-col-tool-code { width: 13%; }
.toolset-manager-table col.toolset-col-access-scope { width: 12%; }
.toolset-manager-table col.toolset-col-audit-status { width: 15%; }
.toolset-manager-table col.toolset-col-updated-at { width: 20%; }
.toolset-manager-table col.toolset-col-actions { width: 25%; }

.toolset-manager-table thead th {
    background: #f3f6fb;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    border-bottom: 1px solid #e5e9f0;
}

.toolset-manager-table tbody tr:hover {
    background: #f7fbff;
}

.toolset-manager-table th,
.toolset-manager-table td {
    vertical-align: middle;
    text-align: left;
    padding: 14px 16px;
    box-sizing: border-box;
}

.toolset-manager-table td {
    word-break: break-word;
    color: #495057;
    font-size: 13px;
    border-bottom: 1px solid #edf1f5;
}

.toolset-manager-table th:nth-child(3),
.toolset-manager-table td:nth-child(3) {
    text-align: center;
}

.toolset-manager-table th:nth-child(4),
.toolset-manager-table td:nth-child(4) {
    text-align: center;
}

.toolset-manager-table th:nth-child(5),
.toolset-manager-table td:nth-child(5) {
    white-space: nowrap;
}

.toolset-manager-table th:nth-child(6),
.toolset-manager-table td:nth-child(6) {
    text-align: center;
}

.toolset-audit-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.toolset-audit-status {
    font-weight: 600;
}

.toolset-audit-status-approved {
    color: #179c52;
}

.toolset-audit-status-pending {
    color: #b7791f;
}

.toolset-audit-status-rejected {
    color: #d97706;
}

.toolset-audit-icon-btn {
    width: 24px;
    height: 24px;
    border: 1px solid #d7deea;
    border-radius: 50%;
    background: #fff;
    color: #53657b;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toolset-audit-icon-btn:hover {
    border-color: #0b5ed7;
    color: #0b5ed7;
    background: #eef5ff;
}

.toolset-audit-icon-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.toolset-access-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.toolset-access-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.toolset-access-public {
    color: #0b5ed7;
    background: #e9f2ff;
}

.toolset-access-public::before {
    background: #0b5ed7;
}

.toolset-access-private {
    color: #3f5368;
    background: #eef2f6;
}

.toolset-access-private::before {
    background: #6c7f92;
}

.toolset-pagination {
    padding-top: 10px;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.toolset-pagination-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
}

.toolset-page-size-label {
    color: #5f6b7a;
    font-size: 12px;
    font-weight: 600;
}

.toolset-page-size-select {
    min-width: 74px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #d7deea;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    outline: none;
}

.toolset-page-size-select:focus {
    border-color: #0b5ed7;
    box-shadow: 0 0 0 3px rgba(11, 94, 215, 0.12);
}

.toolset-filter-bar {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) 160px 160px auto;
    align-items: end;
    gap: 14px;
    padding: 18px 20px;
    margin-bottom: 10px;
    border: 1px solid #e5e9f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(31, 45, 61, 0.05);
}

.toolset-filter-item,
.toolset-filter-actions {
    min-width: 0;
}

.toolset-filter-item .form-label {
    margin-bottom: 6px;
    color: #495057;
    font-size: 12px;
    font-weight: 600;
}

.toolset-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    align-items: flex-end;
    margin-left: auto;
    padding-bottom: 0;
    white-space: nowrap;
}

.toolset-filter-item {
    min-width: 0;
}

.toolset-filter-item.toolset-filter-item-keyword {
    min-width: 0;
}

.toolset-filter-item.toolset-filter-item-access-scope {
    min-width: 0;
    width: 100%;
}

#toolsetDialog .toolset-filter-item .form-input {
    height: 42px;
    padding: 10px 14px;
}

.toolset-row-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
}

.toolset-action-btn {
    border: 1px solid #dbe4ef;
    background: #fff;
    color: #0d6efd;
    border-radius: 6px;
    padding: 6px 12px;
    min-width: 54px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
}

.toolset-action-btn:hover {
    border-color: #0d6efd;
    color: #fff;
    background: #0d6efd;
}

.toolset-action-btn-danger {
    color: #dc3545;
    border-color: #f1c2c7;
    background: #fff;
}

.toolset-action-btn-danger:hover {
    border-color: #dc3545;
    background: #dc3545;
    color: #fff;
}

.toolset-action-btn:disabled,
.toolset-action-btn[disabled] {
    cursor: not-allowed;
    color: #9aa6b2;
    border-color: #d9e1ea;
    background: #f3f6f9;
    box-shadow: none;
    opacity: 1;
}

.toolset-action-btn-danger:disabled,
.toolset-action-btn-danger[disabled] {
    color: #b5bcc4;
    border-color: #dde3ea;
    background: #f3f6f9;
}

.toolset-action-btn:disabled:hover,
.toolset-action-btn[disabled]:hover,
.toolset-action-btn-danger:disabled:hover,
.toolset-action-btn-danger[disabled]:hover {
    color: #9aa6b2;
    border-color: #d9e1ea;
    background: #f3f6f9;
    transform: none;
}

#toolsetCreateBtn {
    min-width: 96px;
    padding: 9px 18px;
    border-radius: 8px;
    white-space: nowrap;
    line-height: 1.2;
    background: linear-gradient(135deg, #2bb84a 0%, #22a241 100%);
    box-shadow: 0 4px 10px rgba(34, 162, 65, 0.24);
}

#toolsetCreateBtn:hover {
    background: linear-gradient(135deg, #24a643 0%, #1c9038 100%);
    box-shadow: 0 6px 14px rgba(34, 162, 65, 0.28);
}

#toolsetSearchKeyword {
    border-radius: 6px;
    background: #fff;
}

#toolsetFilterSearchBtn,
#toolsetFilterResetBtn {
    min-width: 92px;
    white-space: nowrap;
    height: 36px;
    padding: 8px 16px;
    border-radius: 8px;
}

#toolsetFilterSearchBtn {
    background: linear-gradient(135deg, #2bb84a 0%, #22a241 100%);
    box-shadow: 0 4px 10px rgba(34, 162, 65, 0.24);
}

#toolsetFilterSearchBtn:hover {
    background: linear-gradient(135deg, #24a643 0%, #1c9038 100%);
}

#toolsetFilterResetBtn {
    background: linear-gradient(135deg, #7f8a98 0%, #6e7886 100%);
    box-shadow: 0 4px 10px rgba(96, 106, 119, 0.2);
}

#toolsetFilterResetBtn:hover {
    background: linear-gradient(135deg, #717c89 0%, #616b78 100%);
}

.toolset-selector-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.toolset-all-toggle-row {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin: 2px 0 4px;
}

.toolset-toggle-btn {
    align-items: center;
}

.toolset-empty-state {
    grid-column: 1 / -1;
    padding: 18px;
    border: 1px dashed #c4d4ea;
    border-radius: 14px;
    background: #f9fbfe;
    color: #667b96;
    font-size: 13px;
    line-height: 1.7;
}

.toolset-empty-actions {
    margin-top: 10px;
}

.toolset-inline-link {
    border: none;
    background: none;
    color: #1677ff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.toolset-btn {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #d6dfea;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
    text-align: left;
}

.toolset-btn:hover {
    border-color: #6ea8ff;
    box-shadow: 0 10px 24px rgba(28, 81, 151, 0.12);
    transform: translateY(-1px);
}

.toolset-btn.is-active {
    border-color: #1677ff;
    background: linear-gradient(135deg, rgba(22, 119, 255, 0.09), rgba(22, 119, 255, 0.02));
    box-shadow: 0 12px 28px rgba(22, 119, 255, 0.16);
}

.toolset-btn-add {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    min-height: 132px;
    border-style: dashed;
    border-color: #b8cdf0;
    background: linear-gradient(135deg, #f8fbff, #eef5ff);
    color: #2f5f96;
}

.toolset-btn-add:hover {
    border-color: #1677ff;
}

.toolset-add-icon {
    font-size: 38px;
    line-height: 1;
    font-weight: 300;
}

.toolset-add-label {
    font-size: 14px;
    font-weight: 600;
}

.toolset-btn-name {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #24374a;
}

.toolset-btn-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.toolset-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff4fb;
    color: #49637e;
    font-size: 12px;
    line-height: 1;
}

.toolset-selected-summary {
    padding: 12px 14px;
    border-radius: 12px;
    background: #f5f8fc;
    color: #49637e;
    font-size: 13px;
    line-height: 1.7;
}

.toolset-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.toolset-fields-grid--compact {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
}

.toolset-inline-hint {
    min-height: 20px;
}

.toolset-inline-hint[data-status="success"] {
    color: #1f7a45;
}

.toolset-inline-hint[data-status="warning"] {
    color: #9a6700;
}

.toolset-inline-hint[data-status="error"] {
    color: #c53030;
}

.toolset-history-empty {
    text-align: center;
    color: #718096;
    padding: 28px 16px;
}

#toolsetDialog .dialog-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 16px 20px 14px;
    background: #f6f8fb;
    overscroll-behavior: contain;
}

#toolsetDialog .awr-tab-content {
    flex: 1;
    min-height: 0;
}

#toolsetDialog .awr-tab-content.active {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#toolsetDialog .awr-form,
#toolsetDialog .awr-history-table-container {
    min-height: 0;
}

#toolsetDialog .awr-form {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 10px;
    overscroll-behavior: contain;
}

#toolsetDialog .awr-history-table-container {
    flex: 1;
    overflow: auto;
}

.toolset-form-modal {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.toolset-form-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.toolset-form-panel {
    position: relative;
    z-index: 1;
    width: min(900px, calc(100% - 48px));
    max-height: calc(100% - 48px);
    background: #f8fafc;
    border: 1px solid #e4e9f0;
    border-radius: 14px;
    box-shadow: 0 18px 46px rgba(22, 34, 51, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.toolset-confirm-panel {
    position: relative;
    z-index: 1;
    width: min(560px, calc(100% - 48px));
    background: #f8fafc;
    border: 1px solid #e4e9f0;
    border-radius: 14px;
    box-shadow: 0 18px 46px rgba(22, 34, 51, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.toolset-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 24px 22px;
    border-top: 1px solid #e4e9f0;
    background: #f8fafc;
}

.toolset-form-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid #e6ebf2;
    background: linear-gradient(180deg, #f4f7fc 0%, #eef3fa 100%);
}

.toolset-form-panel-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 600;
    color: #1f2d3d;
}

.toolset-form-panel-subtitle {
    margin: 0;
    color: #5f6b7a;
    font-size: 14px;
    line-height: 1.55;
}

.toolset-modal-form {
    padding: 18px 24px 20px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#toolsetDialog .form-group,
#toolsetDialog .form-actions,
#toolsetDialog .toolset-selected-summary,
#toolsetDialog .toolset-toolbar,
#toolsetDialog .toolset-filter-bar,
#toolsetDialog .toolset-section-header {
    width: 100%;
    min-width: 0;
}

#toolsetDialog .toolset-modal-form .form-group {
    gap: 7px;
}

#toolsetDialog .toolset-modal-form .form-label {
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 600;
    color: #364152;
}

#toolsetDialog .toolset-modal-form .form-input {
    height: 42px;
    padding: 9px 12px;
    border: 1px solid #d7dee8;
    border-radius: 10px;
    background: #fff;
}

#toolsetDialog .toolset-modal-form .form-input:focus {
    border-color: #2f7df6;
    box-shadow: 0 0 0 3px rgba(47, 125, 246, 0.16);
}

#toolsetDialog .toolset-modal-form .file-upload-container {
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#toolsetDialog .toolset-modal-form .file-display-input {
    height: 42px;
    border-radius: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

#toolsetDialog .toolset-modal-form .file-upload-btn {
    height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2f7df6 0%, #2366cf 100%);
    box-shadow: 0 6px 14px rgba(35, 102, 207, 0.24);
    flex: 0 0 auto;
}

#toolsetDialog .toolset-modal-form .file-upload-btn:hover {
    background: linear-gradient(135deg, #256fe0 0%, #1c57b0 100%);
}

#toolsetDialog .toolset-form-panel .close-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #5f6b7a;
}

#toolsetDialog .toolset-form-panel .close-btn:hover {
    background: #dde6f3;
    color: #1f2d3d;
}

#toolsetDialog .form-actions {
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px solid #e4e9f0;
    background: transparent;
}

@media (max-width: 1100px) {
    .toolset-filter-bar {
        grid-template-columns: minmax(260px, 1fr) repeat(2, minmax(140px, 160px));
        align-items: end;
    }

    .toolset-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 720px) {
    .toolset-filter-bar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .toolset-filter-actions {
        justify-content: flex-start;
        padding-bottom: 0;
    }

    .toolset-filter-actions .btn-cancel,
    .toolset-filter-actions .btn-save {
        width: 100%;
    }
}

.btn-cancel,
.btn-save {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel {
    background: #6c757d;
    color: white;
}

.btn-cancel:hover {
    background: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3);
}

.btn-save {
    background: #28a745;
    color: white;
}

.btn-save:hover {
    background: #218838;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

.btn-cancel:active,
.btn-save:active {
    transform: translateY(0);
}

/* AWR选项卡样式 */
.awr-tabs {
    display: flex;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 20px;
    padding: 0 20px;
}

.awr-tab-btn {
    padding: 12px 24px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    color: #6c757d;
    transition: all 0.3s;
    margin-bottom: -2px;
    position: relative;
}

.awr-tab-btn:hover {
    color: #007bff;
}

.awr-tab-btn.active {
    color: #007bff;
    border-bottom-color: #007bff;
    font-weight: 600;
}

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

.awr-tab-content.active {
    display: block;
}

/* AWR历史记录筛选区域样式 */
.awr-history-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    border-radius: 8px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.awr-filter-label {
    font-size: 13px;
    font-weight: 500;
    color: #495057;
    white-space: nowrap;
    margin: 0;
    flex-shrink: 0;
}

.awr-filter-input,
.awr-filter-select {
    width: 140px;
    min-width: 120px;
    max-width: 160px;
    flex-shrink: 0;
}

.awr-filter-select {
    cursor: pointer;
}

/* 美化搜索按钮 */
.awr-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
    white-space: nowrap;
    min-width: 90px;
    flex-shrink: 0;
}

.awr-search-btn:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
    transform: translateY(-1px);
}

.awr-search-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

/* 重置按钮样式 */
.awr-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
    white-space: nowrap;
    min-width: 90px;
    flex-shrink: 0;
}

.awr-reset-btn:hover {
    background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
    transform: translateY(-1px);
}

.awr-reset-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
}

/* 响应式布局 - 小屏幕时允许横向滚动 */
@media (max-width: 1400px) {
    .awr-history-filters {
        gap: 6px;
        padding: 10px 12px;
    }

    .awr-filter-label {
        font-size: 12px;
    }

    .awr-filter-input,
    .awr-filter-select {
        width: 140px;
        min-width: 120px;
        max-width: 160px;
        font-size: 13px;
    }

    .awr-search-btn,
    .awr-reset-btn {
        padding: 7px 14px;
        font-size: 12px;
        min-width: 80px;
    }
}

/* AWR历史记录表格容器 */
/* AWR历史列表提示容器 */
.awr-history-hint-container {
    margin-bottom: 16px;
    margin-top: 0;
}

/* AWR历史记录表格容器 */
.awr-history-table-container {
    margin-bottom: 20px;
    position: relative;
    width: 100%;
    overflow-x: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 430px;
    /* 隐藏横向滚动条，确保表格容器占据剩余空间 */
}

/* AWR历史记录表格样式 */
.awr-history-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    table-layout: fixed;
    display: block;
    flex: 1;
    min-height: 0;
    /* 固定表格布局，确保百分比宽度生效 */
}

/* 使用包装器实现可滚动的tbody，同时保持表头固定 */
.awr-history-table thead {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    display: table;
    table-layout: fixed;
    width: 100%;
}

.awr-history-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* 表头列宽设置 - 使用百分比，与表体保持一致 */
/* 8列：文件名、类型、创建时间、问题描述、邮箱、任务状态、通知状态、操作 */
/* 表头列宽度，与表体td宽度保持一致 */
.awr-history-table th:nth-child(1) { width: 10%; max-width: 120px; } /* 文件名 */
.awr-history-table th:nth-child(2) { width: 10%; } /* 类型 */
.awr-history-table th:nth-child(3) { width: 13%; } /* 创建时间 */
.awr-history-table th:nth-child(4) { width: 10%; max-width: 120px; } /* 问题描述 */
.awr-history-table th:nth-child(5) { width: 15%; } /* 邮箱 */
.awr-history-table th:nth-child(6) { width: 12%; } /* 任务状态 */
.awr-history-table th:nth-child(7) { width: 10%; } /* 通知状态 */
.awr-history-table th:nth-child(8) { width: 14%; } /* 操作 */

.awr-history-table tbody {
    display: block;
    max-height: none;
    height: calc(100% - 48px);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 100px;
}

.awr-history-table tbody tr {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.awr-history-table thead th,
.awr-history-table tbody td {
    box-sizing: border-box;
}

/* 确保有text-overflow的列正确显示 */
.awr-table-cell-filename,
.awr-table-cell-problem,
.awr-table-cell-email {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* 可复制单元格样式 */
.copyable-cell {
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
}

.copyable-cell:hover {
    background-color: #f0f0f0;
}

.copyable-cell:active {
    background-color: #e0e0e0;
}

.awr-history-row {
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.2s;
}

.awr-history-row:hover {
    background-color: #f8f9fa;
}

.awr-history-row:last-child {
    border-bottom: none;
}

.awr-history-table td {
    padding: 12px 16px;
    font-size: 13px;
    color: #495057;
    vertical-align: middle;
    overflow: hidden;
}

.awr-table-cell-time {
    white-space: nowrap;
    color: #6c757d;
    font-size: 12px;
    width: 13%;
}

.awr-table-cell-status {
    width: 12%;
}

.awr-table-cell-notify-status {
    width: 10%;
}

.awr-status-badge {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
    white-space: nowrap;
    line-height: 1.2;
    text-align: center;
    min-width: 60px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.awr-history-status {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
    white-space: nowrap;
    line-height: 1.2;
    text-align: center;
    min-width: 60px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.status-pending {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
    color: #856404;
    border: 1px solid #ffc107;
}

.status-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border: 1px solid #28a745;
}

.status-failed {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
    border: 1px solid #dc3545;
}

.status-running {
    background: linear-gradient(135deg, #cfe2ff 0%, #b6d4fe 100%);
    color: #084298;
    border: 1px solid #0d6efd;
}

.status-cancelled {
    background: linear-gradient(135deg, #e2e3e5 0%, #d6d8db 100%);
    color: #383d41;
    border: 1px solid #6c757d;
}

.status-unknown {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    color: #495057;
    border: 1px solid #adb5bd;
}

/* 通知状态样式 */
.notify-status-pending {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
    color: #856404;
    border: 1px solid #ffc107;
}

.notify-status-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border: 1px solid #28a745;
}

.notify-status-failed,
.notify-status-fail {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
    border: 1px solid #dc3545;
}

.notify-status-unknown {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    color: #495057;
    border: 1px solid #adb5bd;
}

.awr-table-cell-filename {
    width: 10%;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #495057;
}

.awr-table-cell-problem {
    width: 10%;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #6c757d;
}

.awr-table-cell-type {
    width: 10%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #495057;
}

.awr-table-cell-email {
    width: 15%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #495057;
}

.awr-table-cell-language {
    width: 12%;
    text-align: center;
    color: #6c757d;
}

.awr-table-cell-actions {
    width: 14%;
    white-space: nowrap;
}

.awr-history-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
}

.awr-action-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
}

/* 重发邮件按钮样式 */
.awr-action-btn.resend-email-btn,
.awr-action-btn.inspection-resend-btn {
    background: #007bff;
    color: white;
}

.awr-action-btn.resend-email-btn:hover:not(:disabled):not(.disabled),
.awr-action-btn.inspection-resend-btn:hover:not(:disabled):not(.disabled) {
    background: #0056b3;
}

.awr-action-btn.resend-email-btn:disabled,
.awr-action-btn.resend-email-btn.disabled,
.awr-action-btn.inspection-resend-btn:disabled,
.awr-action-btn.inspection-resend-btn.disabled {
    background: #6c757d;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.6;
}

/* 下载按钮样式 */
.awr-action-btn.download-btn,
.awr-action-btn.inspection-download-btn {
    background: #28a745;
    color: white;
}

.awr-action-btn.download-btn:hover:not(:disabled):not(.disabled),
.awr-action-btn.inspection-download-btn:hover:not(:disabled):not(.disabled) {
    background: #218838;
}

.reanalyze-btn {
    background: #007bff;
    color: white;
}

.reanalyze-btn:hover:not(:disabled):not(.disabled) {
    background: #0056b3;
}

.reanalyze-btn:disabled,
.reanalyze-btn.disabled {
    background: #6c757d;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.6;
}

.view-btn {
    background: #28a745;
    color: white;
}

.view-btn:hover {
    background: #218838;
}

.awr-history-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #6c757d;
    flex-wrap: wrap;
}

.awr-history-meta span {
    margin-right: 8px;
}

/* 分页样式 */
.awr-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid #e9ecef;
    flex-shrink: 0;
}

.pagination-btn {
    padding: 8px 16px;
    border: 1px solid #dee2e6;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}

.pagination-btn:hover:not(:disabled) {
    background: #f8f9fa;
    border-color: #007bff;
    color: #007bff;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info {
    font-size: 14px;
    color: #6c757d;
}

.awr-tab-content.active#awrHistoryView {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 自定义日期时间筛选器 */
.datetime-filter-input {
    cursor: pointer;
    padding-right: 36px;
    caret-color: transparent;
    position: relative;
}

.datetime-filter-input:focus {
    border-color: #4F46E5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.datetime-picker-overlay {
    position: fixed;
    z-index: 100000;
    display: none;
    pointer-events: none;
}

.datetime-picker-overlay.visible {
    display: block;
    pointer-events: auto;
}

.datetime-picker-panel {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(99, 102, 241, 0.1);
    padding: 16px;
    min-width: 260px;
    max-width: 320px;
    font-size: 14px;
    color: #1f2937;
}

.datetime-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-weight: 600;
}

.datetime-picker-nav {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #4F46E5;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}

.datetime-picker-nav:hover {
    background: rgba(79, 70, 229, 0.12);
}

.datetime-picker-month {
    flex: 1;
    text-align: center;
    font-size: 15px;
}

.datetime-picker-weekdays,
.datetime-picker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.datetime-picker-weekdays {
    margin-bottom: 6px;
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
}

.datetime-picker-weekday {
    text-align: center;
}

.datetime-picker-day {
    border: none;
    border-radius: 8px;
    background: transparent;
    padding: 6px 0;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.datetime-picker-day:hover {
    background: rgba(79, 70, 229, 0.12);
}

.datetime-picker-day.other-month {
    color: #9ca3af;
}

.datetime-picker-day.selected {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}

.datetime-picker-day.today {
    border: 1px solid rgba(99, 102, 241, 0.4);
}

.datetime-picker-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
}

.datetime-picker-time-label {
    font-weight: 600;
    color: #374151;
}

.datetime-picker-time-selects {
    display: flex;
    align-items: center;
    gap: 6px;
}

.datetime-picker-time-selects select {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: #f8fafc;
    color: #1f2937;
    font-size: 13px;
    appearance: none;
}

.datetime-picker-time-separator {
    font-weight: 600;
    color: #4b5563;
}

.datetime-picker-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.datetime-picker-footer {
    display: flex;
    justify-content: right;
    gap: 10px;
}

.datetime-picker-actions-spacer {
    flex: 1;
}

.datetime-picker-btn {
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: #f3f4f6;
    color: #1f2937;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border 0.2s ease;
}

.datetime-picker-btn:hover {
    background: #e5e7eb;
}

.datetime-picker-btn.primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}

.datetime-picker-btn.primary:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

/* 表单标签帮助提示 */
.form-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-icon-btn {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #cbd5f5;
    background: #f5f8ff;
    color: #4f46e5;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
}

.info-icon-btn:hover,
.info-icon-btn:focus-visible {
    background: #eef2ff;
    border-color: #4f46e5;
    color: #3730a3;
}

.info-icon-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
}

.info-tooltip {
    position: absolute;
    top: 0;
    left: calc(100% + 12px);
    width: 320px;
    max-width: min(340px, 60vw);
    background: #ffffff;
    color: #1f2937;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    font-size: 12px;
    text-align: left;
    line-height: 1.5;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.info-tooltip strong {
    display: block;
    margin-bottom: 6px;
    color: #4f46e5;
    font-weight: 600;
}

.info-tooltip p {
    margin: 0 0 6px;
    color: #374151;
    line-height: 1.6;
}

.info-tooltip ol {
    margin: 6px 0 0 18px;
    padding: 0;
    color: #111827;
}

.info-tooltip li {
    margin-bottom: 4px;
    line-height: 1.55;
}

.info-tooltip code {
    display: inline-block;
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: Consolas, 'Courier New', monospace;
    color: #dc2626;
    font-size: 11px;
    border: 1px solid #e5e7eb;
}

.info-icon-btn:hover .info-tooltip,
.info-icon-btn:focus-visible .info-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.info-tooltip::after {
    content: '';
    position: absolute;
    top: 10px;
    left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent #ffffff transparent transparent;
}

.info-tooltip::before {
    content: '';
    position: absolute;
    top: 10px;
    left: -7px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent #e5e7eb transparent transparent;
}

/* AWR 按钮自定义 Tooltip 样式 */
.awr-btn-with-tooltip {
    position: relative;
}

.awr-tooltip {
    position: absolute;
    left: calc(100% + 16px);
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    background: #ffffff;
    color: #1f2937;
    padding: 14px 20px;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
    font-size: 15px;
    font-weight: 400;
    text-align: center;
    line-height: 1.6;
    white-space: nowrap;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    min-width: auto;
    letter-spacing: 0.3px;
    font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 箭头指向按钮 */
.awr-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border-width: 12px;
    border-style: solid;
    border-color: transparent #ffffff transparent transparent;
    filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.1));
}

.awr-tooltip::before {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(100% - 2px);
    transform: translateY(-50%);
    border-width: 12px;
    border-style: solid;
    border-color: transparent #e5e7eb transparent transparent;
}

/* 悬停时显示 tooltip - 淡入淡出效果 */
.awr-btn-with-tooltip:hover .awr-tooltip,
.awr-btn-with-tooltip:focus-visible .awr-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
}

/* 深色模式下的AWR分析对话框样式 */
@media (prefers-color-scheme: dark) {
    .datetime-filter-input {
        background-color: #1f2937;
        border-color: #4a5568;
        color: #e2e8f0;
    }

    .datetime-picker-panel {
        background: #1f2937;
        color: #e2e8f0;
        border: 1px solid rgba(99, 102, 241, 0.3);
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.45);
    }

    .datetime-picker-weekdays {
        color: #94a3b8;
    }

    .datetime-picker-day {
        color: #e2e8f0;
    }

    .datetime-picker-day.other-month {
        color: #64748b;
    }

    .datetime-picker-day:hover {
        background: rgba(99, 102, 241, 0.2);
    }

    .datetime-picker-day.today {
        border-color: rgba(129, 140, 248, 0.6);
    }

    .datetime-picker-time-label {
        color: #cbd5f5;
    }

    .datetime-picker-time-selects select {
        background: #334155;
        border-color: rgba(148, 163, 184, 0.4);
        color: #e2e8f0;
    }

    .datetime-picker-btn {
        background: #334155;
        color: #e2e8f0;
    }

    .datetime-picker-btn:hover {
        background: #4c566a;
    }

    .info-icon-btn {
        border-color: #6366f1;
        background: rgba(99, 102, 241, 0.2);
        color: #c7d2fe;
    }

    .info-icon-btn:hover,
    .info-icon-btn:focus-visible {
        background: rgba(129, 140, 248, 0.35);
        border-color: #a5b4fc;
        color: #e0e7ff;
    }

    .info-tooltip {
        background: #ffffff;
        color: #1f2937;
        border-color: #e5e7eb;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }

    .info-tooltip strong {
        color: #4f46e5;
    }

    .info-tooltip code {
        background: #f3f4f6;
        color: #dc2626;
        border-color: #e5e7eb;
    }

    .info-tooltip p {
        color: #d1d5db;
    }

    .info-tooltip ol {
        color: #f3f4f6;
    }

    .info-tooltip::after {
        border-color: #ffffff transparent transparent transparent;
    }

    .info-tooltip::before {
        border-color: #e5e7eb transparent transparent transparent;
    }

    /* AWR tooltip 深色模式样式 */
    .awr-tooltip {
        background: #2d3748;
        color: #e2e8f0;
        border-color: #4a5568;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    }

    .awr-tooltip::after {
        border-color: transparent #2d3748 transparent transparent;
        filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.3));
    }

    .awr-tooltip::before {
        border-color: transparent #4a5568 transparent transparent;
    }

    .awr-form .form-label {
        color: #e2e8f0;
    }

    .awr-form .form-input,
    .awr-form .form-textarea {
        background: #4a5568;
        border-color: #718096;
        color: #e2e8f0;
    }

    .awr-form .form-input:read-only {
        background: #2d3748;
        color: #a0aec0;
    }

    .awr-tabs {
        border-bottom-color: #4a5568;
    }

    .awr-tab-btn {
        color: #a0aec0;
    }

    .awr-tab-btn.active {
        color: #63b3ed;
        border-bottom-color: #63b3ed;
    }

    .awr-history-table {
        background: #2d3748;
        border-color: #4a5568;
    }

    .awr-history-table thead {
        background: #4a5568;
    }

    .awr-history-table th {
        color: #e2e8f0;
        border-bottom-color: #718096;
    }

    .awr-history-row {
        border-bottom-color: #4a5568;
    }

    .awr-history-row:hover {
        background-color: #4a5568;
    }

    .awr-history-table td {
        color: #e2e8f0;
    }

    .awr-table-cell-time,
    .awr-table-cell-problem,
    .awr-table-cell-email {
        color: #a0aec0;
    }

    .awr-pagination {
        border-top-color: #4a5568;
    }

    .pagination-info {
        color: #a0aec0;
    }

    .pagination-btn {
        background: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
    }

    .pagination-btn:hover:not(:disabled) {
        background: #4a5568;
        border-color: #63b3ed;
        color: #63b3ed;
    }

    .awr-form .form-input:focus,
    .awr-form .form-textarea:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
    }

    .awr-form .form-description {
        color: #a0aec0;
    }

    .awr-analysis-time-hint {
        background-color: #1e3a5f;
        border-left-color: #4299e1;
        color: #90cdf4;
    }

    .file-upload-btn {
        background: #667eea;
    }

    .file-upload-btn:hover {
        background: #5a6fd8;
    }

    .form-actions {
        border-top-color: #718096;
    }

    .btn-cancel {
        background: #718096;
        color: #e2e8f0;
    }

    .btn-cancel:hover {
        background: #4a5568;
    }

    .btn-save {
        background: #38a169;
        color: white;
    }

    .btn-save:hover {
        background: #2f855a;
    }
}

/* 引导模态框样式 */
.onboarding-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.onboarding-modal.active {
    opacity: 1;
}

.onboarding-modal-content {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideInUp 0.3s ease;
}

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

.onboarding-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.onboarding-progress {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-text {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.onboarding-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 24px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.onboarding-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.onboarding-body {
    padding: 32px;
    overflow-y: auto;
    flex: 1;
    transition: opacity 0.2s ease;
}

.onboarding-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.step-icon {
    font-size: 64px;
    margin-bottom: 20px;
    animation: bounceIn 0.5s ease;
}

@keyframes bounceIn {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.step-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.step-description {
    font-size: 16px;
    color: #666;
    margin-bottom: 32px;
    line-height: 1.6;
}

.onboarding-form {
    width: 100%;
    text-align: left;
}

.onboarding-form .form-group {
    margin-bottom: 20px;
}

.onboarding-form label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.onboarding-form input[type="text"],
.onboarding-form input[type="email"],
.onboarding-form input[type="url"],
.onboarding-form input[type="password"],
.onboarding-form select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.onboarding-form input:focus,
.onboarding-form select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper input {
    padding-right: 45px;
}

.toggle-password-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    color: #666;
    transition: color 0.2s;
}

.toggle-password-btn:hover {
    color: #333;
}

.validation-message {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    display: none;
}

.validation-message.testing {
    background: #e7f3ff;
    color: #0056b3;
    border: 1px solid #b3d9ff;
}

.validation-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.validation-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e9ecef;
}

.btn-skip {
    padding: 10px 20px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-skip:hover {
    background: #e9ecef;
    border-color: #dee2e6;
    color: #333;
}

.btn-primary {
    padding: 10px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary {
    padding: 10px 20px;
    background: #6c757d;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover:not(:disabled) {
    background: #5a6268;
}

.btn-secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-register {
    padding: 10px 20px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-register:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
    background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
}

.btn-register:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 提醒横幅样式 */
.onboarding-reminder-banner {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid #ffc107;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.reminder-text {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.reminder-action-btn {
    padding: 6px 16px;
    background: #667eea;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.reminder-action-btn:hover {
    background: #5a6fd8;
    transform: translateY(-1px);
}

.reminder-close-btn {
    background: rgba(0, 0, 0, 0.1);
    border: none;
    color: #333;
    font-size: 20px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.reminder-close-btn:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    .onboarding-modal-content {
        background: #2d3748;
        color: #e2e8f0;
    }

    .onboarding-body {
        color: #e2e8f0;
    }

    .step-title {
        color: #e2e8f0;
    }

    .step-description {
        color: #a0aec0;
    }

    .onboarding-form label {
        color: #e2e8f0;
    }

    .onboarding-form input[type="text"],
    .onboarding-form input[type="email"],
    .onboarding-form input[type="url"],
    .onboarding-form input[type="password"],
    .onboarding-form select {
        background: #4a5568;
        border-color: #718096;
        color: #e2e8f0;
    }

    .onboarding-form input:focus,
    .onboarding-form select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
    }

    .btn-skip {
        background: #4a5568;
        border-color: #718096;
        color: #e2e8f0;
    }

    .btn-skip:hover {
        background: #718096;
        border-color: #a0aec0;
    }

    .form-actions {
        border-top-color: #718096;
    }
}

/* 巡检诊断步骤进度条样式 */
.inspection-progress-container {
    margin-bottom: 30px;
    padding: 20px 0;
}

.inspection-progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}

.inspection-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    z-index: 2;
}

.progress-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    border: 3px solid #e0e0e0;
    position: relative;
}

.progress-step-circle.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

.progress-step-circle.completed {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

.progress-step-circle.completed::after {
    content: '✓';
    position: absolute;
    font-size: 20px;
}

.progress-step-label {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
    text-align: center;
    font-weight: 500;
    transition: color 0.3s ease;
}

.inspection-progress-step.active .progress-step-label {
    color: #667eea;
    font-weight: 600;
}

.inspection-progress-line {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    height: 3px;
    background: #e0e0e0;
    z-index: 1;
    transition: background 0.3s ease;
}

.inspection-progress-line.active {
    background: linear-gradient(to right, #667eea 0%, #667eea 50%, #e0e0e0 50%, #e0e0e0 100%);
}

.inspection-progress-line.completed {
    background: #28a745;
}

/* 步骤内容样式 */
.inspection-step {
    display: none;
    animation: fadeIn 0.3s ease;
}

.inspection-step.active {
    display: block;
}

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

.step-content {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 巡检诊断步骤内的表单间距优化 */
.inspection-step .awr-form {
    gap: 28px;
}

/* 确保表单项之间有足够的间距 */
#inspectionStep2 .form-group {
    margin-bottom: 24px !important;
}

#inspectionStep2 .form-group:last-of-type {
    margin-bottom: 0;
}

/* 协议复选框区域的上边距 */
#inspectionStep2 .agreement-section {
    margin-top: 8px;
    margin-bottom: 0;
}

.step-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.step-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.step-description {
    margin: 20px 0;
    line-height: 1.6;
    color: #666;
}

.step-description p {
    margin: 10px 0;
}

.step-warning {
    color: #ff6b6b;
    font-weight: 500;
    margin-top: 12px;
    padding: 12px;
    background: #fff5f5;
    border-left: 4px solid #ff6b6b;
    border-radius: 4px;
}

.download-client-section {
    margin: 24px 0;
    text-align: center;
}

.btn-download-client {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-download-client:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-download-client:active:not(:disabled) {
    transform: translateY(0);
}

.btn-download-client:disabled {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
}

.download-icon {
    font-size: 20px;
}

.download-status {
    margin-top: 12px;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
}

.download-status.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.download-status.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.download-status.loading {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* 步骤操作按钮 */
.step-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    gap: 12px;
}

.step-actions > .form-actions {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.btn-next,
.btn-prev {
    background: #667eea;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-next:hover:not(:disabled),
.btn-prev:hover:not(:disabled) {
    background: #5568d3;
    transform: translateX(2px);
}

.btn-prev:hover:not(:disabled) {
    transform: translateX(-2px);
}

.btn-next:disabled,
.btn-prev:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.btn-next .arrow,
.btn-prev .arrow {
    font-size: 16px;
    font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .inspection-progress-bar {
        max-width: 100%;
        padding: 0 20px;
    }

    .progress-step-label {
        font-size: 12px;
    }

    .step-content {
        padding: 16px;
    }

    .step-actions {
        flex-direction: column;
        gap: 12px;
    }

    .step-actions > .form-actions {
        width: 100%;
    }

    .step-actions > .form-actions button {
        flex: 1;
    }

    .btn-next,
    .btn-prev {
        width: 100%;
        justify-content: center;
    }
}

/* 刷新脚本包按钮样式 */
.btn-refresh-package {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.2);
    white-space: nowrap;
}

.btn-refresh-package:hover:not(:disabled) {
    background: linear-gradient(135deg, #138496 0%, #117a8b 100%);
    box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3);
    transform: translateY(-1px);
}

.btn-refresh-package:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.2);
}

.btn-refresh-package:disabled {
    background: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

.btn-refresh-package .refresh-icon {
    font-size: 16px;
    display: inline-block;
    animation: none;
}

.btn-refresh-package:disabled .refresh-icon {
    animation: spin 1s linear infinite;
}

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

/* 刷新状态显示 */
.refresh-status {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
}

.refresh-status.loading {
    background: #e7f3ff;
    color: #0066cc;
    border: 1px solid #b3d9ff;
}

.refresh-status.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.refresh-status.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.refresh-status.info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* 脚本采集器状态和版本显示 */
.script-collector-status {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
}

.script-collector-status.loading {
    background: #e7f3ff;
    color: #0066cc;
    border: 1px solid #b3d9ff;
}

.script-collector-status.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.script-collector-status.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.script-collector-status.info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.script-collector-current-version {
    margin-top: 4px;
    margin-bottom: 8px;
    padding: 4px 12px;
    font-size: 12px;
    color: #6c757d;
}

/* 脚本采集器容器布局 */
.script-collector-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 8px;
}

.script-collector-left {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* 下载/更新按钮 */
.btn-download-update {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(23, 162, 184, 0.25);
    white-space: nowrap;
    min-width: 140px;
    height: 44px;
}

.btn-download-update:hover:not(:disabled) {
    background: linear-gradient(135deg, #138496 0%, #117a8b 100%);
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.35);
    transform: translateY(-2px);
}

.btn-download-update:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(23, 162, 184, 0.25);
}

.btn-download-update:disabled {
    background: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

/* 插件下载选项区域 */
.plugin-download-options {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: stretch;
    flex-wrap: nowrap;
    margin-top: 12px;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.plugin-download-options.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.plugin-download-item {
    flex: 1;
    display: flex;
    min-width: 0;
    max-width: 50%;
    opacity: 0;
    transform: translateY(40px) scale(0.9) rotateY(-5deg);
    animation: cardSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    filter: blur(4px);
}

.plugin-download-item:nth-child(1) {
    animation-delay: 0.15s;
}

.plugin-download-item:nth-child(2) {
    animation-delay: 0.3s;
}

@keyframes cardSlideIn {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9) rotateY(-5deg);
        filter: blur(4px);
    }
    40% {
        opacity: 0.8;
        transform: translateY(-8px) scale(1.03) rotateY(2deg);
        filter: blur(1px);
    }
    70% {
        transform: translateY(2px) scale(0.98) rotateY(-1deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateY(0deg);
        filter: blur(0);
    }
}

.plugin-download-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid #e9ecef;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    min-height: 280px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.plugin-download-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.plugin-download-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    border-color: #dee2e6;
}

.plugin-download-card:hover::before {
    opacity: 1;
}

/* Linux主题色 */
.plugin-download-item:first-child .plugin-download-card::before {
    background: linear-gradient(90deg, #20c997 0%, #17a2b8 100%);
}

.plugin-download-item:first-child .plugin-download-card:hover {
    border-color: #20c997;
    box-shadow: 0 8px 24px rgba(32, 201, 151, 0.15), 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Windows主题色 */
.plugin-download-item:last-child .plugin-download-card::before {
    background: linear-gradient(90deg, #0078d4 0%, #005a9e 100%);
}

.plugin-download-item:last-child .plugin-download-card:hover {
    border-color: #0078d4;
    box-shadow: 0 8px 24px rgba(0, 120, 212, 0.15), 0 4px 8px rgba(0, 0, 0, 0.08);
}

.plugin-download-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 18px;
    color: #212529;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 8px;
    position: relative;
    animation: headerFadeIn 0.8s ease forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes headerFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.plugin-os-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.plugin-download-card:hover .plugin-os-icon {
    transform: scale(1.15) rotate(8deg);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.plugin-os-name {
    flex: 1;
    font-size: 18px;
    letter-spacing: 0.3px;
}

.plugin-version {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.3);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Linux版本标签 */
.plugin-download-item:first-child .plugin-version {
    background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
    box-shadow: 0 3px 8px rgba(32, 201, 151, 0.3);
}

/* Windows版本标签 */
.plugin-download-item:last-child .plugin-version {
    background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%);
    box-shadow: 0 3px 8px rgba(0, 120, 212, 0.3);
}

.plugin-download-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    padding: 8px 0;
    animation: infoFadeIn 0.8s ease forwards;
    animation-delay: 0.4s;
    opacity: 0;
}

@keyframes infoFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.plugin-info-item {
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    color: #495057;
    line-height: 1.7;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 3px solid #dee2e6;
    transition: all 0.2s ease;
}

.plugin-info-item:hover {
    background: #e9ecef;
    border-left-color: #667eea;
    transform: translateX(2px);
}

.plugin-info-label {
    font-weight: 600;
    min-width: 100px;
    color: #495057;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.plugin-info-label::before {
    content: '•';
    color: #667eea;
    font-size: 16px;
    font-weight: bold;
}

.plugin-info-value {
    color: #212529;
    word-break: break-all;
    flex: 1;
    font-weight: 500;
}

.plugin-path-value {
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Courier New', monospace;
    font-size: 11px;
    background: #ffffff;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    color: #495057;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 版本显示样式优化 */
.version-current {
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}

.version-current.version-latest {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border: 1px solid #c3e6cb;
}

.version-current.version-outdated {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
    border: 1px solid #ffeaa7;
    animation: pulse-warning 2s ease-in-out infinite;
}

.version-current.version-not-installed {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.version-latest {
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
}

.version-latest.version-new {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    color: #0c5460;
    border: 2px solid #17a2b8;
    box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
    animation: pulse-new 2s ease-in-out infinite;
    position: relative;
}

.version-latest.version-new::after {
    content: '🆕';
    margin-left: 4px;
    font-size: 12px;
}

@keyframes pulse-warning {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(255, 193, 7, 0);
    }
}

@keyframes pulse-new {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3), 0 0 0 0 rgba(23, 162, 184, 0.4);
    }
    50% {
        box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3), 0 0 0 4px rgba(23, 162, 184, 0);
    }
}

.btn-download-plugin {
    align-self: stretch;
    padding: 14px 24px;
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3), 0 2px 4px rgba(40, 167, 69, 0.2);
    margin-top: auto;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    animation: buttonSlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.5s;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes buttonSlideUp {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    60% {
        transform: translateY(-3px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.btn-download-plugin::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-download-plugin:hover:not(:disabled)::before {
    width: 300px;
    height: 300px;
}

.btn-download-plugin:hover:not(:disabled) {
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4), 0 4px 8px rgba(40, 167, 69, 0.3);
    transform: translateY(-3px);
}

.btn-download-plugin:active:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
}

.btn-download-plugin:disabled {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

/* Linux下载按钮 */
.plugin-download-item:first-child .btn-download-plugin {
    background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
    box-shadow: 0 4px 12px rgba(32, 201, 151, 0.3), 0 2px 4px rgba(32, 201, 151, 0.2);
}

.plugin-download-item:first-child .btn-download-plugin:hover:not(:disabled) {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    box-shadow: 0 6px 20px rgba(32, 201, 151, 0.4), 0 4px 8px rgba(32, 201, 151, 0.3);
}

/* Windows下载按钮 */
.plugin-download-item:last-child .btn-download-plugin {
    background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3), 0 2px 4px rgba(0, 120, 212, 0.2);
}

.plugin-download-item:last-child .btn-download-plugin:hover:not(:disabled) {
    background: linear-gradient(135deg, #005a9e 0%, #004578 100%);
    box-shadow: 0 6px 20px rgba(0, 120, 212, 0.4), 0 4px 8px rgba(0, 120, 212, 0.3);
}

/* 响应式布局 */
@media (max-width: 900px) {
    .script-collector-container {
        flex-direction: column;
        gap: 16px;
    }
    
    .script-collector-left {
        width: 100%;
    }
    
    .btn-download-update {
        width: 100%;
    }
    
    .plugin-download-options {
        flex-direction: column;
    }

    .toolset-fields-grid {
        grid-template-columns: 1fr;
    }

    .toolset-fields-grid--compact {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   BIC-QA Workbench v2
   Refined light-blue business workspace. This section intentionally overrides
   legacy declarations without changing existing business markup or behavior.
   ========================================================================== */

:root {
    --qa-brand-50: #f3f6fc;
    --qa-brand-100: #eaf0ff;
    --qa-brand-200: #dbe4ff;
    --qa-brand-400: #6f8ae0;
    --qa-brand-500: #4f6fd4;
    --qa-brand-600: #405fbe;
    --qa-bg-canvas: #fafbfe;
    --qa-bg-surface: #ffffff;
    --qa-bg-muted: #f6f8fc;
    --qa-text-primary: #2a3340;
    --qa-text-secondary: #5c6678;
    --qa-text-tertiary: #667085;
    --qa-border: #eff2f7;
    --qa-border-strong: #e0e5ee;
    --qa-danger: #b83f4c;
    --qa-success: #18795b;
    --qa-radius-sm: 8px;
    --qa-radius-md: 10px;
    --qa-radius-lg: 14px;
    --qa-radius-xl: 18px;
    --qa-shadow-card: 0 8px 24px rgba(42, 51, 64, 0.06);
    --qa-shadow-pop: 0 20px 54px rgba(42, 51, 64, 0.16);
    --qa-shadow-brand: 0 6px 14px rgba(79, 111, 212, 0.22);
    --qa-focus-ring: 0 0 0 3px rgba(79, 111, 212, 0.2);
    --qa-motion-fast: 160ms ease;
    --qa-motion-base: 220ms ease;
    --qa-sidebar-width: 276px;
    --qa-sidebar-collapsed: 66px;
}

html,
body {
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

body {
    background: var(--qa-bg-canvas);
    color: var(--qa-text-primary);
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans SC",
        system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
select,
a {
    touch-action: manipulation;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--qa-brand-500);
    outline-offset: 2px;
    box-shadow: var(--qa-focus-ring);
}

.container {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-width: 0;
    display: flex;
    overflow: hidden;
    background: var(--qa-bg-canvas);
}

.sidebar {
    position: relative;
    z-index: 20;
    width: var(--qa-sidebar-width);
    max-width: var(--qa-sidebar-width);
    min-width: var(--qa-sidebar-width);
    flex: 0 0 var(--qa-sidebar-width);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: var(--qa-bg-surface);
    color: var(--qa-text-primary);
    border-right: 1px solid var(--qa-border);
    box-shadow: 4px 0 20px rgba(42, 51, 64, 0.025);
    transition:
        transform var(--qa-motion-base),
        opacity var(--qa-motion-fast),
        background-color var(--qa-motion-fast),
        border-color var(--qa-motion-fast),
        box-shadow var(--qa-motion-fast);
}

.sidebar-backdrop {
    display: none;
}

.logo-section {
    flex: 0 0 auto;
    padding: 22px 24px 17px;
    border-bottom: 1px solid var(--qa-border);
}

.logo-content {
    min-height: 42px;
    padding: 0;
    align-items: flex-start;
    justify-content: center;
}

.logo-icon {
    width: auto;
    max-width: 174px;
    height: 36px;
    max-height: 36px;
    margin: 0;
    object-fit: contain;
    box-shadow: none;
}

.quick-actions-sidebar {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 12px 10px;
    overflow: hidden;
}

.action-buttons-vertical {
    height: 100%;
    min-height: 0;
    padding: 0;
    gap: 12px;
    overflow: hidden;
}

.sidebar-history-panel {
    flex: 1 1 auto;
    min-height: 120px;
    margin: 0;
    padding: 0;
    gap: 8px;
    overflow: hidden;
    border: 0;
}

.sidebar-history-panel > .sidebar-action-btn {
    flex: 0 0 auto;
    min-height: 42px;
    margin-bottom: 4px;
    color: #ffffff;
    background: var(--qa-brand-500);
    border-color: var(--qa-brand-500);
    box-shadow: var(--qa-shadow-brand);
}

.sidebar-history-panel > .sidebar-action-btn:hover {
    color: #ffffff;
    background: var(--qa-brand-600);
    border-color: var(--qa-brand-600);
    transform: translateY(-1px);
}

.sidebar-history-header {
    flex: 0 0 auto;
    padding: 6px 8px 2px;
}

.sidebar-history-header h2 {
    color: var(--qa-text-secondary);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.04em;
}

.sidebar-history-search-wrap {
    flex: 0 0 auto;
}

.sidebar-history-search {
    width: 100%;
    height: 36px;
    padding: 0 11px;
    color: var(--qa-text-primary);
    background: var(--qa-bg-muted);
    border: 1px solid transparent;
    border-radius: var(--qa-radius-sm);
    font-size: 13px;
    transition:
        background var(--qa-motion-fast),
        border-color var(--qa-motion-fast),
        box-shadow var(--qa-motion-fast);
}

.sidebar-history-search::placeholder {
    color: var(--qa-text-tertiary);
}

.sidebar-history-search:hover {
    background: var(--qa-bg-surface);
    border-color: var(--qa-border-strong);
}

.sidebar-history-search:focus {
    background: var(--qa-bg-surface);
    border-color: var(--qa-brand-500);
    box-shadow: var(--qa-focus-ring);
}

.sidebar-history-list {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1px 2px 4px 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #d5dbea transparent;
}

.sidebar-history-open {
    min-height: 40px;
    padding: 9px 30px 9px 10px;
    color: var(--qa-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--qa-radius-sm);
    box-shadow: none;
    transition:
        color var(--qa-motion-fast),
        background var(--qa-motion-fast),
        border-color var(--qa-motion-fast);
}

.sidebar-history-open:hover,
.sidebar-history-item.is-top .sidebar-history-open {
    color: var(--qa-text-primary);
    background: var(--qa-brand-50);
    border-color: var(--qa-border);
    box-shadow: none;
}

.sidebar-history-question {
    color: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
}

.sidebar-history-menu-toggle {
    top: 8px;
    right: 5px;
    color: var(--qa-text-tertiary);
}

.sidebar-history-menu-toggle:hover,
.sidebar-history-menu-toggle[aria-expanded="true"] {
    color: var(--qa-brand-600);
    background: var(--qa-brand-100);
}

.sidebar-function-center {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding-top: 12px;
    border-top: 1px solid var(--qa-border);
}

.sidebar-action-btn {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    gap: 9px;
    justify-content: flex-start;
    color: var(--qa-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--qa-radius-sm);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    box-shadow: none;
    transition:
        color var(--qa-motion-fast),
        background var(--qa-motion-fast),
        border-color var(--qa-motion-fast),
        transform var(--qa-motion-fast);
}

.sidebar-function-center .sidebar-action-btn {
    min-height: 44px;
    padding: 9px 11px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 9px;
    background: var(--qa-bg-muted);
    border-color: var(--qa-border);
    font-size: 13px;
    line-height: 20px;
}

.sidebar-action-btn:hover,
.sidebar-function-center .sidebar-action-btn:hover {
    color: var(--qa-brand-600);
    background: var(--qa-brand-50);
    border-color: var(--qa-brand-200);
    box-shadow: none;
    transform: translateY(-1px);
}

.sidebar-action-btn:active {
    transform: translateY(0);
}

.sidebar-action-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
}

.sidebar-action-btn .action-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    color: currentColor;
}

.sidebar-action-btn .action-icon svg {
    width: 100%;
    height: 100%;
}

.sidebar-function-center .help-action-btn,
.sidebar-function-center .announcement-btn {
    display: flex !important;
    color: var(--qa-text-tertiary);
    background: var(--qa-bg-surface);
    border-style: dashed;
}

.help-section {
    flex: 0 0 auto;
    background: var(--qa-bg-surface);
    border-top: 1px solid var(--qa-border);
}

.version-info {
    margin: 0;
    padding: 11px 16px 14px;
    border: 0;
    color: var(--qa-text-tertiary);
}

.version-text {
    margin: 0 0 7px;
    color: var(--qa-text-tertiary);
    font-size: 11px;
    font-weight: 500;
}

.repo-links {
    gap: 12px;
    margin: 0;
}

.repo-link {
    width: 30px;
    height: 30px;
    border-radius: var(--qa-radius-sm);
    opacity: 0.58;
}

.repo-link:hover {
    background: var(--qa-brand-50);
    opacity: 0.9;
    transform: none;
}

.repo-icon {
    width: 19px;
    height: 19px;
}

.main-content {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--qa-bg-canvas);
}

.sidebar-toggle-btn {
    top: 130px;
    left: 20px;
    width: 38px;
    height: 38px;
    color: var(--qa-text-secondary);
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border-strong);
    border-radius: var(--qa-radius-md);
    box-shadow: 0 4px 14px rgba(42, 51, 64, 0.06);
}

.sidebar-toggle-btn:hover {
    color: var(--qa-brand-600);
    background: var(--qa-brand-50);
    border-color: var(--qa-brand-200);
    transform: none;
}

.content-area {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.search-section {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 18px clamp(20px, 3vw, 48px) 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.selector-row {
    flex: 0 0 auto;
    min-height: 42px;
    margin: 0 0 16px;
    padding-left: 48px;
}

.selector-right {
    gap: 8px;
}

.language-select,
.settings-button {
    min-height: 38px;
    color: var(--qa-text-secondary);
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border-strong);
    border-radius: var(--qa-radius-md);
    box-shadow: none;
}

.language-select:hover,
.settings-button:hover {
    color: var(--qa-text-primary);
    background: var(--qa-bg-surface);
    border-color: var(--qa-brand-200);
    transform: none;
}

.settings-icon {
    color: var(--qa-brand-500);
}

.result-section {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.result-container,
.question-display,
.ai-display,
.result-actions {
    width: 100%;
    max-width: 1000px;
}

.container:not(.sidebar-collapsed) .input-center-wrapper {
    width: 100%;
    max-width: 920px;
}

.container:not(.sidebar-collapsed) .input-container {
    width: 100%;
    max-width: 920px;
}

.container:not(.sidebar-collapsed) .result-container {
    width: 100%;
    max-width: 1000px;
}

.container:not(.sidebar-collapsed) .result-actions {
    width: 100%;
    max-width: 1000px;
}

.container:not(.sidebar-collapsed) .question-display {
    width: 100%;
    max-width: 1000px;
}

.container:not(.sidebar-collapsed) .ai-display {
    width: 100%;
    max-width: 1000px;
}

.result-container {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.resultListShow {
    padding: 18px 0 36px;
}

.question-display {
    margin-left: auto;
    padding: 12px 14px;
    border-radius: var(--qa-radius-lg) var(--qa-radius-lg) 4px var(--qa-radius-lg);
}

.ai-display {
    margin-top: 22px;
}

.result-text {
    color: var(--qa-text-primary);
    font-size: 14px;
    line-height: 1.75;
}

.input-center-wrapper {
    flex: 0 0 auto;
    width: min(100%, 920px);
    max-width: 920px;
    margin: auto auto 0;
    padding-top: clamp(24px, 8vh, 92px);
}

.result-section:has(.result-container[style*="display: block"]) + .input-center-wrapper,
.result-section:has(.result-container:not([style*="display: none"])) + .input-center-wrapper {
    padding-top: 12px;
}

.input-header {
    margin-bottom: 22px;
    text-align: center;
}

.input-title {
    margin: 0 0 7px;
    color: var(--qa-text-primary);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.input-subtitle {
    color: var(--qa-text-tertiary);
    font-size: 14px;
}

.input-container {
    width: 100%;
    max-width: 920px;
    min-width: 0;
    padding: 12px;
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border-strong);
    border-radius: var(--qa-radius-xl);
    box-shadow: var(--qa-shadow-card);
    transition:
        border-color var(--qa-motion-fast),
        box-shadow var(--qa-motion-fast);
}

.input-container:focus-within {
    border-color: var(--qa-brand-200);
    box-shadow: var(--qa-shadow-card), var(--qa-focus-ring);
}

.agent-mode-list {
    display: flex;
    gap: 6px;
    padding: 0 0 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.agent-mode-list::-webkit-scrollbar {
    display: none;
}

.agent-mode-option {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 6px 11px;
    color: var(--qa-text-secondary);
    background: var(--qa-bg-muted);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    cursor: pointer;
    transition:
        color var(--qa-motion-fast),
        background var(--qa-motion-fast),
        border-color var(--qa-motion-fast);
}

.agent-mode-option:hover {
    color: var(--qa-brand-600);
    background: var(--qa-brand-50);
    border-color: var(--qa-brand-200);
}

.agent-mode-option.active,
.agent-mode-option[aria-checked="true"] {
    color: var(--qa-brand-600);
    background: var(--qa-brand-100);
    border-color: var(--qa-brand-200);
}

.agent-mode-option:active {
    color: var(--qa-brand-600);
    background: var(--qa-brand-200);
}

.agent-mode-option:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.composer-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 128px;
    overflow-y: auto;
}

.composer-attachment-list:empty {
    display: none;
}

.composer-attachment-item,
.attachment-preview-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 260px;
    padding: 7px 9px;
    color: var(--qa-text-secondary);
    background: var(--qa-bg-muted);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-md);
    font-size: 12px;
}

.composer-attachment-item img,
.attachment-preview-item img {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    object-fit: cover;
    border-radius: 6px;
}

.composer-attachment-remove,
.attachment-remove-btn {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    color: var(--qa-text-tertiary);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.composer-attachment-remove:hover,
.attachment-remove-btn:hover {
    color: var(--qa-danger);
    background: #fff1f2;
}

.composer-attachment-remove:active,
.attachment-remove-btn:active {
    color: #ffffff;
    background: var(--qa-danger);
}

.composer-attachment-remove:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.attachment-remove-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.question-input {
    width: 100%;
    min-height: 92px;
    max-height: 220px;
    padding: 12px 8px 8px;
    resize: vertical;
    color: var(--qa-text-primary);
    caret-color: var(--qa-brand-500);
    background: transparent;
    border: 0;
    border-radius: var(--qa-radius-md);
    font-size: 15px;
    line-height: 1.65;
    box-shadow: none;
}

.question-input::placeholder {
    color: var(--qa-text-tertiary);
}

.question-input:focus,
.question-input:focus-visible {
    outline: 0;
    box-shadow: none;
}

.composer-advanced {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 8px 6px 10px;
    border-top: 1px solid var(--qa-border);
}

.knowledge-base-selector,
.parameter-rule-selector,
.model-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.composer-advanced label,
.model-selector label {
    flex: 0 0 auto;
    color: var(--qa-text-tertiary);
    font-size: 12px;
    font-weight: 500;
}

.knowledge-base-select,
.parameter-rule-select,
.model-select {
    min-width: 0;
    height: 32px;
    padding: 0 26px 0 8px;
    color: var(--qa-text-secondary);
    background-color: var(--qa-bg-muted);
    border: 1px solid transparent;
    border-radius: var(--qa-radius-sm);
    font-size: 12px;
    box-shadow: none;
}

.knowledge-base-select:hover,
.parameter-rule-select:hover,
.model-select:hover {
    color: var(--qa-text-primary);
    background-color: var(--qa-bg-surface);
    border-color: var(--qa-border-strong);
}

.knowledge-base-select:active,
.parameter-rule-select:active,
.model-select:active {
    border-color: var(--qa-brand-500);
}

.knowledge-base-select:focus-visible,
.parameter-rule-select:focus-visible,
.model-select:focus-visible {
    border-color: var(--qa-brand-500);
    outline: 2px solid var(--qa-brand-500);
    outline-offset: 1px;
    box-shadow: var(--qa-focus-ring);
}

.knowledge-base-select:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.parameter-rule-select:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.model-select:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.composer-toolbar {
    min-width: 0;
    min-height: 42px;
    padding: 8px 4px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--qa-border);
}

.composer-toolbar-primary,
.composer-toolbar-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.composer-tool-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--qa-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--qa-radius-sm);
    cursor: pointer;
    transition:
        color var(--qa-motion-fast),
        background var(--qa-motion-fast),
        border-color var(--qa-motion-fast);
}

.composer-tool-btn svg {
    width: 19px;
    height: 19px;
}

.composer-tool-btn:hover {
    color: var(--qa-brand-600);
    background: var(--qa-brand-50);
    border-color: var(--qa-brand-100);
}

.composer-tool-btn:active,
.composer-tool-btn.active {
    color: var(--qa-brand-600);
    background: var(--qa-brand-100);
}

.composer-tool-btn:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.character-count {
    position: static;
    inset: auto;
    z-index: auto;
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    min-width: 54px;
    margin: 0;
    padding: 5px 7px;
    color: var(--qa-text-tertiary);
    background: var(--qa-bg-muted);
    border: 1px solid var(--qa-border);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition:
        color var(--qa-motion-fast),
        background var(--qa-motion-fast),
        border-color var(--qa-motion-fast);
}

.character-count.warning {
    color: #a55d00;
    background: #fff8e8;
    border-color: #f3c56b;
}

.character-count.danger {
    color: #c43333;
    background: #fff1f1;
    border-color: #f1aaaa;
}

.ask-button {
    position: static;
    width: 38px;
    height: 38px;
    min-width: 38px;
    flex: 0 0 38px;
    padding: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--qa-brand-500);
    border: 1px solid var(--qa-brand-500);
    border-radius: 11px;
    box-shadow: var(--qa-shadow-brand);
    transition:
        background var(--qa-motion-fast),
        border-color var(--qa-motion-fast),
        transform var(--qa-motion-fast);
}

.ask-button:hover {
    background: var(--qa-brand-600);
    border-color: var(--qa-brand-600);
    transform: translateY(-1px);
}

.ask-button:active {
    transform: translateY(0);
}

.ask-button.is-stop {
    color: #ffffff;
    background: #d94c4c;
    border-color: #d94c4c;
    box-shadow: 0 8px 18px rgba(217, 76, 76, 0.22);
}

.ask-button.is-stop:hover {
    background: #c83f3f;
    border-color: #c83f3f;
}

.ask-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
}

.ask-button svg {
    width: 20px;
    height: 20px;
}

.footer {
    flex: 0 0 auto;
    min-height: 26px;
    padding: 0 24px 9px;
    color: var(--qa-text-tertiary);
    background: transparent;
}

.dialog-overlay.profile-center-dialog {
    z-index: 14000;
    padding: 24px;
    align-items: center;
    justify-content: center;
    background: rgba(32, 40, 54, 0.42);
    backdrop-filter: blur(4px);
}

.profile-center-container {
    width: min(960px, 92vw);
    max-width: 960px;
    height: auto;
    max-height: 90vh;
    max-height: 90dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--qa-text-primary);
    background: var(--qa-bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: var(--qa-radius-xl);
    box-shadow: var(--qa-shadow-pop);
}

.profile-center-header {
    flex: 0 0 auto;
    min-height: 82px;
    padding: 20px 24px;
    background: var(--qa-bg-surface);
    border-bottom: 1px solid var(--qa-border);
}

.profile-center-header h3 {
    margin: 3px 0 0;
    color: var(--qa-text-primary);
    font-size: 22px;
    font-weight: 650;
}

.profile-center-eyebrow,
.profile-panel-kicker {
    margin: 0;
    color: var(--qa-brand-500);
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0.14em;
}

.profile-center-header .close-btn {
    width: 38px;
    height: 38px;
    color: var(--qa-text-secondary);
    background: var(--qa-bg-muted);
    border: 1px solid transparent;
    border-radius: var(--qa-radius-md);
    font-size: 24px;
    line-height: 1;
}

.profile-center-header .close-btn:hover {
    color: var(--qa-text-primary);
    background: var(--qa-brand-50);
    border-color: var(--qa-brand-100);
    transform: none;
}

.profile-center-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    overflow: hidden;
}

.profile-center-tabs {
    min-width: 0;
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: var(--qa-bg-canvas);
    border-right: 1px solid var(--qa-border);
}

.profile-tab-btn {
    min-height: 42px;
    padding: 9px 12px;
    color: var(--qa-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--qa-radius-sm);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.profile-tab-btn:hover {
    color: var(--qa-text-primary);
    background: var(--qa-bg-surface);
    border-color: var(--qa-border);
}

.profile-tab-btn.active,
.profile-tab-btn[aria-selected="true"] {
    color: var(--qa-brand-600);
    background: var(--qa-brand-100);
    border-color: var(--qa-brand-200);
    font-weight: 600;
}

.profile-center-content {
    min-width: 0;
    min-height: 310px;
    padding: 28px;
    overflow-y: auto;
}

.profile-panel {
    color: var(--qa-text-primary);
}

.profile-panel[hidden] {
    display: none !important;
}

.profile-panel-heading {
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.profile-panel-heading h4 {
    margin: 4px 0 0;
    color: var(--qa-text-primary);
    font-size: 20px;
    font-weight: 650;
}

.sample-data-badge,
.profile-unavailable-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    color: #6a5b1c;
    background: #fff8d9;
    border: 1px solid #f2e7a8;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.profile-unavailable-badge {
    color: var(--qa-text-secondary);
    background: var(--qa-bg-muted);
    border-color: var(--qa-border-strong);
}

.token-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.token-summary-card {
    min-width: 0;
    padding: 18px;
    background: var(--qa-bg-canvas);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
}

.token-summary-card span,
.token-summary-card small {
    display: block;
    color: var(--qa-text-tertiary);
    font-size: 12px;
}

.token-summary-card strong {
    display: block;
    margin: 9px 0 5px;
    color: var(--qa-text-primary);
    font-size: 24px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.profile-detail-list,
.profile-setting-card {
    overflow: hidden;
    background: var(--qa-bg-canvas);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
}

.profile-detail-row {
    min-height: 58px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--qa-border);
}

.profile-detail-row:last-child {
    border-bottom: 0;
}

.profile-detail-row span,
.profile-setting-card p {
    color: var(--qa-text-tertiary);
    font-size: 13px;
}

.profile-detail-row strong,
.profile-setting-card strong {
    color: var(--qa-text-primary);
    font-size: 14px;
    font-weight: 600;
}

.profile-setting-card {
    min-height: 76px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.profile-setting-card p {
    margin: 5px 0 0;
    line-height: 1.55;
}

.profile-primary-btn,
.profile-secondary-btn,
.profile-danger-btn {
    min-height: 38px;
    padding: 8px 15px;
    border-radius: var(--qa-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.profile-primary-btn {
    color: #ffffff;
    background: var(--qa-brand-500);
    border: 1px solid var(--qa-brand-500);
}

.profile-primary-btn:hover {
    background: var(--qa-brand-600);
    border-color: var(--qa-brand-600);
}

.profile-secondary-btn {
    color: var(--qa-brand-600);
    background: var(--qa-brand-50);
    border: 1px solid var(--qa-brand-200);
}

.profile-danger-btn {
    color: var(--qa-danger);
    background: #fff7f7;
    border: 1px solid #f2d6da;
}

.profile-center-footer {
    flex: 0 0 auto;
    min-height: 68px;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    background: var(--qa-bg-surface);
    border-top: 1px solid var(--qa-border);
}

@media (max-width: 1024px) {
    .sidebar {
        width: 246px;
        max-width: 246px;
        min-width: 246px;
        flex-basis: 246px;
    }

    .container.sidebar-collapsed .sidebar,
    .container .sidebar.is-collapsed {
        width: var(--qa-sidebar-collapsed);
        max-width: var(--qa-sidebar-collapsed);
        min-width: var(--qa-sidebar-collapsed);
        flex-basis: var(--qa-sidebar-collapsed);
        padding: 0;
        overflow: hidden;
        opacity: 1;
        pointer-events: auto;
        border-right: 1px solid var(--qa-border);
    }

    .container.sidebar-collapsed .logo-section,
    .container .sidebar.is-collapsed .logo-section {
        padding: 18px 12px;
    }

    .container.sidebar-collapsed .logo-icon,
    .container .sidebar.is-collapsed .logo-icon {
        width: 40px;
        max-width: 40px;
        object-fit: cover;
        object-position: left;
    }

    .container.sidebar-collapsed .quick-actions-sidebar,
    .container .sidebar.is-collapsed .quick-actions-sidebar {
        padding: 12px 8px;
    }

    .container.sidebar-collapsed .sidebar-history-header,
    .container.sidebar-collapsed .sidebar-history-search-wrap,
    .container.sidebar-collapsed .sidebar-history-list,
    .container.sidebar-collapsed .action-text,
    .container.sidebar-collapsed .help-section,
    .container .sidebar.is-collapsed .sidebar-history-header,
    .container .sidebar.is-collapsed .sidebar-history-search-wrap,
    .container .sidebar.is-collapsed .sidebar-history-list,
    .container .sidebar.is-collapsed .action-text,
    .container .sidebar.is-collapsed .help-section {
        display: none;
    }

    .container.sidebar-collapsed .sidebar-history-panel,
    .container .sidebar.is-collapsed .sidebar-history-panel {
        min-height: 48px;
        flex: 0 0 auto;
    }

    .container.sidebar-collapsed .sidebar-function-center,
    .container .sidebar.is-collapsed .sidebar-function-center {
        grid-template-columns: 1fr;
    }

    .container.sidebar-collapsed .sidebar-action-btn,
    .container .sidebar.is-collapsed .sidebar-action-btn {
        width: 48px;
        min-height: 44px;
        padding: 8px;
        justify-content: center;
    }

    .container.sidebar-collapsed .main-content {
        margin: 0;
    }

    .container.sidebar-collapsed .input-center-wrapper,
    .container.sidebar-collapsed .input-container,
    .container.sidebar-collapsed .result-container,
    .container.sidebar-collapsed .result-actions,
    .container.sidebar-collapsed .question-display,
    .container.sidebar-collapsed .ai-display {
        width: 100%;
        max-width: 920px;
    }

    .search-section {
        padding-right: 24px;
        padding-left: 24px;
    }
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        max-width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        min-width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        height: 100dvh;
        flex-basis: auto;
        transform: translateX(-100%);
        box-shadow: var(--qa-shadow-pop);
    }

    .sidebar-backdrop:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 19;
        display: block;
        background: rgba(42, 51, 64, 0.32);
    }

    .container.sidebar-collapsed .sidebar,
    .container .sidebar.is-collapsed {
        width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        max-width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        min-width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        transform: translateX(-100%);
        opacity: 1;
        pointer-events: none;
    }

    .container.sidebar-open .sidebar {
        width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        max-width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        min-width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar.is-open {
        width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        max-width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        min-width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar.is-collapsed.is-open {
        width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        max-width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        min-width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    .container.sidebar-collapsed .sidebar.is-open {
        width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        max-width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        min-width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    .container.sidebar-collapsed .sidebar-history-header,
    .container.sidebar-collapsed .sidebar-history-search-wrap,
    .container.sidebar-collapsed .sidebar-history-list,
    .container.sidebar-collapsed .action-text,
    .container.sidebar-collapsed .help-section,
    .container .sidebar.is-collapsed .sidebar-history-header,
    .container .sidebar.is-collapsed .sidebar-history-search-wrap,
    .container .sidebar.is-collapsed .sidebar-history-list,
    .container .sidebar.is-collapsed .action-text,
    .container .sidebar.is-collapsed .help-section {
        display: revert;
    }

    .sidebar-toggle-btn {
        display: flex;
        top: 14px;
        left: 14px;
        width: 44px;
        height: 44px;
        z-index: 30;
    }

    .container.sidebar-open .sidebar-toggle-btn {
        left: min(
            calc(min(var(--qa-sidebar-width), calc(100vw - 60px)) + 8px),
            calc(100vw - 52px)
        );
    }

    .container.sidebar-collapsed .sidebar-toggle-btn {
        left: 14px;
    }

    .container.sidebar-open.sidebar-collapsed .sidebar-toggle-btn {
        left: min(
            calc(min(var(--qa-sidebar-width), calc(100vw - 60px)) + 8px),
            calc(100vw - 52px)
        );
    }

    .main-content {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
    }

    .search-section {
        padding: 12px 14px 16px;
    }

    .selector-row {
        min-height: 46px;
        padding-left: 52px;
    }

    .language-select,
    .settings-button {
        min-height: 44px;
    }

    .input-center-wrapper {
        width: 100%;
        padding-top: 36px;
    }

    .input-header {
        margin-bottom: 18px;
    }

    .profile-center-layout {
        grid-template-columns: 172px minmax(0, 1fr);
    }

    .profile-center-content {
        padding: 22px;
    }

    .token-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .selector-right {
        width: 100%;
        justify-content: flex-end;
    }

    .language-switcher {
        min-width: 0;
        flex: 1 1 auto;
    }

    .language-select {
        width: 100%;
        min-width: 0;
        font-size: 16px;
    }

    .settings-button {
        flex: 0 0 auto;
        padding: 8px 10px;
    }

    .input-title {
        font-size: 26px;
    }

    .input-container {
        padding: 10px;
        border-radius: var(--qa-radius-lg);
    }

    .question-input {
        min-height: 86px;
        font-size: 16px;
    }

    .sidebar-history-search {
        min-height: 44px;
        font-size: 16px;
    }

    .sidebar-history-open {
        min-height: 44px;
    }

    .sidebar-action-btn {
        min-height: 44px;
    }

    .composer-attachment-remove {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .agent-mode-option {
        min-height: 44px;
    }

    .agent-mode-option {
        padding: 9px 13px;
    }

    .composer-advanced {
        align-items: stretch;
        flex-direction: column;
    }

    .knowledge-base-selector,
    .parameter-rule-selector {
        width: 100%;
    }

    .knowledge-base-select {
        flex: 1 1 auto;
        height: 44px;
        font-size: 16px;
    }

    .parameter-rule-select {
        flex: 1 1 auto;
        height: 44px;
        font-size: 16px;
    }

    .composer-toolbar {
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .composer-toolbar-primary {
        width: 100%;
        flex-wrap: wrap;
    }

    .model-selector {
        flex: 1 1 calc(100% - 104px);
    }

    .model-select {
        flex: 1 1 auto;
        height: 44px;
        font-size: 16px;
    }

    .composer-tool-btn,
    .ask-button {
        width: 44px;
        height: 44px;
        min-height: 44px;
        flex-basis: 44px;
    }

    .composer-tool-btn {
        min-height: 44px;
    }

    .ask-button {
        min-height: 44px;
    }

    .composer-toolbar-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .dialog-overlay.profile-center-dialog {
        padding: 8px;
        align-items: flex-end;
    }

    .profile-center-container {
        width: 100%;
        max-height: 94dvh;
        border-radius: var(--qa-radius-xl) var(--qa-radius-xl) 0 0;
    }

    .profile-center-header {
        min-height: 72px;
        padding: 16px;
    }

    .profile-center-header .close-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .profile-center-layout {
        display: flex;
        flex-direction: column;
    }

    .profile-center-tabs {
        padding: 10px 12px;
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--qa-border);
        scrollbar-width: none;
    }

    .profile-center-tabs::-webkit-scrollbar {
        display: none;
    }

    .profile-tab-btn {
        min-width: max-content;
        min-height: 44px;
        text-align: center;
    }

    .profile-center-content {
        min-height: 0;
        padding: 18px 16px;
    }

    .profile-setting-card,
    .profile-detail-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-center-footer {
        min-height: 72px;
        padding: 12px 16px;
        flex-wrap: wrap;
    }

    .profile-primary-btn,
    .profile-secondary-btn,
    .profile-danger-btn {
        min-height: 44px;
    }

    .profile-primary-btn {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Task 10 acceptance refinements */
.quick-actions-sidebar,
.action-buttons-vertical {
    overflow: visible;
}

.quick-actions-sidebar {
    overflow: visible;
}

.action-buttons-vertical {
    overflow: visible;
}

.container.sidebar-collapsed .sidebar {
    overflow: visible;
}

.container .sidebar.is-collapsed {
    overflow: visible;
}

.model-selector[hidden] {
    display: none !important;
}

.parameter-rule-selector[hidden] {
    display: none !important;
}

.composer-advanced[hidden] {
    display: none !important;
}

.knowledge-base-selector[hidden] {
    display: none !important;
}

.response-quality-selector {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.response-quality-selector label {
    flex: 0 0 auto;
    color: var(--qa-text-tertiary);
    font-size: 12px;
    font-weight: 600;
}

.response-quality-select {
    min-width: 96px;
    height: 32px;
    padding: 0 28px 0 10px;
    color: var(--qa-text-secondary);
    background: var(--qa-bg-muted);
    border: 1px solid transparent;
    border-radius: var(--qa-radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.response-quality-select:hover {
    color: var(--qa-text-primary);
    background: var(--qa-bg-surface);
    border-color: var(--qa-border-strong);
}

.response-quality-select:focus-visible {
    border-color: var(--qa-brand-500);
    outline: 2px solid var(--qa-brand-500);
    outline-offset: 1px;
    box-shadow: var(--qa-focus-ring);
}

.composer-attachment-list {
    align-items: center;
    gap: 7px;
    max-height: 132px;
    padding: 1px;
}

.composer-attachment-card {
    min-width: 0;
    max-width: 260px;
    min-height: 44px;
    padding: 6px 6px 6px 8px;
    display: inline-grid;
    grid-template-columns: 32px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    color: var(--qa-text-primary);
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-sm);
    box-shadow: var(--qa-shadow-xs);
}

.composer-attachment-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    background: var(--qa-bg-muted);
    border-radius: 7px;
}

.composer-attachment-type {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #ffffff;
    background: var(--qa-brand-500);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 7px;
}

.composer-attachment-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.composer-attachment-copy strong {
    overflow: hidden;
    color: var(--qa-text-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-attachment-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
}

.composer-attachment-size,
.composer-attachment-status {
    color: var(--qa-text-tertiary);
    font-size: 10px;
    line-height: 13px;
    white-space: nowrap;
}

.composer-attachment-status {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.composer-attachment-status::before {
    content: "·";
    margin-right: 5px;
}

.composer-attachment-remove {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    color: var(--qa-text-tertiary);
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.composer-attachment-remove:hover {
    color: var(--qa-danger);
    background: #fff1f2;
}

.profile-center-container {
    width: min(960px, calc(100vw - 48px));
    max-width: 960px;
    height: min(720px, calc(100dvh - 48px));
    max-height: none;
}

.profile-center-content {
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.profile-panel-heading {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--qa-border);
}

.token-summary-grid {
    gap: 16px;
}

.token-summary-card,
.profile-detail-list,
.profile-setting-card {
    box-shadow: 0 1px 2px rgba(42, 51, 64, 0.04);
}

.profile-token-overview {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.profile-center-content [role="tabpanel"][hidden] {
    display: none !important;
}

.profile-sample-group {
    min-width: 0;
}

.profile-section-heading {
    min-height: 42px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-section-heading h3 {
    margin: 0;
    color: var(--qa-text-primary);
    font-size: 16px;
    font-weight: 650;
    line-height: 22px;
}

.profile-section-heading p {
    margin: 3px 0 0;
    color: var(--qa-text-tertiary);
    font-size: 12px;
    line-height: 18px;
}

.profile-token-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.profile-metric-card.is-actionable {
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.profile-metric-card.is-actionable:hover {
    filter: brightness(1.035);
    transform: translateY(-2px);
}

.profile-metric-card.is-actionable:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--qa-brand-500) 28%, transparent);
    outline-offset: 3px;
}

.profile-token-balance-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background:
        linear-gradient(125deg, color-mix(in srgb, var(--qa-brand-50) 88%, white), var(--qa-bg-surface));
    border: 1px solid color-mix(in srgb, var(--qa-brand-500) 22%, var(--qa-border));
    border-radius: 14px;
}

.profile-token-balance-detail h4,
.profile-token-balance-detail p {
    margin: 0;
}

.profile-token-balance-detail h4 {
    color: var(--qa-text-primary);
    font-size: 14px;
    line-height: 22px;
}

.profile-token-balance-detail p {
    margin-top: 4px;
    color: var(--qa-text-tertiary);
    font-size: 12px;
    line-height: 19px;
}

.profile-token-balance-detail strong {
    color: var(--qa-brand-600);
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1;
    letter-spacing: -0.03em;
}

.profile-ecode-hint {
    display: block;
    margin-top: 7px;
    color: var(--qa-text-tertiary);
    font-size: 12px;
    line-height: 18px;
}

.profile-metric-card {
    min-width: 0;
    padding: 16px;
    background: var(--qa-bg-canvas);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
}

.profile-metric-card span,
.profile-metric-card small {
    display: block;
    color: var(--qa-text-tertiary);
    font-size: 11px;
    line-height: 16px;
}

.profile-metric-card strong {
    display: block;
    margin: 8px 0 4px;
    color: var(--qa-text-primary);
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    font-variant-numeric: tabular-nums;
}

.profile-metric-card small {
    color: var(--qa-success);
    font-weight: 600;
}

.profile-token-distribution {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.profile-distribution-card {
    min-width: 0;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-md);
}

.profile-distribution-card span {
    grid-column: 1 / -1;
    color: var(--qa-text-tertiary);
    font-size: 11px;
}

.profile-distribution-card strong {
    overflow: hidden;
    color: var(--qa-text-primary);
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-distribution-card em {
    color: var(--qa-brand-600);
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
}

.profile-token-chart {
    height: 150px;
    padding: 16px 16px 10px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--qa-bg-canvas);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
}

.profile-chart-column {
    min-width: 0;
    height: 100%;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.profile-chart-column i {
    width: min(24px, 72%);
    height: var(--bar-height);
    min-height: 6px;
    display: block;
    background: linear-gradient(180deg, var(--qa-brand-400), var(--qa-brand-600));
    border-radius: 5px 5px 2px 2px;
}

.profile-chart-column small {
    color: var(--qa-text-tertiary);
    font-size: 9px;
    line-height: 12px;
    white-space: nowrap;
}

.profile-token-table-wrap {
    overflow-x: auto;
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
}

.profile-token-table {
    width: 100%;
    min-width: 580px;
    border-collapse: collapse;
}

.profile-token-table th,
.profile-token-table td {
    padding: 10px 12px;
    color: var(--qa-text-secondary);
    border-bottom: 1px solid var(--qa-border);
    font-size: 12px;
    line-height: 18px;
    text-align: left;
    white-space: nowrap;
}

.profile-token-table th {
    color: var(--qa-text-tertiary);
    background: var(--qa-bg-muted);
    font-size: 11px;
    font-weight: 650;
}

.profile-token-table tbody tr:last-child td {
    border-bottom: 0;
}

.profile-empty-state {
    max-width: 520px;
    margin: 54px auto;
    padding: 28px;
    text-align: center;
    background: var(--qa-bg-canvas);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-xl);
}

.profile-empty-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    color: var(--qa-brand-600);
    background: var(--qa-brand-100);
    border-radius: 16px;
    font-size: 18px;
    font-weight: 700;
}

.profile-empty-state h3,
.profile-account-hero h3,
.profile-setting-item h3,
.profile-binding-card h3 {
    margin: 0;
    color: var(--qa-text-primary);
    font-size: 16px;
    line-height: 22px;
}

.profile-empty-state p,
.profile-account-hero p,
.profile-setting-item p,
.profile-binding-card p {
    margin: 6px 0 0;
    color: var(--qa-text-tertiary);
    font-size: 12px;
    line-height: 18px;
}

.profile-action-row {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.profile-action-row-end {
    justify-content: flex-end;
}

.profile-account-hero {
    padding: 18px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    background: var(--qa-bg-canvas);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
}

.profile-account-avatar,
.profile-binding-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: var(--qa-brand-500);
    border-radius: 14px;
    font-weight: 700;
}

.profile-account-panel .profile-detail-list {
    margin: 16px 0 0;
}

.profile-account-panel .profile-detail-list > div {
    min-height: 54px;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--qa-border);
}

.profile-account-panel .profile-detail-list > div:last-child {
    border-bottom: 0;
}

.profile-account-info-card {
    margin-top: 16px;
    overflow: hidden;
    background: var(--qa-bg-canvas);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
    box-shadow: 0 1px 2px rgba(42, 51, 64, 0.04);
}

.profile-account-info-row {
    min-height: 72px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: minmax(140px, 0.7fr) minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--qa-border);
}

.profile-account-info-row:last-child {
    border-bottom: 0;
}

.profile-account-info-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--qa-text-tertiary);
    font-size: 13px;
    font-weight: 600;
}

.profile-account-info-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-grid;
    place-items: center;
    color: var(--qa-brand-600);
    background: color-mix(in srgb, var(--qa-brand-500) 9%, var(--qa-bg-canvas));
    border-radius: 6px;
}

.profile-account-info-icon svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.profile-account-info-value {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.profile-account-info-value strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--qa-text-primary);
    font-size: 14px;
    font-weight: 650;
    text-align: right;
}

.profile-account-info-value .profile-link-btn {
    flex: 0 0 auto;
}

.profile-username-change-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.profile-username-change-hint {
    color: var(--qa-text-tertiary);
    font-size: 12px;
    line-height: 1.45;
    white-space: nowrap;
}

.profile-credential-setup .profile-username-change-hint {
    display: block;
    margin-top: 6px;
}

@media (max-width: 600px) {
    .profile-account-info-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .profile-account-info-value {
        justify-content: flex-start;
    }

    .profile-account-info-value strong {
        text-align: left;
    }

    .profile-username-change-meta {
        justify-content: flex-start;
    }
}

.profile-detail-list dt {
    color: var(--qa-text-tertiary);
    font-size: 12px;
}

.profile-detail-list dd {
    margin: 0;
    color: var(--qa-text-primary);
    font-size: 13px;
    font-weight: 600;
}

.profile-settings-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-setting-item {
    min-height: 88px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: var(--qa-bg-canvas);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
}

.profile-credential-setup {
    position: relative;
    justify-content: flex-start;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--qa-brand-500) 30%, var(--qa-border));
    background:
        linear-gradient(110deg, color-mix(in srgb, var(--qa-brand-50) 84%, white), var(--qa-bg-surface) 72%);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--qa-brand-500) 9%, transparent);
}

.profile-credential-setup::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--qa-brand-400), var(--qa-brand-600));
    content: '';
}

.profile-credential-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    color: var(--qa-brand-600);
    background: color-mix(in srgb, var(--qa-brand-500) 11%, white);
    border: 1px solid color-mix(in srgb, var(--qa-brand-500) 22%, var(--qa-border));
    border-radius: 13px;
}

.profile-credential-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-credential-setup .profile-setting-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.profile-setting-title-row {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.profile-setting-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    color: var(--qa-brand-700);
    background: color-mix(in srgb, var(--qa-brand-500) 10%, white);
    border: 1px solid color-mix(in srgb, var(--qa-brand-500) 20%, var(--qa-border));
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
}

.profile-credential-setup > .profile-primary-btn {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}

.profile-bindings-grid {
    display: grid;
    gap: 12px;
}

.profile-binding-card {
    min-height: 84px;
    padding: 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    background: var(--qa-bg-canvas);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
}

.profile-binding-card.is-disabled {
    background: var(--qa-bg-muted);
}

.profile-binding-card.is-disabled .profile-binding-icon {
    color: var(--qa-text-tertiary);
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border);
}

.profile-status-badge {
    min-height: 26px;
    padding: 4px 9px;
    display: inline-flex;
    align-items: center;
    color: var(--qa-success);
    background: #eefaf5;
    border: 1px solid #cce9dc;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

.profile-recharge-panel {
    min-width: 0;
}

.profile-recharge-intro {
    margin-bottom: 20px;
    padding-bottom: 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--qa-border);
}

.profile-recharge-intro h3 {
    margin: 5px 0 0;
    color: var(--qa-text-primary);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.profile-recharge-intro p {
    margin: 7px 0 0;
    color: var(--qa-text-tertiary);
    font-size: 12px;
    line-height: 18px;
}

.profile-recharge-safe {
    min-height: 28px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #237658;
    background: #eefaf5;
    border: 1px solid #cce9dc;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.profile-recharge-safe i {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: var(--qa-success);
    border-radius: 50%;
    font-size: 10px;
    font-style: normal;
}

.profile-recharge-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.78fr) minmax(320px, 1.22fr);
    align-items: stretch;
    gap: 16px;
}

.profile-purchase-card,
.profile-redeem-card {
    min-width: 0;
    padding: 20px;
    background: var(--qa-bg-canvas);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-xl);
    box-shadow: 0 10px 26px rgba(47, 66, 111, 0.06);
}

.profile-purchase-card {
    background:
        radial-gradient(circle at 90% 4%, rgba(90, 120, 224, 0.15), transparent 38%),
        linear-gradient(145deg, #f8faff, #f3f6ff);
    border-color: var(--qa-brand-200);
}

.profile-recharge-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.profile-recharge-card-heading h4 {
    margin: 0;
    color: var(--qa-text-primary);
    font-size: 15px;
    font-weight: 680;
    line-height: 22px;
}

.profile-recharge-card-heading p {
    margin: 4px 0 0;
    color: var(--qa-text-tertiary);
    font-size: 11px;
    line-height: 17px;
}

.profile-recharge-step {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(145deg, var(--qa-brand-400), var(--qa-brand-600));
    border-radius: 9px;
    box-shadow: 0 5px 12px rgba(78, 108, 216, 0.2);
    font-size: 12px;
    font-weight: 700;
}

.profile-purchase-qr {
    width: min(184px, 82%);
    aspect-ratio: 1;
    margin: 20px auto 14px;
    padding: 10px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--qa-brand-200);
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(59, 83, 154, 0.12);
}

.profile-purchase-qr-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 9px;
}

.profile-purchase-qr-image[hidden],
.profile-purchase-qr-fallback[hidden] {
    display: none !important;
}

.profile-purchase-qr-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    color: var(--qa-text-secondary);
    background:
        linear-gradient(90deg, rgba(87, 116, 219, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(87, 116, 219, 0.05) 1px, transparent 1px);
    background-size: 12px 12px;
    border: 1px dashed var(--qa-brand-200);
    border-radius: 10px;
    text-align: center;
}

.profile-purchase-qr-fallback > span {
    color: var(--qa-brand-500);
    font-size: 30px;
    line-height: 34px;
}

.profile-purchase-qr-fallback strong {
    color: var(--qa-text-secondary);
    font-size: 12px;
}

.profile-purchase-qr-fallback small {
    color: var(--qa-text-tertiary);
    font-size: 10px;
}

.profile-purchase-hint {
    margin: 0;
    color: var(--qa-text-secondary);
    font-size: 11px;
    line-height: 17px;
    text-align: center;
}

.profile-ecode-field {
    margin-top: 22px;
    display: block;
}

.profile-ecode-guide {
    position: relative;
    z-index: 4;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--qa-text-secondary);
    font-size: 12px;
    font-weight: 650;
}

.profile-ecode-guide-trigger {
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    color: var(--qa-brand-500);
    background: var(--qa-brand-50, #eef3ff);
    border: 1px solid var(--qa-brand-200);
    border-radius: 50%;
    cursor: help;
    outline: none;
}

.profile-ecode-guide-trigger > svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.profile-ecode-guide-popover {
    position: fixed;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    z-index: 14150;
    width: min(300px, 82vw);
    padding: 10px;
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 6px));
    color: var(--qa-text-primary);
    background: #fff;
    border: 1px solid var(--qa-border);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(25, 38, 74, .2);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.profile-ecode-guide-popover strong {
    display: block;
    margin: 1px 2px 8px;
    font-size: 12px;
    line-height: 18px;
}

.profile-ecode-guide-popover img {
    width: 100%;
    max-height: 64vh;
    display: block;
    object-fit: contain;
    object-position: top;
    background: #f5f6f8;
    border-radius: 9px;
}

.profile-ecode-guide-trigger:hover .profile-ecode-guide-popover,
.profile-ecode-guide-trigger:focus-visible .profile-ecode-guide-popover {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%);
}

.bicbot-cancel-account-overlay {
    z-index: 14200;
}

.profile-danger-setting {
    border-color: rgba(220, 53, 69, .22);
    background: rgba(220, 53, 69, .035);
}

.profile-ecode-field label > span {
    display: block;
    margin-bottom: 8px;
    color: var(--qa-text-secondary);
    font-size: 12px;
    font-weight: 650;
}

.profile-ecode-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.profile-ecode-input-row input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    color: var(--qa-text-primary);
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border-strong);
    border-radius: var(--qa-radius-sm);
    font: inherit;
    font-size: 13px;
    outline: none;
    transition:
        border-color var(--qa-motion-fast),
        box-shadow var(--qa-motion-fast);
}

.profile-ecode-input-row input:focus {
    border-color: var(--qa-brand-400);
    box-shadow: 0 0 0 3px rgba(79, 110, 220, 0.12);
}

.profile-ecode-input-row input[aria-invalid="true"] {
    border-color: rgba(220, 66, 76, 0.58);
    box-shadow: none;
}

[data-recharge-feedback-slot]:empty {
    display: none;
}

.profile-ecode-input-row input:disabled {
    color: var(--qa-text-tertiary);
    background: var(--qa-bg-muted);
}

.profile-ecode-input-row button,
.profile-redeem-confirm-btn {
    min-width: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.profile-ecode-input-row button:disabled,
.profile-redeem-confirm-btn:disabled {
    cursor: wait;
    opacity: 0.68;
}

.profile-inline-spinner {
    width: 14px;
    height: 14px;
    display: inline-block;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: profile-recharge-spin 0.72s linear infinite;
}

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

.profile-recharge-feedback {
    margin-top: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--qa-text-secondary);
    background: var(--qa-bg-muted);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-sm);
}

.profile-recharge-feedback-icon {
    width: 7px;
    height: 7px;
    margin-top: 5px;
    flex: 0 0 7px;
    background: var(--qa-brand-500);
    border-radius: 50%;
}

.profile-recharge-feedback p {
    margin: 0;
    font-size: 11px;
    line-height: 17px;
}

.profile-recharge-feedback.is-error {
    color: #b3323b;
    background: #fff5f5;
    border-color: #f4cdd0;
}

.profile-recharge-feedback.is-error .profile-recharge-feedback-icon {
    background: var(--qa-danger);
}

.profile-recharge-feedback.is-warning {
    color: #82620d;
    background: #fffbeb;
    border-color: #f3e2a1;
}

.profile-recharge-feedback.is-warning .profile-recharge-feedback-icon {
    background: #d49b0b;
}

.profile-ecode-preview {
    margin-top: 14px;
    padding: 15px;
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
}

.profile-ecode-preview.is-available {
    border-color: #bfe5d5;
    box-shadow: inset 3px 0 #35a77a;
}

.profile-ecode-preview.is-unavailable {
    border-color: #f1dca2;
    box-shadow: inset 3px 0 #d7a927;
}

.profile-ecode-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.profile-ecode-preview-head > span {
    color: var(--qa-text-secondary);
    font-size: 12px;
    font-weight: 650;
}

.profile-ecode-preview-head em {
    padding: 3px 8px;
    color: #237658;
    background: #eefaf5;
    border-radius: 999px;
    font-size: 10px;
    font-style: normal;
    font-weight: 650;
}

.profile-ecode-preview.is-unavailable .profile-ecode-preview-head em {
    color: #82620d;
    background: #fff8dd;
}

.profile-ecode-token {
    margin: 14px 0 12px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.profile-ecode-token span {
    color: var(--qa-text-tertiary);
    font-size: 11px;
}

.profile-ecode-token strong {
    color: var(--qa-brand-600);
    font-size: 26px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.profile-ecode-preview dl {
    margin: 0 0 14px;
}

.profile-ecode-preview dl > div {
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--qa-border);
}

.profile-ecode-preview dt,
.profile-ecode-preview dd {
    color: var(--qa-text-tertiary);
    font-size: 11px;
}

.profile-ecode-preview dd {
    margin: 0;
    color: var(--qa-text-secondary);
    font-weight: 600;
    text-align: right;
}

.profile-redeem-confirm-btn {
    width: 100%;
}

.profile-recharge-result {
    min-height: 244px;
    margin-top: 22px;
    padding: 24px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--qa-text-secondary);
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
    text-align: center;
}

.profile-recharge-result.is-success {
    background: linear-gradient(180deg, #f4fcf8, #ffffff);
    border-color: #bfe5d5;
}

.profile-recharge-result-mark {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: var(--qa-brand-500);
    border-radius: 16px;
    font-size: 21px;
    font-weight: 700;
}

.profile-recharge-result.is-success .profile-recharge-result-mark {
    background: var(--qa-success);
    box-shadow: 0 8px 20px rgba(38, 157, 112, 0.22);
}

.profile-recharge-result h4 {
    margin: 0;
    color: var(--qa-text-primary);
    font-size: 15px;
}

.profile-recharge-result p {
    margin: 6px 0 0;
    color: var(--qa-text-tertiary);
    font-size: 12px;
}

.profile-recharge-order {
    width: 100%;
    margin-top: 18px;
    padding-top: 13px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--qa-border);
    font-size: 10px;
    text-align: left;
}

.profile-recharge-order span {
    color: var(--qa-text-tertiary);
}

.profile-recharge-order strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--qa-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
    text-align: right;
}

.profile-recharge-retry-btn {
    width: 100%;
    margin-top: 14px;
}

@media (max-width: 768px) {
    .sidebar {
        z-index: 120;
    }

    .sidebar-backdrop:not([hidden]) {
        z-index: 119;
    }

    .sidebar-toggle-btn {
        z-index: 130;
    }

    .sidebar:not(.is-open) {
        overflow: hidden;
    }

    .container.sidebar-collapsed .sidebar {
        overflow: hidden;
    }

    .container .sidebar.is-collapsed {
        overflow: hidden;
    }

    .quick-actions-sidebar {
        overflow: hidden;
    }

    .container.sidebar-open .action-buttons-vertical {
        min-height: 0;
        flex-direction: column;
        overflow-x: visible;
        overflow-y: auto;
        scrollbar-gutter: stable;
    }

    .container.sidebar-open .sidebar-history-panel {
        width: 100%;
        min-height: 240px;
        flex: 1 1 auto;
    }

    .container.sidebar-open .sidebar-function-center {
        width: 100%;
        flex: 0 0 auto;
        grid-template-columns: 1fr;
    }

    .container.sidebar-open .sidebar-function-center .sidebar-action-btn {
        width: 100%;
        min-height: 36px;
        padding: 6px;
    }

    .container.sidebar-open .sidebar-function-center .action-text {
        display: inline;
    }

    .profile-token-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-token-distribution {
        grid-template-columns: 1fr;
    }

    .profile-recharge-layout {
        grid-template-columns: 1fr;
    }

    .profile-purchase-qr {
        width: min(180px, 64%);
    }
}

@media (max-width: 480px) {
    .response-quality-selector {
        flex: 1 1 auto;
    }

    .response-quality-select {
        flex: 1 1 auto;
        height: 44px;
        font-size: 16px;
    }

    .composer-attachment-card {
        width: 100%;
        max-width: 100%;
        grid-template-columns: 36px minmax(0, 1fr) 44px;
    }

    .profile-center-container {
        width: 100%;
        height: 94dvh;
        max-height: 94dvh;
    }

    .profile-token-metrics {
        grid-template-columns: 1fr;
    }

    .profile-token-balance-detail {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .profile-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-token-chart {
        gap: 4px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .profile-chart-column small {
        font-size: 8px;
    }

    .profile-empty-state {
        margin: 20px auto;
        padding: 22px 16px;
    }

    .profile-setting-item,
    .profile-binding-card,
    .profile-account-hero {
        align-items: flex-start;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .profile-setting-item {
        flex-direction: column;
    }

    .profile-credential-setup > .profile-primary-btn {
        width: 100%;
        margin-left: 0;
    }

    .profile-binding-card > :last-child,
    .profile-account-hero > :last-child {
        grid-column: 2;
    }

    .profile-action-row {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-recharge-intro {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-recharge-safe {
        white-space: normal;
    }

    .profile-purchase-card,
    .profile-redeem-card {
        padding: 16px;
    }

    .profile-ecode-input-row {
        grid-template-columns: 1fr;
    }

    .profile-ecode-input-row button {
        width: 100%;
        min-height: 42px;
    }
}

/* Workbench v2: shared business dialog language */
.dialog-overlay {
    padding: 24px;
    align-items: center;
    justify-content: center;
    overflow: auto;
    background: rgb(42 51 64 / 38%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.dialog-container {
    color: var(--qa-text-primary);
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-xl);
    box-shadow: var(--qa-shadow-pop);
}

:is(#awrAnalysisDialog, #inspectionDialog, #sqlOptimizationDialog, #faultAnalysisDialog, #toolsetDialog) .dialog-container {
    width: min(95vw, 1200px);
    min-width: min(900px, calc(100vw - 48px));
    max-width: 1200px;
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dialog-header {
    background: var(--qa-bg-surface);
    border-bottom: 1px solid var(--qa-border);
}

:is(#awrAnalysisDialog, #inspectionDialog, #sqlOptimizationDialog, #faultAnalysisDialog, #toolsetDialog) .dialog-header {
    min-height: 60px;
    padding: 0 22px;
    flex: 0 0 auto;
}

.dialog-header h3 {
    color: var(--qa-text-primary);
}

:is(#awrAnalysisDialog, #inspectionDialog, #sqlOptimizationDialog, #faultAnalysisDialog, #toolsetDialog) .dialog-header h3 {
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

:is(#awrAnalysisDialog, #inspectionDialog, #sqlOptimizationDialog, #faultAnalysisDialog, #toolsetDialog) .dialog-header .close-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--qa-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--qa-radius-md);
    transition:
        color var(--qa-motion-fast),
        background var(--qa-motion-fast),
        border-color var(--qa-motion-fast);
}

:is(#awrAnalysisDialog, #inspectionDialog, #sqlOptimizationDialog, #faultAnalysisDialog, #toolsetDialog) .dialog-header .close-btn:hover {
    color: var(--qa-text-primary);
    background: var(--qa-bg-muted);
    border-color: var(--qa-border);
}

.dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 22px 24px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #d5dbea transparent;
}

.awr-tabs {
    min-height: 50px;
    margin: 0;
    padding: 0 22px;
    flex: 0 0 auto;
    align-items: flex-end;
    gap: 4px;
    overflow-x: auto;
    background: var(--qa-bg-surface);
    border-bottom: 1px solid var(--qa-border);
    scrollbar-width: none;
}

.awr-tabs::-webkit-scrollbar {
    display: none;
}

.awr-tab-btn {
    min-height: 42px;
    margin: 0;
    padding: 10px 16px;
    flex: 0 0 auto;
    color: var(--qa-text-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--qa-radius-sm) var(--qa-radius-sm) 0 0;
    box-shadow: inset 0 -2px transparent;
    font-weight: 550;
    transition:
        color var(--qa-motion-fast),
        background var(--qa-motion-fast),
        box-shadow var(--qa-motion-fast);
}

.awr-tab-btn:hover {
    color: var(--qa-brand-600);
    background: var(--qa-brand-50);
}

.awr-tab-btn.active {
    color: var(--qa-brand-600);
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: inset 0 -2px var(--qa-brand-500);
}

.inspection-tab-btn,
.sql-optimization-tab-btn,
.fault-analysis-tab-btn {
    min-height: 42px;
    color: var(--qa-text-secondary);
}

.inspection-tab-btn.active,
.sql-optimization-tab-btn.active,
.fault-analysis-tab-btn.active {
    color: var(--qa-brand-600);
    box-shadow: inset 0 -2px var(--qa-brand-500);
}

.awr-form {
    gap: 18px;
}

#inspectionForm {
    gap: 22px;
}

.form-group {
    gap: 7px;
}

.form-label {
    margin: 0;
    color: var(--qa-text-primary);
    font-size: 13px;
    font-weight: 600;
}

.form-label.required::after {
    color: var(--qa-danger);
}

.form-input {
    min-height: 44px;
    padding: 10px 12px;
    color: var(--qa-text-primary);
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border-strong);
    border-radius: var(--qa-radius-md);
    transition:
        border-color var(--qa-motion-fast),
        box-shadow var(--qa-motion-fast),
        background var(--qa-motion-fast);
}

.form-textarea {
    min-height: 104px;
    padding: 11px 12px;
    color: var(--qa-text-primary);
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border-strong);
    border-radius: var(--qa-radius-md);
    line-height: 1.6;
    transition:
        border-color var(--qa-motion-fast),
        box-shadow var(--qa-motion-fast),
        background var(--qa-motion-fast);
}

.form-input:hover,
.form-textarea:hover {
    border-color: var(--qa-brand-200);
}

.form-input:focus {
    outline: none;
    border-color: var(--qa-brand-500);
    box-shadow: var(--qa-focus-ring);
}

.form-textarea:focus {
    outline: none;
    border-color: var(--qa-brand-500);
    box-shadow: var(--qa-focus-ring);
}

.form-input:read-only {
    color: var(--qa-text-secondary);
    background: var(--qa-bg-muted);
}

.form-input.input-valid {
    border-color: #2f855a;
    box-shadow: 0 0 0 3px rgb(47 133 90 / 12%);
}

.form-input.input-invalid {
    border-color: var(--qa-danger);
    box-shadow: 0 0 0 3px rgb(184 63 76 / 12%);
}

.email-error-message,
.validation-message.error {
    color: var(--qa-danger);
    font-size: 12px;
    line-height: 1.5;
}

.validation-message.success {
    color: #287451;
}

.form-description {
    color: var(--qa-text-tertiary);
    line-height: 1.55;
}

.database-description,
.awr-analysis-time-hint {
    padding: 11px 13px;
    color: var(--qa-brand-600);
    background: var(--qa-brand-50);
    border: 1px solid var(--qa-brand-100);
    border-left: 3px solid var(--qa-brand-500);
    border-radius: var(--qa-radius-md);
}

.file-upload-container {
    gap: 8px;
    padding: 6px;
    background: var(--qa-bg-muted);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
}

.file-upload-container .file-display-input {
    background: var(--qa-bg-surface);
}

.file-upload-btn {
    min-height: 42px;
    padding: 9px 16px;
    color: #ffffff;
    background: var(--qa-brand-500);
    border: 1px solid var(--qa-brand-500);
    border-radius: var(--qa-radius-md);
    box-shadow: var(--qa-shadow-brand);
}

.file-upload-btn:hover {
    background: var(--qa-brand-600);
    border-color: var(--qa-brand-600);
    box-shadow: var(--qa-shadow-brand);
    transform: translateY(-1px);
}

.form-actions {
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--qa-border);
}

.btn-save {
    min-height: 42px;
    padding: 9px 20px;
    color: #ffffff;
    background: var(--qa-brand-500);
    border: 1px solid var(--qa-brand-500);
    border-radius: var(--qa-radius-md);
    box-shadow: var(--qa-shadow-brand);
}

.btn-save:hover {
    background: var(--qa-brand-600);
    border-color: var(--qa-brand-600);
    box-shadow: var(--qa-shadow-brand);
    transform: translateY(-1px);
}

.btn-save:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    box-shadow: none;
    transform: none;
}

.btn-cancel {
    min-height: 42px;
    padding: 9px 20px;
    color: var(--qa-text-secondary);
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border-strong);
    border-radius: var(--qa-radius-md);
    box-shadow: none;
}

.btn-cancel:hover {
    color: var(--qa-text-primary);
    background: var(--qa-bg-muted);
    border-color: var(--qa-brand-200);
    box-shadow: none;
    transform: translateY(-1px);
}

.awr-search-btn {
    min-height: 40px;
    color: #ffffff;
    background: var(--qa-brand-500);
    border: 1px solid var(--qa-brand-500);
    border-radius: var(--qa-radius-md);
    box-shadow: var(--qa-shadow-brand);
}

.awr-search-btn:hover {
    background: var(--qa-brand-600);
    border-color: var(--qa-brand-600);
    box-shadow: var(--qa-shadow-brand);
}

.awr-reset-btn {
    min-height: 40px;
    color: var(--qa-text-secondary);
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border-strong);
    border-radius: var(--qa-radius-md);
    box-shadow: none;
}

.awr-reset-btn:hover {
    color: var(--qa-text-primary);
    background: var(--qa-bg-muted);
    border-color: var(--qa-brand-200);
    box-shadow: none;
}

.toolset-action-btn-danger {
    color: var(--qa-danger);
    background: #fff7f7;
    border-color: #f1c8cd;
}

.toolset-action-btn-danger:hover:not(:disabled) {
    color: #9d303c;
    background: #ffeded;
    border-color: #e6aeb5;
}

.awr-history-filters {
    padding: 12px;
    gap: 8px;
    background: var(--qa-bg-muted);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
}

.awr-filter-label {
    color: var(--qa-text-secondary);
}

.awr-history-table-container {
    overflow-x: auto;
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
    background: var(--qa-bg-surface);
}

.awr-history-table {
    background: var(--qa-bg-surface);
    border-radius: 0;
    box-shadow: none;
}

.awr-history-table th {
    padding: 12px 14px;
    color: var(--qa-text-secondary);
    background: var(--qa-bg-muted);
    border-bottom: 1px solid var(--qa-border-strong);
    font-size: 12px;
    letter-spacing: 0.015em;
}

.awr-history-table td {
    padding: 12px 14px;
    color: var(--qa-text-primary);
    border-bottom-color: var(--qa-border);
}

.awr-history-row:hover {
    background: var(--qa-brand-50);
}

.toolset-manager-table thead th {
    color: var(--qa-text-secondary);
    background: var(--qa-bg-muted);
    border-bottom: 1px solid var(--qa-border-strong);
}

.toolset-manager-table tbody tr:hover {
    background: var(--qa-brand-50);
}

.awr-pagination {
    padding-top: 12px;
    border-top-color: var(--qa-border);
}

.pagination-btn {
    min-height: 38px;
    color: var(--qa-text-secondary);
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border-strong);
    border-radius: var(--qa-radius-md);
}

.pagination-btn:hover:not(:disabled) {
    color: var(--qa-brand-600);
    background: var(--qa-brand-50);
    border-color: var(--qa-brand-200);
}

@media (max-width: 768px) {
    .dialog-overlay {
        padding: 16px;
    }

    :is(#awrAnalysisDialog, #inspectionDialog, #sqlOptimizationDialog, #faultAnalysisDialog, #toolsetDialog) .dialog-container {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        max-height: calc(100dvh - 32px);
    }

    :is(#awrAnalysisDialog, #inspectionDialog, #sqlOptimizationDialog, #faultAnalysisDialog, #toolsetDialog) .dialog-header {
        min-height: 56px;
        padding: 0 16px;
    }

    :is(#awrAnalysisDialog, #inspectionDialog, #sqlOptimizationDialog, #faultAnalysisDialog, #toolsetDialog) .dialog-header .close-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .dialog-content {
        padding: 18px 16px 20px;
    }

    .awr-tabs {
        padding: 0 14px;
    }

    .awr-history-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .awr-history-table-container {
        overflow-x: auto;
    }

    .awr-history-table {
        min-width: 880px;
    }
}

@media (max-width: 480px) {
    .dialog-overlay {
        padding: 0;
        align-items: flex-end;
    }

    :is(#awrAnalysisDialog, #inspectionDialog, #sqlOptimizationDialog, #faultAnalysisDialog, #toolsetDialog) .dialog-container {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        max-height: 96dvh;
        border-radius: var(--qa-radius-xl) var(--qa-radius-xl) 0 0;
    }

    :is(#awrAnalysisDialog, #inspectionDialog, #sqlOptimizationDialog, #faultAnalysisDialog, #toolsetDialog) .dialog-header {
        min-height: 60px;
        padding: 0 12px 0 16px;
    }

    :is(#awrAnalysisDialog, #inspectionDialog, #sqlOptimizationDialog, #faultAnalysisDialog, #toolsetDialog) .dialog-header h3 {
        font-size: 16px;
    }

    .dialog-content {
        padding: 16px 14px 20px;
    }

    .awr-tabs {
        min-height: 48px;
        padding: 0 10px;
    }

    .awr-tab-btn {
        min-height: 44px;
        padding: 10px 14px;
    }

    .form-input {
        min-height: 44px;
        font-size: 16px;
    }

    .form-textarea {
        font-size: 16px;
    }

    .file-upload-container {
        flex-direction: column;
        align-items: stretch;
    }

    .file-upload-btn {
        width: 100%;
        min-height: 44px;
    }

    .form-actions {
        width: 100%;
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .btn-save {
        width: 100%;
        min-height: 44px;
    }

    .btn-cancel {
        width: 100%;
        min-height: 44px;
    }

    .awr-search-btn,
    .awr-reset-btn,
    .pagination-btn {
        min-height: 44px;
    }
}

/* Workbench v2: toolset specificity bridge */
#toolsetCreateBtn {
    min-height: 42px;
    color: #ffffff;
    background: var(--qa-brand-500);
    border: 1px solid var(--qa-brand-500);
    box-shadow: var(--qa-shadow-brand);
}

#toolsetCreateBtn:hover {
    color: #ffffff;
    background: var(--qa-brand-600);
    border-color: var(--qa-brand-600);
    box-shadow: var(--qa-shadow-brand);
}

#toolsetFilterSearchBtn {
    min-height: 40px;
    color: #ffffff;
    background: var(--qa-brand-500);
    border: 1px solid var(--qa-brand-500);
    box-shadow: var(--qa-shadow-brand);
}

#toolsetFilterSearchBtn:hover {
    color: #ffffff;
    background: var(--qa-brand-600);
    border-color: var(--qa-brand-600);
    box-shadow: var(--qa-shadow-brand);
}

#toolsetFilterResetBtn {
    min-height: 40px;
    color: var(--qa-text-secondary);
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border-strong);
    box-shadow: none;
}

#toolsetFilterResetBtn:hover {
    color: var(--qa-text-primary);
    background: var(--qa-bg-muted);
    border-color: var(--qa-brand-200);
    box-shadow: none;
}

#toolsetDialog .dialog-content {
    padding: 16px 20px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--qa-bg-canvas);
}

#toolsetDialog .toolset-form-panel,
#toolsetDialog .toolset-confirm-panel {
    color: var(--qa-text-primary);
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-xl);
    box-shadow: var(--qa-shadow-pop);
}

#toolsetDialog .toolset-form-panel-header {
    padding: 18px 22px;
    background: var(--qa-bg-muted);
    border-bottom: 1px solid var(--qa-border);
}

#toolsetDialog .toolset-modal-form {
    padding: 18px 22px 20px;
    background: var(--qa-bg-surface);
}

#toolsetDialog .toolset-modal-form .form-label {
    color: var(--qa-text-primary);
}

#toolsetDialog .toolset-modal-form .form-input {
    min-height: 44px;
    height: 44px;
    padding: 10px 12px;
    color: var(--qa-text-primary);
    background: var(--qa-bg-surface);
    border: 1px solid var(--qa-border-strong);
    border-radius: var(--qa-radius-md);
}

#toolsetDialog .toolset-modal-form .form-input:focus {
    border-color: var(--qa-brand-500);
    box-shadow: var(--qa-focus-ring);
}

#toolsetDialog .toolset-modal-form .file-upload-container {
    padding: 6px;
    gap: 8px;
    background: var(--qa-bg-muted);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
}

#toolsetDialog .toolset-modal-form .file-upload-btn {
    min-height: 42px;
    height: 42px;
    color: #ffffff;
    background: var(--qa-brand-500);
    border: 1px solid var(--qa-brand-500);
    border-radius: var(--qa-radius-md);
    box-shadow: var(--qa-shadow-brand);
}

#toolsetDialog .toolset-modal-form .file-upload-btn:hover {
    background: var(--qa-brand-600);
    border-color: var(--qa-brand-600);
    box-shadow: var(--qa-shadow-brand);
}

.pagination-btn {
    min-width: 40px;
    min-height: 40px;
}

#toolsetDialog .toolset-form-panel .close-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    color: var(--qa-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--qa-radius-md);
}

#toolsetDialog .toolset-confirm-panel .close-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    color: var(--qa-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--qa-radius-md);
}

#toolsetDialog .toolset-form-panel .close-btn:hover,
#toolsetDialog .toolset-confirm-panel .close-btn:hover {
    color: var(--qa-text-primary);
    background: var(--qa-brand-50);
    border-color: var(--qa-border);
}

@media (max-width: 768px) {
    .pagination-btn {
        min-width: 44px;
        min-height: 44px;
    }

    #toolsetDialog .toolset-form-panel .close-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    #toolsetDialog .toolset-confirm-panel .close-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    #toolsetFilterSearchBtn {
        height: 44px;
        min-height: 44px;
    }

    #toolsetFilterResetBtn {
        height: 44px;
        min-height: 44px;
    }

    #toolsetCreateBtn {
        height: 44px;
        min-height: 44px;
    }

    #toolsetDialog .toolset-modal-form #toolUploadFileUploadBtn {
        height: 44px;
        min-height: 44px;
    }

    .toolset-manager-table-wrap {
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .toolset-manager-table {
        width: 100%;
        min-width: 800px;
    }
}

/* Workbench v2: business row actions and contextual help */
.awr-action-btn {
    min-height: 40px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--qa-brand-600);
    background: var(--qa-brand-50);
    border: 1px solid var(--qa-brand-200);
    border-radius: var(--qa-radius-sm);
    transition:
        color var(--qa-motion-fast),
        background-color var(--qa-motion-fast),
        border-color var(--qa-motion-fast),
        box-shadow var(--qa-motion-fast),
        transform var(--qa-motion-fast);
}

.awr-action-btn:hover:not(:disabled):not(.disabled) {
    color: var(--qa-brand-600);
    background: var(--qa-brand-100);
    border-color: var(--qa-brand-500);
    transform: translateY(-1px);
}

.awr-action-btn:focus-visible {
    outline: 2px solid var(--qa-brand-500);
    outline-offset: 2px;
    box-shadow: var(--qa-focus-ring);
}

.awr-action-btn:disabled {
    cursor: not-allowed;
    color: var(--qa-text-tertiary);
    background: var(--qa-bg-muted);
    border-color: var(--qa-border);
    box-shadow: none;
    opacity: 0.58;
    transform: none;
}

.awr-action-btn.disabled {
    cursor: not-allowed;
    color: var(--qa-text-tertiary);
    background: var(--qa-bg-muted);
    border-color: var(--qa-border);
    box-shadow: none;
    opacity: 0.58;
    transform: none;
}

.awr-action-btn.resend-email-btn,
.awr-action-btn.inspection-resend-btn {
    color: #ffffff;
    background: var(--qa-brand-500);
    border-color: var(--qa-brand-500);
}

.awr-action-btn.resend-email-btn:hover:not(:disabled):not(.disabled),
.awr-action-btn.inspection-resend-btn:hover:not(:disabled):not(.disabled) {
    color: #ffffff;
    background: var(--qa-brand-600);
    border-color: var(--qa-brand-600);
}

.awr-action-btn.download-btn,
.awr-action-btn.inspection-download-btn {
    color: var(--qa-brand-600);
    background: var(--qa-brand-50);
    border-color: var(--qa-brand-200);
}

.awr-action-btn.resend-email-btn:disabled {
    cursor: not-allowed;
    color: var(--qa-text-tertiary);
    background: var(--qa-bg-muted);
    border-color: var(--qa-border);
    box-shadow: none;
    opacity: 0.58;
    transform: none;
}

.awr-action-btn.inspection-resend-btn:disabled {
    cursor: not-allowed;
    color: var(--qa-text-tertiary);
    background: var(--qa-bg-muted);
    border-color: var(--qa-border);
    box-shadow: none;
    opacity: 0.58;
    transform: none;
}

.awr-action-btn.download-btn:disabled {
    cursor: not-allowed;
    color: var(--qa-text-tertiary);
    background: var(--qa-bg-muted);
    border-color: var(--qa-border);
    box-shadow: none;
    opacity: 0.58;
    transform: none;
}

.awr-action-btn.inspection-download-btn:disabled {
    cursor: not-allowed;
    color: var(--qa-text-tertiary);
    background: var(--qa-bg-muted);
    border-color: var(--qa-border);
    box-shadow: none;
    opacity: 0.58;
    transform: none;
}

.awr-action-btn.resend-email-btn.disabled,
.awr-action-btn.inspection-resend-btn.disabled,
.awr-action-btn.download-btn.disabled,
.awr-action-btn.inspection-download-btn.disabled {
    cursor: not-allowed;
    color: var(--qa-text-tertiary);
    background: var(--qa-bg-muted);
    border-color: var(--qa-border);
    box-shadow: none;
    opacity: 0.58;
    transform: none;
}

.toolset-action-btn {
    min-height: 40px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--qa-brand-600);
    background: var(--qa-brand-50);
    border: 1px solid var(--qa-brand-200);
    border-radius: var(--qa-radius-sm);
    transition:
        color var(--qa-motion-fast),
        background-color var(--qa-motion-fast),
        border-color var(--qa-motion-fast),
        box-shadow var(--qa-motion-fast),
        transform var(--qa-motion-fast);
}

.toolset-action-btn:hover:not(:disabled):not([disabled]) {
    color: var(--qa-brand-600);
    background: var(--qa-brand-100);
    border-color: var(--qa-brand-500);
    transform: translateY(-1px);
}

.toolset-action-btn:focus-visible {
    outline: 2px solid var(--qa-brand-500);
    outline-offset: 2px;
    box-shadow: var(--qa-focus-ring);
}

.toolset-action-btn:disabled {
    cursor: not-allowed;
    color: var(--qa-text-tertiary);
    background: var(--qa-bg-muted);
    border-color: var(--qa-border);
    box-shadow: none;
    opacity: 0.58;
    transform: none;
}

.toolset-action-btn[disabled] {
    cursor: not-allowed;
    color: var(--qa-text-tertiary);
    background: var(--qa-bg-muted);
    border-color: var(--qa-border);
    box-shadow: none;
    opacity: 0.58;
    transform: none;
}

.toolset-action-btn-danger {
    color: var(--qa-danger);
    background: #fff7f7;
    border-color: #f1c8cd;
}

.toolset-action-btn-danger:hover:not(:disabled):not([disabled]) {
    color: #9d303c;
    background: #ffeded;
    border-color: #e6aeb5;
}

.info-icon-btn {
    transition:
        color var(--qa-motion-fast),
        background-color var(--qa-motion-fast),
        border-color var(--qa-motion-fast),
        box-shadow var(--qa-motion-fast);
}

.info-icon-btn:focus-visible {
    outline: 2px solid var(--qa-brand-500);
    outline-offset: 2px;
    box-shadow: var(--qa-focus-ring);
}

@media (max-width: 768px) {
    .awr-action-btn {
        min-height: 44px;
    }

    .toolset-action-btn {
        min-height: 44px;
    }

    .info-icon-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        isolation: isolate;
        color: var(--qa-brand-600);
        background: transparent;
        border-color: transparent;
    }

    .info-icon-btn::before {
        content: "";
        position: absolute;
        inset: 11px;
        z-index: -1;
        background: var(--qa-brand-50);
        border: 1px solid var(--qa-brand-200);
        border-radius: 50%;
    }

    .info-icon-btn:hover,
    .info-icon-btn:focus-visible {
        color: var(--qa-brand-600);
        background: transparent;
        border-color: transparent;
    }

    .info-icon-btn:hover::before,
    .info-icon-btn:focus-visible::before {
        background: var(--qa-brand-100);
        border-color: var(--qa-brand-500);
    }
}

/* Sidebar resize and coordinated motion */
:root {
    --qa-sidebar-motion: 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.container {
    display: grid;
    grid-template-columns: var(--qa-sidebar-width) minmax(0, 1fr);
    transition: grid-template-columns var(--qa-sidebar-motion);
}

.container.sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
}

.container > .sidebar,
.container.sidebar-collapsed > .sidebar {
    width: 100%;
    max-width: none;
    min-width: 0;
    flex-basis: auto;
}

.quick-actions-sidebar,
.action-buttons-vertical {
    min-height: 0;
    overflow: hidden;
}

.action-buttons-vertical {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-history-panel {
    flex: 1 1 auto;
    min-height: 240px;
}

.sidebar-function-center {
    flex: 0 0 auto;
    align-content: start;
    padding-top: 6px;
    overflow: hidden;
}

.sidebar-function-center .sidebar-action-btn {
    min-height: 34px;
    padding: 5px 9px;
}

.content-area.has-result .input-header {
    display: block;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
}

.content-area.has-result .input-center-wrapper {
    margin: 0 auto 8px;
    padding-top: 14px;
}

.input-header {
    max-height: 96px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        max-height var(--qa-motion-base),
        margin var(--qa-motion-base),
        padding var(--qa-motion-base),
        opacity var(--qa-motion-fast),
        transform var(--qa-motion-base),
        visibility var(--qa-motion-base);
}

.sidebar-backdrop {
    display: none;
    opacity: 0;
    transition:
        opacity var(--qa-sidebar-motion),
        display var(--qa-sidebar-motion) allow-discrete;
    transition-behavior: allow-discrete;
}

.sidebar-backdrop:not([hidden]) {
    display: block;
    opacity: 1;
}

@starting-style {
    .sidebar-backdrop:not([hidden]) {
        opacity: 0;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .container.sidebar-collapsed {
        grid-template-columns: var(--qa-sidebar-collapsed) minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .container,
    .container.sidebar-collapsed {
        display: block;
    }

    .container > .sidebar,
    .container.sidebar-collapsed > .sidebar {
        width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        max-width: min(var(--qa-sidebar-width), calc(100vw - 60px));
        min-width: min(var(--qa-sidebar-width), calc(100vw - 60px));
    }

    .content-area.has-result .input-center-wrapper {
        margin-bottom: 4px;
        padding-top: 10px;
    }
}

.composer-attachment-card {
    grid-template-columns: minmax(0, 1fr) 28px;
}

.composer-attachment-preview {
    min-width: 0;
    min-height: 34px;
    padding: 0;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 7px;
    text-align: left;
    cursor: pointer;
}

.composer-attachment-preview:hover .composer-attachment-copy strong {
    color: var(--qa-brand-600);
}

.composer-attachment-preview:focus-visible {
    outline: 2px solid var(--qa-brand-500);
    outline-offset: 2px;
}

.analysis-task-attachment {
    cursor: pointer;
}

.analysis-task-attachment:hover,
.analysis-task-attachment:focus-visible {
    color: var(--qa-brand-600);
    border-color: var(--qa-brand-200);
    box-shadow: var(--qa-focus-ring);
}

/* Active chat scroll containment */
.content-area.has-result .search-section {
    min-height: 0;
    overflow: hidden;
}

.content-area.has-result .result-section {
    flex: 1 1 0;
    min-height: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.content-area.has-result .analysis-task-message-list {
    flex: 1 1 auto;
    width: min(100%, 920px);
    height: 100%;
    min-height: 0;
    padding: 20px 18px 28px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: 28px;
    scrollbar-gutter: stable;
}

.content-area.has-result .result-container {
    width: min(100%, 1000px);
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: 28px;
}

.content-area.has-result .input-center-wrapper {
    flex: 0 0 auto;
}

/* In-result conversation navigation stays beside the independent scroll area. */
.result-section {
    position: relative;
}

.result-scroll-bottom-btn {
    position: absolute;
    z-index: 9;
    left: 50%;
    bottom: 18px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(27, 94, 157, .22);
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: #1769c2;
    box-shadow: 0 8px 22px rgba(30, 73, 118, .18);
    cursor: pointer;
    transform: translateX(-50%);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.result-scroll-bottom-btn[hidden] {
    display: none;
}

.result-scroll-bottom-btn:hover {
    background: #eef6ff;
    box-shadow: 0 10px 26px rgba(30, 73, 118, .24);
    transform: translateX(-50%) translateY(-2px);
}

.result-scroll-bottom-btn:focus-visible {
    outline: 3px solid rgba(23, 105, 194, .3);
    outline-offset: 2px;
}

.result-scroll-bottom-btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.result-container.has-conversation-anchor-nav {
    padding-right: 64px;
}

.conversation-anchor-nav {
    position: absolute;
    top: 50%;
    right: 2px;
    z-index: 8;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 50px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(79, 99, 232, 0.14);
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(43, 61, 105, 0.16), 0 2px 8px rgba(43, 61, 105, 0.06);
    transform: translateY(-50%);
    backdrop-filter: blur(10px);
    animation: conversation-anchor-enter .18s ease-out;
}

.conversation-anchor-nav[hidden] {
    display: none !important;
}

.conversation-anchor-nav button {
    width: 36px;
    height: 36px;
    padding: 7px;
    display: grid;
    place-items: center;
    color: #60708c;
    background: #fbfcff;
    border: 1px solid #e4e9f5;
    border-radius: 11px;
    cursor: pointer;
    transition: color var(--qa-motion-fast), background var(--qa-motion-fast), border-color var(--qa-motion-fast), transform var(--qa-motion-fast);
}

.conversation-anchor-nav button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.conversation-anchor-nav button:hover:not(:disabled) {
    color: var(--qa-brand-600);
    background: #eef2ff;
    border-color: var(--qa-brand-200);
    box-shadow: 0 5px 12px rgba(74, 89, 220, 0.12);
    transform: translateY(-1px) scale(1.02);
}

.conversation-anchor-nav button:focus-visible {
    outline: 3px solid rgba(79, 99, 232, 0.22);
    outline-offset: 1px;
}

.conversation-anchor-nav button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.conversation-anchor-position {
    min-height: 24px;
    display: grid;
    place-items: center;
    color: #52617b;
    background: #f4f6fb;
    border-radius: 8px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

@media (min-width: 1280px) {
    .result-section:has(.conversation-anchor-nav:not([hidden])) {
        overflow: visible;
    }

    .result-container.has-conversation-anchor-nav {
        padding-right: 22px;
    }

    .conversation-anchor-nav {
        right: -64px;
    }
}

@keyframes conversation-anchor-enter {
    from { opacity: 0; transform: translateY(calc(-50% + 6px)); }
    to { opacity: 1; transform: translateY(-50%); }
}

@media (max-width: 768px) {
    .conversation-anchor-nav {
        right: 4px;
        gap: 4px;
        width: 46px;
        padding: 5px;
        border-radius: 18px;
    }

    .result-container.has-conversation-anchor-nav {
        padding-right: 62px;
    }

    .conversation-anchor-nav button {
        width: 34px;
        height: 34px;
        padding: 6px;
        border-radius: 11px;
    }
}

@media (max-width: 768px) {
    .container > .main-content {
        height: 100dvh;
        min-height: 100dvh;
    }

    .content-area.has-result .analysis-task-message-list {
        padding: 16px 10px 24px;
        scroll-padding-bottom: 24px;
    }
}

/* Collapsed chat width expansion */
@media (min-width: 1025px) {
    .container.sidebar-collapsed .content-area.has-result .result-section {
        width: min(100%, 1180px);
        max-width: 1180px;
    }

    .container.sidebar-collapsed .content-area.has-result .result-container {
        width: 100%;
        max-width: 1180px;
    }

    .container.sidebar-collapsed .result-text {
        width: min(100%, 1120px);
        max-width: 1120px;
    }

    .container.sidebar-collapsed .error-state-card {
        width: 100%;
        max-width: none;
    }
}

/* Streaming answer activity */
.result-text-tips.is-streaming {
    min-height: 28px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(79, 111, 212, 0.16);
    border-radius: 999px;
    color: var(--qa-brand-700, #3456a3);
    background: rgba(238, 243, 255, 0.72);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
}

.result-text-tips.is-streaming::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--qa-brand-500, #4f6fd4);
    box-shadow: 0 0 0 0 rgba(79, 111, 212, 0.28);
    animation: bicbot-stream-pulse 1.4s ease-out infinite;
}

.result-text-tips.is-streaming::after {
    content: "";
    width: 18px;
    height: 6px;
    flex: 0 0 18px;
    color: var(--qa-brand-500, #4f6fd4);
    background:
        radial-gradient(circle, currentColor 54%, transparent 58%) 0 50% / 6px 6px no-repeat,
        radial-gradient(circle, currentColor 54%, transparent 58%) 6px 50% / 6px 6px no-repeat,
        radial-gradient(circle, currentColor 54%, transparent 58%) 12px 50% / 6px 6px no-repeat;
    animation: bicbot-stream-dots 1.1s ease-in-out infinite;
}

@keyframes bicbot-stream-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(79, 111, 212, 0.32);
    }

    70%,
    100% {
        box-shadow: 0 0 0 7px rgba(79, 111, 212, 0);
    }
}

@keyframes bicbot-stream-dots {
    0%,
    100% {
        opacity: 0.34;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .result-text-tips.is-streaming::before,
    .result-text-tips.is-streaming::after {
        animation: none;
    }
}

/* Attachment-only composer controls */
.response-quality-selector[hidden] {
    display: none !important;
}

/* Real token usage dashboard */
.profile-token-metrics {
    grid-template-columns: minmax(0, 1.12fr) repeat(3, minmax(0, 1fr));
}

.profile-metric-card.is-actionable {
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.profile-metric-card.is-actionable:hover {
    filter: brightness(1.035);
    transform: translateY(-2px);
}

.profile-metric-card.is-actionable:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--qa-brand-500) 28%, transparent);
    outline-offset: 3px;
}

.profile-token-balance-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 14px 18px;
    background: color-mix(in srgb, var(--qa-brand-50) 42%, var(--qa-bg-surface));
    border: 1px solid color-mix(in srgb, var(--qa-brand-500) 18%, var(--qa-border));
    border-left: 3px solid var(--qa-brand-500);
    border-radius: 10px;
}

.profile-token-balance-detail div {
    display: grid;
    gap: 5px;
}

.profile-token-balance-detail .profile-token-balance-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
}

.profile-token-balance-detail .profile-token-balance-stat + .profile-token-balance-stat {
    padding-left: 24px;
    border-left: 1px solid color-mix(in srgb, var(--qa-brand-500) 18%, var(--qa-border));
}

.profile-token-balance-detail span,
.profile-token-balance-detail p {
    color: var(--qa-text-tertiary);
    font-size: 12px;
    line-height: 19px;
}

.profile-token-balance-detail p {
    max-width: 390px;
    margin: 0;
}

.profile-token-balance-detail strong {
    color: var(--qa-brand-600);
    font-size: clamp(20px, 1.6vw, 25px);
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.profile-ecode-hint {
    display: block;
    margin-top: 7px;
    color: var(--qa-text-tertiary);
    font-size: 12px;
    line-height: 18px;
}

.profile-center-dialog .profile-center-container {
    border-color: color-mix(in srgb, var(--qa-border) 72%, #ffffff);
    box-shadow:
        0 28px 70px rgba(28, 37, 54, 0.2),
        0 8px 24px rgba(28, 37, 54, 0.08);
}

.profile-center-dialog .profile-center-header {
    background:
        radial-gradient(circle at 14% 0%, var(--qa-brand-50), transparent 44%),
        var(--qa-bg-surface);
}

.profile-center-dialog .profile-center-content {
    padding: 24px 28px 32px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--qa-bg-canvas) 52%, transparent), transparent 120px),
        var(--qa-bg-surface);
}

.profile-token-overview {
    gap: 24px;
}

.profile-token-intro {
    min-width: 0;
    padding: 4px 0 2px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.profile-token-intro h3 {
    margin: 5px 0 0;
    color: var(--qa-text-primary);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.02em;
}

.profile-token-intro p {
    max-width: 580px;
    margin: 6px 0 0;
    color: var(--qa-text-tertiary);
    font-size: 12px;
    line-height: 19px;
}

.profile-token-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.profile-token-overview .profile-metric-card {
    position: relative;
    container-type: inline-size;
    min-width: 0;
    min-height: 108px;
    padding: 16px 18px;
    overflow: hidden;
    background: var(--qa-bg-surface);
    border-color: var(--qa-border);
    box-shadow: 0 5px 16px rgba(42, 51, 64, 0.04);
}

.profile-token-overview .profile-metric-card::after {
    display: none;
}

.profile-token-overview .profile-metric-card.is-primary {
    color: #ffffff;
    background:
        linear-gradient(145deg, var(--qa-brand-500), var(--qa-brand-600));
    border-color: transparent;
    box-shadow: var(--qa-shadow-brand);
}

.profile-token-overview .profile-metric-card.is-primary::after {
    background: rgba(255, 255, 255, 0.16);
}

.profile-token-overview .profile-metric-card span,
.profile-token-overview .profile-metric-card small {
    position: relative;
    z-index: 1;
}

.profile-token-overview .profile-metric-card strong {
    position: relative;
    z-index: 1;
    display: block;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    margin: 10px 0 7px;
    overflow: visible;
    font-size: clamp(13px, 10cqw, 25px);
    font-variant-numeric: tabular-nums;
    line-height: 1.08;
    letter-spacing: -0.04em;
    text-overflow: clip;
    white-space: nowrap;
}

.profile-token-overview .profile-metric-card small {
    color: var(--qa-text-tertiary);
    font-weight: 500;
}

.profile-token-overview .profile-metric-card.is-primary span,
.profile-token-overview .profile-metric-card.is-primary small {
    color: rgba(255, 255, 255, 0.76);
}

.profile-token-overview .profile-metric-card.is-primary strong {
    color: #ffffff;
    font-size: clamp(14px, 11cqw, 29px);
}

.profile-token-section {
    min-width: 0;
}

.profile-token-section .profile-section-heading {
    min-height: auto;
    margin-bottom: 13px;
}

.profile-token-chart {
    position: relative;
    min-height: 220px;
    height: 220px;
    padding: 30px 18px 13px;
    gap: 9px;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 44px,
            color-mix(in srgb, var(--qa-border) 72%, transparent) 45px
        ),
        var(--qa-bg-canvas);
}

.profile-chart-column {
    position: relative;
    gap: 8px;
}

.profile-chart-column strong {
    position: absolute;
    top: max(6px, calc(100% - var(--bar-height) - 32px));
    left: 50%;
    z-index: 3;
    padding: 2px 4px;
    color: var(--qa-text-secondary);
    background: var(--qa-bg-canvas);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(42, 51, 64, 0.12);
    font-size: 9px;
    font-weight: 600;
    line-height: 12px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition:
        opacity var(--qa-motion-fast),
        transform var(--qa-motion-fast);
    white-space: nowrap;
}

.profile-chart-column:hover strong,
.profile-chart-column:focus-within strong {
    opacity: 1;
    transform: translate(-50%, 0);
}

.profile-chart-column i {
    width: min(30px, 74%);
    min-height: 4px;
    background: linear-gradient(180deg, var(--qa-brand-400), var(--qa-brand-600));
    border-radius: 7px 7px 3px 3px;
    box-shadow: 0 5px 12px color-mix(in srgb, var(--qa-brand-500) 18%, transparent);
    transition:
        filter var(--qa-motion-fast),
        transform var(--qa-motion-fast);
    transform-origin: bottom;
}

.profile-chart-column:hover i {
    filter: saturate(1.15);
    transform: scaleX(1.08);
}

.profile-chart-column small {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.profile-token-table-wrap {
    overflow-x: auto;
    border-color: var(--qa-border);
    box-shadow: 0 6px 18px rgba(42, 51, 64, 0.035);
}

.profile-token-table {
    min-width: 790px;
}

.profile-token-table th,
.profile-token-table td {
    padding: 12px 14px;
    vertical-align: middle;
}

.profile-token-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--qa-text-secondary);
    font-weight: 650;
    letter-spacing: 0.02em;
}

.profile-token-table tbody tr {
    transition: background var(--qa-motion-fast);
}

.profile-token-table tbody tr:hover {
    background: var(--qa-brand-50);
}

.profile-token-table .is-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.profile-token-table .is-total {
    color: var(--qa-text-primary);
    font-weight: 700;
}

.profile-token-value.is-long {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: clamp(13px, 1.45vw, 19px);
    line-height: 1.15;
    letter-spacing: -0.045em;
}

td.profile-token-value.is-long {
    min-width: 132px;
    white-space: normal;
}

.profile-recharge-record-row .profile-token-value.is-long {
    overflow: visible;
    white-space: normal;
}

.profile-recharge-result-token {
    width: 100%;
    margin-top: 16px;
    padding: 11px 13px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    gap: 12px;
    color: var(--qa-text-tertiary);
    background: var(--qa-bg-muted);
    border-radius: 10px;
    text-align: left;
}

.profile-recharge-result-token span {
    font-size: 11px;
}

.profile-recharge-result-token strong {
    min-width: 0;
    color: var(--qa-brand-600);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.profile-recharge-result.is-processing {
    background: linear-gradient(180deg, #f7f9ff, #ffffff);
    border-color: var(--qa-brand-200);
}

.profile-recharge-result.is-failed {
    background: linear-gradient(180deg, #fff7f7, #ffffff);
    border-color: #f1c7ca;
}

.profile-recharge-result.is-failed .profile-recharge-result-mark {
    background: var(--qa-danger);
}

.profile-recharge-result.is-processing .profile-recharge-result-mark {
    animation: profile-recharge-processing 1.5s ease-in-out infinite;
}

@keyframes profile-recharge-processing {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(79, 110, 220, 0.2);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 9px rgba(79, 110, 220, 0);
        transform: scale(1.04);
    }
}

.profile-token-session {
    max-width: 150px;
    overflow: hidden;
    color: var(--qa-text-primary) !important;
    font-weight: 600;
    text-overflow: ellipsis;
}

.profile-token-question {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-token-pagination {
    min-height: 52px;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--qa-text-tertiary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.profile-token-pagination > div {
    display: flex;
    gap: 8px;
}

.profile-token-pagination button {
    min-width: 76px;
    min-height: 44px;
    padding: 8px 14px;
}

.profile-token-pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.profile-token-status {
    min-height: 108px;
    padding: 20px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    background: var(--qa-bg-canvas);
    border: 1px dashed var(--qa-border-strong);
    border-radius: var(--qa-radius-lg);
}

.profile-token-status-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--qa-brand-600);
    background: var(--qa-brand-100);
    border-radius: 13px;
    font-size: 14px;
    font-weight: 750;
}

.profile-token-status strong {
    color: var(--qa-text-primary);
    font-size: 14px;
}

.profile-token-status p {
    margin: 5px 0 0;
    color: var(--qa-text-tertiary);
    font-size: 12px;
    line-height: 18px;
}

.profile-token-status.is-error {
    background: color-mix(in srgb, var(--qa-danger) 5%, var(--qa-bg-surface));
    border-color: color-mix(in srgb, var(--qa-danger) 28%, var(--qa-border));
}

.profile-token-status.is-error .profile-token-status-mark {
    color: var(--qa-danger);
    background: color-mix(in srgb, var(--qa-danger) 10%, var(--qa-bg-surface));
}

.profile-token-empty-icon {
    font-variant-numeric: tabular-nums;
}

.profile-token-skeleton {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--qa-bg-muted);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
}

.profile-token-skeleton::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(
        100deg,
        transparent 20%,
        rgba(255, 255, 255, 0.72) 48%,
        transparent 76%
    );
    animation: profile-token-shimmer 1.35s ease-in-out infinite;
    transform: translateX(-100%);
}

.profile-token-skeleton-card {
    min-height: 116px;
}

.profile-token-skeleton-chart {
    min-height: 220px;
}

.profile-token-skeleton-table {
    min-height: 184px;
}

@keyframes profile-token-shimmer {
    to {
        transform: translateX(100%);
    }
}

@media (max-width: 720px) {
    .profile-center-dialog .profile-center-content {
        padding: 22px;
    }

    .profile-token-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-token-chart {
        gap: 5px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .profile-chart-column strong {
        display: none;
    }
}

@media (max-width: 480px) {
    .profile-center-dialog {
        padding: 0;
        align-items: flex-end;
    }

    .profile-center-dialog .profile-center-container {
        height: 94dvh;
        border-radius: 20px 20px 0 0;
    }

    .profile-center-dialog .profile-center-header {
        min-height: 72px;
        padding: 16px 18px;
    }

    .profile-center-dialog .profile-center-content {
        padding: 18px 16px 28px;
    }

    .profile-token-overview {
        gap: 20px;
    }

    .profile-token-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .profile-token-intro h3 {
        font-size: 21px;
        line-height: 28px;
    }

    .profile-token-metrics {
        grid-template-columns: 1fr;
    }

    .profile-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-token-overview .profile-metric-card {
        min-height: 102px;
    }

    .profile-token-balance-detail {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .profile-token-balance-detail .profile-token-balance-stats {
        grid-template-columns: 1fr;
    }

    .profile-token-balance-detail .profile-token-balance-stat + .profile-token-balance-stat {
        padding-top: 12px;
        padding-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--qa-brand-500) 18%, var(--qa-border));
        border-left: 0;
    }

    .profile-token-chart {
        min-width: 0;
        min-height: 190px;
        height: 190px;
        padding-top: 24px;
    }

    .profile-chart-column small {
        font-size: 8px;
    }

    .profile-token-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-token-pagination > div,
    .profile-token-pagination button {
        flex: 1 1 0;
    }

    .profile-token-status {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .profile-token-status button {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-token-skeleton::after {
        animation: none;
    }

    .profile-chart-column i,
    .profile-chart-column strong,
    .profile-token-table tbody tr,
    .profile-recharge-records-table tbody tr {
        transition: none;
    }

    .profile-recharge-result.is-processing .profile-recharge-result-mark {
        animation: none;
    }
}

.profile-token-overview .profile-metric-card.is-balance-increasing {
    animation: profile-token-balance-pulse 1100ms cubic-bezier(.2, .8, .2, 1);
}

.profile-token-increase-badge {
    animation: profile-token-increase-rise 1100ms ease-out both;
}

.profile-recharge-search-result {
    display: flex;
}

.profile-order-details:focus-visible {
    outline: 2px solid var(--qa-brand-500);
    outline-offset: 3px;
}

@keyframes profile-token-balance-pulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.018); }
    100% { transform: scale(1); }
}

@keyframes profile-token-increase-rise {
    0% { opacity: 0; transform: translateY(8px); }
    25%, 70% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-9px); }
}

/* Personal-center form controls: compact, calm surfaces without expanding focus rings. */
#profileCenterDialog .profile-recharge-records-search {
    height: 38px;
    background: var(--qa-bg-muted);
    border: 1px solid transparent;
    box-shadow: none;
}

#profileCenterDialog .profile-recharge-records-search:focus-within {
    background: var(--qa-bg-surface);
    border-color: color-mix(in srgb, var(--qa-brand-500) 28%, transparent);
    box-shadow: none;
}

#profileCenterDialog .profile-recharge-records-search input {
    height: 36px;
    min-height: 36px;
    background: transparent;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

#profileCenterDialog .profile-ecode-input-row input,
.contact-binding-dialog .contact-code-entry input,
.contact-binding-dialog .contact-new-entry input {
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
    background: var(--qa-bg-muted, #f5f7fa);
    border: 1px solid transparent;
    border-radius: 9px;
    outline: none !important;
    box-shadow: none !important;
    transition:
        background-color var(--qa-motion-fast, 160ms ease),
        border-color var(--qa-motion-fast, 160ms ease);
}

#profileCenterDialog .profile-ecode-input-row input:focus,
#profileCenterDialog .profile-ecode-input-row input:focus-visible,
.contact-binding-dialog .contact-code-entry input:focus,
.contact-binding-dialog .contact-code-entry input:focus-visible,
.contact-binding-dialog .contact-new-entry input:focus,
.contact-binding-dialog .contact-new-entry input:focus-visible {
    background: var(--qa-bg-surface, #fff);
    border-color: color-mix(in srgb, var(--qa-brand-500, #4f6edc) 28%, transparent);
    outline: none !important;
    outline-offset: 0;
    box-shadow: none !important;
}

#profileCenterDialog .profile-ecode-input-row input[aria-invalid="true"],
.contact-binding-dialog input[aria-invalid="true"] {
    background: color-mix(in srgb, var(--qa-danger, #dc424c) 4%, var(--qa-bg-surface, #fff));
    border-color: color-mix(in srgb, var(--qa-danger, #dc424c) 36%, transparent);
}
/* Account center: compact, readable lists shared by orders and API keys. */
.profile-recharge-record-row.is-clickable { cursor: pointer; }
.profile-recharge-record-row.is-clickable:focus-visible { outline: 2px solid var(--qa-brand-500); outline-offset: -2px; }
.profile-api-keys-panel .profile-token-intro { margin-bottom: 18px; }
.profile-api-key-list { overflow-x: auto; border: 1px solid var(--qa-border); border-radius: 14px; background: var(--qa-bg-surface); }
.profile-api-key-list-head,
.profile-api-key-row { min-width: 820px; display: grid; grid-template-columns: 72px minmax(145px, 1fr) minmax(135px, 1fr) minmax(120px, .85fr) 145px 54px; gap: 14px; align-items: center; }
.profile-api-key-list-head { padding: 12px 16px; color: var(--qa-text-tertiary); background: var(--qa-bg-muted); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.profile-api-key-list-head > :last-child { text-align: center; }
.profile-api-key-row { min-height: 72px; padding: 14px 16px; border-top: 1px solid var(--qa-border); transition: background var(--qa-motion-fast); }
.profile-api-key-row > .profile-link-btn { justify-self: center; }
.profile-api-key-row:hover { background: var(--qa-brand-50); }
.profile-api-key-id { overflow: hidden; color: var(--qa-text-primary); font-size: 13px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.profile-api-key-token { min-width: 0; display: flex; align-items: center; gap: 8px; }
.profile-api-key-token code { overflow: hidden; color: var(--qa-text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.profile-api-key-copy { flex: 0 0 auto; padding: 4px 7px; color: var(--qa-brand-700); background: var(--qa-brand-50); border: 0; border-radius: 7px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.profile-api-key-copy:hover { background: var(--qa-brand-100); }
.profile-api-key-description { overflow: hidden; margin: 0; color: var(--qa-text-primary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.profile-api-key-owner { overflow: hidden; color: var(--qa-text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.profile-api-key-row time { color: var(--qa-text-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.profile-api-key-empty { min-height: 190px; display: grid; place-content: center; gap: 7px; padding: 20px; color: var(--qa-text-tertiary); text-align: center; }
.profile-api-key-empty strong { color: var(--qa-text-primary); font-size: 14px; }

/* API key and order details use focused dialogs instead of toast-only feedback. */
.profile-api-key-modal,
.profile-order-modal { position: fixed; inset: 0; z-index: 15000; display: grid; place-items: center; padding: 20px; background: rgba(20, 29, 49, .46); backdrop-filter: blur(6px); }
/* An order detail can be opened above any active profile flow, including onboarding. */
.profile-order-modal { z-index: 30000; }

/* Keep the populated mobile drawer inside the viewport despite legacy rules. */
@media (max-width: 480px) {
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    .sidebar,
    .container.sidebar-collapsed .sidebar,
    .container .sidebar.is-collapsed,
    .container.sidebar-open .sidebar,
    .sidebar.is-open,
    .sidebar.is-collapsed.is-open,
    .container.sidebar-collapsed .sidebar {
        width: min(84vw, 320px) !important;
        max-width: min(84vw, 320px) !important;
        min-width: min(84vw, 320px) !important;
        overflow: hidden !important;
    }
    .sidebar .sidebar-history-panel,
    .sidebar .sidebar-history-list,
    .sidebar .sidebar-history-item,
    .sidebar .sidebar-history-open,
    .sidebar .sidebar-function-center,
    .sidebar .sidebar-action-btn { min-width: 0 !important; max-width: 100% !important; }
    .sidebar .sidebar-history-header h2 { font-size: 14px !important; line-height: 20px !important; }
    .sidebar .sidebar-history-search { min-height: 42px !important; font-size: 14px !important; }
    .sidebar .sidebar-history-open { min-height: 42px !important; padding: 9px 34px 9px 10px !important; }
    .sidebar .sidebar-history-question { font-size: 13px !important; line-height: 20px !important; }
    .sidebar .sidebar-history-menu-toggle { font-size: 16px !important; }
    .sidebar .sidebar-action-btn { min-height: 42px !important; font-size: 13px !important; }
}

/* Must stay last: mobile navigation is a full-screen drawer, never a
 * compressed desktop column. */
@media (max-width: 768px) {
    html,
    body,
    .container,
    .container.sidebar-collapsed,
    .main-content,
    .content-area {
        width: 100vw;
        min-width: 0;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .container.sidebar-open > .sidebar,
    .container.sidebar-open.sidebar-collapsed > .sidebar,
    .container > .sidebar.is-open {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        transform: translateX(0) !important;
    }

    .sidebar-toggle-btn,
    .container.sidebar-open .sidebar-toggle-btn,
    .container.sidebar-open.sidebar-collapsed .sidebar-toggle-btn {
        top: calc(12px + env(safe-area-inset-top));
        right: 12px;
        left: auto;
        z-index: 1300;
    }

    .sidebar {
        padding-top: env(safe-area-inset-top);
    }

    .logo-section {
        padding-right: 68px;
    }

    .quick-actions-sidebar {
        padding-bottom: 16px;
    }
}

/* Answer typography contrast guard
 * Keep this last: Markdown semantics must always follow the active workbench
 * palette instead of legacy color declarations. */
.ai-display .result-text,
.ai-display .result-text-content,
.bicbot-message-assistant .bicbot-message-body {
    color: var(--qa-text-primary);
}

.ai-display .result-text :is(h1, h2, h3, h4, h5, h6, strong, b),
.ai-display .result-text-content :is(h1, h2, h3, h4, h5, h6, strong, b),
.bicbot-message-assistant .bicbot-message-body :is(h1, h2, h3, h4, h5, h6, strong, b) {
    color: var(--qa-text-primary);
}

.ai-display .result-text :is(p, li, dd, dt),
.ai-display .result-text-content :is(p, li, dd, dt),
.bicbot-message-assistant .bicbot-message-body :is(p, li, dd, dt) {
    color: inherit;
}

.ai-display .result-text :is(em, small, blockquote),
.ai-display .result-text-content :is(em, small, blockquote),
.bicbot-message-assistant .bicbot-message-body :is(em, small, blockquote) {
    color: var(--qa-text-secondary);
}

.ai-display .result-text :is(ul, ol) > li::marker,
.ai-display .result-text-content :is(ul, ol) > li::marker,
.bicbot-message-assistant .bicbot-message-body :is(ul, ol) > li::marker {
    color: var(--qa-text-tertiary);
}

.ai-display .result-text a,
.ai-display .result-text-content a,
.bicbot-message-assistant .bicbot-message-body a {
    color: var(--qa-brand-600);
    text-decoration-color: color-mix(in srgb, var(--qa-brand-500) 48%, transparent);
}

.ai-display .result-text :not(pre) > code,
.ai-display .result-text-content :not(pre) > code,
.bicbot-message-assistant .bicbot-message-body :not(pre) > code {
    color: var(--qa-brand-600);
    background: var(--qa-bg-muted);
    border-color: var(--qa-border-strong);
}

.ai-display .result-text blockquote,
.ai-display .result-text-content blockquote,
.bicbot-message-assistant .bicbot-message-body blockquote {
    background: color-mix(in srgb, var(--qa-brand-50) 54%, transparent);
    border-left-color: var(--qa-brand-400);
}

/* Final cascade guard for theme-sensitive assets and late feature styles. */
@media (prefers-color-scheme: dark) {
    .logo-icon {
        content: url('../icons/logo_dark.png') !important;
        opacity: 1;
    }

    .profile-invite-link-box button,
    .profile-invite-code strong,
    .profile-invite-steps span {
        color: var(--qa-brand-600);
        background: var(--qa-brand-50);
        border-color: var(--qa-brand-200);
    }

    .profile-invite-qr-frame,
    .profile-center-tabs {
        background: var(--qa-bg-surface) !important;
        border-color: var(--qa-border);
    }

    @media (max-width: 600px) {
        .content-area > .token-registration-banner {
            background:
                radial-gradient(circle at 0% 0%, rgba(119, 140, 255, .18), transparent 44%),
                linear-gradient(108deg, #111a2b 0%, #17233c 55%, #101827 100%);
            border-bottom-color: var(--qa-border);
        }

        .content-area > .token-registration-banner .token-banner-mobile-copy {
            color: var(--qa-text-primary);
        }
    }
}

/* Last-resort mobile drawer guard.  This stylesheet includes older desktop
 * sidebar declarations; prevent them from re-expanding populated histories. */
@media (max-width: 480px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .sidebar,
    .container.sidebar-collapsed .sidebar,
    .container .sidebar.is-collapsed,
    .container.sidebar-open .sidebar,
    .sidebar.is-open,
    .sidebar.is-collapsed.is-open,
    .container.sidebar-collapsed .sidebar.is-open {
        width: min(84vw, 320px) !important;
        max-width: min(84vw, 320px) !important;
        min-width: min(84vw, 320px) !important;
        font-size: 14px !important;
        overflow: hidden !important;
    }

    .sidebar .sidebar-history-panel,
    .sidebar .sidebar-history-list,
    .sidebar .sidebar-history-item,
    .sidebar .sidebar-history-open,
    .sidebar .sidebar-function-center,
    .sidebar .sidebar-action-btn {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .sidebar .sidebar-history-header h2 { font-size: 14px !important; line-height: 20px !important; }
    .sidebar .sidebar-history-search { min-height: 42px !important; font-size: 14px !important; }
    .sidebar .sidebar-history-open { min-height: 42px !important; padding: 9px 34px 9px 10px !important; }
    .sidebar .sidebar-history-question { font-size: 13px !important; line-height: 20px !important; }
    .sidebar .sidebar-history-menu-toggle { font-size: 16px !important; }
    .sidebar .sidebar-action-btn { min-height: 42px !important; font-size: 13px !important; }
}

/* Mobile layout finalization: keep the three app surfaces independent from
 * legacy desktop rules that appear earlier in this stylesheet. */
@media (max-width: 480px) {
    /* Drawer: a deliberate mobile panel, with room for the edge close control. */
    .sidebar,
    .container.sidebar-collapsed .sidebar,
    .container .sidebar.is-collapsed,
    .container.sidebar-open .sidebar,
    .sidebar.is-open,
    .sidebar.is-collapsed.is-open,
    .container.sidebar-collapsed .sidebar.is-open {
        width: min(88vw, 336px);
        max-width: min(88vw, 336px);
        min-width: min(88vw, 336px);
    }

    .sidebar {
        background: var(--qa-bg-surface, #fff);
        box-shadow: 20px 0 48px rgba(28, 38, 64, .22);
    }

    .logo-section {
        padding: 14px 20px 12px;
    }

    .logo-content {
        padding-top: 8px;
    }

    .quick-actions-sidebar {
        padding: 12px 0;
    }

    .sidebar-toggle-btn,
    .container.sidebar-open .sidebar-toggle-btn,
    .container.sidebar-open.sidebar-collapsed .sidebar-toggle-btn {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .container.sidebar-open .sidebar-toggle-btn,
    .container.sidebar-open.sidebar-collapsed .sidebar-toggle-btn {
        left: min(calc(min(88vw, 336px) - 52px), calc(100vw - 52px));
    }

    /* Composer and supporting copy must stay in separate flow regions. */
    .content-area {
        min-height: 0;
        padding: 12px 12px 0;
    }

    .search-section {
        padding: 10px 4px 14px;
    }

    .input-center-wrapper,
    .content-area.has-result .input-center-wrapper {
        width: 100%;
        margin: auto auto 0;
        padding-top: 24px;
    }

    .input-container {
        padding: 12px;
        border-radius: 18px;
    }

    .question-input {
        min-height: 112px;
        padding: 14px 14px 12px;
        font-size: 16px;
        line-height: 1.55;
    }

    .composer-toolbar {
        min-height: 48px;
        margin-top: 4px;
        padding: 8px 2px 0;
    }

    .composer-tool-btn,
    .ask-button {
        width: 40px;
        height: 40px;
        min-width: 40px;
        flex-basis: 40px;
        border-radius: 12px;
    }

    .footer {
        position: static;
        z-index: auto;
        min-height: 0;
        margin: 0 -12px;
        padding: 10px 18px max(14px, env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--qa-bg-canvas, #f7f8fb) 92%, #fff);
        border-top: 1px solid var(--qa-border, #e5e9f2);
    }

    .footer .input-subtitle,
    .input-subtitle {
        max-width: 100%;
        padding: 0;
        color: var(--qa-text-tertiary, #7b879d);
        font-size: 12px;
        line-height: 1.55;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    /* Profile center becomes a bottom sheet with a compact, touch-friendly tab rail. */
    .profile-center-dialog {
        padding: 0;
        align-items: flex-end;
    }

    .profile-center-dialog .profile-center-container {
        width: 100%;
        height: min(92dvh, 760px);
        max-height: min(92dvh, 760px);
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -12px 38px rgba(24, 34, 57, .2);
    }

    .profile-center-dialog .profile-center-header {
        min-height: 76px;
        padding: 14px 18px;
    }

    .profile-center-eyebrow {
        font-size: 11px;
        letter-spacing: .12em;
    }

    .profile-center-dialog .profile-center-header h3 {
        margin-top: 2px;
        font-size: 22px;
        line-height: 1.2;
    }

    .profile-center-tabs {
        gap: 6px;
        padding: 9px 12px;
        scroll-padding-inline: 12px;
        background: #fff;
    }

    .profile-tab-btn {
        min-height: 40px;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 12px;
    }

    .profile-tab-glyph,
    .profile-tab-glyph svg {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
    }

    .profile-center-content {
        height: calc(min(92dvh, 760px) - 128px);
        padding: 18px 14px calc(24px + env(safe-area-inset-bottom));
        overscroll-behavior: contain;
    }

    .profile-token-intro h3,
    .profile-recharge-records-intro h3,
    .profile-recharge-intro h3 {
        font-size: 21px;
        line-height: 1.3;
    }

    .profile-token-intro p,
    .profile-recharge-records-intro p,
    .profile-recharge-intro p {
        font-size: 13px;
        line-height: 1.6;
    }
}

/* API Key management is temporarily unavailable in every account navigation surface. */
#profileTabApiKeys,
[data-account-profile-tab="apiKeys"] {
    display: none !important;
}

/* Recharge-record search: give the primary lookup field a clear visual affordance. */
#profileCenterDialog .profile-recharge-records-search {
    height: 44px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff;
    border-color: #cbd3e4;
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(30, 41, 59, .04);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

#profileCenterDialog .profile-recharge-records-search:hover {
    border-color: color-mix(in srgb, var(--qa-brand-500, #4f6edc) 55%, #cbd3e4);
}

#profileCenterDialog .profile-recharge-records-search:focus-within {
    background: #fff;
    border-color: var(--qa-brand-500, #4f6edc);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--qa-brand-500, #4f6edc) 15%, transparent);
}

#profileCenterDialog .profile-recharge-records-search-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-left: 14px;
    color: var(--qa-text-secondary, #667085);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
    transition: color 160ms ease;
}

#profileCenterDialog .profile-recharge-records-search:focus-within .profile-recharge-records-search-icon {
    color: var(--qa-brand-600, #4862dc);
}

#profileCenterDialog .profile-recharge-records-search input {
    height: 42px;
    min-height: 42px;
    padding: 0 13px 1px 10px;
    color: var(--qa-text-primary, #263047);
    font-size: 13px;
}

#profileCenterDialog .profile-recharge-records-search input::placeholder {
    color: #8a94a8;
    opacity: 1;
}

#profileCenterDialog .profile-recharge-records-search .profile-secondary-btn {
    min-width: 82px;
    min-height: 42px;
    padding: 0 18px 1px;
    color: #fff;
    background: var(--qa-brand-500, #4f6edc);
    border: 0;
    border-left: 1px solid color-mix(in srgb, var(--qa-brand-700, #3e55c6) 45%, transparent);
    font-weight: 700;
}

#profileCenterDialog .profile-recharge-records-search .profile-secondary-btn:hover {
    background: var(--qa-brand-600, #4862dc);
}

#profileCenterDialog .profile-recharge-records-search .profile-secondary-btn:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid #fff;
    outline-offset: -4px;
}
.profile-api-key-dialog,
.profile-order-dialog { position: relative; width: min(500px, 100%); padding: 30px; color: var(--qa-text-primary); background: var(--qa-bg-surface); border: 1px solid rgba(255, 255, 255, .72); border-radius: 20px; box-shadow: 0 26px 70px rgba(20, 29, 49, .25); }
.profile-api-key-dialog h3,
.profile-order-dialog h3 { margin: 5px 0 7px; font-size: 24px; letter-spacing: -.025em; }
.profile-api-key-dialog-copy { margin: 0; color: var(--qa-text-secondary); font-size: 13px; line-height: 1.65; }
.profile-api-key-close,
.profile-order-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; color: var(--qa-text-secondary); background: transparent; border: 0; border-radius: 9px; font: inherit; font-size: 24px; cursor: pointer; }
.profile-api-key-close:hover,
.profile-order-close:hover { color: var(--qa-text-primary); background: var(--qa-bg-muted); }
.profile-api-key-form { display: grid; gap: 15px; margin-top: 22px; }
.profile-api-key-dialog label { display: grid; grid-template-columns: 1fr auto; gap: 7px; color: var(--qa-text-primary); font-size: 13px; font-weight: 700; }
.profile-api-key-dialog label span { color: var(--qa-text-tertiary); font-size: 11px; font-weight: 500; }
.profile-api-key-dialog input,
.profile-api-key-dialog textarea { grid-column: 1 / -1; width: 100%; padding: 0 12px; color: var(--qa-text-primary); background: var(--qa-bg-muted); border: 1px solid transparent; border-radius: 10px; font: inherit; }
.profile-api-key-dialog input { height: 44px; }
.profile-api-key-dialog textarea { min-height: 92px; padding-top: 11px; padding-bottom: 11px; line-height: 1.55; resize: vertical; }
.profile-api-key-owner-field output { grid-column: 1 / -1; min-height: 44px; display: flex; align-items: center; padding: 0 12px; color: var(--qa-text-secondary); background: var(--qa-bg-muted); border: 1px solid var(--qa-border); border-radius: 10px; font-size: 13px; font-weight: 500; }
.profile-api-key-dialog input:focus,
.profile-api-key-dialog textarea:focus { outline: 0; background: var(--qa-bg-surface); border-color: color-mix(in srgb, var(--qa-brand-500) 55%, var(--qa-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--qa-brand-500) 14%, transparent); }
.profile-api-key-notice,
.profile-api-key-error { margin: 16px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 18px; }
.profile-api-key-notice { color: #8b5e00; background: #fff8e9; }
.profile-api-key-error { color: var(--qa-danger); background: color-mix(in srgb, var(--qa-danger) 8%, var(--qa-bg-surface)); }
.profile-api-key-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 25px; }
.profile-api-key-actions [data-close] { min-height: 40px; padding: 8px 15px; color: var(--qa-text-secondary); background: var(--qa-bg-surface); border: 1px solid var(--qa-border-strong); border-radius: 10px; font: inherit; cursor: pointer; }
.profile-api-key-actions .profile-primary-btn { min-height: 40px; }
.profile-api-key-actions .profile-danger-btn { min-height: 40px; padding: 8px 15px; color: #fff; background: var(--qa-danger, #dc424c); border: 1px solid transparent; border-radius: 10px; box-shadow: 0 7px 15px color-mix(in srgb, var(--qa-danger, #dc424c) 23%, transparent); font: inherit; font-weight: 700; cursor: pointer; }
.profile-api-key-actions .profile-danger-btn:hover { filter: brightness(.96); }
.profile-api-key-actions .profile-danger-btn:disabled { cursor: wait; opacity: .7; }
.profile-api-key-limit-dialog { width: min(430px, 100%); }
.profile-api-key-revoke-target { display: grid; gap: 6px; margin-top: 20px; padding: 12px 14px; background: color-mix(in srgb, var(--qa-danger, #dc424c) 5%, var(--qa-bg-surface)); border: 1px solid color-mix(in srgb, var(--qa-danger, #dc424c) 18%, var(--qa-border)); border-radius: 12px; }
.profile-api-key-revoke-target span { color: var(--qa-text-tertiary); font-size: 11px; font-weight: 700; }
.profile-api-key-revoke-target code { color: var(--qa-text-primary); font-size: 13px; }
.profile-api-key-secret { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 22px; padding: 10px; background: var(--qa-bg-muted); border: 1px solid var(--qa-border); border-radius: 12px; }
.profile-api-key-secret code { overflow: auto; padding: 4px 5px; color: var(--qa-text-primary); font-size: 12px; white-space: nowrap; }
.profile-api-key-secret button { min-height: 34px; padding: 6px 11px; color: var(--qa-brand-700); background: var(--qa-brand-50); border: 0; border-radius: 8px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.profile-order-dialog { width: min(520px, 100%); }
.profile-order-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 21px 0; overflow: hidden; background: var(--qa-border); border: 1px solid var(--qa-border); border-radius: 12px; }
.profile-order-detail-grid > div { min-width: 0; min-height: 68px; display: grid; align-content: center; gap: 5px; padding: 11px 13px; background: var(--qa-bg-surface); }
.profile-order-detail-grid span { color: var(--qa-text-tertiary); font-size: 10px; }
.profile-order-detail-grid strong { overflow: hidden; color: var(--qa-text-primary); font-size: 12px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.profile-order-dialog > .profile-primary-btn { width: 100%; }

/* The campaign remains edge-to-edge and keeps the supplied artwork's native ratio. */
.content-area > .token-registration-banner { width: calc(100% + 48px); height: auto; min-height: 80px; max-height: 144px; aspect-ratio: 5016 / 360; flex: 0 0 auto; margin: -24px -24px 12px; border: 0; border-radius: 0; }
.token-banner-mobile-copy { display: none; }

@media (max-width: 760px) {
    .content-area > .token-registration-banner { width: calc(100% + 32px); margin: -16px -16px 12px; }
    .profile-api-key-list-head { display: none; }
    .profile-api-key-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
    .profile-api-key-scopes { grid-column: 1 / 2; }
    .profile-api-key-row time { grid-column: 1 / 2; }
    .profile-api-key-row .profile-link-btn { grid-column: 2; grid-row: 1 / span 3; }
}

@media (max-width: 480px) {
    .content-area > .token-registration-banner { width: calc(100% + 24px); margin: -12px -12px 10px; }
    .profile-api-key-dialog,
    .profile-order-dialog { padding: 24px 20px; border-radius: 17px; }
    .profile-order-detail-grid { grid-template-columns: 1fr; }
}

/* The image is never stretched when the sidebar changes the workspace width. */
.content-area > .token-registration-banner img {
    object-fit: contain;
}

/* The registration offer is for guests only; the explicit rule overrides its flex layout. */
.token-registration-banner[hidden] {
    display: none;
}

/* The sidebar control tracks the banner instead of leaving a gap after dismissal. */
.main-content .sidebar-toggle-btn {
    top: 18px;
    transition: top .22s cubic-bezier(.2, .8, .2, 1), background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.main-content:has(.token-registration-banner:not([hidden])) .sidebar-toggle-btn {
    top: calc(clamp(80px, 7.18vw, 144px) + 18px);
}

/* Phone polish: keep the working surface legible instead of shrinking desktop UI. */
@media (max-width: 600px) {
    .content-area > .token-registration-banner {
        min-height: 76px;
        height: 76px;
        max-height: none;
        aspect-ratio: auto;
        flex-basis: 76px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 42px 10px 16px;
        background:
            radial-gradient(circle at 0% 0%, rgba(111, 96, 255, .18), transparent 42%),
            linear-gradient(108deg, #f4f5ff 0%, #eef2ff 52%, #f8f9ff 100%);
        border-bottom: 1px solid rgba(91, 92, 238, .12);
    }

    .content-area > .token-registration-banner img {
        display: none;
    }

    .content-area > .token-registration-banner .token-banner-mobile-copy {
        display: block;
        min-width: 0;
        flex: 1 1 auto;
        color: #27304d;
        font-size: 13px;
        font-weight: 750;
        line-height: 1.4;
    }

    .content-area > .token-registration-banner .token-banner-cta {
        position: static;
        width: auto;
        height: 38px;
        flex: 0 0 auto;
        padding: 0 12px;
        color: #fff;
        background: linear-gradient(135deg, #5b61ee, #4269e8);
        border-radius: 10px;
        box-shadow: 0 7px 16px rgba(77, 91, 226, .22);
        font: inherit;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

    .content-area > .token-registration-banner .token-banner-close {
        top: 50%;
        right: 8px;
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        padding: 0;
        color: var(--qa-text-secondary, #667085);
        background: transparent;
        border-radius: 8px;
        font-size: 20px;
        transform: translateY(-50%);
    }

    .main-content:has(.token-registration-banner:not([hidden])) .sidebar-toggle-btn {
        top: 88px;
    }

    .result-section,
    .input-center-wrapper,
    .content-area.has-result .input-center-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .result-section {
        padding-right: 12px;
        padding-left: 12px;
    }

    .question-display,
    .result-text,
    .input-container {
        border-radius: 14px;
    }

    .profile-api-key-modal,
    .profile-order-modal {
        align-items: flex-end;
        padding: 12px;
    }

    .profile-api-key-dialog,
    .profile-order-dialog {
        width: 100%;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .profile-api-key-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .profile-api-key-actions > button,
    .profile-api-key-actions .profile-primary-btn,
    .profile-api-key-actions .profile-danger-btn {
        width: 100%;
        min-height: 44px;
    }

    :is(.table-container, .awr-history-table-container, .toolset-manager-table-wrap, .profile-token-table-wrap) {
        max-width: 100%;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 390px) {
    .content-area > .token-registration-banner {
        gap: 8px;
        padding-left: 12px;
    }

    .content-area > .token-registration-banner .token-banner-mobile-copy {
        font-size: 12px;
    }

    .content-area > .token-registration-banner .token-banner-cta {
        height: 36px;
        padding: 0 9px;
        font-size: 11px;
    }

    .content-area > .token-registration-banner .token-banner-cta span {
        display: none;
    }
}

/* Browser dark theme
 * Keep this block after the workbench overrides so the selected logo and all
 * semantic surface tokens stay in the same theme. */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --qa-brand-50: #172344;
        --qa-brand-100: #1d2d59;
        --qa-brand-200: #324b8f;
        --qa-brand-400: #8fa2ff;
        --qa-brand-500: #778cff;
        --qa-brand-600: #9aabff;
        --qa-brand-700: #b5c0ff;
        --qa-bg-canvas: #0b1120;
        --qa-bg-surface: #111a2b;
        --qa-bg-muted: #182337;
        --qa-text-primary: #edf2fa;
        --qa-text-secondary: #bac5d6;
        --qa-text-tertiary: #8f9db2;
        --qa-border: #223149;
        --qa-border-strong: #33445f;
        --qa-danger: #ff8192;
        --qa-success: #53d5a4;
        --qa-shadow-card: 0 12px 30px rgba(0, 0, 0, .24);
        --qa-shadow-pop: 0 24px 64px rgba(0, 0, 0, .5);
        --qa-shadow-brand: 0 8px 20px rgba(74, 99, 232, .3);
        --qa-focus-ring: 0 0 0 3px rgba(119, 140, 255, .24);
    }

    html,
    body,
    .container,
    .main-content,
    .content-area,
    .search-section {
        background-color: var(--qa-bg-canvas);
        color: var(--qa-text-primary);
    }

    .sidebar {
        background: var(--qa-bg-surface);
        border-right-color: var(--qa-border);
        box-shadow: 5px 0 26px rgba(0, 0, 0, .2);
    }

    .logo-section {
        border-bottom-color: var(--qa-border);
    }

    .logo-icon {
        content: url('../icons/logo_dark.png');
        filter: none;
        opacity: 1;
    }

    .sidebar-toggle-btn,
    .language-select,
    .settings-button,
    .input-container {
        color: var(--qa-text-secondary);
        background: var(--qa-bg-surface);
        border-color: var(--qa-border-strong);
    }

    .sidebar-toggle-btn {
        box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    }

    .sidebar-history-search,
    .agent-mode-option,
    .character-count,
    .composer-attachment-item,
    .attachment-preview-item {
        color: var(--qa-text-secondary);
        background: var(--qa-bg-muted);
        border-color: var(--qa-border);
    }

    .sidebar-history-open:hover,
    .sidebar-history-item.is-top .sidebar-history-open,
    .sidebar-history-item.is-active .sidebar-history-open,
    .sidebar-function-center .sidebar-action-btn:hover {
        color: var(--qa-text-primary);
        background: var(--qa-brand-50);
        border-color: var(--qa-brand-200);
    }

    .sidebar-function-center .sidebar-action-btn,
    .sidebar-function-center .help-action-btn,
    .sidebar-function-center .announcement-btn {
        color: var(--qa-text-secondary);
        background: var(--qa-bg-muted);
        border-color: var(--qa-border);
    }

    .question-input,
    .question-input:focus,
    .question-input:focus-visible {
        color: var(--qa-text-primary);
        background: transparent;
    }

    .question-display {
        color: #e9eeff;
        background: #1b2b55;
        border-color: #314b89;
    }

    .ai-display,
    .result-text,
    .result-title,
    .input-title {
        color: var(--qa-text-primary);
    }

    .input-subtitle,
    .question-input::placeholder,
    .footer {
        color: var(--qa-text-tertiary);
    }

    .composer-advanced,
    .composer-toolbar,
    .sidebar-function-center,
    .sidebar-account-shell {
        border-color: var(--qa-border);
    }

    .knowledge-base-select,
    .parameter-rule-select,
    .model-select,
    .language-select option {
        color: var(--qa-text-secondary);
        background-color: var(--qa-bg-muted);
    }

    .sidebar-history-menu,
    .dialog-container,
    .profile-center-container,
    .profile-center-header,
    .profile-center-tabs,
    .profile-center-footer {
        color: var(--qa-text-primary);
        background: var(--qa-bg-surface) !important;
        border-color: var(--qa-border) !important;
    }

    .profile-center-layout,
    .profile-center-content,
    .profile-center-dialog .profile-center-content {
        color: var(--qa-text-primary);
        background: var(--qa-bg-canvas) !important;
    }

    .profile-tab-btn,
    .profile-detail-list,
    .profile-setting-card,
    .token-summary-card,
    .profile-invite-share-zone,
    .profile-invite-link-box,
    .profile-order-detail-grid > div {
        color: var(--qa-text-primary);
        background: var(--qa-bg-surface);
        border-color: var(--qa-border);
    }

    .profile-secondary-btn,
    .profile-invite-link-box button,
    .profile-invite-code strong,
    .profile-invite-steps span {
        color: var(--qa-brand-600);
        background: var(--qa-brand-50);
        border-color: var(--qa-brand-200);
    }

    .profile-danger-btn {
        color: var(--qa-danger);
        background: rgba(255, 87, 107, .09);
        border-color: rgba(255, 129, 146, .28);
    }

    .content-area > .token-registration-banner {
        background: #10192a;
        border-bottom-color: var(--qa-border);
    }

    ::selection {
        color: #ffffff;
        background: rgba(119, 140, 255, .58);
    }
}

/* Phone sidebar: a scrollable drawer keeps controls reachable without
 * shrinking the conversation workspace behind it. */
@media (max-width: 768px) {
    .container,
    .container.sidebar-collapsed {
        display: block;
    }

    .container > .sidebar,
    .container.sidebar-collapsed > .sidebar {
        width: min(320px, calc(100vw - 48px));
        max-width: min(320px, calc(100vw - 48px));
        min-width: min(320px, calc(100vw - 48px));
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform var(--qa-sidebar-motion);
    }

    .container.sidebar-open > .sidebar,
    .container.sidebar-open.sidebar-collapsed > .sidebar,
    .container > .sidebar.is-open {
        transform: translateX(0);
        pointer-events: auto;
    }

    .container.sidebar-open .sidebar-toggle-btn,
    .container.sidebar-open.sidebar-collapsed .sidebar-toggle-btn {
        left: min(calc(min(320px, calc(100vw - 48px)) + 8px), calc(100vw - 52px));
    }

    .main-content {
        width: 100%;
        max-width: 100%;
        min-height: 100dvh;
        flex-basis: auto;
    }

    .quick-actions-sidebar {
        min-height: 0;
        padding: 12px;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .action-buttons-vertical {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .sidebar-history-panel {
        min-height: 200px;
    }

    .sidebar-function-center {
        gap: 8px;
        padding: 12px 0 4px;
    }

    .sidebar-function-center .sidebar-action-btn {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 14px;
    }

    .sidebar-function-center .action-text {
        display: inline;
    }
}

/* Invitation flow: a quiet, utility-first reward page within profile center. */
.sidebar-account-invite-entry {
    color: var(--qa-brand-700, #4658d8);
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
}

.sidebar-account-invite-badge {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 4px 8px;
    color: var(--qa-brand-700, #4658d8);
    background: var(--qa-brand-50, #eef1ff);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.bicbot-invitation-code-field > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.bicbot-invitation-code-field > span small,
.bicbot-invitation-code-hint {
    color: var(--qa-text-tertiary, #7b879d);
    font-size: 11px;
    font-weight: 500;
}

.bicbot-invitation-code-hint {
    margin-top: 5px;
}

.profile-tab-invite .profile-tab-glyph {
    color: #5b61ee;
}

.profile-invite-panel {
    max-width: 980px;
    padding-bottom: 12px;
}

.profile-invite-hero {
    position: relative;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 34px 38px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(120deg, #303b78 0%, #4f61e5 58%, #6f79f6 100%);
    border-radius: 18px;
    box-shadow: 0 16px 32px rgba(62, 81, 200, .22);
}

.profile-invite-hero::after {
    position: absolute;
    right: -68px;
    bottom: -112px;
    width: 270px;
    height: 270px;
    content: '';
    border: 42px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
}

.profile-invite-hero-copy { position: relative; z-index: 1; max-width: 620px; }
.profile-invite-hero .profile-section-kicker { color: rgba(255, 255, 255, .68); }
.profile-invite-hero h3 { margin: 7px 0 9px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.035em; }
.profile-invite-hero p:last-child { max-width: 520px; margin: 0; color: rgba(255, 255, 255, .82); font-size: 14px; line-height: 1.65; }
.profile-invite-hero-mark { position: relative; z-index: 1; width: 96px; height: 96px; display: grid; flex: 0 0 auto; place-items: center; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); border-radius: 28px; backdrop-filter: blur(10px); }
.profile-invite-hero-mark svg { width: 58px; height: 58px; }

.profile-invite-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 22px 0;
    padding: 6px 0;
    list-style: none;
    border-top: 1px solid var(--qa-border, #e8eaf0);
    border-bottom: 1px solid var(--qa-border, #e8eaf0);
}

.profile-invite-steps li { position: relative; display: flex; gap: 13px; padding: 21px 22px; }
.profile-invite-steps li + li { border-left: 1px solid var(--qa-border, #e8eaf0); }
.profile-invite-steps span { width: 32px; height: 32px; display: grid; flex: 0 0 32px; place-items: center; color: #5068ec; background: #eef1ff; border-radius: 10px; font-size: 12px; font-weight: 750; }
.profile-invite-steps strong { display: block; color: var(--qa-text-primary, #263047); font-size: 14px; }
.profile-invite-steps p { margin: 4px 0 0; color: var(--qa-text-tertiary, #8b93a5); font-size: 12px; line-height: 1.5; }

.profile-invite-share-zone { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; align-items: stretch; padding: 26px 28px; background: var(--qa-bg-surface, #fff); border: 1px solid var(--qa-border, #e8eaf0); border-radius: 18px; box-shadow: 0 8px 20px rgba(25, 36, 80, .045); }
.profile-invite-link-area { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.profile-invite-link-area h4 { margin: 5px 0 5px; color: var(--qa-text-primary, #263047); font-size: 20px; letter-spacing: -.02em; }
.profile-invite-link-hint { margin: 0; color: var(--qa-text-secondary, #667085); font-size: 13px; }
.profile-invite-link-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 20px; padding: 7px; background: var(--qa-bg-muted, #f6f7fb); border: 1px solid var(--qa-border, #e8eaf0); border-radius: 12px; }
.profile-invite-link-box code { min-width: 0; padding: 0 9px; overflow: hidden; color: var(--qa-text-secondary, #667085); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.profile-invite-link-box button { min-height: 38px; padding: 0 13px; color: #485cd8; background: #fff; border: 1px solid #dce1ff; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.profile-invite-link-box button:hover { background: #eef1ff; transform: translateY(-1px); }
.profile-invite-code { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 13px 0 0; color: var(--qa-text-tertiary, #8b93a5); font-size: 12px; }
.profile-invite-code strong { padding: 3px 8px; color: #3e4fc6; background: #eef1ff; border-radius: 7px; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.profile-invite-code span { color: #98a2b3; font-size: 11px; }
.profile-invite-loading { min-height: 330px; padding: 36px; }
.profile-invite-loading h3 { margin: 8px 0 22px; color: var(--qa-text-primary, #263047); font-size: 22px; }
.profile-invite-loading-line { width: min(360px, 76%); height: 16px; display: block; }
.profile-invite-loading-card { width: 100%; height: 168px; display: block; margin-top: 24px; border-radius: 18px; }

.profile-invite-qr-area { display: grid; align-content: center; justify-items: center; gap: 14px; padding-left: 22px; border-left: 1px solid var(--qa-border, #e8eaf0); }
.profile-invite-qr-frame { position: relative; width: 166px; height: 166px; padding: 10px; background: #fff; border: 1px solid #e4e8f6; border-radius: 15px; box-shadow: 0 10px 24px rgba(37, 49, 110, .1); }
.profile-invite-qr-image { width: 100%; height: 100%; display: block; object-fit: contain; image-rendering: pixelated; }
.profile-invite-qr-brand { position: absolute; right: 14px; bottom: 13px; padding: 2px 5px; color: #5266e8; background: rgba(255, 255, 255, .94); border-radius: 4px; font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.profile-invite-download { width: 100%; min-height: 40px !important; font-size: 13px; }

@media (max-width: 760px) {
    .profile-invite-hero { min-height: 164px; padding: 26px 24px; }
    .profile-invite-hero-mark { width: 74px; height: 74px; border-radius: 22px; }
    .profile-invite-hero-mark svg { width: 45px; height: 45px; }
    .profile-invite-steps { grid-template-columns: 1fr; margin: 16px 0; }
    .profile-invite-steps li { padding: 15px 6px; }
    .profile-invite-steps li + li { border-top: 1px solid var(--qa-border, #e8eaf0); border-left: 0; }
    .profile-invite-share-zone { grid-template-columns: 1fr; padding: 22px; }
    .profile-invite-qr-area { padding: 20px 0 0; border-top: 1px solid var(--qa-border, #e8eaf0); border-left: 0; }
    .profile-invite-download { width: min(280px, 100%); }
}

@media (max-width: 430px) {
    .profile-invite-hero { align-items: flex-start; padding: 23px 20px; }
    .profile-invite-hero h3 { font-size: 23px; }
    .profile-invite-hero-mark { display: none; }
    .profile-invite-share-zone { padding: 18px; }
    .profile-invite-link-box { grid-template-columns: 1fr; }
    .profile-invite-link-box button { width: 100%; }
    .profile-invite-loading { min-height: 250px; padding: 24px 20px; }
}

/* Keep existing order details above the new invitation surface on every breakpoint. */
.profile-order-modal { z-index: 30000; }

/* Must stay last: legacy mobile rules above this point are intentionally superseded. */
@media (max-width: 480px) {
    .sidebar,
    .container.sidebar-collapsed .sidebar,
    .container .sidebar.is-collapsed,
    .container.sidebar-open .sidebar,
    .sidebar.is-open,
    .sidebar.is-collapsed.is-open,
    .container.sidebar-collapsed .sidebar.is-open {
        width: min(88vw, 336px);
        max-width: min(88vw, 336px);
        min-width: min(88vw, 336px);
    }
    .sidebar { background: var(--qa-bg-surface, #fff); box-shadow: 20px 0 48px rgba(28, 38, 64, .22); }
    .logo-section { padding: 14px 20px 12px; }
    .logo-content { padding-top: 8px; }
    .quick-actions-sidebar { padding: 12px 0; }
    .sidebar-toggle-btn,
    .container.sidebar-open .sidebar-toggle-btn,
    .container.sidebar-open.sidebar-collapsed .sidebar-toggle-btn { width: 42px; height: 42px; border-radius: 12px; }
    .container.sidebar-open .sidebar-toggle-btn,
    .container.sidebar-open.sidebar-collapsed .sidebar-toggle-btn { left: min(calc(min(88vw, 336px) - 52px), calc(100vw - 52px)); }

    .content-area { min-height: 0; padding: 12px 12px 0; }
    .search-section { padding: 10px 4px 14px; }
    .input-center-wrapper,
    .content-area.has-result .input-center-wrapper { width: 100%; margin: auto auto 0; padding-top: 24px; }
    .input-container { padding: 12px; border-radius: 18px; }
    .question-input { min-height: 112px; padding: 14px 14px 12px; font-size: 16px; line-height: 1.55; }
    .composer-toolbar { min-height: 48px; margin-top: 4px; padding: 8px 2px 0; }
    .composer-tool-btn,
    .ask-button { width: 40px; height: 40px; min-width: 40px; flex-basis: 40px; border-radius: 12px; }
    .footer { position: static; z-index: auto; min-height: 0; margin: 0 -12px; padding: 10px 18px max(14px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--qa-bg-canvas, #f7f8fb) 92%, #fff); border-top: 1px solid var(--qa-border, #e5e9f2); }
    .footer .input-subtitle,
    .input-subtitle { max-width: 100%; padding: 0; color: var(--qa-text-tertiary, #7b879d); font-size: 12px; line-height: 1.55; letter-spacing: 0; overflow-wrap: anywhere; }

    .profile-center-dialog { padding: 0; align-items: flex-end; }
    .profile-center-dialog .profile-center-container { width: 100%; height: min(92dvh, 760px); max-height: min(92dvh, 760px); border-radius: 24px 24px 0 0; box-shadow: 0 -12px 38px rgba(24, 34, 57, .2); }
    .profile-center-dialog .profile-center-header { min-height: 76px; padding: 14px 18px; }
    .profile-center-eyebrow { font-size: 11px; letter-spacing: .12em; }
    .profile-center-dialog .profile-center-header h3 { margin-top: 2px; font-size: 22px; line-height: 1.2; }
    .profile-center-tabs { gap: 6px; padding: 9px 12px; scroll-padding-inline: 12px; background: #fff; }
    .profile-tab-btn { min-height: 40px; padding: 8px 10px; border-radius: 10px; font-size: 12px; }
    .profile-tab-glyph,
    .profile-tab-glyph svg { width: 15px; height: 15px; flex-basis: 15px; }
    .profile-center-content { height: calc(min(92dvh, 760px) - 128px); padding: 18px 14px calc(24px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
    .profile-token-intro h3,
    .profile-recharge-records-intro h3,
    .profile-recharge-intro h3 { font-size: 21px; line-height: 1.3; }
    .profile-token-intro p,
    .profile-recharge-records-intro p,
    .profile-recharge-intro p { font-size: 13px; line-height: 1.6; }
}

/* Final small-screen refinements for populated history, records and support. */
@media (max-width: 480px) {
    .sidebar-history-panel,
    .sidebar-history-list,
    .sidebar-history-item,
    .sidebar-history-open,
    .sidebar-history-question {
        min-width: 0;
        max-width: 100%;
    }

    .sidebar-history-open {
        padding-right: 34px;
        overflow: hidden;
    }

    .sidebar-history-question {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .profile-recharge-record-card > header {
        gap: 10px;
        padding: 12px 14px;
    }

    .profile-recharge-record-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    }

    .profile-recharge-record-grid > div {
        padding: 12px 14px;
    }

    .profile-recharge-record-grid > div:nth-child(odd) {
        border-right: 1px solid color-mix(in srgb, var(--qa-border) 76%, transparent);
    }

    .profile-recharge-record-grid > div:nth-child(n + 3) {
        border-top: 1px solid color-mix(in srgb, var(--qa-border) 76%, transparent);
    }

    .customer-support-dialog {
        place-items: end center;
        padding: 0;
    }

    .customer-support-panel {
        width: 100%;
        max-height: min(90dvh, 720px);
        display: flex;
        flex-direction: column;
        border-radius: 24px 24px 0 0;
    }

    .customer-support-header {
        flex: 0 0 auto;
        padding: 18px 20px;
    }

    .customer-support-header strong { font-size: 19px; }
    .customer-support-close { top: 18px; right: 18px; width: 36px; height: 36px; }

    .customer-support-cards {
        flex: 1 1 auto;
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .customer-support-card {
        min-height: 0;
        padding: 18px;
        border-radius: 16px;
    }

    .customer-support-card-icon { width: 46px; height: 46px; margin-bottom: 8px; font-size: 22px; }
    .customer-support-card h3 { font-size: 17px; }
    .customer-support-phone { margin: 14px 0 18px; font-size: clamp(24px, 8vw, 30px); }
    .customer-support-card img { width: min(132px, 42vw); height: min(132px, 42vw); margin: 10px 0; }
    .customer-support-card-button { min-height: 44px; padding: 10px; border-radius: 11px; }
}

/* Final cascade guard for the mobile history drawer. */
@media (max-width: 480px) {
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    .sidebar,
    .container.sidebar-collapsed .sidebar,
    .container .sidebar.is-collapsed,
    .container.sidebar-open .sidebar,
    .sidebar.is-open,
    .sidebar.is-collapsed.is-open,
    .container.sidebar-collapsed .sidebar.is-open {
        width: min(84vw, 320px) !important;
        max-width: min(84vw, 320px) !important;
        min-width: min(84vw, 320px) !important;
        overflow: hidden !important;
    }
    .sidebar .sidebar-history-panel,
    .sidebar .sidebar-history-list,
    .sidebar .sidebar-history-item,
    .sidebar .sidebar-history-open,
    .sidebar .sidebar-function-center,
    .sidebar .sidebar-action-btn { min-width: 0 !important; max-width: 100% !important; }
    .sidebar .sidebar-history-header h2 { font-size: 14px !important; line-height: 20px !important; }
    .sidebar .sidebar-history-search { min-height: 42px !important; font-size: 14px !important; }
    .sidebar .sidebar-history-open { min-height: 42px !important; padding: 9px 34px 9px 10px !important; }
    .sidebar .sidebar-history-question { font-size: 13px !important; line-height: 20px !important; }
    .sidebar .sidebar-history-menu-toggle { font-size: 16px !important; }
    .sidebar .sidebar-action-btn { min-height: 42px !important; font-size: 13px !important; }
}

/* Final mobile ownership: navigation must not leave a squeezed desktop canvas
 * visible beside the drawer. */
@media (max-width: 768px) {
    html,
    body,
    .container,
    .container.sidebar-collapsed,
    .main-content,
    .content-area {
        width: 100vw !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .container.sidebar-open > .sidebar,
    .container.sidebar-open.sidebar-collapsed > .sidebar,
    .container > .sidebar.is-open {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        transform: translateX(0) !important;
    }

    .sidebar-toggle-btn,
    .container.sidebar-open .sidebar-toggle-btn,
    .container.sidebar-open.sidebar-collapsed .sidebar-toggle-btn {
        top: calc(12px + env(safe-area-inset-top)) !important;
        right: auto !important;
        left: 12px !important;
        z-index: 1300 !important;
    }

    .sidebar {
        padding-top: env(safe-area-inset-top);
    }

    .logo-section {
        padding-left: 68px;
    }

    .quick-actions-sidebar {
        padding-bottom: 16px;
    }
}