/* Settings bubble: a focused overlay that keeps the workspace visible behind it. */

#settingsView {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    align-items: flex-start !important;
    justify-content: center;
    padding: 52px clamp(20px, 4vw, 56px) clamp(20px, 4vw, 56px) !important;
    box-sizing: border-box;
    background: transparent;
    transition: padding 0.28s ease;
}

#settingsView[style*="display: flex"],
#settingsView[style*="display:flex"] {
    display: flex !important;
}

#settingsView .settings-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    cursor: pointer;
    background: rgba(3, 7, 17, 0.6);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

#settingsView .settings-window {
    --settings-side-trim: 0px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
    width: min(960px, 100%);
    height: min(710px, calc(100dvh - 52px - clamp(20px, 4vw, 56px)));
    min-height: min(520px, calc(100dvh - 40px));
    max-width: none;
    max-height: none;
    overflow: hidden;
    /* Keep the complete shell visible; side clipping made the navigation look
       cut off and shifted the modal away from the usable app area. */
    clip-path: none;
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, white 12%);
    border-radius: 28px;
    background:
        radial-gradient(circle at 78% 0%, color-mix(in srgb, var(--accent-color) 10%, transparent), transparent 34%),
        var(--modal-bg);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.07) inset;
    animation: settingsBubbleIn 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: width 0.28s ease, height 0.28s ease, grid-template-columns 0.28s ease;
}

/* The overlay lives inside .main-content, which already starts after the app
   sidebar. Keep its horizontal inset symmetric so the bubble centers in that
   usable workspace instead of compensating for the sidebar a second time. */
body:not(.sidebar-collapsed) #settingsView {
    padding-left: clamp(24px, 3vw, 48px) !important;
    padding-right: clamp(24px, 3vw, 48px) !important;
}

body:not(.sidebar-collapsed) #settingsView .settings-window {
    width: min(920px, 100%);
    height: min(710px, calc(100dvh - 52px - clamp(20px, 4vw, 56px)));
}

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

/* The profile is the entry point. There is deliberately no generic Settings title. */
#settingsView .settings-tabs {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: none !important;
    margin: 0 !important;
    padding: 20px 8px 18px;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-sidebar) 72%, transparent);
}

#settingsView .settings-profile-entry {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 8px;
    margin-top: 20px;
    padding: 0 8px;
    color: var(--text-primary);
    background: transparent;
    text-align: left;
}

#settingsView .settings-avatar-button {
    position: relative;
    display: inline-flex;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

#settingsView .settings-profile-avatar {
    display: inline-flex !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    flex: 0 0 52px !important;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 50% !important;
    border: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
    transition: filter 0.18s ease, transform 0.18s ease;
}

#settingsView .settings-profile-avatar svg {
    width: 28px;
    height: 28px;
}

#settingsView .settings-profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover;
}

/* The settings avatar has its own edit badge; suppress the old oval hover layer. */
#settingsView .settings-profile-avatar::before,
#settingsView .settings-profile-avatar::after {
    display: none !important;
}

#settingsView .settings-avatar-button:hover .settings-profile-avatar,
#settingsView .settings-avatar-button:focus-visible .settings-profile-avatar {
    filter: brightness(0.82);
    transform: scale(1.03);
}

#settingsView .settings-avatar-button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

#settingsView .settings-profile-email {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#settingsView .settings-avatar-edit {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--bg-sidebar);
    border-radius: 50%;
    color: #fff;
    background: var(--accent-color);
}

#settingsView .settings-avatar-edit svg {
    width: 11px;
    height: 11px;
}

#settingsView .settings-nav-divider {
    height: 1px;
    margin: 22px 10px 12px;
    background: var(--border-color);
}

#settingsView .settings-tabs-pills {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    max-width: none;
    margin: 0;
}

#settingsView .settings-tab-pill {
    display: none;
}

#settingsView .settings-tab-btn {
    display: flex;
    align-items: center;
    width: fit-content !important;
    max-width: none;
    align-self: flex-start;
    flex: 0 0 auto;
    min-height: 46px;
    gap: 11px;
    padding: 0 13px;
    border: 1px solid transparent !important;
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

#settingsView .settings-tab-btn:hover {
    color: var(--text-primary);
    background: transparent !important;
}

#settingsView .settings-tab-btn.active {
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--accent-color) 70%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--accent-color) 18%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--accent-color) !important;
}

#settingsView .settings-tab-btn svg {
    width: 17px;
    height: 17px;
    opacity: 0.9;
}

#settingsView .settings-panels {
    min-width: 0;
    min-height: 0;
    padding: 36px 34px 28px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

#settingsView .settings-tab-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

#settingsView #settings-tab-account .account-profile-header {
    display: none;
}

#settingsView .settings-card {
    max-width: none;
    border-radius: 18px;
    background: color-mix(in srgb, var(--modal-bg) 86%, transparent);
    border-color: var(--border-color);
}

#settingsView .settings-close-btn {
    top: 24px;
    right: calc(28px + var(--settings-side-trim));
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border-color: var(--border-color);
    background: color-mix(in srgb, var(--modal-bg) 80%, transparent);
}

#settingsView .settings-close-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
    background: var(--bg-hover);
    transform: rotate(90deg);
}

@media (max-width: 760px) {
    #settingsView {
        align-items: flex-end !important;
        padding: 12px !important;
    }

    body:not(.sidebar-collapsed) #settingsView {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #settingsView .settings-window {
        --settings-side-trim: 0px;
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        width: 100%;
        height: min(760px, calc(100dvh - 24px));
        min-height: 0;
        border-radius: 22px;
        clip-path: none;
    }

    #settingsView .settings-tabs {
        display: flex;
        flex-direction: column;
        padding: 14px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    #settingsView .settings-profile-entry {
        width: 100%;
        margin: 0;
    }

    #settingsView .settings-nav-divider {
        display: block;
        margin: 12px 10px 8px;
    }

    #settingsView .settings-tabs-pills {
        flex-direction: column;
        width: 100%;
    }

    #settingsView .settings-tab-btn {
        width: 100%;
        min-height: 42px;
        padding: 0 11px;
    }

    #settingsView .settings-tab-btn.active {
        box-shadow: inset 3px 0 0 var(--accent-color);
    }

    #settingsView .settings-panels {
        padding: 62px 18px 32px !important;
    }

    #settingsView .settings-close-btn {
        top: 16px;
        right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #settingsView .settings-window,
    #settingsView .settings-profile-entry,
    #settingsView .settings-tab-btn,
    #settingsView .settings-close-btn {
        animation: none;
        transition: none;
    }
}

/* Appearance: two quiet monochrome UI skeletons instead of text/icon theme cards. */
#settingsView #settings-tab-appearance .theme-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#settingsView #settings-tab-appearance .theme-card.theme-card-skeleton {
    min-width: 0;
    padding: 5px !important;
    border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent) !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
}

#settingsView #settings-tab-appearance .theme-card.theme-card-skeleton:hover,
#settingsView #settings-tab-appearance .theme-card.theme-card-skeleton:focus-visible {
    border-color: color-mix(in srgb, var(--text-primary) 42%, transparent) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none;
}

#settingsView #settings-tab-appearance .theme-card.theme-card-skeleton.active {
    border: 2px solid var(--text-primary) !important;
    background: transparent !important;
    box-shadow: none !important;
}

#settingsView #settings-tab-appearance .theme-card.theme-card-skeleton.active:hover,
#settingsView #settings-tab-appearance .theme-card.theme-card-skeleton.active:focus-visible {
    border-color: var(--text-primary) !important;
}

.theme-skeleton {
    display: grid;
    grid-template-columns: 29% minmax(0, 1fr);
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 126px;
    overflow: hidden;
    border-radius: 11px;
    pointer-events: none;
}

.theme-skeleton-sidebar,
.theme-skeleton-main {
    display: flex;
    flex-direction: column;
}

.theme-skeleton-sidebar {
    gap: 8px;
    padding: 13px 10px;
}

.theme-skeleton-main {
    gap: 10px;
    padding: 13px;
}

.theme-skeleton-dot,
.theme-skeleton-line,
.theme-skeleton-toolbar,
.theme-skeleton-message,
.theme-skeleton-composer {
    display: block;
}

.theme-skeleton-dot {
    width: 18px;
    height: 18px;
    margin-bottom: 4px;
    border-radius: 50%;
}

.theme-skeleton-line {
    width: 78%;
    height: 7px;
    border-radius: 999px;
}

.theme-skeleton-line-short {
    width: 52%;
}

.theme-skeleton-toolbar {
    width: 38%;
    height: 8px;
    border-radius: 999px;
}

.theme-skeleton-message {
    height: 18px;
    border-radius: 6px;
}

.theme-skeleton-message-wide {
    width: 88%;
    align-self: flex-end;
}

.theme-skeleton-message-mid {
    width: 64%;
}

.theme-skeleton-composer {
    width: 100%;
    height: 22px;
    margin-top: auto;
    border-radius: 6px;
}

.theme-skeleton-light {
    background: #ffffff;
    color: #181818;
}

.theme-skeleton-light .theme-skeleton-sidebar {
    background: #f3f3f3;
}

.theme-skeleton-light .theme-skeleton-main {
    background: #ffffff;
}

.theme-skeleton-light .theme-skeleton-dot,
.theme-skeleton-light .theme-skeleton-toolbar,
.theme-skeleton-light .theme-skeleton-message,
.theme-skeleton-light .theme-skeleton-composer {
    background: #e7e7e7;
}

.theme-skeleton-light .theme-skeleton-line {
    background: #dcdcdc;
}

.theme-skeleton-dark {
    background: #121212;
    color: #f4f4f4;
}

.theme-skeleton-dark .theme-skeleton-sidebar {
    background: #080808;
}

.theme-skeleton-dark .theme-skeleton-main {
    background: #151515;
}

.theme-skeleton-dark .theme-skeleton-dot,
.theme-skeleton-dark .theme-skeleton-toolbar,
.theme-skeleton-dark .theme-skeleton-message,
.theme-skeleton-dark .theme-skeleton-composer {
    background: #292929;
}

.theme-skeleton-dark .theme-skeleton-line {
    background: #353535;
}

@media (max-width: 640px) {
    #settingsView #settings-tab-appearance .theme-card.theme-card-skeleton {
        padding: 4px !important;
    }

    .theme-skeleton {
        min-height: 100px;
        border-radius: 9px;
    }

    .theme-skeleton-sidebar {
        gap: 6px;
        padding: 10px 7px;
    }

    .theme-skeleton-main {
        gap: 7px;
        padding: 10px;
    }
}