/* =========================================
   MASTER CSS (v39.0 - Dark Mode Enhanced)
   ========================================= */

body {
    background: #F8F9FA;
}

/* 1. Main Reset & Container */
.ds-con {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    background: #fff;
    box-sizing: border-box;
}

/* Help & Support tab: no full-height stretch – page height = content only (removes empty space below) */
.ds-con.ds-support-view-active {
    min-height: 0 !important;
    height: auto !important;
}

/* 2. Header Gradient */
.ds-head {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%) !important;
    color: #fff !important;
}

/* 3. Mic Button & Shortcuts Button (UPDATED) */
.ds-mic-wrapper {
    text-align: center;
    margin: 15px 0;
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.ds-mic-btn {
    background: #fff !important;
    border: 2px solid #ff0000 !important;
    color: #ff0000 !important;
    width: 50px !important; 
    height: 50px !important;
    border-radius: 12px;
    font-size: 24px !important;
    cursor: pointer;
    position: relative; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
@media (hover: hover) and (pointer: fine) {
    .ds-mic-btn:hover { 
        background: #ff0000 !important; 
        color: #fff !important; 
        transform: scale(1.05); 
    }
}
.ds-mic-active { 
    animation: pulse 1.5s infinite; 
    background: #ff0000 !important; 
    color:#fff !important; 
}
@keyframes pulse { 
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); } 
    100% { box-shadow: 0 0 0 15px rgba(255, 0, 0, 0); } 
}

@keyframes dsBossModePulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 117, 252, 0.55); }
    100% { box-shadow: 0 0 0 14px rgba(37, 117, 252, 0); }
}

label.ds-ai-guardian-on {
    animation: dsBossModePulse 1.8s ease-out infinite;
    border-radius: 10px;
}

.ds-dark-mode .ds-ai-guardian-card {
    background: #111827 !important;
    border-color: #374151 !important;
}

.ds-dark-mode .ds-ai-guardian-card div[translate="no"][style*="font-weight:900"] {
    color: #f9fafb !important;
}

.ds-dark-mode #ds-ai-guardian-helper {
    color: #9ca3af !important;
}

@media (prefers-reduced-motion: reduce) {
    label.ds-ai-guardian-on {
        animation: none;
    }
}

/* Keyboard Shortcuts Button */
.ds-shortcuts-btn {
    background: #fff !important;
    border: 2px solid #6366f1 !important;
    color: #6366f1 !important;
    width: 50px !important; 
    height: 50px !important;
    border-radius: 12px;
    font-size: 22px !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.ds-shortcuts-btn:hover { 
    background: #6366f1 !important; 
    color: #fff !important; 
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}

/* Template Button */
.ds-template-btn {
    background: #fff !important;
    border: 2px solid #fbbf24 !important;
    color: #fbbf24 !important;
    width: 50px !important; 
    height: 50px !important;
    border-radius: 12px;
    font-size: 22px !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.ds-template-btn:hover { 
    background: #fbbf24 !important; 
    color: #fff !important; 
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.3);
}

/* 4. Clear Button */
.ds-clear-btn {
    background: transparent !important; 
    color: #999 !important; 
    border: 1px solid #ddd !important;
    padding: 8px 20px !important; 
    font-size: 13px !important; 
    border-radius: 30px !important; 
    cursor: pointer;
    transition: all 0.3s ease;
    height: auto !important;
    line-height: 1.4 !important;
}
.ds-clear-btn:hover { 
    color: #d9534f !important; 
    border-color: #d9534f !important; 
    transform: translateY(-1px);
}

/* Save Draft + Clear row: centered like output card, grouped together */
.ds-draft-clear-row {
    height: auto !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
}
.ds-draft-clear-row #ds-save-draft-btn,
.ds-draft-clear-row .ds-clear-btn {
    height: auto !important;
    min-height: 40px !important;
    flex-shrink: 0 !important;
}
@media (min-width: 769px) {
    .ds-draft-clear-row {
        width: 100% !important;
        max-height: none !important;
    }
}

/* Save Draft Button */
#ds-save-draft-btn {
    background: #2575fc !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    height: auto !important;
    line-height: 1.4 !important;
}
#ds-save-draft-btn:hover {
    background: #1e5dd9 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37, 117, 252, 0.3);
}

/* =========================================
   SEGMENTED CONTROL - EMAIL/WHATSAPP TOGGLE
   ========================================= */
.ds-segmented-control {
    display: inline-flex;
    background: #e5e7eb;
    border-radius: 50px;
    padding: 4px;
    position: relative;
    gap: 4px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.ds-segmented-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ds-segmented-btn .ds-icon {
    flex: 0 0 auto;
    line-height: 1;
}

.ds-segmented-btn .ds-btn-text {
    line-height: 1.2;
    white-space: nowrap;
}

.ds-segmented-btn.active {
    color: #fff;
    position: relative;
}

/* Email Active State - Blue Gradient & Shadow */
.ds-segmented-btn.active[data-type="email"] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4),
                0 2px 4px rgba(59, 130, 246, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* WhatsApp Active State - Green Gradient & Shadow */
.ds-segmented-btn.active[data-type="whatsapp"] {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4),
                0 2px 4px rgba(37, 211, 102, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* Indian Language Category Active State - Orange/Saffron Gradient & Shadow */
.ds-segmented-btn.active[data-category="indian"] {
    background: linear-gradient(135deg, #FF9933 0%, #FF6B00 100%);
    box-shadow: 0 4px 12px rgba(255, 153, 51, 0.4),
                0 2px 4px rgba(255, 153, 51, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* Global Language Category Active State - Blue Gradient & Shadow */
.ds-segmented-btn.active[data-category="global"] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4),
                0 2px 4px rgba(59, 130, 246, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.ds-segmented-btn:not(.active):hover {
    color: #374151;
    background: rgba(255, 255, 255, 0.5);
}

.ds-pref-view-wrap {
    background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    font-size: 13px;
}

.ds-lang-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: inherit;
}

.ds-lang-item {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.ds-lang-item b {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: inherit;
}

#ds-lang-view-wrap .ds-lang-summary .ds-lang-item {
    flex: 1 1 0;
}

#ds-lang-view-wrap .ds-lang-item b {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}

#ds-lang-view-wrap .ds-lang-item b .ds-lang-flag {
    flex: 0 0 auto;
    line-height: 1;
    font-size: 1.1em;
}

#ds-lang-view-wrap .ds-lang-item b .ds-lang-name {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-lang-label {
    white-space: nowrap;
}

.ds-pref-view-wrap .ds-pref-sep {
    color: #9ca3af;
    margin: 0 4px;
}

.ds-pref-edit-link {
    text-decoration: none;
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 8px;
    line-height: 1.2;
    flex: 0 0 auto;
    margin-left: auto;
    color: #2563eb;
    white-space: nowrap;
}

.ds-pref-edit-link:hover {
    background: rgba(37, 117, 252, 0.08);
}

@media (max-width: 360px) {
    .ds-lang-summary {
        font-size: inherit;
    }
    .ds-pref-edit-link {
        padding: 6px 8px;
    }
}

.ds-dark-mode .ds-pref-view-wrap {
    background: #1f1f1f;
    border-color: #2d2d2d;
}

.ds-dark-mode .ds-lang-summary {
    color: #e5e7eb;
}

.ds-dark-mode .ds-pref-view-wrap .ds-pref-sep {
    color: #6b7280;
}

.ds-dark-mode .ds-pref-edit-link {
    color: #93c5fd;
}

.ds-dark-mode .ds-pref-edit-link:hover {
    background: rgba(147, 197, 253, 0.12);
}

.ds-smart-suggestion-row {
    margin: 0;
}

#ds-suggestion-text {
    display: none;
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    margin: 6px 0 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    background: #f9fafb;
    color: var(--ds-brand-color, #2563eb);
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
}

#ds-suggestion-text:hover {
    background: #f3f4f6;
    border-color: rgba(37, 99, 235, 0.35);
}

.ds-dark-mode .ds-smart-suggestion-row {
    margin: 6px 0 8px;
}

.ds-dark-mode #ds-suggestion-text {
    background: #111827;
    border-color: #374151;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    #ds-suggestion-text {
        padding: 7px 10px;
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .ds-segmented-control {
        width: 100%;
        max-width: 520px;
    }
    .ds-segmented-btn {
        flex: 1;
        min-width: 0;
        padding: 10px 10px;
    }
    .ds-segmented-btn .ds-btn-text {
        font-size: clamp(11px, 3.4vw, 14px);
        letter-spacing: -0.1px;
    }
}

/* =========================================
   MODERN INPUT FIELDS & TEXTAREA
   ========================================= */
.ds-input,
.ds-select,
.ds-textarea {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    color: #111827;
}

.ds-textarea.ds-autoexpand {
    min-height: 0 !important;
    resize: none !important;
    overflow-y: hidden;
}

.ds-textarea-wrap {
    position: relative;
}

.ds-textarea-icon {
    position: absolute;
    right: 14px;
    left: auto;
    top: 14px;
    opacity: 0.55;
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
}

.ds-textarea-wrap .ds-textarea {
    padding-left: 16px !important;
    padding-right: 44px !important;
}

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
    outline: none;
    background: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1),
                0 4px 12px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

.ds-input::placeholder,
.ds-textarea::placeholder {
    color: #9ca3af;
    opacity: 1;
}

.ds-auto-reply-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #f3f4f6;
    color: #2563eb;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ds-auto-reply-toggle:hover {
    background: #eef2ff;
}

.ds-auto-reply-toggle:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ds-auto-reply-wrap {
    display: none;
    margin-top: 10px;
}

/* Character Counter */
#ds-char-count {
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

/* Custom Dropdown Styling */
.ds-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px !important;
    cursor: pointer;
}

.ds-select option {
    padding: 12px 16px !important;
    font-size: 14px !important;
    background: #fff !important;
    color: #111827 !important;
}

.ds-select option:checked {
    background: #3b82f6 !important;
    color: #fff !important;
}

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    min-height: 48px !important;
    height: 48px !important;
    overflow: hidden !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #111827 !important;
    padding: 14px 44px 14px 16px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 12px !important;
    top: 0 !important;
    width: 24px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 4px 12px rgba(59, 130, 246, 0.15) !important;
}

.select2-dropdown {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08) !important;
    box-sizing: border-box !important;
}

html,
body {
    overflow-x: hidden;
    position: relative;
    overscroll-behavior-x: none;
}

@media screen and (max-width: 768px) {
    .select2-container--open .select2-dropdown {
        max-width: calc(100vw - 16px) !important;
        width: auto !important;
        box-sizing: border-box !important;
    }
}

.select2-results__options {
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    outline: none !important;
}

.select2-results__option {
    font-size: 14px !important;
    padding: 10px 12px !important;
}

.select2-results__option--group,
.select2-results__option[role="group"] {
    padding: 0 !important;
    background: transparent !important;
    cursor: default !important;
}

.select2-results__option--group:hover,
.select2-results__option[role="group"]:hover {
    background: transparent !important;
}

.select2-results__group {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    padding: 8px 12px !important;
    background: transparent !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: default !important;
    pointer-events: none !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option--selected {
    background: #eef2ff !important;
    color: #111827 !important;
}

.ds-select2-divider {
    display: block;
    height: 1px;
    background: #e5e7eb;
    margin: 6px 0;
}

.ds-tip-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.ds-tip-row .ds-floating-tip {
    margin: 0;
}

.ds-emoji-help-toggle {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: #2563eb;
    cursor: pointer;
    text-decoration: none;
}

.ds-emoji-help-toggle:hover {
    text-decoration: underline;
}

.ds-emoji-note {
    display: none;
    margin: 10px 0 15px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 12px;
    line-height: 1.5;
}

.ds-reply-upload-row {
    margin-top: 8px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.ds-reply-clear-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.ds-reply-clear-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: #ef4444;
    cursor: pointer;
    text-decoration: none;
}

.ds-reply-clear-link:hover {
    text-decoration: underline;
}

.ds-reply-file {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.ds-reply-upload-btn {
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #1f2937;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.ds-reply-upload-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ds-reply-upload-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-bottom-color: transparent;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: -2px;
    animation: dsSpin 0.9s linear infinite;
}
@keyframes dsSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ds-reply-privacy {
    margin-top: 4px;
    font-size: 11px;
    color: #6c757d;
    line-height: 1.3;
}

.ds-reply-scan-status {
    margin-top: 6px;
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
}

/* =========================================
   MODERN GENERATE BUTTON
   ========================================= */
#ds-generateBtn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    width: 100% !important;
    margin-top: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4),
                0 2px 6px rgba(118, 75, 162, 0.3);
    position: relative;
    overflow: hidden;
}

#ds-generateBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

#ds-generateBtn:hover::before {
    left: 100%;
}

#ds-generateBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5),
                0 4px 10px rgba(118, 75, 162, 0.4);
}

#ds-generateBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(102, 126, 246, 0.4);
}

#ds-generateBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Mobile Full Width */
@media (max-width: 600px) {
    #ds-generateBtn {
        width: 100% !important;
        padding: 14px 20px !important;
    }
}

/* =========================================
   RESULT CARD - PAPER CARD STYLE
   ========================================= */
.ds-email-card {
    background: #ffffff;
    border: none;
    border-left: 4px solid #3b82f6;
    border-radius: 16px;
    padding: 24px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08),
                0 4px 12px rgba(0, 0, 0, 0.04),
                0 0 0 1px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 30px;
}

.ds-email-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12),
                0 6px 16px rgba(0, 0, 0, 0.06),
                0 0 0 1px rgba(0, 0, 0, 0.03);
    transform: translateY(-2px);
}

/* Email Type - Left Border uses brand color from .ds-con (--ds-brand-color) */
.ds-email-card[data-type="email"],
.ds-email-card.email-type {
    border-left-color: var(--ds-brand-color, #3b82f6);
}

/* WhatsApp Type - Green Left Border */
.ds-email-card[data-type="whatsapp"],
.ds-email-card.whatsapp-type {
    border-left-color: #25D366;
}

/* Edit State (Blue Border when clicked) */
.ds-editing-active {
    outline: none;
    border: 2px dashed #3b82f6 !important;
    background: #eff6ff !important;
    color: #111827 !important;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Dark mode override for editing active */
.ds-dark-mode .ds-editing-active,
.ds-dark-mode #ds-eb.ds-editing-active {
    background: #2d2d2d !important;
    color: #ffffff !important;
    border: 2px dashed #6a11cb !important;
    padding: 16px !important;
    box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.2) !important;
}

.ds-subject-row {
    position: relative;
    padding-right: 44px;
}

.ds-subject-row #ds-edit-subject-btn.ds-edit-subject-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 14px;
}

#ds-res-subject.ds-subject-editing-active {
    outline: none;
    border: 2px dashed #3b82f6 !important;
    background: #eff6ff !important;
    color: #111827 !important;
    padding: 10px 12px !important;
    border-radius: 12px;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    cursor: text;
}

.ds-dark-mode #ds-res-subject.ds-subject-editing-active {
    background: #2d2d2d !important;
    color: #ffffff !important;
    border: 2px dashed #6a11cb !important;
    box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.2) !important;
}

.ds-edit-subject-btn {
    flex-shrink: 0;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #111827;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: all 0.2s ease;
    user-select: none;
}

.ds-edit-subject-btn:hover {
    background: #e5e7eb;
    transform: translateY(-1px);
}

.ds-edit-subject-btn:active {
    transform: translateY(0);
}

.ds-dark-mode .ds-edit-subject-btn {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    color: #e5e7eb;
}

.ds-dark-mode .ds-edit-subject-btn:hover {
    background: rgba(255,255,255,0.12);
}

/* Result Highlight Animation - NEW */
.ds-result-highlight {
    animation: resultHighlight 2s ease-out;
}

@keyframes resultHighlight {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 117, 252, 0.4),
                    0 10px 30px rgba(0, 0, 0, 0.08),
                    0 4px 12px rgba(0, 0, 0, 0.04);
        transform: scale(1);
    }
    15% {
        box-shadow: 0 0 0 15px rgba(37, 117, 252, 0),
                    0 12px 40px rgba(37, 117, 252, 0.2),
                    0 6px 16px rgba(37, 117, 252, 0.1);
        transform: scale(1.01);
    }
    30% {
        box-shadow: 0 0 0 20px rgba(37, 117, 252, 0),
                    0 12px 40px rgba(0, 0, 0, 0.12),
                    0 6px 16px rgba(0, 0, 0, 0.06);
        transform: scale(1);
    }
    100% {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08),
                    0 4px 12px rgba(0, 0, 0, 0.04),
                    0 0 0 1px rgba(0, 0, 0, 0.02);
        transform: scale(1);
    }
}

@keyframes dsLiveTonePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35);
    }
    55% {
        transform: scale(1.04);
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

#live-tone-badge {
    animation: dsLiveTonePulse 2.2s ease-out infinite;
    will-change: transform, box-shadow;
}

#live-tone-badge:hover {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    #live-tone-badge {
        animation: none;
    }
}

/* Content Meta Info (Reading Time & Length) */
#ds-content-meta {
    transition: all 0.3s ease;
}

#ds-content-meta:hover {
    background: #f3f4f6;
}

.ds-length-short {
    transition: all 0.2s ease;
}

.ds-length-medium {
    transition: all 0.2s ease;
}

.ds-length-long {
    transition: all 0.2s ease;
}

/* =========================================
   TONE DETECTOR BADGES
   ========================================= */
.ds-tone-badge {
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Professional Tone */
.ds-tone-professional {
    background: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #3b82f6;
}

/* Friendly Tone */
.ds-tone-friendly {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #10b981;
}

/* Formal Tone */
.ds-tone-formal {
    background: #f3e8ff !important;
    color: #6b21a8 !important;
    border: 1px solid #a855f7;
}

/* Casual Tone */
.ds-tone-casual {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #f59e0b;
}

/* Urgent Tone */
.ds-tone-urgent {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #ef4444;
}

/* Polite Tone */
.ds-tone-polite {
    background: #e0f2fe !important;
    color: #075985 !important;
    border: 1px solid #0891b2;
}

/* Direct Tone */
.ds-tone-direct {
    background: #fef08a !important;
    color: #854d0e !important;
    border: 1px solid #eab308;
}

/* Persuasive Tone (Lightning Bolt ⚡) */
.ds-tone-persuasive {
    background: #fef9c3 !important;
    color: #a16207 !important;
    border: 1px solid #eab308;
}

/* Additional Tone Badges for Dropdown Tones */
/* These use the same styles as their base tones but can be customized */
.ds-tone-badge[data-tone="Butter to Boss"],
.ds-tone-badge[data-tone="butter to boss"] {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #10b981;
}

.ds-tone-badge[data-tone="Funny / Witty"],
.ds-tone-badge[data-tone="funny / witty"],
.ds-tone-badge[data-tone="Funny Witty"],
.ds-tone-badge[data-tone="funny witty"] {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #f59e0b;
}

.ds-tone-badge[data-tone="Romantic"],
.ds-tone-badge[data-tone="romantic"] {
    background: #fce7f3 !important;
    color: #9f1239 !important;
    border: 1px solid #ec4899;
}

.ds-tone-badge[data-tone="Savage / Cool"],
.ds-tone-badge[data-tone="savage / cool"],
.ds-tone-badge[data-tone="Savage Cool"],
.ds-tone-badge[data-tone="savage cool"] {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #f59e0b;
}

.ds-tone-badge[data-tone="Motivational"],
.ds-tone-badge[data-tone="motivational"] {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #ef4444;
}

/* Responsive Content Meta */
@media (max-width: 600px) {
    #ds-content-meta {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    
    #ds-content-meta > div {
        width: 100%;
    }
    
    #ds-length-badge {
        align-self: flex-end;
    }
}

/* Maska-Meter (Politeness Slider) */
.ds-maska-wrapper {
    grid-column: 1 / -1;
    margin-top: 10px !important;
    padding: 8px !important;
    background: #fffbe6;
    border-radius: 8px;
    border: 1px solid #ffe58f;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.ds-maska-wrapper label {
    font-size: 13px !important;
}

.ds-maska-wrapper input[type="range"] {
    margin-top: 6px !important;
    width: 100%;
    accent-color: #d46b08;
    cursor: pointer;
    box-sizing: border-box;
}

.ds-maska-wrapper #maska-min-text,
.ds-maska-wrapper #maska-max-text {
    font-size: 11px !important;
}

@media (max-width: 600px) {
    .ds-maska-wrapper {
        display: block !important;
        grid-column: auto !important;
        margin: 6px auto !important;
        padding: 8px !important;
        width: 92% !important; /* Drastic reduction to ensure fit */
        max-width: 92% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        float: none !important;
        clear: both !important;
    }
    .ds-maska-wrapper label {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
    .ds-maska-wrapper input[type="range"] {
        margin: 6px auto 0 auto !important;
        padding: 0 !important;
        width: 90% !important; /* Smaller than wrapper */
        display: block !important;
        box-sizing: border-box !important;
    }
    .ds-maska-wrapper input[type="range"] + div {
        display: none !important;
    }
    .ds-maska-wrapper #maska-min-text,
    .ds-maska-wrapper #maska-max-text {
        font-size: 10px !important;
    }
}

/* =========================================
   SPLIT LAYOUT STYLES
   ========================================= */

/* The Action/Button Box (Separate Card) */
.ds-action-card {
    background: #ffffff;
    border: none;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-top: 20px;
}

/* Buttons Grid */
.ds-share { 
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px; 
}
@media (max-width: 400px) { 
    .ds-share { 
        grid-template-columns: 1fr; 
    } 
}

/* Button Styling */
.ds-share button {
    width: 100%; 
    padding: 14px !important; 
    font-size: 14px !important;
    color: #fff !important; 
    border: none; 
    border-radius: 10px; 
    cursor: pointer;
    font-weight: 600;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.ds-share button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.ds-share button:active { 
    transform: scale(0.98); 
}

/* Button Colors */
.ds-c-btn { background: #34495e !important; }
.ds-w-btn { background: #25D366 !important; }
.ds-g-btn { background: #DB4437 !important; }
.ds-m-btn { background: #007bff !important; }
.ds-pdf-btn { background: #e67e22 !important; }
.ds-translate-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; }
.ds-export-btn { background: #8b5cf6 !important; }

/* Translation Toggle Full Width (matches action buttons) */
#ds-translation-toggle {
    width: 100% !important;
    box-sizing: border-box;
}

#ds-translation-toggle > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

#ds-translation-toggle > div > span {
    width: 100%;
    font-size: 12px !important;
    font-weight: 700 !important;
    opacity: 0.9;
}

#ds-translation-tabs {
    width: 100% !important;
    display: flex !important;
}

#ds-translation-tabs button {
    flex: 1 1 50%;
    width: 50%;
    text-align: center;
}

/* Copy Button Success Animation */
.ds-copy-success {
    background: #10b981 !important;
    animation: copyPulse 0.6s ease-out;
}

/* Quick Adjust Actions */
.ds-quick-adjust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (max-width: 600px) {
    .ds-quick-adjust-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .ds-quick-adjust-grid {
        grid-template-columns: 1fr;
    }
}

.ds-adjust-btn {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid #e5e7eb;
    border-radius: 8px; 
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ds-adjust-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ds-adjust-btn:active {
    transform: scale(0.98);
}

/* Individual Quick Adjust Button Colors */
.ds-adjust-shorter:hover {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #1e40af;
}

.ds-adjust-longer:hover {
    border-color: #10b981;
    background: #d1fae5;
    color: #065f46;
}

.ds-adjust-formal:hover {
    border-color: #8b5cf6;
    background: #f5f3ff;
    color: #5b21b6;
}

.ds-adjust-casual:hover {
    border-color: #f59e0b;
    background: #fef3c7;
    color: #92400e;
}

@keyframes copyPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}
.ds-regen-btn { 
    background: #95a5a6 !important; 
    color: #ffffff !important;
    grid-column: span 2; 
}
@media (max-width: 400px) { 
    .ds-regen-btn { 
        grid-column: span 1; 
    }
}

/* Export Menu & Options */
#ds-export-menu {
    transition: all 0.3s ease;
}

.ds-export-option-btn {
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.ds-export-option-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #8b5cf6;
    background: #f5f3ff;
    color: #6b21a8;
}

.ds-export-option-btn:active {
    transform: scale(0.98);
}

@media (max-width: 600px) {
    .ds-export-option-btn {
        padding: 10px;
        font-size: 12px;
    }
}

/* Toast */
.ds-toast {
    visibility: hidden; 
    min-width: 250px; 
    background-color: #1f2937; 
    color: #fff; 
    text-align: center;
    border-radius: 30px; 
    padding: 16px; 
    position: fixed; 
    z-index: 9999; 
    left: 50%; 
    bottom: 30px;
    transform: translateX(-50%); 
    opacity: 0; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    font-weight: 600;
}
.ds-toast.show { 
    visibility: visible; 
    opacity: 1; 
    bottom: 50px; 
}

.ds-toast-stack {
    position: fixed;
    z-index: 9999;
    left: 50%;
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    pointer-events: none;
}

.ds-toast-stack .ds-toast {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    pointer-events: none;
}

.ds-toast-stack .ds-toast.show {
    bottom: auto;
}

.ds-usage-breakdown {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    font-weight: 600;
}

/* =========================================
   HELP & SUPPORT CHAT - DARK MODE
   ========================================= */
.ds-dark-mode .ds-support-container {
    background: #1a1a1a !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

.ds-dark-mode .ds-support-header {
    border-bottom-color: #333 !important;
}

.ds-dark-mode .ds-support-title {
    color: #ffffff !important;
}

.ds-dark-mode .ds-support-subtitle {
    color: #b0b0b0 !important;
}

.ds-dark-mode #ds-support-chat {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%) !important;
    border-color: #444 !important;
}

.ds-dark-mode .ds-support-ai-message {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%) !important;
    box-shadow: 0 2px 8px rgba(107,163,255,0.2) !important;
}

.ds-dark-mode .ds-support-ai-text {
    color: #6ba3ff !important;
}

.ds-dark-mode .ds-support-input {
    background: #2a2a2a !important;
    border-color: #444 !important;
    color: #ffffff !important;
}

.ds-dark-mode .ds-support-input::placeholder {
    color: #888 !important;
}

.ds-dark-mode .ds-support-input:focus {
    border-color: #6ba3ff !important;
    box-shadow: 0 0 0 3px rgba(107,163,255,0.2) !important;
}

/* Dark mode for loading messages */
.ds-dark-mode .ds-support-loading,
.ds-dark-mode #ds-support-messages > div[style*="background:linear-gradient(135deg, #f5f5f5"] {
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%) !important;
}

.ds-dark-mode .ds-support-loading div,
.ds-dark-mode #ds-support-messages > div[style*="color:#666"] {
    color: #b0b0b0 !important;
}

/* Dark mode for error messages */
.ds-dark-mode .ds-support-error,
.ds-dark-mode #ds-support-messages > div[style*="background:linear-gradient(135deg, #ffebee"] {
    background: linear-gradient(135deg, #5a2a2a 0%, #4a1a1a 100%) !important;
    border-color: #7a3a3a !important;
}

.ds-dark-mode .ds-support-error div,
.ds-dark-mode #ds-support-messages > div[style*="color:#c33"],
.ds-dark-mode #ds-support-messages > div[style*="color:#c62828"] {
    color: #ff6b6b !important;
}

/* =========================================
   DASHBOARD VIEW (History/Profile) - Mobile Fixes
   ========================================= */
#ds-dashboard-view {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Help & Support: no extra empty space below the support box (fit content only) */
#ds-dashboard-view.ds-view-support {
    min-height: 0 !important;
    height: fit-content !important;
}

.ds-content {
    display: block !important;
    max-width: 1100px !important;
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
}

/* Write tab: single column, output + buttons centered (override any theme grid) */
html body .ds-con .ds-content #ds-toolSection,
#ds-toolSection {
    display: block !important;
    width: 100% !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
}
#ds-toolSection > * {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
#ds-toolSection > form {
    display: block !important;
}
/* Do NOT set display on #ds-resultBox – it stays display:none until JS shows it after generate */
html body .ds-con .ds-content #ds-resultBox,
#ds-resultBox {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
}
/* Force result area single column – no grid side-by-side (output left / Quick Adjust right) */
#ds-resultBox > * {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* Single wrapper child of resultBox must be flex column so content stacks vertically */
#ds-resultBox > .ds-result-area-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}
/* Single-column wrapper: result area has one child so no grid can split it */
.ds-result-area-inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}
.ds-result-area-inner > * {
    flex: 0 0 auto;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.ds-result-area-inner > .ds-draft-clear-row {
    display: flex !important;
}
/* Draft/Clear row stays flex when inside resultBox */
#ds-resultBox > .ds-draft-clear-row,
#ds-resultBox .ds-result-area-inner > .ds-draft-clear-row {
    display: flex !important;
}
.ds-draft-clear-row {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    clear: both !important;
    margin-top: 20px !important;
}

/* Mobile responsive for profile content */
@media (max-width: 1200px) {
    .ds-content {
        max-width: 95% !important;
        padding: 20px 15px !important;
    }
}

@media (max-width: 768px) {
    .ds-content {
        max-width: 98% !important;
        padding: 15px 12px !important;
    }
}

@media (max-width: 768px) {
    #ds-dashboard-view table {
        font-size: 12px !important;
    }
    
    #ds-dashboard-view td {
        padding: 8px 4px !important;
    }
}

/* =========================================
   QUICK BUTTONS
   ========================================= */
.ds-quick-btn {
    font-size: 11px !important;
    padding: 6px 12px !important;
    border-radius: 18px !important;
    border: 1px solid #d1d5db !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.2s ease;
    margin-bottom: 4px;
    color: #1f2937 !important; /* Darker, more visible text */
    font-weight: 600 !important; /* Bolder text */
    white-space: nowrap !important; /* Prevent text wrapping */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important; /* Ensure minimum height */
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}
.ds-quick-btn:hover {
    border-color: #3b82f6 !important;
    color: #1e40af !important; /* Darker blue on hover for better visibility */
    background: #eff6ff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}
.ds-quick-btn:active {
    color: #1e40af !important; /* Keep text visible when pressed */
    background: #dbeafe !important;
}

/* More Suggestions Button */
.ds-more-suggestions-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.ds-more-suggestions-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
    border-color: transparent !important;
    color: #fff !important;
    background: linear-gradient(135deg, #5568d3 0%, #653a91 100%) !important;
}

/* More Suggestions Popup Styles */
#ds-more-suggestions-popup {
    animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#ds-more-suggestions-popup > div {
    animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(30px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark mode support for popup */
.ds-dark-mode #ds-more-suggestions-popup > div {
    background: #1f2937 !important;
    color: #f9fafb !important;
}
.ds-dark-mode #ds-more-suggestions-popup > div h3 {
    color: #f9fafb !important;
}

/* Spinner */
.ds-spinner { 
    width: 18px; 
    height: 18px; 
    border: 3px solid #fff; 
    border-bottom-color: transparent; 
    border-radius: 50%; 
    display: none; 
    animation: spin 1s linear infinite; 
}
@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

/* =========================================
   TEXT FORMATTING TOOLBAR
   ========================================= */
.ds-format-btn {
    padding: 7px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #111827 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    min-height: 38px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
}

.ds-format-btn:hover {
    background: #f3f4f6 !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10) !important;
}

.ds-format-btn:active {
    transform: translateY(0) scale(0.98) !important;
}

.ds-format-btn strong,
.ds-format-btn em,
.ds-format-btn u {
    font-size: 14px;
    font-weight: 600;
}

.ds-format-help {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.35;
    color: #6b7280;
}

.ds-dark-mode .ds-format-help {
    color: #9ca3af;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Formatting Toolbar */
@media (max-width: 600px) {
    #ds-format-toolbar {
        padding: 10px !important;
    }
    
    .ds-format-btn {
        padding: 7px 10px !important;
        font-size: 12px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    .ds-format-help {
        margin-top: 8px;
        font-size: 10.5px;
        line-height: 1.25;
    }
}

/* =========================================
   MOBILE FIXES (max-width: 600px)
   ========================================= */
@media (max-width: 600px) {
    .ds-head {
        text-align: left !important;
        padding-left: 20px !important;
    }
    
    .ds-head h2 {
        text-align: left !important;
        padding-left: 0 !important;
    }
    
    .ds-con {
        padding: 15px !important;
    }
    
    .ds-alert-bar {
        margin-bottom: 10px !important;
        margin-top: 0 !important;
    }
    
    .ds-email-card {
        padding: 20px !important;
        border-radius: 12px !important;
    }
    
    .ds-input,
    .ds-select,
    .ds-textarea {
        padding: 12px 14px !important;
        font-size: 13px !important;
    }

    .ds-mic-wrapper {
        gap: 10px !important;
        margin: 12px 0 !important;
    }

    .ds-mic-btn,
    .ds-shortcuts-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
    }

    .ds-clear-text-btn {
        height: 38px !important;
        padding: 0 14px !important;
        font-size: 12.5px !important;
        border-radius: 999px !important;
    }
}

/* =========================================
   PRICING MODAL TOGGLE (Preserved)
   ========================================= */
#ds-billing-toggle:checked + .ds-toggle-slider {
    background-color: #2575fc !important;
}
#ds-billing-toggle:checked + .ds-toggle-slider + .ds-toggle-knob {
    transform: translateX(30px);
}
.ds-toggle-label.active {
    background: #e8f2ff !important;
    color: #2575fc !important;
    font-weight: bold !important;
}
.ds-toggle-label:not(.active) {
    background: transparent !important;
    color: #999 !important;
    font-weight: normal !important;
}

/* =========================================
   DRAFT AUTO-SAVE ANIMATIONS
   ========================================= */
@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* Draft indicator fade animation */
#ds-draft-indicator {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================================
   TEMPLATE SYSTEM STYLING
   ========================================= */
.ds-template-action-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ds-template-action-btn:hover {
    background: #fbbf24;
    color: #ffffff;
    border-color: #fbbf24;
    transform: translateY(-1px);
}

.ds-template-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #ffffff;
    border: 2px solid #fbbf24;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.ds-template-item:hover {
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
    transform: translateY(-1px);
}

.ds-template-info {
    flex: 1;
    min-width: 0;
}

.ds-template-name {
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 4px;
}

.ds-template-preview {
    font-size: 12px;
    color: #78350f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-template-actions {
    display: flex;
    gap: 8px;
    margin-left: 12px;
}

.ds-template-use-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border: 2px solid #10b981;
    border-radius: 6px;
    background: #ffffff;
    color: #10b981;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ds-template-use-btn:hover {
    background: #10b981;
    color: #ffffff;
    transform: scale(1.05);
}

.ds-template-delete-btn {
    padding: 6px 10px;
    font-size: 14px;
    border: 2px solid #ef4444;
    border-radius: 6px;
    background: #ffffff;
    color: #ef4444;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ds-template-delete-btn:hover {
    background: #ef4444;
    color: #ffffff;
    transform: scale(1.05);
}

/* Template Scrollbar Styling */
#ds-templates-list::-webkit-scrollbar {
    width: 8px;
}

#ds-templates-list::-webkit-scrollbar-track {
    background: #fef3c7;
    border-radius: 4px;
}

#ds-templates-list::-webkit-scrollbar-thumb {
    background: #fbbf24;
    border-radius: 4px;
}

#ds-templates-list::-webkit-scrollbar-thumb:hover {
    background: #f59e0b;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .ds-template-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .ds-template-actions {
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
    }
    
    #ds-templates-section {
        padding: 12px;
    }
}

/* =========================================
   DARK MODE THEME (scoped to plugin root only – does not affect theme/home page)
   ========================================= */
/* When dark mode class is on plugin root (.ds-con or .ds-skillarmail-app) */
.ds-con.ds-dark-mode,
.ds-skillarmail-app.ds-dark-mode,
.ds-dark-mode .ds-con {
    background: #1a1a1a !important;
    color: #e5e7eb !important;
}

.ds-dark-mode .ds-head {
    background: linear-gradient(135deg, #4a0f7a 0%, #1a5fcc 100%) !important;
}

.ds-dark-mode .ds-input,
.ds-dark-mode .ds-select,
.ds-dark-mode .ds-textarea {
    background: #1f1f1f !important;
    border-color: #505050 !important;
    color: #ffffff !important;
}

.ds-dark-mode .ds-input:focus,
.ds-dark-mode .ds-select:focus,
.ds-dark-mode .ds-textarea:focus {
    background: #2a2a2a !important;
    border-color: #2575fc !important;
    box-shadow: 0 0 0 3px rgba(37, 117, 252, 0.2) !important;
}

.ds-dark-mode .ds-email-card {
    background: #1f1f1f !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    border-left-width: 5px !important;
}

.ds-dark-mode .ds-action-card {
    background: #1f1f1f !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.ds-dark-mode #ds-content-meta {
    background: #1a1a1a !important;
    border-color: #505050 !important;
    color: #e5e7eb !important;
}

.ds-dark-mode #ds-format-toolbar {
    background: #111827 !important;
    border-color: #374151 !important;
}

.ds-dark-mode .ds-format-btn {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

.ds-dark-mode .ds-format-btn:hover {
    background: #111827 !important;
    border-color: #6b7280 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45) !important;
}

.ds-tip-row .ds-floating-tip { color: #111827; }
.ds-dark-mode .ds-tip-row .ds-floating-tip { color: #ffffff !important; }

.ds-emoji-help-toggle {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(17, 24, 39, 0.06) !important;
    border: 1px solid rgba(17, 24, 39, 0.12) !important;
    color: #111827 !important;
    text-decoration: none !important;
}
.ds-emoji-help-toggle:hover { background: rgba(17, 24, 39, 0.10) !important; }
.ds-dark-mode .ds-emoji-help-toggle {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
}
.ds-dark-mode .ds-emoji-help-toggle:hover { background: rgba(255, 255, 255, 0.16) !important; }

.ds-dark-mode #ds-eb {
    color: #ffffff !important;
}
.ds-dark-mode #ds-eb * {
    color: #ffffff !important;
}

#ds-format-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

#ds-format-toolbar .ds-format-btn[onclick*="removeFormat"] {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.45) !important;
    color: #ef4444 !important;
}

.ds-dark-mode #ds-format-toolbar .ds-format-btn[onclick*="removeFormat"] {
    background: rgba(239, 68, 68, 0.14) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fecaca !important;
}

#ds-format-toolbar .ds-format-btn[onclick*="ds_finishEditing"] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.25) !important;
}
.ds-dark-mode #ds-eb {
    color: #e5e7eb !important;
    background: #1f1f1f !important;
}

/* Dark mode - Edit mode (contenteditable) styling */
.ds-dark-mode #ds-eb[contenteditable="true"],
.ds-dark-mode #ds-eb[contenteditable="true"]:focus,
.ds-dark-mode #ds-eb.ds-editing-active,
.ds-dark-mode #ds-eb.ds-editing-active:focus {
    background: #2d2d2d !important;
    color: #ffffff !important;
    border: 2px dashed #6a11cb !important;
    border-radius: 12px !important;
    padding: 16px !important;
    outline: none !important;
    min-height: 100px !important;
    box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.2) !important;
}

/* Ensure all text is visible in edit mode */
.ds-dark-mode #ds-eb[contenteditable="true"],
.ds-dark-mode #ds-eb[contenteditable="true"] *,
.ds-dark-mode #ds-eb.ds-editing-active,
.ds-dark-mode #ds-eb.ds-editing-active * {
    color: #ffffff !important;
}

/* Override any inline styles in edit mode - HIGHEST PRIORITY */
.ds-dark-mode #ds-eb[contenteditable="true"][style],
.ds-dark-mode #ds-eb.ds-editing-active[style],
.ds-dark-mode #ds-eb[contenteditable="true"][style*="color"],
.ds-dark-mode #ds-eb.ds-editing-active[style*="color"],
.ds-dark-mode #ds-eb[contenteditable="true"][style*="background"],
.ds-dark-mode #ds-eb.ds-editing-active[style*="background"] {
    background: #2d2d2d !important;
    color: #ffffff !important;
}

/* Force dark background even with inline styles */
.ds-dark-mode #ds-eb[contenteditable="true"] {
    background: #2d2d2d !important;
    color: #ffffff !important;
}

.ds-dark-mode #ds-eb.ds-editing-active {
    background: #2d2d2d !important;
    color: #ffffff !important;
}

/* Override inline color styles specifically */
.ds-dark-mode #ds-eb[style*="color:#444"],
.ds-dark-mode #ds-eb[style*="color: #444"],
.ds-dark-mode #ds-eb[style*="color:#444444"],
.ds-dark-mode #ds-eb[style*="color: #444444"] {
    color: #ffffff !important;
}

.ds-dark-mode #ds-eb[contenteditable="true"][style*="color:#444"],
.ds-dark-mode #ds-eb.ds-editing-active[style*="color:#444"] {
    color: #ffffff !important;
    background: #2d2d2d !important;
}

.ds-dark-mode #ds-templates-section {
    background: #1f1f1f !important;
    border-color: #b45309 !important;
}

.ds-dark-mode .ds-template-item {
    background: #2a2a2a !important;
    border-color: #f59e0b !important;
}

.ds-dark-mode #ds-export-menu {
    background: #1f1f1f !important;
    border-color: #505050 !important;
}

.ds-dark-mode .ds-export-option-btn {
    background: #2d2d2d !important;
    border-color: #505050 !important;
    color: #ffffff !important;
}

.ds-dark-mode .ds-export-option-btn:hover {
    background: #3d3d3d !important;
    border-color: #8b5cf6 !important;
}

.ds-dark-mode .ds-quick-actions {
    border-color: #404040 !important;
}

.ds-dark-mode .ds-adjust-btn {
    background: #2d2d2d !important;
    border-color: #505050 !important;
    color: #ffffff !important;
}

.ds-dark-mode .ds-adjust-btn:hover {
    background: #3d3d3d !important;
    border-color: #6b7280 !important;
}

.ds-dark-mode .ds-lbl {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ds-dark-mode #ds-res-subject {
    color: #f3f4f6 !important;
    border-bottom-color: #404040 !important;
}

.ds-dark-mode .ds-quick-btn {
    background: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #505050 !important;
}

.ds-dark-mode .ds-quick-btn:hover {
    background: #3d3d3d !important;
    color: #ffffff !important;
    border-color: #6b7280 !important;
}

.ds-dark-mode .ds-floating-tip {
    color: #9ca3af !important;
}

.ds-dark-mode .ds-disclaimer {
    background: #2a2520 !important;
    color: #d1d5db !important;
    border-color: #78350f !important;
}

.ds-dark-mode h2, 
.ds-dark-mode h3, 
.ds-dark-mode h4,
.ds-dark-mode h5,
.ds-dark-mode h6 {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ds-dark-mode label {
    color: #e5e7eb !important;
}

.ds-dark-mode #ds-content-meta span {
    color: #d1d5db !important;
}

.ds-dark-mode .ds-template-name {
    color: #fbbf24 !important;
}

.ds-dark-mode .ds-template-preview {
    color: #d1d5db !important;
}

.ds-dark-mode #ds-emoji-note {
    background: #1e3a5f !important;
    color: #93c5fd !important;
    border-color: #1e40af !important;
}

.ds-dark-mode .ds-clear-btn {
    color: #9ca3af !important;
}

.ds-dark-mode .ds-clear-btn:hover {
    color: #e5e7eb !important;
}

.ds-dark-mode #ds-save-draft-btn {
    background: #3b82f6 !important;
    color: #fff !important;
}
.ds-dark-mode #ds-save-draft-btn:hover {
    background: #2563eb !important;
}

.ds-dark-mode select option {
    background: #2d2d2d !important;
    color: #e5e7eb !important;
}

.ds-dark-mode .ds-mic-btn,
.ds-dark-mode .ds-shortcuts-btn,
.ds-dark-mode .ds-template-btn {
    background: #2d2d2d !important;
    border-color: #505050 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

@media (hover: hover) and (pointer: fine) {
    .ds-dark-mode .ds-mic-btn:hover,
    .ds-dark-mode .ds-shortcuts-btn:hover,
    .ds-dark-mode .ds-template-btn:hover {
        background: #3d3d3d !important;
    }
}

.ds-dark-mode .ds-segmented-control {
    background: #111827 !important;
    border: 1px solid #374151 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.ds-dark-mode .ds-segmented-control.ds-msg-email {
    outline: none;
    background: #111827 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.ds-dark-mode .ds-segmented-control.ds-msg-whatsapp {
    outline: none;
    background: #111827 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.ds-dark-mode .ds-segmented-btn {
    color: #9ca3af !important;
}

.ds-dark-mode .ds-segmented-btn.active {
    color: #ffffff !important;
    position: relative;
    z-index: 2;
}

.ds-dark-mode .ds-segmented-btn.active[data-type="email"] {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 1), 0 0 16px rgba(96, 165, 250, 0.55);
}

.ds-dark-mode .ds-segmented-btn.active[data-type="whatsapp"] {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 1), 0 0 16px rgba(74, 222, 128, 0.55);
}

.ds-dark-mode .ds-segmented-btn.active[data-category="indian"] {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
}

.ds-dark-mode .ds-segmented-btn.active[data-category="global"] {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
}

.ds-dark-mode .ds-input::placeholder,
.ds-dark-mode .ds-textarea::placeholder {
    color: #6b7280 !important;
}

.ds-dark-mode #ds-word-count,
.ds-dark-mode #ds-char-count {
    color: #d1d5db !important;
}

.ds-dark-mode .ds-length-badge,
.ds-dark-mode #ds-length-badge,
.ds-dark-mode .ds-length-short,
.ds-dark-mode .ds-length-medium,
.ds-dark-mode .ds-length-long {
    background: #000000 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5) !important;
    padding: 4px 10px !important;
}

/* Override inline styles in dark mode - highest priority */
.ds-dark-mode .ds-length-badge[style],
.ds-dark-mode #ds-length-badge[style],
.ds-dark-mode .ds-length-short[style],
.ds-dark-mode .ds-length-medium[style],
.ds-dark-mode .ds-length-long[style] {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #3b82f6 !important;
}

/* Enhanced Dark Mode Text Visibility */
.ds-dark-mode {
    color: #e5e7eb !important;
}

.ds-dark-mode .ds-floating-tip,
.ds-dark-mode small {
    color: #d1d5db !important;
}

.ds-dark-mode a {
    color: #93c5fd !important;
}

.ds-dark-mode a:hover {
    color: #bfdbfe !important;
}

.ds-dark-mode #ds-res-heading {
    color: #ffffff !important;
}

.ds-dark-mode strong {
    color: #f9fafb !important;
}

/* Pro Tip / Alert Bar in Dark Mode – glass style */
.ds-dark-mode .ds-alert-bar.ds-alert-glass {
    background: linear-gradient(135deg, rgba(55,48,163,0.4) 0%, rgba(109,40,217,0.35) 100%) !important;
    color: #e9d5ff !important;
    border-color: rgba(255,255,255,0.15) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}
/* Custom color alert bar in dark mode – keep admin colors, slightly dim */
.ds-dark-mode .ds-alert-bar:not(.ds-alert-glass) {
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}

/* Smart Suggestions in Dark Mode */
.ds-dark-mode .ds-smart-suggest {
    color: #e5e7eb !important;
}

.ds-dark-mode .ds-smart-suggest-label {
    color: #ffffff !important;
}

/* Credit Usage in Dark Mode */
.ds-dark-mode .ds-credit-usage {
    color: #d1d5db !important;
}

/* Universal Dark Mode Background Fixes */
.ds-dark-mode * {
    scrollbar-color: #505050 #1a1a1a;
}

.ds-dark-mode .ds-content {
    background: #1a1a1a !important;
}

.ds-dark-mode .ds-grid {
    background: transparent !important;
}

.ds-dark-mode .ds-form-group {
    background: transparent !important;
}

.ds-dark-mode #ds-dashboard-view {
    background: #1a1a1a !important;
    color: #e5e7eb !important;
}

.ds-dark-mode table {
    background: #1f1f1f !important;
    color: #e5e7eb !important;
}

.ds-dark-mode th {
    background: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #505050 !important;
}

.ds-dark-mode td {
    background: #1f1f1f !important;
    color: #e5e7eb !important;
    border-color: #404040 !important;
}

.ds-dark-mode tr:hover td {
    background: #2a2a2a !important;
}

/* Settings Section Backgrounds */
.ds-dark-mode .ds-settings-section {
    background: #1f1f1f !important;
    border-color: #505050 !important;
}

/* Interface Preferences Section */
.ds-dark-mode .ds-interface-preferences {
    background: #1f1f1f !important;
    border-color: #505050 !important;
}

/* Settings Menu (Gear + Popup) */
#ds-settings-gear {
    position: static;
    width: auto;
    height: auto;
    border-radius: 12px;
    border: none;
    background: rgba(255, 255, 255, 0.20);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    box-shadow: none;
}

#ds-settings-gear:hover {
    transform: none;
}

#ds-settings-menu {
    position: fixed;
    top: 74px;
    right: 20px;
    z-index: 1001;
    width: min(380px, calc(100vw - 40px));
    max-height: min(70vh, 520px);
    overflow: auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
    display: none;
}

#ds-settings-menu.ds-open {
    display: block;
}

.ds-settings-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
}

.ds-settings-menu-title {
    font-size: 14px;
    font-weight: 800;
    color: #111827;
}

#ds-settings-close {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-settings-menu-body {
    padding: 12px 14px 14px 14px;
}

.ds-settings-section + .ds-settings-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.ds-settings-section-title {
    font-size: 12px;
    font-weight: 800;
    color: #374151;
    margin-bottom: 10px;
}

.ds-settings-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ds-settings-action {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.ds-settings-action:hover {
    background: #f3f4f6;
}

.ds-settings-action:active {
    background: #e5e7eb;
}

.ds-settings-action-danger {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
}

.ds-settings-action-danger:hover {
    background: rgba(239, 68, 68, 0.16);
}

.ds-settings-preferences {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

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

.ds-settings-row:last-child {
    margin-bottom: 0;
}

.ds-settings-preferences .ds-preference-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.ds-settings-preferences .ds-preference-text {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.ds-settings-font {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

.ds-settings-font .ds-font-size-select {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
}

.ds-settings-theme {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.ds-dark-mode #ds-settings-gear {
    background: rgba(255, 255, 255, 0.20);
    border-color: transparent;
    color: #ffffff;
}

.ds-dark-mode #ds-settings-menu {
    background: #0b1220;
    border-color: #374151;
}

.ds-dark-mode .ds-settings-menu-header {
    border-bottom-color: #374151;
}

.ds-dark-mode .ds-settings-menu-title {
    color: #f9fafb;
}

.ds-dark-mode #ds-settings-close {
    background: #111827;
    border-color: #374151;
    color: #f9fafb;
}

.ds-dark-mode .ds-settings-section-title {
    color: #cbd5e1;
}

.ds-dark-mode .ds-settings-action {
    background: #111827;
    border-color: #374151;
    color: #f9fafb;
}

.ds-dark-mode .ds-settings-action:hover {
    background: #0f172a;
}

.ds-dark-mode .ds-settings-action:active {
    background: #0b1220;
}

.ds-dark-mode .ds-settings-action-danger {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.14);
    color: #fecaca;
}

.ds-dark-mode .ds-settings-action-danger:hover {
    background: rgba(239, 68, 68, 0.22);
}

.ds-dark-mode .ds-settings-preferences .ds-preference-text {
    color: #e5e7eb;
}

.ds-dark-mode .ds-settings-font .ds-font-size-select {
    background: #111827;
    border-color: #374151;
    color: #f9fafb;
}

@media (max-width: 520px) {
    #ds-settings-menu {
        top: 68px;
        right: 14px;
        width: calc(100vw - 28px);
    }
}

/* Color Theme Customizer (Compact Version) */
.ds-theme-customizer-compact {
    transition: all 0.3s ease;
}

.ds-theme-option {
    transition: all 0.2s ease;
}

.ds-theme-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.ds-theme-option.active {
    border-color: #3b82f6 !important;
    background: #eff6ff !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Mobile responsive */
@media (max-width: 600px) {
    .ds-theme-customizer-compact > div {
        flex-direction: column;
        align-items: flex-start !important;
    }
    
    #ds-theme-selector {
        width: 100%;
    }
}

.ds-dark-mode .ds-theme-customizer-compact {
    background: #1f1f1f !important;
    border-color: #505050 !important;
}

.ds-dark-mode .ds-theme-option {
    background: #2d2d2d !important;
    border-color: #505050 !important;
}

.ds-dark-mode .ds-theme-option:hover {
    background: #3d3d3d !important;
    border-color: #6b7280 !important;
    transform: translateY(-1px);
}

.ds-dark-mode .ds-theme-option.active {
    border-color: #3b82f6 !important;
    background: #1e3a5f !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
}

.ds-dark-mode .ds-theme-option span {
    color: #ffffff !important;
}

.ds-theme-selector {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
}

.ds-theme-selector::-webkit-scrollbar {
    height: 4px;
}

.ds-theme-selector::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 999px;
}

.ds-dark-mode .ds-theme-selector::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
}

.ds-theme-option.ds-theme-swatch {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #e5e7eb !important;
    padding: 0;
    cursor: pointer;
    flex: 0 0 auto;
    display: inline-block;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: none;
    background: #ffffff;
}

.ds-theme-option.ds-theme-swatch:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 16px rgba(17, 24, 39, 0.12);
}

.ds-theme-option.ds-theme-swatch:focus {
    outline: none;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), 0 6px 16px rgba(17, 24, 39, 0.12);
}

.ds-theme-option.ds-theme-swatch.active {
    border-width: 3px !important;
    border-color: #111827 !important;
    transform: scale(1.08);
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.18);
}

.ds-theme-option.ds-theme-swatch.active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.ds-dark-mode .ds-theme-option.ds-theme-swatch.active {
    border-color: #ffffff !important;
}

.ds-theme-option.ds-theme-swatch[data-theme="default"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.ds-theme-option.ds-theme-swatch[data-theme="ocean"] {
    background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%) !important;
}

.ds-theme-option.ds-theme-swatch[data-theme="sunset"] {
    background: linear-gradient(135deg, #f97316 0%, #dc2626 100%) !important;
}

.ds-theme-option.ds-theme-swatch[data-theme="forest"] {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
}

.ds-theme-option.ds-theme-swatch[data-theme="royal"] {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
}

.ds-theme-option.ds-theme-swatch[data-theme="rose"] {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important;
}

/* =========================================
   COLOR THEME VARIATIONS
   ========================================= */

/* Ocean Theme */
.ds-theme-ocean #ds-generateBtn {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
    box-shadow: 0 4px 14px rgba(8, 145, 178, 0.4), 0 2px 6px rgba(14, 116, 144, 0.3);
}

.ds-theme-ocean .ds-segmented-btn.active[data-type="email"] {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.4);
}

.ds-theme-ocean .ds-input:focus,
.ds-theme-ocean .ds-select:focus,
.ds-theme-ocean .ds-textarea:focus {
    border-color: #0891b2 !important;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1), 0 4px 12px rgba(8, 145, 178, 0.15);
}

.ds-theme-ocean .ds-email-card[data-type="email"],
.ds-theme-ocean .ds-email-card.email-type {
    border-left-color: #0891b2 !important;
}

/* Sunset Theme */
.ds-theme-sunset #ds-generateBtn {
    background: linear-gradient(135deg, #f97316 0%, #dc2626 100%) !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4), 0 2px 6px rgba(220, 38, 38, 0.3);
}

.ds-theme-sunset .ds-segmented-btn.active[data-type="email"] {
    background: linear-gradient(135deg, #f97316 0%, #dc2626 100%) !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
}

.ds-theme-sunset .ds-input:focus,
.ds-theme-sunset .ds-select:focus,
.ds-theme-sunset .ds-textarea:focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1), 0 4px 12px rgba(249, 115, 22, 0.15);
}

.ds-theme-sunset .ds-email-card[data-type="email"],
.ds-theme-sunset .ds-email-card.email-type {
    border-left-color: #f97316 !important;
}

/* Forest Theme */
.ds-theme-forest #ds-generateBtn {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.4), 0 2px 6px rgba(4, 120, 87, 0.3);
}

.ds-theme-forest .ds-segmented-btn.active[data-type="email"] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4);
}

.ds-theme-forest .ds-input:focus,
.ds-theme-forest .ds-select:focus,
.ds-theme-forest .ds-textarea:focus {
    border-color: #059669 !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1), 0 4px 12px rgba(5, 150, 105, 0.15);
}

.ds-theme-forest .ds-email-card[data-type="email"],
.ds-theme-forest .ds-email-card.email-type {
    border-left-color: #059669 !important;
}

/* Royal Theme */
.ds-theme-royal #ds-generateBtn {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4), 0 2px 6px rgba(91, 33, 182, 0.3);
}

.ds-theme-royal .ds-segmented-btn.active[data-type="email"] {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

.ds-theme-royal .ds-input:focus,
.ds-theme-royal .ds-select:focus,
.ds-theme-royal .ds-textarea:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1), 0 4px 12px rgba(124, 58, 237, 0.15);
}

.ds-theme-royal .ds-email-card[data-type="email"],
.ds-theme-royal .ds-email-card.email-type {
    border-left-color: #7c3aed !important;
}

/* Rose Theme */
.ds-theme-rose #ds-generateBtn {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4), 0 2px 6px rgba(190, 24, 93, 0.3);
}

.ds-theme-rose .ds-segmented-btn.active[data-type="email"] {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
}

.ds-theme-rose .ds-input:focus,
.ds-theme-rose .ds-select:focus,
.ds-theme-rose .ds-textarea:focus {
    border-color: #ec4899 !important;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1), 0 4px 12px rgba(236, 72, 153, 0.15);
}

.ds-theme-rose .ds-email-card[data-type="email"],
.ds-theme-rose .ds-email-card.email-type {
    border-left-color: #ec4899 !important;
}

.ds-dark-mode .ds-interface-title {
    color: #ffffff !important;
}

.ds-dark-mode .ds-preference-text {
    color: #ffffff !important;
}

.ds-dark-mode .ds-font-size-select {
    background: #2d2d2d !important;
    border-color: #505050 !important;
    color: #ffffff !important;
}

.ds-dark-mode .ds-font-size-select option {
    background: #2d2d2d !important;
    color: #ffffff !important;
}

/* Checkboxes in Dark Mode */
.ds-dark-mode input[type="checkbox"] {
    background: #2d2d2d !important;
    border: 2px solid #505050 !important;
    accent-color: #3b82f6 !important;
}

.ds-dark-mode .ds-preference-label {
    color: #ffffff !important;
}

/* Override ALL inline white backgrounds in Dark Mode */
.ds-dark-mode div[style*="background:#fff"],
.ds-dark-mode div[style*="background: #fff"],
.ds-dark-mode div[style*="background:#f8f9fa"],
.ds-dark-mode div[style*="background: #f8f9fa"],
.ds-dark-mode div[style*="background:#f9fafb"],
.ds-dark-mode div[style*="background: #f9fafb"],
.ds-dark-mode div[style*="background:white"],
.ds-dark-mode div[style*="background: white"] {
    background: #1f1f1f !important;
    border-color: #505050 !important;
}

/* Modal & Dashboard Dark Mode */
.ds-dark-mode #ds-dashboard-modal {
    background: rgba(0, 0, 0, 0.9) !important;
}

.ds-dark-mode .ds-modal-content {
    background: #1a1a1a !important;
    border-color: #505050 !important;
}

/* Pricing Cards Dark Mode */
.ds-dark-mode #ds-plan-free {
    background: #2d2d2d !important;
    border-color: #9c27b0 !important;
}

.ds-dark-mode #ds-plan-standard {
    background: #2d2d2d !important;
    border-color: #505050 !important;
}

.ds-dark-mode #ds-plan-premium {
    background: linear-gradient(135deg, #3d2817, #4d3319) !important;
    border-color: #ff9800 !important;
}

.ds-dark-mode #ds-plan-premium h3,
.ds-dark-mode #ds-plan-premium div {
    color: #ffffff !important;
}

.ds-dark-mode #ds-plan-premium p {
    color: #d1d5db !important;
}

.ds-dark-mode #ds-plan-premium li {
    color: #e5e7eb !important;
}

.ds-dark-mode #ds-plan-free h3,
.ds-dark-mode #ds-plan-standard h3 {
    color: #ffffff !important;
}

.ds-dark-mode #ds-plan-free p,
.ds-dark-mode #ds-plan-standard p {
    color: #d1d5db !important;
}

.ds-dark-mode #ds-plan-free li,
.ds-dark-mode #ds-plan-standard li {
    color: #e5e7eb !important;
}

.ds-dark-mode #ds-plan-free div,
.ds-dark-mode #ds-plan-standard div {
    color: #ffffff !important;
}

/* Upgrade Badge Dark Mode */
.ds-dark-mode #ds-upgrade-badge {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(217, 119, 6, 0.5) !important;
}

/* Pricing Modal Background */
.ds-dark-mode #ds-pricing-modal {
    background: rgba(0, 0, 0, 0.9) !important;
}

/* Pricing Modal Container */
.ds-dark-mode #ds-pricing-modal > div {
    background: #1a1a1a !important;
}

/* Close Button in Pricing Modal */
.ds-dark-mode #ds-pricing-modal button[onclick*="closePricingModal"] {
    background: #2d2d2d !important;
    color: #ffffff !important;
}

/* Override inline styles for pricing cards in dark mode */
.ds-dark-mode #ds-plan-premium [style*="color:#333"],
.ds-dark-mode #ds-plan-premium [style*="color: #333"] {
    color: #ffffff !important;
}

.ds-dark-mode #ds-plan-premium [style*="color:#666"],
.ds-dark-mode #ds-plan-premium [style*="color: #666"] {
    color: #d1d5db !important;
}

.ds-dark-mode #ds-plan-free [style*="color:#333"],
.ds-dark-mode #ds-plan-free [style*="color: #333"],
.ds-dark-mode #ds-plan-standard [style*="color:#333"],
.ds-dark-mode #ds-plan-standard [style*="color: #333"] {
    color: #ffffff !important;
}

.ds-dark-mode #ds-plan-free [style*="color:#666"],
.ds-dark-mode #ds-plan-free [style*="color: #666"],
.ds-dark-mode #ds-plan-standard [style*="color:#666"],
.ds-dark-mode #ds-plan-standard [style*="color: #666"] {
    color: #d1d5db !important;
}

/* POPULAR badge should stay with white text */
.ds-dark-mode #ds-plan-premium [style*="background:#ff9800"] {
    background: #ef6c00 !important;
    color: #ffffff !important;
}

/* Toast Notification Dark Mode */
.ds-dark-mode .ds-toast {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.5) !important;
}

/* Draft Indicator Dark Mode */
.ds-dark-mode #ds-draft-indicator {
    background: #1e3a5f !important;
    color: #93c5fd !important;
    border: 1px solid #3b82f6 !important;
}

/* Draft Recovery Notification Dark Mode */
.ds-dark-mode #ds-draft-recovery-notification {
    background: #1f2937 !important;
    color: #ffffff !important;
    border-left: 4px solid #3b82f6 !important;
}

.ds-dark-mode #ds-draft-notification {
    background: #1f1f1f !important;
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.5) !important;
}

.ds-dark-mode #ds-draft-notification h4 {
    color: #ffffff !important;
}

.ds-dark-mode #ds-draft-notification div[style*="color:#666"] {
    color: #d1d5db !important;
}

.ds-dark-mode #ds-draft-notification button[onclick*="restoreDraft"] {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

.ds-dark-mode #ds-draft-notification button[onclick*="clearDraft"] {
    background: #374151 !important;
    color: #ffffff !important;
}

.ds-dark-mode #ds-draft-notification button[onclick*="remove"] {
    color: #ffffff !important;
}

/* Tone Badge Dark Mode */
.ds-dark-mode .ds-tone-professional {
    background: #1e3a8a !important;
    color: #bfdbfe !important;
    border-color: #3b82f6 !important;
}

.ds-dark-mode .ds-tone-friendly {
    background: #064e3b !important;
    color: #a7f3d0 !important;
    border-color: #10b981 !important;
}

.ds-dark-mode .ds-tone-formal {
    background: #581c87 !important;
    color: #e9d5ff !important;
    border-color: #a855f7 !important;
}

.ds-dark-mode .ds-tone-casual {
    background: #78350f !important;
    color: #fde68a !important;
    border-color: #f59e0b !important;
}

.ds-dark-mode .ds-tone-urgent {
    background: #7f1d1d !important;
    color: #fecaca !important;
    border-color: #ef4444 !important;
}

.ds-dark-mode .ds-tone-polite {
    background: #164e63 !important;
    color: #a5f3fc !important;
    border-color: #0891b2 !important;
}

.ds-dark-mode .ds-tone-direct {
    background: #713f12 !important;
    color: #fef08a !important;
    border-color: #eab308 !important;
}

.ds-dark-mode .ds-tone-persuasive {
    background: #713f12 !important;
    color: #fef08a !important;
    border-color: #eab308 !important;
}

/* =========================================
   LAZY LOADING - HISTORY ITEMS
   ========================================= */
.ds-history-row {
    transition: all 0.3s ease;
}

.ds-history-row:hover {
    background: #f9fafb !important;
}

#ds-load-more-btn {
    transition: all 0.2s ease;
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#ds-load-more-btn:hover {
    background: #059669 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

#ds-load-more-btn:active {
    transform: scale(0.98);
}

/* Dark Mode */
.ds-dark-mode .ds-history-row:hover {
    background: #2d2d2d !important;
}

.ds-dark-mode #ds-load-more-btn {
    background: #047857 !important;
}

.ds-dark-mode #ds-load-more-btn:hover {
    background: #059669 !important;
}

#ds-load-more-container {
    width: 100%;
}

#ds-history-table {
    width: 100%;
    table-layout: auto;
}

#ds-history-table td {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

@media (min-width: 600px) {
    #ds-history-table {
        table-layout: fixed;
    }

    #ds-history-table td:nth-child(1) {
        width: 120px;
    }

    #ds-history-table td:nth-child(3) {
        width: 86px;
    }
}

@media (max-width: 480px) {
    #ds-load-more-btn {
        padding-left: 16px !important;
        padding-right: 16px !important;
        font-size: 13px !important;
    }
}

/* =========================================
   CLEAR BUTTON - COMPACT & RECTANGULAR
   ========================================= */
.ds-clear-text-btn {
    background: #ffffff;
    border: 1px solid #ef4444;
    color: #ef4444;
    border-radius: 20px;
    width: auto;
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
    .ds-clear-text-btn:hover {
        background: #fef2f2 !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(239, 68, 68, 0.15);
    }
}

.ds-clear-text-btn:active {
    transform: none;
    background: #ffffff !important;
}

@media (hover: hover) and (pointer: fine) {
    .ds-clear-text-btn:active {
        transform: scale(0.96);
        background: #fee2e2 !important;
    }
}

/* Remove focus/active state sticking on mobile */
.ds-clear-text-btn:focus {
    outline: none;
    background: #ffffff !important; /* Reset to white immediately */
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
}

@media (hover: none) and (pointer: coarse) {
    .ds-clear-text-btn:active {
        background: #ffffff !important;
        transform: none;
        box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
    }

    .ds-clear-text-btn:focus,
    .ds-clear-text-btn:focus-visible {
        background: #ffffff !important;
        transform: none;
        box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
    }
}

/* Make it fit nicely in the mic wrapper */
.ds-mic-wrapper {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.ds-dark-mode .ds-clear-text-btn {
    background: #1f1f1f;
    border-color: #ef4444;
    color: #ef4444;
}

.ds-dark-mode .ds-clear-text-btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.ds-dark-mode .ds-clear-text-btn:active {
    transform: none;
    background: #1f1f1f !important;
}

@media (hover: hover) and (pointer: fine) {
    .ds-dark-mode .ds-clear-text-btn:active {
        transform: scale(0.96);
        background: #2d1f1f !important;
    }
}

@media (hover: hover) and (pointer: fine) {
    .ds-dark-mode .ds-clear-text-btn:hover {
        background: #2d1f1f !important;
    }
}

.ds-dark-mode .ds-clear-text-btn:focus {
    background: #1f1f1f !important;
}

@media (hover: none) and (pointer: coarse) {
    .ds-dark-mode .ds-clear-text-btn:active {
        background: #1f1f1f !important;
        transform: none;
        box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
    }

    .ds-dark-mode .ds-clear-text-btn:focus,
    .ds-dark-mode .ds-clear-text-btn:focus-visible {
        background: #1f1f1f !important;
        transform: none;
        box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
    }
}

/* =========================================
   PWA UPDATE BANNER
   ========================================= */
@keyframes slideUp {
    from {
        bottom: -100px;
        opacity: 0;
    }
    to {
        bottom: 20px;
        opacity: 1;
    }
}

#ds-update-banner button:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

#ds-update-banner button:active {
    transform: scale(0.95);
}

/* Mobile positioning */
@media (max-width: 600px) {
    #ds-update-banner {
        left: 10px !important;
        right: 10px !important;
        transform: none !important;
        flex-direction: column !important;
        text-align: center !important;
    }
    
    #ds-update-banner button {
        width: 100%;
    }
}

/* Dark Mode */
.ds-dark-mode #ds-update-banner {
    background: #1e40af !important;
    box-shadow: 0 4px 15px rgba(30, 64, 175, 0.6) !important;
}

/* =========================================
   OFFLINE MODE INDICATOR
   ========================================= */
#ds-offline-indicator {
    transition: all 0.3s ease;
}

#ds-offline-indicator.online {
    background: #10b981 !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

@keyframes offlinePulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Mobile positioning */
@media (max-width: 600px) {
    #ds-offline-indicator {
        top: 60px !important;
        right: 10px !important;
        font-size: 11px !important;
        padding: 6px 12px !important;
    }
}

/* =========================================
   USAGE ANALYTICS - RESPONSIVE & FIXES
   ========================================= */
/* Fix Usage Analytics card overflow - Target all divs with specific background */
@media (max-width: 600px) {
    /* Ensure Usage Analytics card doesn't overflow */
    div[style*="background:#f8f9fa"] {
        padding: 15px 16px !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        box-sizing: border-box !important;
    }
    
    /* Make stats grid responsive on mobile - stack vertically */
    div[style*="display:grid"][style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* Fix for tablets */
@media (min-width: 601px) and (max-width: 768px) {
    div[style*="display:grid"][style*="grid-template-columns:1fr 1fr 1fr"] {
        gap: 8px !important;
    }
    
    div[style*="background:#fff"][style*="padding:10px"] {
        padding: 8px 10px !important;
    }
}

/* =========================================
   USAGE ANALYTICS - DARK MODE
   ========================================= */
.ds-dark-mode [style*="background:#f8f9fa"] {
    background: #1f1f1f !important;
    border-color: #374151 !important;
}

.ds-dark-mode [style*="background:#fff"][style*="border:1px solid #e5e7eb"],
.ds-dark-mode [style*="background:#fff"][style*="border:1px solid #e5e7eb;"] {
    background: #2d2d2d !important;
    border-color: #374151 !important;
}

.ds-dark-mode [style*="background:#eff6ff"] {
    background: #1e3a8a !important;
}

.ds-dark-mode [style*="background:#d1fae5"] {
    background: #064e3b !important;
}

.ds-dark-mode [style*="color:#1e40af"] {
    color: #93c5fd !important;
}

.ds-dark-mode [style*="color:#065f46"] {
    color: #6ee7b7 !important;
}

/* Offline Indicator Dark Mode */
.ds-dark-mode #ds-offline-indicator {
    background: #dc2626 !important;
    color: #ffffff !important;
    border: 1px solid #991b1b;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.6) !important;
}

.ds-dark-mode #ds-offline-indicator.online {
    background: #059669 !important;
    border-color: #047857 !important;
    box-shadow: 0 4px 15px rgba(5, 150, 105, 0.6) !important;
}

/* Override any remaining inline text colors */
.ds-dark-mode [style*="color:#374151"],
.ds-dark-mode [style*="color: #374151"],
.ds-dark-mode [style*="color:#666"],
.ds-dark-mode [style*="color: #666"],
.ds-dark-mode [style*="color:#333"],
.ds-dark-mode [style*="color: #333"] {
    color: #ffffff !important;
}

/* Translate UI Dark Mode Fixes */
.ds-dark-mode #ds-translate-menu {
    background: #111827 !important;
    border-color: #374151 !important;
}

.ds-dark-mode #ds-translate-lang {
    background: #1f2937 !important;
    color: #f9fafb !important;
    border-color: #374151 !important;
}

.ds-dark-mode #ds-translate-status {
    color: #cbd5e1 !important;
}

.ds-dark-mode #ds-translation-toggle {
    background: #0b1220 !important;
    border-color: #374151 !important;
}

.ds-dark-mode #ds-translation-tabs {
    background: #111827 !important;
    border-color: #374151 !important;
}

.ds-dark-mode #ds-tab-original,
.ds-dark-mode #ds-tab-translated {
    color: #e5e7eb !important;
}

.ds-dark-mode #ds-translate-execute-btn {
    background: #667eea !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.ds-dark-mode #ds-translate-menu button[onclick="ds_hideTranslateMenu()"] {
    background: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

.ds-dark-mode #ds-identity-view-wrap {
    background: #111827 !important;
    border-color: #374151 !important;
}

.ds-dark-mode #ds-identity-view-wrap strong {
    color: #f9fafb !important;
}

.ds-dark-mode #ds-toggle-identity-edit {
    color: #93c5fd !important;
}

.ds-dark-mode #ds-toggle-identity-save {
    color: #34d399 !important;
}

/* Button Background Fixes */
.ds-dark-mode button:not(.ds-c-btn):not(.ds-w-btn):not(.ds-g-btn):not(.ds-m-btn):not(.ds-pdf-btn):not(.ds-export-btn):not(#ds-generateBtn):not(.ds-theme-option):not(.ds-theme-swatch):not(.ds-translate-btn):not(#ds-translate-execute-btn) {
    background: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #505050 !important;
}

/* Container Backgrounds */
.ds-dark-mode .ds-container,
.ds-dark-mode .ds-box,
.ds-dark-mode .ds-panel {
    background: #1f1f1f !important;
}

/* =========================================
   LOGIN PAGE DARK MODE
   ========================================= */
.ds-dark-mode .ds-auth-wrap {
    background: #1a1a1a !important;
}

.ds-dark-mode .ds-auth-card {
    background: #1f1f1f !important;
    border-color: #404040 !important;
}

.ds-dark-mode .ds-auth-left {
    background: #1f1f1f !important;
}

.ds-dark-mode .ds-auth-badge {
    background: rgba(37,117,252,0.20) !important;
    border-color: rgba(37,117,252,0.30) !important;
    color: #e5e7eb !important;
}

.ds-dark-mode .ds-auth-title {
    color: #ffffff !important;
}

.ds-dark-mode .ds-auth-subtitle {
    color: #d1d5db !important;
}

.ds-dark-mode .ds-auth-form .input,
.ds-dark-mode .ds-auth-form input[type="email"],
.ds-dark-mode .ds-auth-form input[type="password"],
.ds-dark-mode .ds-auth-form input[type="text"] {
    background: #2d2d2d !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.ds-dark-mode .ds-auth-form .input:focus,
.ds-dark-mode .ds-auth-form input[type="email"]:focus,
.ds-dark-mode .ds-auth-form input[type="password"]:focus,
.ds-dark-mode .ds-auth-form input[type="text"]:focus {
    background: #3a3a3a !important;
    border-color: #6a11cb !important;
    color: #ffffff !important;
}

.ds-dark-mode .ds-auth-form label {
    color: #e5e7eb !important;
}

.ds-dark-mode .ds-auth-form p {
    color: #d1d5db !important;
}

.ds-dark-mode .ds-auth-divider {
    color: #9ca3af !important;
}

.ds-dark-mode .ds-auth-divider:before,
.ds-dark-mode .ds-auth-divider:after {
    background: #404040 !important;
}

.ds-dark-mode .ds-sso-btn,
.ds-dark-mode .ds-sso-btn-large {
    background: #ffffff !important;
    border-color: #e0e0e0 !important;
    color: #000000 !important;
}

.ds-dark-mode .ds-sso-btn:hover,
.ds-dark-mode .ds-sso-btn-large:hover {
    background: #f5f5f5 !important;
    border-color: #6a11cb !important;
    color: #000000 !important;
}

/* Specifically target Google button - if it has a specific class or ID */
.ds-dark-mode a[href*="google"] .ds-sso-btn,
.ds-dark-mode a[href*="google"] .ds-sso-btn-large,
.ds-dark-mode .ds-sso-btn[href*="google"],
.ds-dark-mode .ds-sso-btn-large[href*="google"],
.ds-dark-mode #ds-google-login,
.ds-dark-mode .ds-google-btn,
.ds-dark-mode .ds-google-login-btn,
.ds-dark-mode #ds-google-login *,
.ds-dark-mode .ds-google-login-btn *,
.ds-dark-mode .ds-google-btn * {
    background: #ffffff !important;
    color: #000000 !important;
}

/* Force ALL text inside SSO buttons to be black in dark mode - comprehensive approach */
.ds-dark-mode .ds-sso-btn,
.ds-dark-mode .ds-sso-btn-large {
    color: #000000 !important;
}

.ds-dark-mode .ds-sso-btn *,
.ds-dark-mode .ds-sso-btn-large *,
.ds-dark-mode .ds-sso-btn span,
.ds-dark-mode .ds-sso-btn-large span,
.ds-dark-mode .ds-sso-btn div,
.ds-dark-mode .ds-sso-btn-large div,
.ds-dark-mode .ds-sso-btn p,
.ds-dark-mode .ds-sso-btn-large p,
.ds-dark-mode .ds-sso-btn a,
.ds-dark-mode .ds-sso-btn-large a {
    color: #000000 !important;
}

/* Target SSO single container and all children */
.ds-dark-mode .ds-sso-single,
.ds-dark-mode .ds-sso-single *,
.ds-dark-mode .ds-sso-single a,
.ds-dark-mode .ds-sso-single a *,
.ds-dark-mode .ds-sso-single .ds-sso-btn-large,
.ds-dark-mode .ds-sso-single .ds-sso-btn-large * {
    color: #000000 !important;
}

/* Override any inline styles that might set gray text */
.ds-dark-mode .ds-sso-btn[style*="color"],
.ds-dark-mode .ds-sso-btn-large[style*="color"] {
    color: #000000 !important;
}

.ds-dark-mode .ds-sso-btn [style*="color"],
.ds-dark-mode .ds-sso-btn-large [style*="color"] {
    color: #000000 !important;
}

/* Universal rule for auth section - target all links and buttons */
.ds-dark-mode .ds-auth-left .ds-sso-single,
.ds-dark-mode .ds-auth-left .ds-sso-single a,
.ds-dark-mode .ds-auth-left .ds-sso-single button,
.ds-dark-mode .ds-auth-left .ds-sso-single * {
    color: #000000 !important;
}

/* Specifically for SSO buttons area - exclude footer links */
.ds-dark-mode .ds-auth-left .ds-sso-single a,
.ds-dark-mode .ds-auth-left .ds-sso-single button,
.ds-dark-mode .ds-auth-left .ds-sso-grid a,
.ds-dark-mode .ds-auth-left .ds-sso-grid button {
    color: #000000 !important;
}

.ds-dark-mode .ds-auth-left .ds-sso-single a *,
.ds-dark-mode .ds-auth-left .ds-sso-single button *,
.ds-dark-mode .ds-auth-left .ds-sso-grid a *,
.ds-dark-mode .ds-auth-left .ds-sso-grid button * {
    color: #000000 !important;
}

/* ULTRA AGGRESSIVE: Target ANY button/link in auth section that might be Google */
.ds-dark-mode .ds-auth-card a,
.ds-dark-mode .ds-auth-card button,
.ds-dark-mode .ds-auth-left a:not(.ds-auth-footer a):not(.ds-auth-footer a *),
.ds-dark-mode .ds-auth-left button {
    color: #000000 !important;
}

.ds-dark-mode .ds-auth-card a *,
.ds-dark-mode .ds-auth-card button *,
.ds-dark-mode .ds-auth-left a:not(.ds-auth-footer a):not(.ds-auth-footer a *) *,
.ds-dark-mode .ds-auth-left button * {
    color: #000000 !important;
}

/* Override ALL possible inline color styles in SSO buttons */
.ds-dark-mode .ds-sso-btn[style],
.ds-dark-mode .ds-sso-btn-large[style],
.ds-dark-mode .ds-sso-single a[style],
.ds-dark-mode .ds-sso-single button[style] {
    color: #000000 !important;
}

.ds-dark-mode .ds-sso-btn [style],
.ds-dark-mode .ds-sso-btn-large [style],
.ds-dark-mode .ds-sso-single a [style],
.ds-dark-mode .ds-sso-single button [style] {
    color: #000000 !important;
}

/* Target any element with text containing "Google" - using attribute selectors */
.ds-dark-mode a[href*="google"],
.ds-dark-mode button[onclick*="google"],
.ds-dark-mode [class*="google"],
.ds-dark-mode [id*="google"] {
    color: #000000 !important;
}

.ds-dark-mode a[href*="google"] *,
.ds-dark-mode button[onclick*="google"] *,
.ds-dark-mode [class*="google"] *,
.ds-dark-mode [id*="google"] * {
    color: #000000 !important;
}

.ds-dark-mode .ds-sso-icon-microsoft {
    background: #2d2d2d !important;
    border-color: #404040 !important;
}

.ds-dark-mode .ds-auth-footer {
    color: #d1d5db !important;
}

.ds-dark-mode .ds-auth-footer a {
    color: #60a5fa !important;
}

.ds-dark-mode .ds-auth-footer a:hover {
    color: #93c5fd !important;
}

/* =========================================
   COMPACT VIEW MODE
   ========================================= */
.ds-compact-view .ds-head {
    padding-top: 10px !important;
    padding-bottom: 16px !important;
}

.ds-compact-view .ds-nav-bar {
    gap: 8px !important;
    margin-top: 6px !important;
}

.ds-compact-view .ds-nav-btn {
    padding: 5px 12px !important;
    font-size: 13px !important;
}

.ds-compact-view .ds-content {
    padding: 18px !important;
    margin: 12px auto 10px auto !important;
    border-radius: 16px !important;
}

.ds-compact-view .ds-email-card {
    padding: 14px !important;
    margin-top: 14px !important;
    border-radius: 14px !important;
}

.ds-compact-view .ds-action-card {
    padding: 12px !important;
    margin-top: 12px !important;
    border-radius: 14px !important;
}

.ds-compact-view .ds-input,
.ds-compact-view .ds-select,
.ds-compact-view .ds-textarea {
    padding: 9px 11px !important;
}

.ds-compact-view .ds-share {
    gap: 8px !important;
}

.ds-compact-view .ds-share button {
    padding: 9px !important;
    font-size: 13px !important;
}

.ds-compact-view #ds-generateBtn {
    padding: 11px 18px !important;
}

.ds-compact-view .ds-grid {
    gap: 8px !important;
}

.ds-compact-view .ds-draft-clear-row {
    margin-top: 12px !important;
}

.ds-compact-view #ds-content-meta {
    padding: 6px 8px !important;
    margin-bottom: 8px !important;
}

@media (max-width: 600px) {
    .ds-compact-view .ds-con {
        padding: 12px !important;
    }

    .ds-compact-view .ds-head {
        padding-top: 8px !important;
        padding-bottom: 12px !important;
    }

    .ds-compact-view .ds-nav-bar {
        gap: 6px !important;
        margin-top: 4px !important;
    }

    .ds-compact-view .ds-nav-btn {
        padding: 4px 10px !important;
        font-size: 12px !important;
    }

    .ds-compact-view .ds-content {
        padding: 14px !important;
        margin: 10px auto 8px auto !important;
        border-radius: 14px !important;
    }

    .ds-compact-view .ds-email-card {
        padding: 12px !important;
        margin-top: 12px !important;
        border-radius: 12px !important;
    }

    .ds-compact-view .ds-action-card {
        padding: 10px !important;
        margin-top: 10px !important;
        border-radius: 12px !important;
    }

    .ds-compact-view .ds-input,
    .ds-compact-view .ds-select,
    .ds-compact-view .ds-textarea {
        padding: 8px 10px !important;
    }

    .ds-compact-view .ds-share {
        gap: 6px !important;
    }

    .ds-compact-view .ds-share button {
        padding: 8px !important;
        font-size: 12px !important;
    }

    .ds-compact-view #ds-generateBtn {
        padding: 10px 16px !important;
    }

    .ds-compact-view .ds-grid {
        gap: 6px !important;
    }

    .ds-compact-view .ds-draft-clear-row {
        margin-top: 10px !important;
    }

    .ds-compact-view #ds-content-meta {
        margin-bottom: 6px !important;
    }
}

/* =========================================
   FONT SIZE VARIATIONS
   ========================================= */
.ds-font-small {
    font-size: 13px;
}

.ds-font-small .ds-input,
.ds-font-small .ds-select,
.ds-font-small .ds-textarea {
    font-size: 12px !important;
}

.ds-font-small #ds-eb {
    font-size: 13px !important;
}

.ds-font-small .ds-share button {
    font-size: 12px !important;
}

.ds-font-medium {
    font-size: 14px;
}

.ds-font-medium .ds-input,
.ds-font-medium .ds-select,
.ds-font-medium .ds-textarea {
    font-size: 14px !important;
}

.ds-font-medium #ds-eb {
    font-size: 14px !important;
}

.ds-font-large {
    font-size: 16px;
}

.ds-font-large .ds-input,
.ds-font-large .ds-select,
.ds-font-large .ds-textarea {
    font-size: 16px !important;
}

.ds-font-large #ds-eb {
    font-size: 16px !important;
}

.ds-font-large .ds-share button {
    font-size: 16px !important;
}

.ds-font-large h3, .ds-font-large h4 {
    font-size: 20px !important;
}

/* =========================================
   PROFILE: Subscription Cancellation Notice
   ========================================= */
.subscription-cancel-notice {
    line-height: 1.5;
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    padding: 16px !important;
}
.subscription-cancel-notice ul {
    padding-right: 12px !important;
    margin-right: 0 !important;
}
.subscription-cancel-notice li {
    margin-bottom: 6px;
    padding-right: 0 !important;
}
.subscription-cancel-notice a:hover {
    text-decoration: underline !important;
}
.ds-dark-mode .subscription-cancel-notice {
    background: #2d2d2d !important;
    border-color: #444 !important;
    color: #e5e7eb !important;
}
.ds-dark-mode .subscription-cancel-notice a {
    color: #6ba3ff !important;
}
.ds-dark-mode .subscription-cancel-notice strong {
    color: #fff !important;
}

/* =========================================
   DARK MODE SELECT2 DROPDOWN FIXES
   ========================================= */
.ds-dark-mode .select2-container--default .select2-selection--single {
    background-color: #2d2d2d !important;
    border-color: #505050 !important;
}

.ds-dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e5e7eb !important;
}

.ds-dark-mode .select2-dropdown {
    background-color: #2d2d2d !important;
    border-color: #505050 !important;
    color: #e5e7eb !important;
}

.ds-dark-mode .select2-search--dropdown .select2-search__field {
    background-color: #1f1f1f !important;
    border-color: #505050 !important;
    color: #e5e7eb !important;
}

.ds-dark-mode .select2-results__option {
    color: #e5e7eb !important;
}

.ds-dark-mode .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

.ds-dark-mode .select2-results__option--selected {
    background-color: #374151 !important;
    color: #ffffff !important;
}

/* Fix group headers in dark mode */
.ds-dark-mode .select2-results__group {
    color: #9ca3af !important;
}

/* Placeholder color */
.ds-dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af !important;
}

.ds-personality-tab {
    appearance: none;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #111827;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ds-personality-tab.active {
    background: linear-gradient(135deg, #8b5cf6, #2563eb);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
}

.ds-personality-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
    resize: vertical;
    background: #ffffff;
    color: #111827;
}

.ds-personality-textarea:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.ds-personality-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #111827;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ds-personality-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
}

.ds-personality-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ds-personality-btn-ghost {
    background: #f9fafb;
}

.ds-personality-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #8b5cf6, #2563eb);
    color: #ffffff;
    font-weight: 900;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ds-personality-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ds-personality-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.28);
}

.ds-personality-hero {
    padding: 16px 16px 12px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(37,99,235,0.06));
}

.ds-personality-hero-title {
    font-weight: 900;
    font-size: 18px;
    color: #111827;
}

.ds-personality-hero-arch {
    margin-top: 4px;
    font-weight: 900;
    font-size: 15px;
    color: #6d28d9;
}

.ds-personality-hero-line {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
}

.ds-personality-section {
    margin-top: 14px;
    padding: 14px 14px 12px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
}

.ds-personality-section-title {
    font-weight: 900;
    font-size: 13px;
    color: #111827;
    margin-bottom: 10px;
}

.ds-personality-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ds-personality-bar-row {
    display: grid;
    grid-template-columns: 110px 1fr 56px;
    gap: 10px;
    align-items: center;
}

.ds-personality-bar-label {
    font-size: 12px;
    font-weight: 800;
    color: #111827;
}

.ds-personality-bar-track {
    height: 10px;
    background: rgba(17,24,39,0.08);
    border-radius: 999px;
    overflow: hidden;
}

.ds-personality-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #2563eb);
    border-radius: 999px;
}

.ds-personality-bar-val {
    text-align: right;
    font-size: 12px;
    font-weight: 900;
    color: #111827;
}

.ds-personality-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ds-personality-metric {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px 12px;
    background: #f9fafb;
}

.ds-personality-metric .k {
    font-size: 11px;
    color: #6b7280;
    font-weight: 800;
}

.ds-personality-metric .v {
    margin-top: 4px;
    font-size: 13px;
    color: #111827;
    font-weight: 900;
}

.ds-personality-signature {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px dashed #c7d2fe;
    background: rgba(99, 102, 241, 0.06);
}

.ds-personality-signature .k {
    font-size: 11px;
    color: #6b7280;
    font-weight: 800;
}

.ds-personality-signature .v {
    margin-top: 5px;
    font-weight: 900;
    color: #111827;
}

.ds-personality-meta {
    margin-top: 10px;
    font-size: 12px;
    color: #6b7280;
    font-weight: 700;
}

@media (max-width: 560px) {
    .ds-personality-bar-row {
        grid-template-columns: 95px 1fr 46px;
    }
    .ds-personality-metrics {
        grid-template-columns: 1fr;
    }
}

.ds-dark-mode .ds-personality-textarea {
    background: #111827 !important;
    border-color: #374151 !important;
    color: #f9fafb !important;
}

.ds-dark-mode .ds-personality-section,
.ds-dark-mode .ds-personality-hero {
    background: #111827 !important;
    border-color: #374151 !important;
}

.ds-dark-mode .ds-personality-hero-title,
.ds-dark-mode .ds-personality-section-title,
.ds-dark-mode .ds-personality-bar-label,
.ds-dark-mode .ds-personality-bar-val,
.ds-dark-mode .ds-personality-metric .v,
.ds-dark-mode .ds-personality-signature .v {
    color: #f9fafb !important;
}

.ds-dark-mode .ds-personality-hero-line,
.ds-dark-mode .ds-personality-meta,
.ds-dark-mode .ds-personality-metric .k,
.ds-dark-mode .ds-personality-signature .k {
    color: #cbd5e1 !important;
}

body.is-twa-app #ds-install-pwa-btn,
body.is-twa-app #ds-install-banner,
body.is-twa-app #ds-update-banner {
    display: none !important;
}

body.is-twa-app #ds-upgrade-badge,
body.is-twa-app #ds-pricing-modal,
body.is-twa-app #ds-std-btn,
body.is-twa-app #ds-prem-btn,
body.is-twa-app #ds-plan-standard,
body.is-twa-app #ds-plan-premium {
    display: none !important;
}

@media (display-mode: standalone) {
    #ds-upgrade-badge,
    #ds-pricing-modal,
    #ds-std-btn,
    #ds-prem-btn,
    #ds-plan-standard,
    #ds-plan-premium {
        display: none !important;
    }
}

body.is-twa-app #wpadminbar,
body.is-twa-app #masthead,
body.is-twa-app #colophon,
body.is-twa-app .site-header,
body.is-twa-app .site-footer,
body.is-twa-app header.wp-block-template-part,
body.is-twa-app footer.wp-block-template-part,
body.is-twa-app .wp-site-blocks > header,
body.is-twa-app .wp-site-blocks > footer {
    display: none !important;
}

@media (max-width: 768px) {
    #ds-pro-badge-wrap {
        position: static !important;
        top: auto !important;
        right: auto !important;
        z-index: auto !important;
        margin: 0 0 0 auto !important;
        align-self: flex-start !important;
        width: fit-content;
        max-width: 48vw;
    }

    #ds-pro-badge {
        font-size: 12px !important;
        padding: 4px 8px !important;
        border-radius: 999px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        animation: none !important;
        transform: none !important;
    }

    #ds-pro-badge-wrap > div[style*="background:#fef3c7"],
    #ds-pro-badge-wrap > div[style*="background: #fef3c7"] {
        font-size: 10px !important;
        padding: 3px 8px !important;
        margin-top: 4px !important;
        border-radius: 999px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    #ds-pro-badge-wrap > div[style*="color:#666"],
    #ds-pro-badge-wrap > div[style*="color: #666"] {
        color: #ffffff !important;
        font-size: 9px !important;
        margin-top: 3px !important;
        line-height: 1.2 !important;
    }
}

.ds-head #ds-pro-badge-wrap > div[style*="color:#666"],
.ds-head #ds-pro-badge-wrap > div[style*="color: #666"] {
    color: #ffffff !important;
}

/* ========================================= 
   DAILYBODH ASTROLOGY THEME OVERRIDES 
   ========================================= */ 
:root { 
    --ds-primary-color: #8A2BE2 !important; /* Mystical Purple */ 
    --ds-primary-hover: #6A1B9A !important; 
    --ds-bg-color: #0f0f1a !important; /* Deep Space Black */ 
    --ds-surface-color: #1a1a2e !important; 
    --ds-text-color: #e0e0e0 !important; 
    --ds-text-muted: #a0a0b0 !important; 
    --ds-border-color: #303050 !important; 
    --ds-accent-gold: #FFD700 !important; /* Premium Gold for buttons/icons */ 
} 

/* Base App Container */ 
.ds-ai-container { 
    background-color: var(--ds-bg-color); 
    color: var(--ds-text-color); 
    font-family: 'Poppins', sans-serif; 
    border: 1px solid var(--ds-accent-gold); 
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.2); 
} 

/* Input Fields */ 
.ds-ai-container input, 
.ds-ai-container textarea, 
.ds-ai-container select { 
    background-color: var(--ds-surface-color) !important; 
    color: var(--ds-accent-gold) !important; 
    border: 1px solid var(--ds-border-color) !important; 
} 

.ds-ai-container input:focus, 
.ds-ai-container textarea:focus, 
.ds-ai-container select:focus { 
    border-color: var(--ds-primary-color) !important; 
    box-shadow: 0 0 8px rgba(138, 43, 226, 0.5) !important; 
} 

/* Primary Generate Button */ 
.ds-generate-btn { 
    background: linear-gradient(45deg, var(--ds-primary-color), var(--ds-accent-gold)) !important; 
    color: #000 !important; 
    font-weight: bold !important; 
    border: none !important; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* Force Dark Theme Overrides */ 
body, .ds-main-wrap, .ds-ai-container, .ds-ai-box, .ds-output-box { 
    background-color: #0f0f1a !important; 
    color: #e0e0e0 !important; 
} 
.ds-ai-container input, .ds-ai-container textarea, .ds-ai-container select, .ds-ai-container .ds-dropdown-menu { 
    background-color: #1a1a2e !important; 
    color: #FFD700 !important; /* Gold text */ 
    border: 1px solid #303050 !important; 
} 
.ds-ai-container label, .ds-ai-container .ds-sub-text { 
    color: #a0a0b0 !important; 
}

/* Deep Dark Theme & Premium Golden Borders */ 
.ds-form-wrap, .ds-inner-wrap, .ds-card, .ds-ai-container .bg-white,
.ds-con.ds-ai-container,
.ds-ai-container .ds-content,
.ds-ai-container #ds-toolSection > form,
.ds-ai-container #ds-emailForm,
.ds-ai-container #ds-resultBox .ds-email-card,
.ds-ai-container #ds-resultBox .ds-action-card { 
    background-color: #1a1a2e !important; 
    border: 2px solid #FFD700 !important; /* Premium Golden Border */ 
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.15) !important; /* Subtle Gold Glow */ 
    border-radius: 12px !important; 
} 
.ds-ai-container input, .ds-ai-container textarea, .ds-ai-container select { 
    border: 1px solid #FFD700 !important; /* Golden borders for inputs */ 
} 
.ds-ai-container { 
    color: #e0e0e0 !important; 
}