/* =========================================================
   NEO V3 — COMPOSER TOOLTIPS & ATTACHMENT PREVIEWS
   ========================================================= */

/* ---- Tooltips (pill‑shaped, dark/light) ---- */

.neo-tooltip {
    position: fixed;
    z-index: 70000;
    max-width: min(280px, calc(100vw - 20px));
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.96);
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(0.96);
    transition:
        opacity var(--neo-motion, 150ms ease),
        transform var(--neo-motion, 150ms ease),
        visibility var(--neo-motion, 150ms ease);
    visibility: hidden;
}

.neo-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

body.dark-mode .neo-tooltip {
    background: rgba(240, 240, 240, 0.96);
    color: #171717;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Tooltip arrow (optional) */
.neo-tooltip::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: inherit;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .neo-tooltip::after {
    border-right-color: rgba(255, 255, 255, 0.12);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* Tooltip on top – arrow points down */
.neo-tooltip.is-bottom::after {
    top: -6px;
    bottom: auto;
    transform: translateX(-50%) rotate(45deg);
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- Attachment preview cards (inside .attached-chips-wrapper) ---- */

.attached-chips-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--neo-space-2, 8px) !important;
    padding: var(--neo-space-2, 8px) var(--neo-space-1, 4px) var(--neo-space-1, 4px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 120, 128, 0.28) transparent;
    min-height: 0 !important;
}

.attached-chips-wrapper:empty {
    display: none !important;
}

.attached-chips-wrapper::-webkit-scrollbar {
    height: 4px;
}
.attached-chips-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
.attached-chips-wrapper::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 128, 0.28);
    border-radius: 999px;
}

.attachment-preview-card {
    position: relative;
    width: 148px;
    height: 104px;
    flex: 0 0 148px;
    overflow: hidden;
    border: 1px solid var(--neo-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--neo-radius-md, 12px);
    background: var(--neo-surface, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform var(--neo-motion, 150ms ease);
}

.attachment-preview-card:hover {
    transform: translateY(-1px);
}

body.dark-mode .attachment-preview-card {
    border-color: var(--neo-border-dark, rgba(255, 255, 255, 0.10));
    background: var(--neo-surface-dark, #212121);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.attachment-preview-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--neo-radius-md, 12px);
}

.attachment-remove-btn {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 999px !important;
    background: rgba(20, 20, 20, 0.82) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition:
        background var(--neo-motion, 150ms ease),
        transform var(--neo-motion, 150ms ease) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.attachment-remove-btn:hover {
    background: rgba(0, 0, 0, 0.95) !important;
    transform: scale(1.06) !important;
}

.attachment-remove-btn:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}

body.dark-mode .attachment-remove-btn {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(40, 40, 40, 0.9) !important;
}

body.dark-mode .attachment-remove-btn:hover {
    background: rgba(0, 0, 0, 0.95) !important;
}

/* ---- Mobile responsiveness ---- */

@media (max-width: 640px) {
    .attachment-preview-card {
        width: 124px;
        height: 92px;
        flex-basis: 124px;
    }
}

/* =========================================================
   EDIT MESSAGE — SLEEK MINIMAL PREMIUM
   Only affects user-message edit mode.
   ========================================================= */

.message.user:has(.edit-message-box) {
    width: 100% !important;
    align-items: flex-end !important;
}

.message.user .edit-message-box {
    width: min(100%, 680px) !important;
    margin-left: auto !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;

    padding: 12px 14px 10px !important;

    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 18px !important;

    background: #f7f7f8 !important;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.025),
        0 8px 24px rgba(0, 0, 0, 0.045) !important;

    overflow: hidden !important;
}

/* Attachment area */
.message.user .edit-message-media {
    width: 100% !important;

    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.message.user .edit-message-media:empty {
    display: none !important;
}

/* Premium image preview */
.message.user .edit-message-media img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: min(300px, 100%) !important;
    max-height: 190px !important;

    margin: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 13px !important;

    background: #ffffff !important;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 6px 18px rgba(0, 0, 0, 0.05) !important;
}

/* Textarea */
.message.user .edit-textarea {
    width: 100% !important;
    min-height: 44px !important;
    max-height: 150px !important;

    margin: 0 !important;
    padding: 4px 2px !important;

    resize: none !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;
    color: #171717 !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "Segoe UI",
        Roboto,
        sans-serif !important;

    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    box-shadow: none !important;
}

.message.user .edit-textarea:focus {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Actions */
.message.user .edit-actions {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Buttons */
.message.user .edit-btn-cancel,
.message.user .edit-btn-save {
    min-height: 34px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 13px !important;

    border-radius: 999px !important;

    font: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    cursor: pointer !important;

    transition:
        background-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease,
        transform 120ms ease !important;
}

/* Cancel */
.message.user .edit-btn-cancel {
    border: 0 !important;
    background: transparent !important;
    color: #303030 !important;
}

.message.user .edit-btn-cancel:hover {
    background: rgba(0, 0, 0, 0.055) !important;
}

/* Save */
.message.user .edit-btn-save {
    border: 0 !important;
    background: #171717 !important;
    color: #ffffff !important;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.12) !important;
}

.message.user .edit-btn-save:hover {
    background: #000000 !important;
}

.message.user .edit-btn-cancel:active,
.message.user .edit-btn-save:active {
    transform: scale(0.97) !important;
}

/* Dark mode */
body.dark-mode .message.user .edit-message-box {
    border-color: rgba(255, 255, 255, 0.10) !important;
    background: #2a2a2a !important;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.18),
        0 10px 28px rgba(0, 0, 0, 0.22) !important;
}

body.dark-mode .message.user .edit-textarea {
    color: #f1f1f1 !important;
}

body.dark-mode .message.user .edit-message-media img {
    border-color: rgba(255, 255, 255, 0.10) !important;
    background: #212121 !important;
}

body.dark-mode .message.user .edit-btn-cancel {
    color: #ececec !important;
}

body.dark-mode .message.user .edit-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .message.user .edit-btn-save {
    background: #f1f1f1 !important;
    color: #171717 !important;
}

/* Mobile */
@media (max-width: 767px) {
    .message.user .edit-message-box {
        width: 100% !important;

        gap: 9px !important;
        padding: 11px 12px 9px !important;

        border-radius: 16px !important;
    }

    .message.user .edit-message-media img {
        max-width: min(240px, 100%) !important;
        max-height: 165px !important;

        border-radius: 12px !important;
    }

    .message.user .edit-textarea {
        min-height: 42px !important;
        max-height: 130px !important;

        font-size: 16px !important;
    }

    .message.user .edit-btn-cancel,
    .message.user .edit-btn-save {
        min-height: 36px !important;
        padding-inline: 14px !important;
    }
}

/* =========================================================
   NEO V3 — SAFE COMPOSER MICRO-POLISH
   Visual-only. No structure or behavior changes.
   ========================================================= */

.glass-input-container {
    min-height: 62px !important;
    padding: 7px 9px !important;
    border-radius: 29px !important;
}

.composer-input-row {
    min-height: 48px !important;
    gap: 8px !important;
}

textarea#chatInput {
    min-height: 42px !important;
    padding: 10px 10px !important;
    font-size: 15.5px !important;
    line-height: 1.45 !important;
}

.attach-btn,
.mic-btn,
.send-btn {
    flex: 0 0 auto !important;
}

.mic-btn {
    margin-right: 2px !important;
}

.send-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.send-btn:hover {
    transform: scale(0.97) !important;
}

.live-suggestions {
    margin-bottom: 12px !important;
    gap: 8px !important;
}

.suggestion-chip {
    min-height: 36px !important;
    padding: 7px 14px !important;
}

@media (max-width: 767px) {
    .glass-input-container {
        min-height: 58px !important;
        padding: 6px 7px !important;
        border-radius: 27px !important;
    }

    .composer-input-row {
        min-height: 46px !important;
        gap: 6px !important;
    }

    .send-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
}

/* =========================================================
   NEO V3 — SENT IMAGE MESSAGE FIX
   Only affects uploaded media after the message is sent.
   ========================================================= */

.message.user {
    width: 100% !important;
    align-items: flex-end !important;
}

.message.user .message-wrapper {
    width: fit-content !important;
    max-width: min(560px, 78%) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;

    margin-left: auto !important;
}

/* User text bubble */
.message.user .message-wrapper > .message-content {
    width: fit-content !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 10px 14px !important;

    border-radius: 18px !important;
    background: #f4f4f4 !important;

    font-size: 15px !important;
    line-height: 1.5 !important;

    overflow-wrap: anywhere !important;
}

/* Uploaded media container */
.message.user .message-media-grid {
    width: auto !important;
    max-width: 100% !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    border-radius: 14px !important;
}

/* Uploaded image after sending */
.message.user .message-media-grid img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 520px !important;
    max-height: 420px !important;

    margin: 0 !important;

    object-fit: contain !important;
    object-position: center !important;

    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 14px !important;

    background: #f7f7f8 !important;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 8px 24px rgba(0, 0, 0, 0.05) !important;
}

/* Multiple images */
.message.user .message-media-grid:has(img:nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(520px, 100%) !important;
}

.message.user .message-media-grid:has(img:nth-child(2)) img {
    width: 100% !important;
    height: 190px !important;
    object-fit: cover !important;
}

/* User edit/copy actions */
.message.user .user-msg-actions {
    width: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;

    margin: 0 4px 0 0 !important;
}

/* Dark mode */
body.dark-mode .message.user .message-wrapper > .message-content {
    background: #303030 !important;
    color: #ececec !important;
}

body.dark-mode .message.user .message-media-grid img {
    border-color: rgba(255, 255, 255, 0.10) !important;
    background: #292929 !important;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.18),
        0 10px 28px rgba(0, 0, 0, 0.22) !important;
}

/* Mobile */
@media (max-width: 767px) {
    .message.user .message-wrapper {
        max-width: 88% !important;
    }

    .message.user .message-media-grid,
    .message.user .message-media-grid img {
        max-width: 100% !important;
    }

    .message.user .message-media-grid img {
        max-height: 320px !important;
        border-radius: 12px !important;
    }

    .message.user .message-media-grid:has(img:nth-child(2)) {
        width: 100% !important;
    }

    .message.user .message-media-grid:has(img:nth-child(2)) img {
        height: 145px !important;
    }
}

@media (max-width: 390px) {
    .message.user .message-wrapper {
        max-width: 92% !important;
    }

    .message.user .message-media-grid img {
        max-height: 280px !important;
    }

    .message.user .message-media-grid:has(img:nth-child(2)) img {
        height: 125px !important;
    }
}

/* =========================================================
   PROFILE — BLACK & WHITE PREMIUM THEME
   Only affects Profile settings panel.
   ========================================================= */

#settingsPanelProfile {
    color: #171717 !important;
}

/* Main profile heading */
#settingsPanelProfile h2 {
    color: #171717 !important;
}

/* Profile photo label */
#settingsPanelProfile .profile-upload-label,
#settingsPanelProfile label {
    color: #171717 !important;
}

/* Avatar */
#settingsPanelProfile .profile-editor-avatar {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    box-shadow: none !important;
}

/* Helper text */
#settingsPanelProfile .settings-helper-text {
    color: #737373 !important;
}

/* Inputs */
#settingsPanelProfile input {
    background: #ffffff !important;
    color: #171717 !important;

    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 14px !important;

    box-shadow: none !important;
}

#settingsPanelProfile input:focus {
    border-color: rgba(0, 0, 0, 0.22) !important;

    outline: none !important;
    box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.05) !important;
}

#settingsPanelProfile input[readonly] {
    background: #f7f7f8 !important;
    color: #747474 !important;
}

/* Change photo — primary black */
#settingsPanelProfile #chooseAvatarBtn {
    background: #171717 !important;
    color: #ffffff !important;

    border: 1px solid #171717 !important;
    border-radius: 12px !important;

    box-shadow: none !important;
}

#settingsPanelProfile #chooseAvatarBtn:hover {
    background: #000000 !important;
    border-color: #000000 !important;
}

/* Remove — white secondary */
#settingsPanelProfile #removeAvatarBtn {
    background: #ffffff !important;
    color: #6b6b6b !important;

    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 12px !important;

    box-shadow: none !important;
}

#settingsPanelProfile #removeAvatarBtn:hover {
    background: #f4f4f4 !important;
    color: #171717 !important;
}

/* Save — black */
#settingsPanelProfile #saveProfileSettingsBtn {
    background: #171717 !important;
    color: #ffffff !important;

    border: 1px solid #171717 !important;
    border-radius: 999px !important;

    box-shadow: none !important;
}

#settingsPanelProfile #saveProfileSettingsBtn:hover {
    background: #000000 !important;
}

/* Cancel — white */
#settingsPanelProfile #resetProfileSettingsBtn {
    background: #ffffff !important;
    color: #171717 !important;

    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 999px !important;

    box-shadow: none !important;
}

#settingsPanelProfile #resetProfileSettingsBtn:hover {
    background: #f4f4f4 !important;
}

/* Remove all purple/blue focus or accent effects */
#settingsPanelProfile button,
#settingsPanelProfile input {
    accent-color: #171717 !important;
}

#settingsPanelProfile button:focus-visible,
#settingsPanelProfile input:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.30) !important;
    outline-offset: 2px !important;
}

/* Profile section divider */
#settingsPanelProfile .profile-upload-row {
    border-bottom-color: rgba(0, 0, 0, 0.10) !important;
}

/* Dark mode */
body.dark-mode #settingsPanelProfile {
    color: #f1f1f1 !important;
}

body.dark-mode #settingsPanelProfile h2,
body.dark-mode #settingsPanelProfile label,
body.dark-mode #settingsPanelProfile .profile-upload-label {
    color: #f1f1f1 !important;
}

body.dark-mode #settingsPanelProfile .profile-editor-avatar {
    background: #212121 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

body.dark-mode #settingsPanelProfile input {
    background: #212121 !important;
    color: #f1f1f1 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

body.dark-mode #settingsPanelProfile input[readonly] {
    background: #292929 !important;
    color: #a8a8a8 !important;
}

body.dark-mode #settingsPanelProfile #chooseAvatarBtn,
body.dark-mode #settingsPanelProfile #saveProfileSettingsBtn {
    background: #f1f1f1 !important;
    color: #171717 !important;
    border-color: #f1f1f1 !important;
}

body.dark-mode #settingsPanelProfile #removeAvatarBtn,
body.dark-mode #settingsPanelProfile #resetProfileSettingsBtn {
    background: #292929 !important;
    color: #f1f1f1 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

body.dark-mode #settingsPanelProfile .profile-upload-row {
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

/* =========================================================
   NEO V3 — NATIVE MOBILE DRAWER + CHAT COMPOSER
   Mobile only. Existing HTML and JS remain unchanged.
   ========================================================= */

@media (max-width: 767px) {
    :root {
        --mobile-drawer-width: min(82vw, 292px);
        --mobile-bg: #ffffff;
        --mobile-surface: #ffffff;
        --mobile-soft: #f4f4f4;
        --mobile-border: rgba(0, 0, 0, 0.09);
        --mobile-text: #171717;
        --mobile-muted: #737373;
    }

    body.dark-mode {
        --mobile-bg: #000000;
        --mobile-surface: #171717;
        --mobile-soft: #212121;
        --mobile-border: rgba(255, 255, 255, 0.10);
        --mobile-text: #f5f5f5;
        --mobile-muted: rgba(255, 255, 255, 0.58);
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        min-height: 100%;
        overflow-x: hidden !important;
        background: var(--mobile-bg) !important;
    }

    body {
        position: relative !important;
    }

    .app-shell {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100dvh !important;
        background: var(--mobile-bg) !important;
        overflow-x: hidden !important;
    }

    /* -----------------------------------------------------
       TRUE OFF-CANVAS DRAWER
       ----------------------------------------------------- */

    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        z-index: 100 !important;

        width: var(--mobile-drawer-width) !important;
        max-width: var(--mobile-drawer-width) !important;
        height: 100dvh !important;

        display: flex !important;
        flex-direction: column !important;

        background: #ffffff !important;
        border-right: 1px solid rgba(0, 0, 0, 0.08) !important;

        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
        visibility: visible !important;

        box-shadow:
            18px 0 46px rgba(0, 0, 0, 0.16) !important;

        transition:
            transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
            visibility 220ms ease !important;

        will-change: transform;
    }

    body.dark-mode .sidebar {
        background: #0d0d0d !important;
        border-right-color: rgba(255, 255, 255, 0.08) !important;

        box-shadow:
            20px 0 52px rgba(0, 0, 0, 0.62) !important;
    }

    .sidebar.collapsed {
        transform: translate3d(-102%, 0, 0) !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .sidebar:not(.collapsed) {
        transform: translate3d(0, 0, 0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .sidebar-scrim {
        position: fixed !important;
        inset: 0 !important;
        z-index: 90 !important;

        display: block !important;

        background: rgba(0, 0, 0, 0.38) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transition:
            opacity 180ms ease,
            visibility 180ms ease !important;

        backdrop-filter: blur(1.5px);
        -webkit-backdrop-filter: blur(1.5px);
    }

    .sidebar-scrim.visible {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.dark-mode .sidebar-scrim {
        background: rgba(0, 0, 0, 0.56) !important;
    }

    /* Main app must never shift sideways */
    body.sidebar-collapsed .app-shell,
    body:not(.sidebar-collapsed) .app-shell {
        margin-left: 0 !important;
        transform: none !important;
        width: 100% !important;
    }

    /* -----------------------------------------------------
       DRAWER INTERNAL SPACING
       ----------------------------------------------------- */

    .sidebar-header {
        min-height: calc(58px + env(safe-area-inset-top)) !important;

        padding:
            calc(8px + env(safe-area-inset-top))
            12px
            8px !important;
    }

    .brand-button {
        min-width: 0 !important;
    }

    .sidebar-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;

        padding: 4px 10px 14px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .sidebar-primary-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .new-chat-btn,
    .sidebar-personality-btn {
        width: 100% !important;
        min-height: 44px !important;

        padding: 0 11px !important;

        display: flex !important;
        align-items: center !important;
        gap: 10px !important;

        border-radius: 11px !important;

        background: transparent !important;
        color: var(--mobile-text) !important;

        font-size: 14px !important;
        font-weight: 500 !important;
    }

    .new-chat-btn:active,
    .sidebar-personality-btn:active {
        background: var(--mobile-soft) !important;
    }

    body.dark-mode .new-chat-btn:active,
    body.dark-mode .sidebar-personality-btn:active {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    .history-section {
        margin-top: 18px !important;
    }

    .section-title {
        display: block !important;

        padding: 0 6px 7px !important;

        color: var(--mobile-muted) !important;

        font-size: 11.5px !important;
        font-weight: 500 !important;
    }

    .history-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    .history-item-wrapper {
        min-height: 40px !important;
        border-radius: 10px !important;
    }

    .history-item {
        min-height: 38px !important;

        padding: 8px 9px !important;

        color: var(--mobile-text) !important;

        font-size: 13.5px !important;
        line-height: 20px !important;
    }

    .history-three-dot {
        width: 32px !important;
        height: 32px !important;
        border-radius: 999px !important;
    }

    .sidebar-footer {
        flex: 0 0 auto !important;

        padding:
            8px
            10px
            calc(8px + env(safe-area-inset-bottom)) !important;

        border-top: 1px solid var(--mobile-border) !important;

        background: inherit !important;
    }

    /* -----------------------------------------------------
       MOBILE TOP BAR
       ----------------------------------------------------- */

    .top-bar {
        position: sticky !important;
        top: 0 !important;
        z-index: 60 !important;

        width: 100% !important;
        min-height: calc(56px + env(safe-area-inset-top)) !important;

        padding:
            env(safe-area-inset-top)
            12px
            0 !important;

        background: var(--mobile-bg) !important;
        border-bottom: 1px solid transparent !important;
    }

    .top-left,
    .top-right {
        min-width: 0 !important;
    }

    .top-toggle-btn {
        display: inline-flex !important;
    }

    .model-badge {
        min-height: 40px !important;
        padding: 0 9px !important;
        border-radius: 12px !important;
    }

    /* -----------------------------------------------------
       MOBILE CHAT CONTENT
       ----------------------------------------------------- */

    .scroll-area {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding:
            16px
            14px
            164px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        scroll-padding-bottom: 164px !important;
    }

    .conversation-column,
    .hero-section,
    .chat-messages {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .hero-section {
        padding: 54px 0 24px !important;
    }

    .hero-section h1 {
        width: 100% !important;

        margin: 0 0 8px !important;

        font-size: clamp(25px, 7vw, 30px) !important;
        line-height: 1.16 !important;
        text-align: center !important;

        overflow-wrap: anywhere !important;
    }

    .hero-copy {
        width: min(100%, 330px) !important;

        margin:
            0
            auto
            24px !important;

        color: var(--mobile-muted) !important;

        font-size: 14px !important;
        line-height: 1.45 !important;
        text-align: center !important;
    }

    .starter-grid {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .starter-grid button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 58px !important;

        padding: 0 16px !important;

        border-radius: 14px !important;
    }

    body.dark-mode .starter-grid button {
        background: transparent !important;
        color: var(--mobile-text) !important;
        border-color: var(--mobile-border) !important;
    }

    /* -----------------------------------------------------
       NATIVE CHAT COMPOSER
       ----------------------------------------------------- */

    .composer-dock {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 80 !important;

        width: 100% !important;

        padding:
            8px
            8px
            calc(8px + env(safe-area-inset-bottom)) !important;

        background:
            linear-gradient(
                to top,
                var(--mobile-bg) 78%,
                transparent
            ) !important;
    }

    .composer-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .live-suggestions {
        width: 100% !important;

        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;

        margin: 0 0 8px !important;
        padding: 0 2px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scrollbar-width: none;
    }

    .live-suggestions::-webkit-scrollbar {
        display: none;
    }

    .suggestion-chip {
        flex: 0 0 auto !important;

        min-height: 34px !important;
        padding: 6px 12px !important;

        border: 1px solid var(--mobile-border) !important;
        border-radius: 999px !important;

        background: var(--mobile-surface) !important;
        color: var(--mobile-text) !important;

        font-size: 13px !important;
        white-space: nowrap !important;
    }

    .glass-input-container {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 54px !important;

        padding: 5px 6px !important;

        border: 1px solid var(--mobile-border) !important;
        border-radius: 27px !important;

        background: var(--mobile-surface) !important;

        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.04),
            0 8px 24px rgba(0, 0, 0, 0.08) !important;
    }

    body.dark-mode .glass-input-container {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.28),
            0 10px 30px rgba(0, 0, 0, 0.30) !important;
    }

    .composer-input-row {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;

        display: flex !important;
        align-items: flex-end !important;
        gap: 4px !important;
    }

    .attach-btn,
    .mic-btn,
    .send-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;

        flex: 0 0 40px !important;

        border-radius: 999px !important;
    }

    .attach-btn,
    .mic-btn {
        background: transparent !important;
        color: var(--mobile-text) !important;
    }

    textarea#chatInput {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        max-height: 112px !important;

        padding: 9px 7px !important;

        border: 0 !important;
        outline: 0 !important;

        background: transparent !important;
        color: var(--mobile-text) !important;

        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    textarea#chatInput::placeholder {
        color: var(--mobile-muted) !important;
    }

    .send-btn {
        background: #111111 !important;
        color: #ffffff !important;

        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.18) !important;
    }

    body.dark-mode .send-btn {
        background: #f5f5f5 !important;
        color: #111111 !important;
    }

    .send-btn:active {
        transform: scale(0.94) !important;
    }

    .composer-note {
        display: none !important;
    }
}

/* Keyboard-height state */
@media (max-width: 767px) and (max-height: 560px) {
    .live-suggestions {
        display: none !important;
    }

    .scroll-area {
        padding-bottom: 92px !important;
        scroll-padding-bottom: 92px !important;
    }

    .composer-dock {
        padding:
            6px
            7px
            calc(6px + env(safe-area-inset-bottom)) !important;
    }

    .glass-input-container {
        min-height: 52px !important;
    }
}

/* =========================================================
   NEO V3 — TOOLTIP PURE PILL
   Removes all tooltip arrows.
   ========================================================= */

.neo-tooltip::before,
.neo-tooltip::after,
.neo-tooltip-arrow {
    display: none !important;
    content: none !important;
}

.neo-tooltip {
    border-radius: 999px !important;
    padding: 7px 14px !important;
    min-height: 30px !important;
    background: rgba(22, 22, 22, 0.96) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.14),
        0 12px 32px rgba(0, 0, 0, 0.16) !important;
}

body.dark-mode .neo-tooltip {
    background: rgba(244, 244, 244, 0.97) !important;
    color: #171717 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* =========================================================
   NEO MODEL MENU — PREMIUM BRAND SYSTEM
   Isolated model dropdown styling only.
   ========================================================= */

.model-dropdown-menu {
    width: 338px !important;
    padding: 10px !important;

    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 20px !important;

    background: rgba(255, 255, 255, 0.98) !important;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 14px 40px rgba(0, 0, 0, 0.10) !important;

    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.model-option {
    position: relative !important;

    min-height: 76px !important;
    padding: 14px 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;

    border: 1px solid transparent !important;
    border-radius: 14px !important;

    background: transparent !important;

    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        transform 140ms ease !important;
}

.model-option:hover {
    background: #f5f5f5 !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}

.model-option:active {
    transform: scale(0.992) !important;
}

.model-opt-info {
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.model-opt-info strong {
    color: #111111 !important;

    font-family:
        "Sora",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
}

.model-opt-info small {
    max-width: 230px !important;

    color: #727272 !important;

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

/* Active model */
.model-option.active {
    background: #f7f7f7 !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}

/* Replace blue check with monochrome confirmation */
.model-option .opt-check-icon {
    width: 26px !important;
    height: 26px !important;

    padding: 5px !important;

    border-radius: 999px !important;

    background: #111111 !important;
    color: #ffffff !important;

    stroke-width: 2 !important;
}

/* Pro option */
.model-option.pro-option {
    margin-top: 4px !important;
}

.model-option.pro-option::before {
    content: "" !important;

    position: absolute !important;
    top: -3px !important;
    left: 14px !important;
    right: 14px !important;

    height: 1px !important;

    background: rgba(0, 0, 0, 0.07) !important;
}

/* Premium PRO badge */
.pro-tag {
    flex: 0 0 auto !important;

    min-height: 24px !important;
    padding: 0 9px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid #111111 !important;
    border-radius: 999px !important;

    background: #111111 !important;
    color: #ffffff !important;

    font-family:
        "IBM Plex Mono",
        ui-monospace,
        SFMono-Regular,
        monospace !important;

    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
}

/* Trigger badge */
.model-badge {
    min-height: 42px !important;
    padding: 0 11px !important;

    border: 1px solid transparent !important;
    border-radius: 12px !important;

    background: transparent !important;

    transition:
        background-color 140ms ease,
        border-color 140ms ease !important;
}

.model-badge:hover {
    background: #f5f5f5 !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}

.model-name {
    color: #111111 !important;

    font-family:
        "Sora",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

.model-chevron {
    color: #737373 !important;
}

/* Dark mode */
body.dark-mode .model-dropdown-menu {
    border-color: rgba(255, 255, 255, 0.09) !important;
    background: rgba(18, 18, 18, 0.98) !important;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.28),
        0 18px 48px rgba(0, 0, 0, 0.48) !important;
}

body.dark-mode .model-option:hover,
body.dark-mode .model-option.active {
    background: #202020 !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

body.dark-mode .model-opt-info strong,
body.dark-mode .model-name {
    color: #f5f5f5 !important;
}

body.dark-mode .model-opt-info small,
body.dark-mode .model-chevron {
    color: #9b9b9b !important;
}

body.dark-mode .model-option.pro-option::before {
    background: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .model-option .opt-check-icon {
    background: #f5f5f5 !important;
    color: #111111 !important;
}

body.dark-mode .pro-tag {
    border-color: #f5f5f5 !important;
    background: #f5f5f5 !important;
    color: #111111 !important;
}

body.dark-mode .model-badge:hover {
    background: #202020 !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* Mobile */
@media (max-width: 767px) {
    .model-dropdown-menu {
        width: min(330px, calc(100vw - 24px)) !important;
        padding: 8px !important;
        border-radius: 18px !important;
    }

    .model-option {
        min-height: 72px !important;
        padding: 12px !important;
        border-radius: 13px !important;
    }
}

/* =========================================================
   NEO PRO MODAL — COMPACT BLACK & WHITE
   Only affects the upgrade popup.
   ========================================================= */

#upgradeModal .modal-card {
    width: min(440px, calc(100vw - 28px)) !important;
    max-height: min(720px, calc(100dvh - 32px)) !important;

    padding: 28px !important;

    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 22px !important;

    background: #ffffff !important;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08),
        0 24px 70px rgba(0, 0, 0, 0.18) !important;

    overflow-y: auto !important;
}

#upgradeModal .modal-close-btn {
    top: 16px !important;
    right: 16px !important;

    width: 34px !important;
    height: 34px !important;

    border-radius: 999px !important;

    background: transparent !important;
    color: #707070 !important;
}

#upgradeModal .modal-close-btn:hover {
    background: #f2f2f2 !important;
    color: #111111 !important;
}

#upgradeModal .modal-header {
    margin-bottom: 22px !important;
    text-align: left !important;
}

#upgradeModal .pro-sparkle-badge {
    width: 44px !important;
    height: 44px !important;

    margin: 0 0 18px !important;

    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 14px !important;

    background: #111111 !important;
    color: #ffffff !important;
}

#upgradeModal .modal-header h2 {
    margin: 0 0 8px !important;

    color: #111111 !important;

    font-family:
        "Sora",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em !important;
}

#upgradeModal .modal-header p {
    margin: 0 !important;

    color: #707070 !important;

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size: 14px !important;
    line-height: 1.5 !important;
}

#upgradeModal .modal-features-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;

    margin: 0 0 22px !important;
}

#upgradeModal .feature-item {
    min-height: 64px !important;

    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;

    padding: 10px 0 !important;

    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;

    background: transparent !important;
}

#upgradeModal .feature-item:last-child {
    border-bottom: 0 !important;
}

#upgradeModal .feature-icon {
    width: 38px !important;
    height: 38px !important;

    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;

    background: #f5f5f5 !important;
    color: #111111 !important;
}

#upgradeModal .feature-text strong {
    display: block !important;

    margin-bottom: 4px !important;

    color: #111111 !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

#upgradeModal .feature-text small {
    display: block !important;

    color: #767676 !important;

    font-size: 12.5px !important;
    line-height: 1.45 !important;
}

#upgradeModal .modal-footer-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;

    margin-top: 4px !important;
}

#upgradeModal .upgrade-btn-primary {
    width: 100% !important;
    min-height: 48px !important;

    border: 1px solid #111111 !important;
    border-radius: 14px !important;

    background: #111111 !important;
    color: #ffffff !important;

    box-shadow: none !important;

    font-size: 14px !important;
    font-weight: 600 !important;
}

#upgradeModal .upgrade-btn-primary:hover {
    background: #000000 !important;
}

#upgradeModal .upgrade-btn-secondary {
    width: 100% !important;
    min-height: 42px !important;

    border: 0 !important;
    border-radius: 12px !important;

    background: transparent !important;
    color: #666666 !important;

    font-size: 13px !important;
    font-weight: 500 !important;
}

#upgradeModal .upgrade-btn-secondary:hover {
    background: #f4f4f4 !important;
    color: #111111 !important;
}

/* Dark mode */

body.dark-mode #upgradeModal .modal-card {
    border-color: rgba(255, 255, 255, 0.09) !important;
    background: #171717 !important;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.34),
        0 28px 80px rgba(0, 0, 0, 0.58) !important;
}

body.dark-mode #upgradeModal .modal-header h2,
body.dark-mode #upgradeModal .feature-text strong {
    color: #f5f5f5 !important;
}

body.dark-mode #upgradeModal .modal-header p,
body.dark-mode #upgradeModal .feature-text small {
    color: #a0a0a0 !important;
}

body.dark-mode #upgradeModal .pro-sparkle-badge {
    border-color: rgba(255, 255, 255, 0.10) !important;
    background: #f5f5f5 !important;
    color: #111111 !important;
}

body.dark-mode #upgradeModal .feature-item {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode #upgradeModal .feature-icon {
    border-color: rgba(255, 255, 255, 0.09) !important;
    background: #232323 !important;
    color: #f5f5f5 !important;
}

body.dark-mode #upgradeModal .upgrade-btn-primary {
    border-color: #f5f5f5 !important;
    background: #f5f5f5 !important;
    color: #111111 !important;
}

body.dark-mode #upgradeModal .upgrade-btn-secondary {
    color: #b3b3b3 !important;
}

body.dark-mode #upgradeModal .upgrade-btn-secondary:hover {
    background: #242424 !important;
    color: #ffffff !important;
}

@media (max-width: 767px) {
    #upgradeModal {
        padding: 14px !important;
    }

    #upgradeModal .modal-card {
        width: 100% !important;
        max-height: calc(100dvh - 28px) !important;

        padding: 22px 18px 18px !important;

        border-radius: 20px !important;
    }

    #upgradeModal .modal-header h2 {
        font-size: 21px !important;
    }

    #upgradeModal .modal-header {
        margin-bottom: 18px !important;
    }

    #upgradeModal .modal-features-list {
        margin-bottom: 18px !important;
    }
}

/* =========================================================
   BILLING PANEL — COMPACT MONOCHROME STANDARD
   Only affects the Billing settings panel.
   ========================================================= */

#settingsPanelBilling {
    width: 100% !important;
    max-width: 680px !important;
    color: #171717 !important;
}

#settingsPanelBilling h2 {
    margin: 0 0 20px !important;

    font-family:
        "Sora",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em !important;

    color: #171717 !important;
}

#settingsPanelBilling .settings-row {
    width: 100% !important;
    min-height: 92px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;

    padding: 18px !important;

    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;

    background: #ffffff !important;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 8px 24px rgba(0, 0, 0, 0.045) !important;
}

#settingsPanelBilling .settings-row > div {
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

#settingsPanelBilling #billingPlanText {
    color: #171717 !important;

    font-family:
        "Sora",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

#settingsPanelBilling .settings-row small {
    color: #737373 !important;

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

#settingsPanelBilling #settingsUpgradeBtn {
    flex: 0 0 auto !important;

    min-width: 96px !important;
    min-height: 42px !important;

    padding: 0 17px !important;

    border: 1px solid #171717 !important;
    border-radius: 999px !important;

    background: #171717 !important;
    color: #ffffff !important;

    box-shadow: none !important;

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    transition:
        background-color 140ms ease,
        transform 120ms ease !important;
}

#settingsPanelBilling #settingsUpgradeBtn:hover {
    background: #000000 !important;
}

#settingsPanelBilling #settingsUpgradeBtn:active {
    transform: scale(0.97) !important;
}

/* Dark mode */

body.dark-mode #settingsPanelBilling {
    color: #f5f5f5 !important;
}

body.dark-mode #settingsPanelBilling h2,
body.dark-mode #settingsPanelBilling #billingPlanText {
    color: #f5f5f5 !important;
}

body.dark-mode #settingsPanelBilling .settings-row {
    border-color: rgba(255, 255, 255, 0.09) !important;
    background: #1b1b1b !important;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.20),
        0 10px 28px rgba(0, 0, 0, 0.24) !important;
}

body.dark-mode #settingsPanelBilling .settings-row small {
    color: #a0a0a0 !important;
}

body.dark-mode #settingsPanelBilling #settingsUpgradeBtn {
    border-color: #f5f5f5 !important;
    background: #f5f5f5 !important;
    color: #171717 !important;
}

/* Mobile */

@media (max-width: 767px) {
    #settingsPanelBilling {
        max-width: none !important;
    }

    #settingsPanelBilling h2 {
        margin-bottom: 16px !important;
        font-size: 21px !important;
    }

    #settingsPanelBilling .settings-row {
        min-height: 0 !important;

        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;

        padding: 16px !important;

        border-radius: 15px !important;
    }

    #settingsPanelBilling #settingsUpgradeBtn {
        width: 100% !important;
        min-height: 44px !important;
    }
}

/* =========================================================
   NEO MODEL MENU — COMPACT PREMIUM SIZE
   Only reduces model dropdown size and spacing.
   ========================================================= */

.model-dropdown-menu {
    width: 292px !important;
    padding: 7px !important;

    border-radius: 16px !important;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 10px 28px rgba(0, 0, 0, 0.09) !important;
}

.model-option {
    min-height: 60px !important;

    padding: 10px 11px !important;
    gap: 10px !important;

    border-radius: 11px !important;
}

.model-opt-info {
    gap: 3px !important;
}

.model-opt-info strong {
    font-size: 14px !important;
    line-height: 1.2 !important;
}

.model-opt-info small {
    max-width: 205px !important;

    font-size: 11.5px !important;
    line-height: 1.35 !important;
}

.model-option .opt-check-icon {
    width: 24px !important;
    height: 24px !important;

    padding: 5px !important;
}

.pro-tag {
    min-height: 22px !important;
    padding: 0 8px !important;

    font-size: 9px !important;
}

.model-option.pro-option {
    margin-top: 2px !important;
}

.model-option.pro-option::before {
    left: 11px !important;
    right: 11px !important;
}

/* Mobile */
@media (max-width: 767px) {
    .model-dropdown-menu {
        width: min(286px, calc(100vw - 20px)) !important;
        padding: 6px !important;
        border-radius: 15px !important;
    }

    .model-option {
        min-height: 58px !important;
        padding: 9px 10px !important;
    }

    .model-opt-info small {
        max-width: 195px !important;
    }
}

/* =========================================================
   NEO DESKTOP — FINAL STABLE SHELL + TOP BAR (v40)
   ========================================================= */

@media (min-width: 768px) {
    :root {
        --neo-sidebar-width: 304px;
        --neo-topbar-height: 56px;
        --neo-edge-gap: 24px;
    }

    /* App-shell now uses flex layout – no manual offset */
    .app-shell {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        transform: none !important;
    }

    .top-bar {
        position: sticky !important;
        top: 0 !important;
        z-index: 60 !important;

        width: 100% !important;
        max-width: none !important;

        height: var(--neo-topbar-height) !important;
        min-height: var(--neo-topbar-height) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        margin: 0 !important;
        padding: 0 var(--neo-edge-gap) !important;

        background: var(--bg-main, #ffffff) !important;

        border: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;

        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .top-left {
        position: static !important;
        inset: auto !important;
        transform: none !important;

        display: flex !important;
        align-items: center !important;
        gap: 8px !important;

        width: auto !important;
        height: 36px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .top-right {
        position: static !important;
        inset: auto !important;
        transform: none !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #sidebarToggleBtn,
    #topBarDarkModeToggle {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;
        border-radius: 9px !important;

        background: transparent !important;
        box-shadow: none !important;
    }

    .model-badge {
        height: 36px !important;
        min-height: 36px !important;

        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;

        margin: 0 !important;
        padding: 0 7px !important;

        border: 0 !important;
        border-radius: 9px !important;

        background: transparent !important;
        box-shadow: none !important;
    }

    /* Toggle visibility */
    body:not(.sidebar-collapsed) #sidebarToggleBtn {
        display: none !important;
    }

    body.sidebar-collapsed #sidebarToggleBtn {
        display: inline-flex !important;
    }

    /* Hover states */
    #sidebarToggleBtn:hover,
    #topBarDarkModeToggle:hover {
        background: rgba(0, 0, 0, 0.055) !important;
    }

    .model-badge:hover {
        background: rgba(0, 0, 0, 0.055) !important;
    }

    /* Dark mode */
    body.dark-mode .top-bar {
        background: var(--bg-main, #212121) !important;
        border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    }

    body.dark-mode #sidebarToggleBtn:hover,
    body.dark-mode #topBarDarkModeToggle:hover,
    body.dark-mode .model-badge:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }
}

/* =========================================================
   NEO V3 — FINAL PREMIUM MICRO-INTERACTION POLISH
   Fade-only interactions. No zoom / scale motion.
   ========================================================= */

/* ---------- GLOBAL BUTTON MOTION ---------- */

button,
[role="button"],
.model-badge,
.model-option,
.suggestion-chip,
.attachment-remove-btn {
    transform: none !important;

    transition:
        background-color 150ms ease,
        color 150ms ease,
        border-color 150ms ease,
        opacity 150ms ease,
        box-shadow 150ms ease !important;
}

button:hover,
button:active,
[role="button"]:hover,
[role="button"]:active,
.model-badge:hover,
.model-badge:active,
.model-option:hover,
.model-option:active,
.suggestion-chip:hover,
.suggestion-chip:active,
.attachment-remove-btn:hover,
.attachment-remove-btn:active {
    transform: none !important;
}

/* ---------- ATTACHMENT REMOVE — MINIMAL ---------- */

.attachment-remove-btn {
    top: 6px !important;
    right: 6px !important;

    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;

    padding: 0 !important;

    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 999px !important;

    background: rgba(24, 24, 24, 0.74) !important;
    color: #ffffff !important;

    font-size: 17px !important;
    font-weight: 300 !important;
    line-height: 1 !important;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.14) !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;

    opacity: 0.88 !important;
}

.attachment-remove-btn:hover {
    background: rgba(15, 15, 15, 0.90) !important;
    opacity: 1 !important;
}

body.dark-mode .attachment-remove-btn {
    background: rgba(20, 20, 20, 0.78) !important;
}

/* =========================================================
   NEO V3 — FINAL TOOLTIP CLEANUP
   Pure pill, fade only. No scale, no arrow.
   ========================================================= */

.neo-tooltip {
    transform: none !important;
    transition:
        opacity 150ms ease,
        visibility 150ms ease !important;
}

.neo-tooltip.is-visible {
    transform: none !important;
}

.neo-tooltip::after,
.neo-tooltip-arrow {
    display: none !important;
}

/* =========================================================
   NEO DESKTOP — FINAL TOP BAR POLISH (PRIORITY 1)
   ========================================================= */

@media (min-width: 768px) {
    :root {
        --neo-topbar-height: 56px;
        --neo-topbar-edge: 16px;
    }

    .top-bar {
        height: var(--neo-topbar-height) !important;
        min-height: var(--neo-topbar-height) !important;

        padding: 0 var(--neo-topbar-edge) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        background: var(--bg-main, #ffffff) !important;

        border: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;

        box-shadow: none !important;
    }

    .top-left {
        height: 40px !important;

        display: flex !important;
        align-items: center !important;

        gap: 8px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .top-right {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #sidebarToggleBtn,
    #topBarDarkModeToggle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        margin: 0 !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 8px !important;

        box-shadow: none !important;
    }

    #sidebarToggleBtn:hover,
    #topBarDarkModeToggle:hover {
        background: rgba(0, 0, 0, 0.04) !important;
    }

    .model-badge {
        height: 40px !important;
        min-height: 40px !important;

        display: inline-flex !important;
        align-items: center !important;

        gap: 8px !important;

        margin: 0 !important;
        padding: 0 6px !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 8px !important;

        box-shadow: none !important;
    }

    .model-badge:hover {
        background: rgba(0, 0, 0, 0.04) !important;
    }

    .model-name {
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }

    .model-chevron {
        width: 16px !important;
        height: 16px !important;
        opacity: 0.65 !important;
    }

    body.dark-mode .top-bar {
        background: var(--bg-main, #212121) !important;
        border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    }

    body.dark-mode #sidebarToggleBtn:hover,
    body.dark-mode #topBarDarkModeToggle:hover,
    body.dark-mode .model-badge:hover {
        background: rgba(255, 255, 255, 0.06) !important;
    }
}

/* =========================================================
   NEO — FINAL NO-SCALE SAFETY
   Fade-only interaction standard
   ========================================================= */

.send-btn:hover,
.send-btn:active,
.attachment-preview-card:hover,
.message.user .edit-btn-cancel:active,
.message.user .edit-btn-save:active,
.model-option:hover,
.model-option:active {
    transform: none !important;
}

/* =========================================================
   NEO — DESKTOP SAFE EDGE + CHAT BREATHING
   Spacing only. No redesign.
   ========================================================= */

@media (min-width: 768px) {

    /* Give top bar proper premium edge spacing */
    .top-bar {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    /* Keep toggle + model from feeling glued together */
    .top-left {
        gap: 12px !important;
    }

    /* Push conversation away from header */
    .scroll-area {
        padding-top: 24px !important;
    }

    /* Keep first user message comfortably below top bar */
    .chat-messages {
        padding-top: 12px !important;
    }
}

/* =========================================================
   NEO — FINAL MICRO-POLISH REFINEMENTS (v48)
   Spacing/image/composer refinements only.
   ========================================================= */

/* 1. Desktop top‑bar edge refinement */
@media (min-width: 768px) {
    .top-bar {
        padding-left: 24px !important;
        padding-right: 28px !important;
    }
}

/* 2. Compact uploaded image previews – single image */
.message.user .message-media-grid {
    width: auto !important;
    max-width: 100% !important;

    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;

    gap: 6px !important;

    overflow: visible !important;
}

.message.user .message-media-grid img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 160px !important;
    max-height: 118px !important;

    object-fit: contain !important;

    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.035) !important;
}

/* Multiple images – uniform thumbnails */
.message.user .message-media-grid:has(img:nth-child(2)) {
    width: auto !important;
}

.message.user .message-media-grid:has(img:nth-child(2)) img {
    width: 140px !important;
    height: 100px !important;

    object-fit: cover !important;
}

/* 3. Tighten image/message relationship */
.message.user .message-wrapper {
    gap: 5px !important;
}

.message.user .user-msg-actions {
    margin-top: 2px !important;
}

/* 4. Slightly slimmer desktop composer */
.glass-input-container {
    min-height: 56px !important;
    padding: 5px 8px !important;
}

.composer-input-row {
    min-height: 44px !important;
    gap: 6px !important;
}

textarea#chatInput {
    min-height: 38px !important;

    padding: 7px 7px !important;

    font-size: 15.5px !important;
    line-height: 1.4 !important;
}

.send-btn {
    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;
    min-height: 40px !important;
}

/* Mobile: compact, but keep usable touch targets */
@media (max-width: 767px) {
    .glass-input-container {
        min-height: 52px !important;
        padding: 5px 6px !important;
    }

    .composer-input-row {
        min-height: 42px !important;
        gap: 4px !important;
    }

    textarea#chatInput {
        min-height: 38px !important;
        padding: 6px 5px !important;

        font-size: 16px !important;
    }

    .send-btn {
        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;
        min-height: 40px !important;
    }

    .message.user .message-media-grid img {
        max-width: 132px !important;
        max-height: 100px !important;
    }
}

/* 5. Everything else untouched – no transform/scale overrides added */

/* =========================================================
   NEO — FINAL MICRO ALIGNMENT PASS
   Only edge breathing + composer vertical centering.
   ========================================================= */

@media (min-width: 768px) {
    .top-bar {
        padding-left: 32px !important;
    }

    .top-left {
        gap: 12px !important;
    }

    .composer-input-row {
        align-items: center !important;
    }

    .attach-btn,
    .mic-btn,
    .send-btn {
        position: relative !important;
        top: -2px !important;
        transform: none !important;
    }
}

@media (max-width: 767px) {
    .composer-input-row {
        align-items: center !important;
    }

    .attach-btn,
    .mic-btn,
    .send-btn {
        position: relative !important;
        top: -1px !important;
        transform: none !important;
    }
}

/* =========================================================
   NEO — UNIFIED POPUP SYSTEM
   Visual consistency across all floating menus.
   ========================================================= */

:root {
    --neo-popup-bg: #ffffff;
    --neo-popup-border: rgba(0, 0, 0, 0.08);
    --neo-popup-radius: 16px;
    --neo-popup-padding: 7px;
    --neo-popup-row-height: 44px;
    --neo-popup-row-radius: 10px;
    --neo-popup-text: #171717;
    --neo-popup-muted: #737373;
    --neo-popup-hover: #f5f5f5;

    --neo-popup-shadow:
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 12px 32px rgba(0, 0, 0, 0.10);
}

body.dark-mode {
    --neo-popup-bg: #1b1b1b;
    --neo-popup-border: rgba(255, 255, 255, 0.09);
    --neo-popup-text: #f2f2f2;
    --neo-popup-muted: #9b9b9b;
    --neo-popup-hover: #252525;

    --neo-popup-shadow:
        0 1px 2px rgba(0, 0, 0, 0.24),
        0 14px 36px rgba(0, 0, 0, 0.38);
}

/* ---- Shared popup surfaces ---- */
.model-dropdown-menu,
.chat-context-menu,
.composer-plus-menu {
    padding: var(--neo-popup-padding) !important;

    border: 1px solid var(--neo-popup-border) !important;
    border-radius: var(--neo-popup-radius) !important;

    background: var(--neo-popup-bg) !important;
    color: var(--neo-popup-text) !important;

    box-shadow: var(--neo-popup-shadow) !important;

    /* Remove any extra backdrop filters for consistency */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ---- Shared menu rows (for context and composer) ---- */
.chat-context-menu button,
.composer-plus-menu button {
    width: 100% !important;
    min-height: var(--neo-popup-row-height) !important;

    display: flex !important;
    align-items: center !important;

    gap: 11px !important;

    padding: 0 11px !important;

    border: 0 !important;
    border-radius: var(--neo-popup-row-radius) !important;

    background: transparent !important;
    color: var(--neo-popup-text) !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    box-shadow: none !important;
}

.chat-context-menu button:hover,
.composer-plus-menu button:hover {
    background: var(--neo-popup-hover) !important;
}

/* ---- Icon consistency ---- */
.chat-context-menu button svg,
.composer-plus-menu button svg {
    width: 19px !important;
    height: 19px !important;

    flex: 0 0 19px !important;

    opacity: 0.78 !important;
}

/* ---- Destructive action (delete) ---- */
.chat-context-menu .delete-action,
.chat-context-menu [data-action="delete"] {
    color: #e5484d !important;
}

/* ---- Model menu – richer rows, keep its density ---- */
.model-dropdown-menu {
    width: 292px !important; /* keep your existing width */
}

.model-option {
    min-height: 60px !important;
    padding: 10px 11px !important;
    border-radius: 11px !important;
    /* Inherits background, hover, etc. from the surface variables */
}

.model-option:hover {
    background: var(--neo-popup-hover) !important;
}

/* =========================================================
   NEO — ATTACHMENT FILE ICON POLISH
   Compact icon tile + cleaner filename alignment.
   ========================================================= */

.attachment-preview-card {
    gap: 9px !important;
    padding-left: 9px !important;
}

/* File-type icon inside non-image attachments */
.attachment-preview-file i,
.attachment-preview-file svg {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 5px !important;

    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 8px !important;

    background: #f5f5f5 !important;
    color: #363636 !important;

    opacity: 1 !important;
    box-sizing: border-box !important;
}

/* Filename + icon should feel like one aligned row */
.attachment-preview-file {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    padding: 0 !important;

    font-size: 13px !important;
    line-height: 1.2 !important;
}

/* Keep real image thumbnails separate */
.attachment-preview-card img {
    flex: 0 0 40px !important;
}

/* Dark mode */
body.dark-mode .attachment-preview-file i,
body.dark-mode .attachment-preview-file svg {
    background: #2a2a2a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e8e8e8 !important;
}

/* =========================================================
   NEO — ATTACHMENT REMOVE BUTTON
   Smaller, neutral, premium.
   ========================================================= */

.attachment-remove-btn {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;

    top: 6px !important;
    right: 6px !important;

    padding: 0 !important;

    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 999px !important;

    background: rgba(36, 36, 36, 0.72) !important;
    color: rgba(255, 255, 255, 0.88) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12) !important;

    opacity: 0.9 !important;

    transform: none !important;
}

.attachment-remove-btn:hover {
    background: rgba(20, 20, 20, 0.90) !important;
    color: #ffffff !important;
    opacity: 1 !important;
    transform: none !important;
}

.attachment-remove-btn:active {
    transform: none !important;
}

/* Remove any destructive red styling */
.attachment-remove-btn,
.attachment-remove-btn:hover,
.attachment-remove-btn:focus-visible {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Dark mode */
body.dark-mode .attachment-remove-btn {
    background: rgba(245, 245, 245, 0.14) !important;
    color: rgba(255, 255, 255, 0.86) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .attachment-remove-btn:hover {
    background: rgba(245, 245, 245, 0.20) !important;
    color: #ffffff !important;
}

/* =========================================================
   NEYO — SIDEBAR BRAND LOCKUP
   Icon + name only. No layout redesign.
   ========================================================= */

.brand-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;

    min-width: 0 !important;
    padding: 4px 2px !important;

    background: transparent !important;
    border: 0 !important;

    color: #171717 !important;
}

.brand-logo {
    display: block !important;

    width: 24px !important;
    height: 24px !important;

    flex: 0 0 24px !important;

    object-fit: contain !important;
}

.brand-name {
    font-family:
        "Sora",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    letter-spacing: -0.02em !important;

    color: #171717 !important;
}

body.dark-mode .brand-name {
    color: #f5f5f5 !important;
}

/* =========================================================
   NEYO — HISTORY THREE-DOT ALIGNMENT
   Vertical centering only.
   ========================================================= */

.history-item-wrapper {
    position: relative !important;
}

.history-three-dot {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;

    transform: translateY(-50%) !important;

    width: 30px !important;
    height: 30px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
}

.history-three-dot:hover,
.history-three-dot:active {
    transform: translateY(-50%) !important;
}