/* ============================================================
   ACCOUNT — Settings dialog (4-tab side-nav + content)
   ============================================================ */

/* ---- Sidebar footer trigger button ---- */
#account-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--chrome-border);
}
#account-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    cursor: pointer;
    transition: background var(--dur);
}
#account-btn:hover { background: var(--chrome-hover); }
.account-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--t3);
    transition: border-color var(--dur);
}
.account-avatar-initials {
    font: 500 9px var(--sans);
    color: var(--t2);
    letter-spacing: 0.3px;
}
#account-btn:hover .account-avatar { border-color: var(--panel-border); }
.account-label {
    font: 500 12px var(--sans); color: var(--t2);
    flex: 1; text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   OVERLAY + PANEL
   ============================================================ */
#account-overlay {
    position: fixed; inset: 0;
    z-index: var(--z-overlay);
    background: var(--overlay-bg, rgba(0,0,0,0.6));
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
}
#account-overlay.hidden { display: none; }

#acct-panel {
    width: 740px;
    max-width: calc(100vw - 64px);
    height: min(620px, calc(100vh - 80px));
    background: var(--chrome-bg2);
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    overflow: hidden;
}

/* ---- Left sidebar nav ---- */
#acct-sidebar {
    width: 180px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 16px 8px;
    border-right: 1px solid var(--chrome-border);
    background: var(--chrome-bg);
}
#acct-sidebar-title {
    font: 500 13px var(--sans);
    color: var(--t1);
    padding: 4px 10px 14px;
}
.acct-nav-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.acct-nav-item {
    display: block; width: 100%;
    padding: 8px 12px;
    background: none; border: none;
    border-radius: var(--radius-sm);
    font: 400 13px var(--sans);
    color: var(--t2);
    text-align: left; cursor: pointer;
    transition: background var(--dur), color var(--dur);
}
.acct-nav-item:hover {
    background: var(--chrome-hover); color: var(--t1);
}
.acct-nav-item.active {
    background: var(--chrome-surface); color: var(--t1);
}
.acct-nav-sep {
    height: 1px;
    background: var(--chrome-border);
    margin: 8px 12px;
}

/* ---- Right content ---- */
#acct-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#acct-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px 14px;
    flex-shrink: 0;
}
#acct-page-title {
    font: 600 16px var(--sans);
    color: var(--t1);
}
.acct-close {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none;
    border-radius: var(--radius-sm);
    color: var(--t3); cursor: pointer;
    flex-shrink: 0;
    transition: background var(--dur), color var(--dur);
}
.acct-close:hover { background: var(--chrome-hover); color: var(--t1); }

#acct-content-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 0 28px 28px;
}
#acct-content {
    max-width: 100%;
}

/* ============================================================
   SHARED
   ============================================================ */
.acct-block {
    margin-bottom: 24px;
}
.acct-block:last-child { margin-bottom: 0; }
.acct-block-separator {
    height: 1px;
    background: var(--chrome-border);
    margin: 0 0 24px;
}
.acct-section-label {
    font: 600 12px var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--t2);
    margin-bottom: 12px;
}

/* ---- Settings rows (label left, control right) ---- */
.acct-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
}
.acct-row + .acct-row {
    border-top: 1px solid var(--chrome-border);
}
.acct-row-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.acct-row-label {
    font: 500 13px var(--sans);
    color: var(--t1);
}
.acct-row-desc {
    font: 400 12px var(--sans);
    color: var(--t3);
}

/* ---- Field inputs ---- */
.acct-field-input {
    font: 400 13px var(--sans);
    color: var(--t1);
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius-sm);
    outline: none;
    padding: 6px 10px;
    width: 200px;
    transition: border-color var(--dur);
    caret-color: var(--accent);
    text-align: right;
}
.acct-field-input:hover { border-color: var(--panel-border); }
.acct-field-input:focus { border-color: var(--accent-border); }
.acct-field-input::placeholder { color: var(--t3); opacity: 0.4; }

/* ============================================================
   CUSTOM SELECT — dropdown-menu style
   ============================================================ */
.acct-csel {
    position: relative;
    flex-shrink: 0;
}
.acct-csel-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 400 13px var(--sans);
    color: var(--t2);
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    cursor: pointer;
    transition: border-color var(--dur), color var(--dur), background var(--dur);
    white-space: nowrap;
}
.acct-csel-trigger:hover {
    background: var(--chrome-hover);
    border-color: var(--panel-border);
    color: var(--t1);
}
.acct-csel.open .acct-csel-trigger {
    background: var(--chrome-hover);
    border-color: var(--panel-border);
    color: var(--t1);
}
.acct-csel-chevron {
    color: var(--t3);
    flex-shrink: 0;
    transition: transform 0.15s var(--ease);
}
.acct-csel.open .acct-csel-chevron { transform: rotate(180deg); }
.acct-csel-menu {
    position: absolute;
    right: 0; top: calc(100% + 4px);
    min-width: 100%;
    background: var(--chrome-bg2);
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: var(--z-dropdown);
    padding: 4px;
    display: none;
    max-height: 240px;
    overflow-y: auto;
}
.acct-csel.open .acct-csel-menu { display: block; }
.acct-csel-item {
    font: 400 13px var(--sans);
    color: var(--t2);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur), color var(--dur);
}
.acct-csel-item:hover {
    background: var(--chrome-hover);
    color: var(--t1);
}
.acct-csel-item.active {
    color: var(--t1);
    background: var(--chrome-hover);
}

/* ---- Toggle switch ---- */
.acct-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.acct-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.acct-switch-track {
    width: 32px; height: 16px;
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-border);
    border-radius: 8px;
    position: relative;
    transition: background var(--dur), border-color var(--dur);
}
.acct-switch-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 10px; height: 10px;
    background: var(--t3);
    border-radius: 50%;
    transition: transform 0.2s var(--ease), background 0.2s;
}
.acct-switch input:checked + .acct-switch-track {
    background: var(--chrome-active);
    border-color: var(--panel-border);
}
.acct-switch input:checked + .acct-switch-track .acct-switch-thumb {
    transform: translateX(16px);
    background: var(--t1);
}

/* ---- Buttons ---- */
.acct-btn {
    font: 500 13px var(--sans);
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--dur);
}
.acct-btn--outline {
    background: none;
    border: 1px solid var(--chrome-border);
    color: var(--t2);
}
.acct-btn--outline:hover {
    border-color: var(--panel-border);
    color: var(--t1);
}
.acct-btn--danger {
    background: none;
    border: 1px solid var(--chrome-border);
    color: var(--red, #c44);
}
.acct-btn--danger:hover {
    border-color: var(--red, #c44);
    background: var(--red-bg, rgba(204,68,68,0.08));
}

/* Disabled state: greyed + not-allowed cursor. Leaves pointer-events alone so
 * the browser handles the disabled attribute naturally (no synthetic clicks). */
.acct-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* In-flight async state: a touch less greyed, wait cursor, clicks suppressed.
 * Decoupled from :disabled so validation-disabled buttons don't look loading. */
.acct-btn.loading {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

/* ---- Checkboxes (used by export modal in app.js) ---- */
.acct-check {
    position: relative;
    display: flex; align-items: center;
    cursor: pointer; flex-shrink: 0;
}
.acct-check input { opacity: 0; width: 0; height: 0; position: absolute; }
.acct-check-mark {
    width: 14px; height: 14px;
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius-xs); background: none;
    transition: border-color var(--dur), background var(--dur);
    position: relative;
}
.acct-check input:checked + .acct-check-mark {
    border-color: var(--t2);
    background: var(--chrome-active);
}
.acct-check-mark::after {
    content: ''; display: none; position: absolute;
    top: 1px; left: 4px; width: 4px; height: 7px;
    border: solid var(--t1);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.acct-check input:checked + .acct-check-mark::after { display: block; }

/* ---- Profile section (Account tab) ---- */
.acct-profile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 0 16px;
}
.acct-profile-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
}
.acct-profile-avatar-img {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
}
.acct-profile-avatar-initials {
    font: 500 16px var(--sans);
    color: var(--t2);
    letter-spacing: 0.5px;
}
.acct-profile-name {
    font: 600 16px var(--sans);
    color: var(--t1);
    line-height: 1.3;
}
.acct-profile-email {
    font: 400 13px var(--sans);
    color: var(--t3);
    margin-top: 2px;
}

/* ---- Avatar img in sidebar button ---- */
.account-avatar-img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* ============================================================
   LOGIN MODE
   ============================================================ */
#account-overlay.login-mode #acct-panel {
    width: 400px;
    height: auto;
    max-height: calc(100vh - 80px);
}
.acct-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 24px 44px;
}
.acct-login-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 500 15px var(--sans);
    color: var(--t2);
    margin-bottom: 36px;
}
.acct-login-mark {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, var(--accent) 0%, #a08030 100%);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font: 700 12px var(--serif);
    color: var(--chrome-bg);
}
.acct-login-heading {
    font: 600 20px var(--sans);
    color: var(--t1);
    margin: 0 0 6px;
}
.acct-login-sub {
    font: 400 13px var(--sans);
    color: var(--t3);
    margin: 0 0 32px;
}
.acct-login-google {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 28px;
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius);
    color: var(--t1);
    font: 500 14px var(--sans);
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease;
}
.acct-login-google:hover {
    background: var(--chrome-hover);
    border-color: var(--panel-border);
}
.acct-login-google svg { flex-shrink: 0; }

.acct-login-divider {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--t3);
    font: 400 12px var(--sans);
}
.acct-login-divider::before,
.acct-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--chrome-border);
}
.acct-login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.acct-login-form .acct-field-input { width: 100%; }
.acct-login-submit {
    margin-top: 6px;
    padding: 11px 28px;
    font: 500 14px var(--sans);
}
.acct-login-error {
    font: 400 12px var(--sans);
    color: var(--accent-text, #c64a3b);
    text-align: left;
}
.acct-login-alt {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font: 400 13px var(--sans);
}
.acct-login-alt .acct-login-link {
    color: var(--t2);
    text-decoration: none;
}
.acct-login-alt .acct-login-link:hover {
    color: var(--t1);
    text-decoration: underline;
}

/* ============================================================
   PLAN SUMMARY
   ============================================================ */
.acct-plan-summary {
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.acct-plan-summary-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.acct-plan-summary-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}
.acct-plan-name {
    font: 600 15px var(--sans);
    color: var(--t1);
}
.acct-plan-name--paid {
    color: var(--accent);
}
.acct-plan-price {
    font: 400 13px var(--sans);
    color: var(--t2);
}
.acct-plan-meta {
    font: 400 12px var(--sans);
    color: var(--t3);
    margin-top: 8px;
}
.acct-plan-picker {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.acct-plan-picker-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.acct-plan-card {
    flex: 1 1 200px;
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.acct-plan-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.acct-plan-card-features {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
    color: var(--t2);
    font: 400 12px var(--sans);
    line-height: 1.6;
    flex: 1;
}
.acct-plan-card-cta {
    align-self: stretch;
    text-align: center;
    justify-content: center;
}
.acct-plan-picker-manage {
    display: flex;
    justify-content: flex-end;
}
.acct-btn--primary {
    background: var(--accent-dim);
    border: 1px solid var(--accent-border);
    color: var(--accent-text);
}
.acct-btn--primary:hover {
    background: rgba(212,168,68,0.22);
    border-color: var(--accent);
}

/* ============================================================
   USAGE BARS
   ============================================================ */
.acct-usage-rows {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.acct-usage-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.acct-usage-label {
    font: 500 13px var(--sans);
    color: var(--t1);
}
.acct-usage-frac {
    font: 400 12px var(--mono);
    color: var(--t2);
}
.acct-usage-pct {
    font: 400 12px var(--mono);
    color: var(--t1);
    margin-left: 8px;
}
.acct-bar {
    height: 8px;
    background: var(--chrome-hover);
    border-radius: var(--radius-xs);
    overflow: hidden;
}
.acct-bar-fill {
    height: 100%;
    background: var(--accent, #c8a84e);
    border-radius: var(--radius-xs);
    transition: width 0.4s var(--ease);
    min-width: 0;
}
.acct-bar-fill--warn {
    background: var(--red, #c44);
}
.acct-usage-desc {
    font: 400 11px var(--sans);
    color: var(--t3);
    margin-top: 5px;
}

/* ============================================================
   ABOUT
   ============================================================ */
.acct-about-name {
    font: 500 15px var(--sans); color: var(--t1);
    margin-bottom: 2px;
}
.acct-about-version {
    font: 400 11px var(--sans); color: var(--t3);
    margin-bottom: 10px;
}
.acct-about-desc {
    font: 400 13px var(--sans); color: var(--t2);
    line-height: 1.5;
}
.acct-about-body {
    margin-top: 8px;
}
.acct-about-body p {
    font: 400 13px var(--sans); color: var(--t2);
    margin: 0 0 8px; line-height: 1.6;
}
.acct-shortcut-list {
    display: flex; flex-direction: column; gap: 4px;
}
.acct-shortcut {
    display: flex; align-items: center; gap: 12px; padding: 3px 0;
}
.acct-shortcut kbd {
    display: inline-block;
    font: 400 10px var(--mono); color: var(--t2);
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius-xs); padding: 2px 7px;
    min-width: 56px; text-align: center;
}
.acct-shortcut span {
    font: 400 12px var(--sans); color: var(--t2);
}

/* ---- Legal links ---- */
.acct-legal-links {
    display: flex;
    gap: 16px;
}
.acct-legal-link {
    font: 400 11px var(--sans);
    color: var(--t3);
    text-decoration: none;
    transition: color var(--dur);
}
.acct-legal-link:hover {
    color: var(--t2);
}

/* ============================================================
   USAGE FOOTER IN CHAT MESSAGES
   ============================================================ */
.msg-usage {
    display: flex;
    justify-content: flex-end;
    padding: 2px 4px 0;
}
.msg-usage span {
    font: 400 10px var(--mono);
    color: var(--t3);
    opacity: 0.6;
}

/* ---- Past-due banner (account panel) ---- */
.acct-past-due-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: rgba(220, 80, 60, 0.12);
    border: 1px solid rgba(220, 80, 60, 0.3);
    border-radius: var(--radius);
    color: var(--t1);
    font-size: 13px;
    line-height: 1.4;
}
.acct-past-due-banner .acct-btn { flex-shrink: 0; }

/* ---- Past-due banner (global app bar) ---- */
.past-due-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(220, 80, 60, 0.15);
    border-bottom: 1px solid rgba(220, 80, 60, 0.3);
    color: var(--t1);
    font: 500 13px/1.4 var(--sans);
    z-index: 1000;
    position: relative;
}
.past-due-btn {
    padding: 4px 12px;
    background: var(--accent-dim);
    color: var(--accent-text);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius);
    font: 500 12px var(--sans);
    cursor: pointer;
}
.past-due-btn:hover { background: var(--accent); }

/* ---- Generic notice banner (e.g. email verification reminder) ---- */
.acct-notice-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--notice-bg);
    border: 1px solid var(--notice-border);
    border-radius: var(--radius);
    color: var(--t1);
    font: 400 13px/1.4 var(--sans);
}
.acct-notice-banner-text { flex: 1; }
.acct-notice-banner .acct-btn { flex-shrink: 0; }

/* ---- Delete-account modal: stat list + email-confirm + checkbox ---- */
.acct-delete-stats {
    list-style: disc;
    padding-left: 20px;
    margin: 8px 0 12px;
    color: var(--t2);
    font: 400 13px/1.7 var(--sans);
    word-break: break-word;
}
.acct-delete-email-note {
    margin-top: 14px;
    margin-bottom: 6px;
    font: 400 13px var(--sans);
    color: var(--t2);
}
.acct-delete-email-note strong {
    color: var(--t1);
    font-family: var(--mono);
    font-size: 12px;
}
#acct-delete-email {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    margin-bottom: 12px;
}
.acct-delete-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    cursor: pointer;
    font: 400 13px/1.4 var(--sans);
    color: var(--t2);
}
.acct-delete-check input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--accent);
}

/* ============================================================
   RESPONSIVE — narrow viewports
   ============================================================ */

/* Collapse sidebar to a horizontal tab strip above the content so the panel
 * fits on phones (sidebar would otherwise eat ~half the width). */
@media (max-width: 640px) {
    #acct-panel {
        flex-direction: column;
        height: min(620px, calc(100vh - 32px));
        max-width: calc(100vw - 24px);
    }
    #acct-sidebar {
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        padding: 8px 8px;
        border-right: none;
        border-bottom: 1px solid var(--chrome-border);
        overflow-x: auto;
    }
    #acct-sidebar-title { display: none; }
    .acct-nav-items {
        flex-direction: row;
        gap: 2px;
        flex: 1;
    }
    .acct-nav-item {
        white-space: nowrap;
        padding: 6px 10px;
        font-size: 12px;
    }
    .acct-nav-sep { display: none; }
    #acct-header { padding: 14px 18px 10px; }
    #acct-content-wrap { padding: 0 18px 20px; }
}

/* Notice banner: stack text + button vertically on phones so the CTA doesn't
 * get squashed next to long copy. */
@media (max-width: 480px) {
    .acct-notice-banner {
        flex-direction: column;
        align-items: stretch;
    }
    .acct-notice-banner .acct-btn {
        align-self: flex-start;
    }
}