/**
 * AI Subscription — Mystic Skin
 *
 * Re-themes the chat in dark mode with a cream/gold + deep-navy palette
 * driven by Elementor global color variables.
 *
 * Loaded only when the Mystic Skin add-on is active. Light mode is
 * intentionally untouched so users who toggle to light still get the
 * plugin's default look.
 *
 * @package AI_Subscription
 */

/* ===== Chat height — leave room for the site's fixed header (~100px) ===== */
.ai-sub-app {
    height: calc(100vh - 100px);
}

/* ===== Chat container — same deep navy as the sidebar.
   The CSS variable override applies in all cases (it doesn't fight the transparent feature).
   The background only applies when the user hasn't enabled the Transparent Background addon. */
.ai-sub-app[data-theme="dark"] {
    /* Keep the original gold tone for date labels (Aujourd'hui, Hier...).
       The default dark theme uses blue here, but it clashes with the cream palette. */
    --date-label: #d4af5c;
}

.ai-sub-app[data-theme="dark"]:not(.transparent-bg) {
    background: var(--e-global-color-4dd0f4f, #000F26);
}

/* ===== Input area (around the prompt) — match the deep navy unless transparent ===== */
.ai-sub-app[data-theme="dark"]:not(.transparent-bg) .input-area {
    background: var(--e-global-color-4dd0f4f, #000F26);
}

/* ===== Sidebar + top bar — match the site's deep navy background ===== */
.ai-sub-app[data-theme="dark"] .sidebar {
    background: var(--e-global-color-4dd0f4f, #000F26);
    border-right-color: var(--e-global-color-0687250, #475569);
}

.ai-sub-app[data-theme="dark"] .sidebar-header {
    border-bottom-color: var(--e-global-color-0687250, #475569);
}

.ai-sub-app[data-theme="dark"]:not(.transparent-topbar) .top-bar {
    background: var(--e-global-color-4dd0f4f, #000F26);
}

/* ===== Search field (sidebar) ===== */
.ai-sub-app[data-theme="dark"] .search-input {
    background: var(--e-global-color-a986c82, #33415580);
    color: var(--e-global-color-b54462a, #F1DAB0);
    border-color: var(--e-global-color-0687250, #475569);
}

.ai-sub-app[data-theme="dark"] .search-input::placeholder {
    color: var(--e-global-color-b54462a, #F1DAB0);
    opacity: 0.55;
}

.ai-sub-app[data-theme="dark"] .search-input:focus {
    border-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

/* ===== Prompt textarea ===== */
.ai-sub-app[data-theme="dark"] .input-box {
    background: var(--e-global-color-a986c82, #33415580);
    border-color: var(--e-global-color-0687250, #475569);
}

.ai-sub-app[data-theme="dark"] .input-box:focus-within {
    border-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), var(--shadow-input);
}

.ai-sub-app[data-theme="dark"] .input-top textarea {
    color: var(--e-global-color-b54462a, #F1DAB0);
}

.ai-sub-app[data-theme="dark"] .input-top textarea::placeholder {
    color: var(--e-global-color-b54462a, #F1DAB0);
    opacity: 0.55;
}

/* ===== New Chat button (sidebar) — outlined → fills on hover ===== */
.ai-sub-app[data-theme="dark"] .new-chat-btn {
    background: transparent;
    color: var(--e-global-color-b54462a, #F1DAB0);
    border-color: var(--e-global-color-b54462a, #F1DAB0);
}

.ai-sub-app[data-theme="dark"] .new-chat-btn:hover {
    background: var(--e-global-color-b54462a, #F1DAB0);
    color: var(--e-global-color-1fe9fdf, #8B5403);
    box-shadow: none;
}

/* ===== Conversation list items ===== */
.ai-sub-app[data-theme="dark"] .conversation-item-text {
    color: var(--e-global-color-b54462a, #F1DAB0);
}

.ai-sub-app[data-theme="dark"] .conversation-item:hover {
    background: var(--e-global-color-a986c82, #33415580);
}

.ai-sub-app[data-theme="dark"] .conversation-item.active {
    background: var(--e-global-color-a986c82, #33415580);
    box-shadow: inset 0 0 0 1px var(--e-global-color-0687250, #475569);
}

/* ===== Suggestion buttons (welcome screen) — outlined → fills on hover ===== */
.ai-sub-app[data-theme="dark"] .suggestion-btn {
    background: var(--e-global-color-a986c82, #33415580);
    color: var(--e-global-color-b54462a, #F1DAB0);
    border-color: var(--e-global-color-0687250, #475569);
}

.ai-sub-app[data-theme="dark"] .suggestion-btn:hover {
    background: var(--e-global-color-b54462a, #F1DAB0);
    color: var(--e-global-color-1fe9fdf, #8B5403);
    border-color: var(--e-global-color-b54462a, #F1DAB0);
    box-shadow: none;
}

/* ===== Send button — outlined → fills on hover/active ===== */
.ai-sub-app[data-theme="dark"] .send-btn {
    border-color: var(--e-global-color-b54462a, #F1DAB0);
    color: var(--e-global-color-b54462a, #F1DAB0);
}

.ai-sub-app[data-theme="dark"] .send-btn:hover,
.ai-sub-app[data-theme="dark"] .send-btn.active {
    background: var(--e-global-color-b54462a, #F1DAB0);
    border-color: var(--e-global-color-b54462a, #F1DAB0);
    color: var(--e-global-color-1fe9fdf, #8B5403);
}

/* ===== Top bar icon buttons (sidebar toggle, theme, user) ===== */
.ai-sub-app[data-theme="dark"] .icon-btn:hover {
    background: var(--e-global-color-a986c82, #33415580);
    color: var(--e-global-color-b54462a, #F1DAB0);
}

/* Larger icons in mystic skin */
.ai-sub-app[data-theme="dark"] .icon-btn svg {
    width: 25px;
    height: 25px;
}

/* ===== Model selector + user settings dropdowns ===== */
.ai-sub-app[data-theme="dark"] .model-selector-dropdown,
.ai-sub-app[data-theme="dark"] .user-settings-dropdown {
    background: var(--e-global-color-4dd0f4f, #000F26);
    border-color: var(--e-global-color-b54462a, #F1DAB0);
}

/* The user-settings popup paints its visible background on the .inner wrapper */
.ai-sub-app[data-theme="dark"] .user-settings-dropdown-inner {
    background: var(--e-global-color-8233f03, #062B2E);
}

.ai-sub-app[data-theme="dark"] .model-selector-btn {
    color: var(--e-global-color-b54462a, #F1DAB0);
}

/* ===== "Recharger" / "Top up" button inside the user-settings dropdown ===== */
.ai-sub-app[data-theme="dark"] .quota-topup-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px 14px;
    background: transparent;
    color: var(--e-global-color-b54462a, #F1DAB0);
    border: 2px solid var(--e-global-color-b54462a, #F1DAB0);
    border-radius: 25px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9em;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.ai-sub-app[data-theme="dark"] .quota-topup-btn:hover {
    background: var(--e-global-color-b54462a, #F1DAB0);
    color: var(--e-global-color-1fe9fdf, #8B5403);
}

/* ===== Loading spinner — cream highlight instead of accent blue ===== */
.ai-sub-app[data-theme="dark"] .loading-spinner::after {
    border-top-color: var(--e-global-color-b54462a, #F1DAB0);
}

/* ===== "Mon compte" link inside the user dropdown — white default, cream on hover ===== */
.ai-sub-app[data-theme="dark"] .user-settings-link {
    color: var(--e-global-color-edaa0cc, #FFFFFF);
}

.ai-sub-app[data-theme="dark"] .user-settings-link:hover {
    color: var(--e-global-color-b54462a, #F1DAB0);
}

/* ===== Fast Buy ("Recharger") modal — cream/navy theme to match the rest ===== */
.ai-sub-app[data-theme="dark"] .fast-buy-modal {
    background: var(--e-global-color-8233f03, #062B2E);
    border: none;
    border-radius: 25px;
    color: var(--e-global-color-b54462a, #F1DAB0);
}

.ai-sub-app[data-theme="dark"] .fast-buy-modal h3 {
    color: var(--e-global-color-edaa0cc, #FFFFFF);
}

.ai-sub-app[data-theme="dark"] .fast-buy-modal p {
    color: var(--e-global-color-b54462a, #F1DAB0);
    opacity: 0.9;
}

.ai-sub-app[data-theme="dark"] .fast-buy-item {
    background: var(--e-global-color-a986c82, #33415580);
    border: 1px solid var(--e-global-color-0687250, #475569);
    border-radius: 5px;
}

.ai-sub-app[data-theme="dark"] .fast-buy-item-name {
    color: var(--e-global-color-edaa0cc, #FFFFFF);
}

.ai-sub-app[data-theme="dark"] .fast-buy-item-price {
    color: var(--e-global-color-b54462a, #F1DAB0);
    opacity: 0.85;
}

.ai-sub-app[data-theme="dark"] .fast-buy-item-btn {
    background: var(--e-global-color-b54462a, #F1DAB0);
    color: var(--e-global-color-1fe9fdf, #8B5403);
    border: 2px solid var(--e-global-color-b54462a, #F1DAB0);
    border-radius: 25px;
    font-weight: 600;
    padding: 8px 18px;
    transition: background 0.2s, color 0.2s;
}

.ai-sub-app[data-theme="dark"] .fast-buy-item-btn:hover {
    background: transparent;
    color: var(--e-global-color-edaa0cc, #FFFFFF);
    opacity: 1;
}

.ai-sub-app[data-theme="dark"] .fast-buy-close-btn {
    background: transparent;
    color: var(--e-global-color-edaa0cc, #FFFFFF);
    border: 2px solid var(--e-global-color-b54462a, #F1DAB0);
    border-radius: 25px;
    font-weight: 600;
    padding: 8px 18px;
    transition: background 0.2s, color 0.2s;
}

.ai-sub-app[data-theme="dark"] .fast-buy-close-btn:hover {
    background: var(--e-global-color-b54462a, #F1DAB0);
    color: var(--e-global-color-1fe9fdf, #8B5403);
}

/* ===== User message avatar — cream background ===== */
.ai-sub-app[data-theme="dark"] .message.user .message-avatar {
    background: var(--e-global-color-b54462a, #F1DAB0);
    color: var(--e-global-color-1fe9fdf, #8B5403);
}

/* ===== Rafale / Compose mode switch — cream when active ===== */
.ai-sub-app[data-theme="dark"] .send-method-toggle {
    color: var(--e-global-color-b54462a, #F1DAB0);
}

/* OFF state: slate track, navy knob */
.ai-sub-app[data-theme="dark"] .send-method-slider {
    background: var(--e-global-color-0687250, #475569);
}

.ai-sub-app[data-theme="dark"] .send-method-slider::after {
    background: var(--e-global-color-4dd0f4f, #000F26);
}

/* ON state: cream track, brown knob (mirrors the cream/brown button pairing) */
.ai-sub-app[data-theme="dark"] .send-method-toggle input:checked + .send-method-slider {
    background: var(--e-global-color-b54462a, #F1DAB0);
}

.ai-sub-app[data-theme="dark"] .send-method-toggle input:checked + .send-method-slider::after {
    background: var(--e-global-color-1fe9fdf, #8B5403);
}

/* ===== Fast Buy modal scrollbar — slim, cream, rounded ===== */
/* Webkit (Chrome / Edge / Safari) */
.ai-sub-app[data-theme="dark"] .fast-buy-packages::-webkit-scrollbar {
    width: 6px;
}

.ai-sub-app[data-theme="dark"] .fast-buy-packages::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}

.ai-sub-app[data-theme="dark"] .fast-buy-packages::-webkit-scrollbar-thumb {
    background: var(--e-global-color-b54462a, #F1DAB0);
    border-radius: 10px;
    transition: background 0.2s;
}

.ai-sub-app[data-theme="dark"] .fast-buy-packages::-webkit-scrollbar-thumb:hover {
    background: var(--e-global-color-873fe11, #FFE198);
}

/* Firefox */
.ai-sub-app[data-theme="dark"] .fast-buy-packages {
    scrollbar-width: thin;
    scrollbar-color: var(--e-global-color-b54462a, #F1DAB0) transparent;
    /* Slight inner padding so the thumb doesn't touch the items */
    padding-right: 4px;
}