/**
 * ProofPoints Story Details Modal Styles
 * Version: 1.9.3
 * 
 * Changelog:
 * v1.9.3 - Renamed Focus to Story Focus, Company Synopsis to Company Overview
 *        - Fixed LinkedIn URL not saving on Save Changes
 *        - Changed "your client" to "your organization" in brand search checkbox
 * v1.9.2 - Compact Author section - reduced padding and spacing throughout
 *        - Refine button now same size as search button (36px)
 *        - Added brand relationship checkbox in refine panel
 *        - Smaller inputs and buttons for more efficient vertical space
 * v1.9.1 - LinkedIn: Person confirmed display when URL not found
 *        - LinkedIn: Search on LinkedIn button with pre-built search URL
 *        - Better handling of LinkedIn's walled garden
 * v1.9.0 - Company search refinement panel for better lookup accuracy
 *        - Synopsis textarea now editable (not read-only div)
 *        - LinkedIn no-results display with search tips
 *        - Removed green from synopsis, now neutral grey
 * v1.8.0 - FIXED: Footer button sizing on laptop screens (1280-1400px breakpoints)
 *        - Added max-height constraints to prevent oversized buttons
 *        - Responsive button sizing for Upload/Generate Image buttons
 * v1.7.0 - FIXED: Avatar and workflow timeline centering with high-specificity overrides
 *        - Removed conflicting margin-right from .outline-avatar
 *        - Added nuclear centering rules for avatar-section-minimal and story-journey-section
 * v1.6.8 - Close (X) button now elegant square box design (36px, rounded corners)
 * v1.6.7 - Confirmation modal send button matches Send Review button (gradient + white text)
 * v1.6.6 - Updated confirmation modal send button to brand mint (#80DABC)
 * v1.6.5 - Added PPNotify confirmation modal styles
 *        - Beautiful centered modal with icons, highlight boxes, and styled buttons
 * v1.0.3 - Fullscreen button exact position match, close X at 25px
 */

/* Modal Base Styles */

/* Remove any potential margins/padding from parent elements */

/* Ensure modal background covers everything */
#unified-details-modal {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1000000;
    overflow: hidden;
    background-color: rgba(0,0,0,0.6);
    margin: 0 !important;
    padding: 0 !important;
}

/* Modal content with absolute positioning */
#unified-details-modal .modal-content:not(#settings-modal):not(#settings-modal *) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #fefefe;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Ensure proper height inheritance */
#unified-details-modal .modal-content:not(#settings-modal):not(#settings-modal *) > * {
    flex-shrink: 0; /* Header and footer don't shrink */
}

#unified-details-modal .modal-content:not(#settings-modal):not(#settings-modal *) > .modal-body {
    flex: 1 1 auto; /* Body takes remaining space */
    min-height: 0; /* Important for nested flexbox */
}

/* Remove any default styles that might add spacing */
#unified-details-modal > * {
    box-sizing: border-box;
}

/* Ensure body doesn't scroll when modal is open */
body.unified-modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix for WordPress admin bar */
.admin-bar #unified-details-modal {
    top: 32px;
    height: calc(100vh - 32px);
}

.admin-bar #unified-details-modal .modal-content {
    top: 32px;
    height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
    .admin-bar #unified-details-modal {
        top: 46px;
        height: calc(100vh - 46px);
    }
    
    .admin-bar #unified-details-modal .modal-content {
        top: 46px;
        height: calc(100vh - 46px);
    }
}

/* Modal Header */
#unified-details-modal > .modal-content > .modal-header {
    padding: 15px 20px 0 20px;
    background: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-shrink: 0;
    flex-grow: 0;
    min-height: auto;
}

#unified-details-modal > .modal-content > .modal-header h2 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 400;
    color: #222222;
    width: 100%;
    font-family: 'Lexend Deca', sans-serif;
}

/* Close Button (X) - Elegant square box design */
#unified-details-modal > .modal-content > .modal-header > .close {
    position: absolute;
    right: 20px;
    top: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #6b7280;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 10;
}

#unified-details-modal > .modal-content > .modal-header > .close:hover,
#unified-details-modal > .modal-content > .modal-header > .close:focus {
    background: #e5e7eb !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
}

/* Tab Navigation */
#unified-details-modal .details-tabs {
    display: flex;
    gap: 0;
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
    margin: 0 -20px;
    padding: 0 40px;
    flex-shrink: 0;
    min-height: 45px;
}

#unified-details-modal .details-tab-btn {
    background-color: transparent;
    border: none;
    padding: 8px 16px;
    margin-right: 5px;
    cursor: pointer;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    border-radius: 5px 5px 0 0;
    position: relative;
    bottom: -1px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* Tab colors */
#unified-details-modal .details-tab-btn[data-tab="outline-tab"] {
    border-top: 3px solid #80DABC;
}

#unified-details-modal .details-tab-btn[data-tab="story-tab"] {
    border-top: 3px solid #c0e600;
}

#unified-details-modal .details-tab-btn[data-tab="synopsis-tab"] {
    border-top: 3px solid #FFEF00;
}

#unified-details-modal .details-tab-btn[data-tab="transcript-tab"] {
    border-top: 3px solid #8b8680;
}

#unified-details-modal .details-tab-btn[data-tab="audio-tab"] {
    border-top: 3px solid #2196F3;
}

#unified-details-modal .details-tab-btn[data-tab="images-tab"] {
    border-top: 3px solid #FF9800;
}

#unified-details-modal .details-tab-btn[data-tab="languages-tab"] {
    border-top: 3px solid #B41D82;
}

#unified-details-modal .details-tab-btn[data-tab="publish-tab"] {
    border-top: 3px solid #9C27B0;
}

#unified-details-modal .details-tab-btn.active {
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #f8f8f8;
    font-weight: 500;
    background-color: #f8f8f8;
}

/* Tab Content */
#unified-details-modal .details-tab-content {
    display: none !important;
    padding: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
    height: 100%;
    flex: 1 1 auto;
    min-height: 0; /* Important for flexbox */
}

#unified-details-modal .details-tab-content.active {
    display: block !important;
    height: 100%; /* Ensure it takes full height */
}

/* Special handling for story tab to prevent double scrollbars */
#unified-details-modal #story-tab {
    padding: 0 !important;
    overflow: hidden !important;
}

#unified-details-modal #story-tab.active {
    display: flex !important; /* Override display: block */
    height: 100%;
}

/* All other tabs can have padding and scroll */
#unified-details-modal .details-tab-content:not(#story-tab) {
    padding: 20px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Modal Body */
#unified-details-modal > .modal-content > .modal-body {
    padding: 0 !important;
    overflow: hidden !important;
    flex: 1 1 auto;
    background: white;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Modal Footer */
#unified-details-modal > .modal-content > .modal-footer {
    padding: 12px 20px;
    background: #f8f8f8;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    flex-grow: 0;
    gap: 10px;
    margin-top: auto;
    min-height: 50px;
    max-height: 60px;
}

/* Modal Footer Content */
#unified-details-modal .modal-footer-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* Footer Left Section (for delete button on outline tab) */
#unified-details-modal .footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Footer Buttons Container */
#unified-details-modal .footer-buttons {
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    align-items: center;
}

/* Save Status in footer */
#unified-details-modal #details-save-status,
#unified-details-modal .save-status {
    position: relative;
    margin-right: auto;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    padding: 4px 8px;
    border-radius: 4px;
    transition: opacity 0.3s;
}

/* Buttons - BASE STYLES - SCOPED TO UNIFIED DETAILS MODAL ONLY */
#unified-details-modal .save-btn,
#unified-details-modal .delete-btn,
#unified-details-modal .close-btn,
#unified-details-modal .modal-action-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
}

/* Save Button */
#unified-details-modal .save-btn {
    background-color: #4CAF50;
    color: white;
}

#unified-details-modal .save-btn:hover:not(:disabled) {
    background-color: #45a049;
}

#unified-details-modal .save-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Delete Button */
#unified-details-modal .delete-btn {
    background-color: transparent;
    border: 1px solid #f44336 !important;
    color: #f44336;
}

#unified-details-modal .delete-btn:hover:not(:disabled) {
    background-color: #f44336;
    color: white;
}

/* Close Button - SCOPED TO UNIFIED DETAILS MODAL ONLY */
#unified-details-modal .close-btn {
    background-color: #6c757d;
    color: white;
}

#unified-details-modal .close-btn:hover {
    background-color: #5a6268;
}

/* Create button */
#unified-details-modal .create-btn {
    background-color: #2196F3;
    color: white;
}

/* Interview button styling */
#unified-details-modal .interview-btn {
    background-color: #FF9800;
    color: white;
}

#unified-details-modal .interview-btn:hover:not(:disabled) {
    background-color: #F57C00;
}

#unified-details-modal .create-btn:hover {
    background-color: #1976D2;
}

/* Modal Action Button (general class) */
#unified-details-modal .modal-action-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

/* Delete Confirmation Modal - ENSURE VISIBILITY */
#delete-confirmation-modal {
    display: none;
    position: fixed;
    z-index: 1000001 !important; /* Higher than main modal */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    animation: fadeIn 0.3s;
    overflow: hidden;
}

/* Force delete modal to show when it has inline style */
#delete-confirmation-modal[style*="display: block"] {
    display: block !important;
}

#delete-confirmation-modal .delete-modal-content {
    background-color: white;
    margin: 0;
    padding: 0;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    animation: slideIn 0.3s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#delete-confirmation-modal .delete-modal-header {
    padding: 20px;
    background: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 8px 8px 0 0;
}

#delete-confirmation-modal .delete-modal-header h3 {
    margin: 0;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

#delete-confirmation-modal .delete-modal-body {
    padding: 20px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #666;
}

#delete-confirmation-modal .delete-modal-footer {
    padding: 20px;
    background: #f8f8f8;
    border-top: 1px solid #e0e0e0;
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Delete Modal Specific Classes */
#delete-confirmation-modal .delete-modal {
    display: none;
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
}

#delete-confirmation-modal .delete-modal-content p {
    margin: 0 0 20px 0;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    color: #666;
}

#delete-confirmation-modal .delete-modal-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

#delete-confirmation-modal .delete-cancel-btn,
#delete-confirmation-modal .delete-confirm-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

#delete-confirmation-modal .delete-cancel-btn {
    background-color: #e0e0e0;
    color: #333;
}

#delete-confirmation-modal .delete-cancel-btn:hover {
    background-color: #ccc;
}

#delete-confirmation-modal .delete-confirm-btn {
    background-color: #f44336;
    color: white;
}

#delete-confirmation-modal .delete-confirm-btn:hover {
    background-color: #d32f2f;
}

/* Save Status Variations */
#unified-details-modal .save-status.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block;
    padding: 5px 10px;
    border-radius: 4px;
}

#unified-details-modal .save-status.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
    padding: 5px 10px;
    border-radius: 4px;
}

/* Spinner for save button */
#unified-details-modal .spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 5px;
    vertical-align: middle;
}

/* Loading - for container elements only, not buttons */
#unified-details-modal .loading:not(button) {
    text-align: center;
    padding: 50px;
    color: #666;
    font-family: 'Lexend Deca', sans-serif;
}

/* Outline Tab Specific Styles */
#unified-details-modal #outline-tab.active {
    display: flex !important;
    flex-direction: column;
}

/* Outline container */
#unified-details-modal .outline-container {
    padding: 15px 20px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

/* Author profile section for outline tab */
#unified-details-modal .outline-author-profile {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 10px;
}

/* Avatar container in outline - FIXED v1.7.0: Centered, no margin offset */
#unified-details-modal .outline-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;  /* FIXED: Changed from margin-right: 20px */
    flex-shrink: 0;
    background-color: #80DABC;
    position: relative;
}

#unified-details-modal .outline-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    font-family: "Lexend Deca", sans-serif;
    position: relative;
    background-color: white !important;
}

#unified-details-modal .outline-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

@media (max-width: 968px) {
    #unified-details-modal .outline-form {
        grid-template-columns: 1fr;
    }
}

#unified-details-modal .outline-section {
    background: #f8f9fa;
    padding: 12px 18px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

#unified-details-modal .outline-section h4 {
    margin: 0 0 10px 0;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

#unified-details-modal .outline-form .form-row {
    margin-bottom: 10px;
    position: relative;
}

#unified-details-modal .outline-form .form-row:last-child {
    margin-bottom: 0;
}

#unified-details-modal .outline-form label {
    display: block;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    margin-bottom: 4px;
    color: #333;
    font-weight: 400;
}

#unified-details-modal .char-limit {
    font-size: 12px;
    color: #999;
    font-weight: 300;
}

#unified-details-modal .outline-form input,
#unified-details-modal .outline-form textarea {
    width: 100%;
    padding: 14px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 16px;
    transition: all 0.3s;
}

#unified-details-modal .outline-form textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

#unified-details-modal .outline-form input:focus,
#unified-details-modal .outline-form textarea:focus {
    outline: none;
    border-color: #80DABC;
    box-shadow: 0 0 0 2px rgba(128, 218, 188, 0.1);
}

#unified-details-modal .char-counter {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    color: #999;
    text-align: right;
    margin-top: 1px;
}

#unified-details-modal .char-counter.warning {
    color: #f39c12;
}

#unified-details-modal .char-counter.error {
    color: #e74c3c;
}

#unified-details-modal .outline-form input.error {
    border-color: #e74c3c;
}

/* Email field container with buttons */
#unified-details-modal .email-field-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#unified-details-modal .email-action-buttons {
    display: flex;
    gap: 8px;
}

/* PILL SHAPED BUTTONS FOR INVITATION/REVIEW */
#unified-details-modal .outline-action-btn {
    padding: 8px 18px;
    border: none;
    border-radius: 20px !important;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    flex: 1;
}

#unified-details-modal .invitation-btn {
    background-color: #2196F3;
    color: white;
}

#unified-details-modal .invitation-btn:hover:not(:disabled) {
    background-color: #1976D2;
}

#unified-details-modal .review-btn {
    background-color: #4CAF50;
    color: white;
}

#unified-details-modal .review-btn:hover:not(:disabled) {
    background-color: #45a049;
}

#unified-details-modal .outline-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Right column sections */
#unified-details-modal .outline-right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Tab Heading */
#unified-details-modal .tab-heading {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 18px;
    margin: 0 0 15px 0;
    font-weight: 400;
    color: #333;
    line-height: 1.3;
    flex-shrink: 0;
}

/* Story tab specific styling */
#unified-details-modal #story-tab.active {
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
    height: 100%;
}

#unified-details-modal .story-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    flex: 1 1 auto;
    position: relative;
    padding: 15px 20px;
    box-sizing: border-box;
    overflow: hidden !important;
    min-height: 0; /* Important for flexbox */
}

/* FULLSCREEN CONTAINER ADJUSTMENT */
#unified-details-modal .story-fullscreen-container .story-container {
    padding-top: 60px !important; /* Make room for fullscreen button */
}

#unified-details-modal #story-editor-container {
    flex: 1 1 auto;
    min-height: 0; /* Important for flexbox to shrink */
    display: flex; /* Use flex to allow PPEditor to fill space */
    flex-direction: column;
    overflow: hidden !important;
    position: relative;
}

/* PPEditor fills available space */
#unified-details-modal #story-editor-container .pp-editor-container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
}

#unified-details-modal #story-editor-container .pp-editor-toolbar {
    flex-shrink: 0;
}

#unified-details-modal #story-editor-container .pp-editor-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

#unified-details-modal #story-editor-container .pp-editor-search-bar {
    flex-shrink: 0;
}

#unified-details-modal #story-editor {
    width: 100% !important;
    height: 100% !important;
    min-height: 300px !important;
    display: none; /* Hidden until TinyMCE initializes */
}

/* When PPEditor is active, ensure textarea stays hidden */
#unified-details-modal #story-editor-container .pp-editor-container ~ #story-editor,
#unified-details-modal #story-editor-container:has(.pp-editor-container) #story-editor,
#unified-details-modal #story-editor[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Ensure TinyMCE fills container */
#unified-details-modal .tox-tinymce {
    height: 100% !important;
    flex: 1 !important; /* ADD THIS */
    display: flex !important;
    flex-direction: column !important;
}

#unified-details-modal .tox-editor-header {
    flex-shrink: 0 !important;
}

#unified-details-modal .tox-editor-container {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#unified-details-modal .tox-edit-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Ensure TinyMCE editor content area has scrollbar */
#unified-details-modal .tox-edit-area__iframe {
    overflow-y: auto !important;
    height: 100% !important;
}

/* FULLSCREEN BUTTON - POSITIONED CONSISTENTLY */
#unified-details-modal .story-fullscreen-btn {
    position: absolute;
    top: 20px; /* Standard position */
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent !important;
    color: #FF9800 !important;
    border: 2px solid #FF9800 !important;
    padding: 6px 14px;
    border-radius: 20px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s;
    box-shadow: none !important;
    text-shadow: none !important;
    display: none; /* Hidden by default on desktop */
}

/* ONLY SHOW FULLSCREEN BUTTON ON SCREENS 1920px AND BELOW */
@media screen and (max-width: 1920px) {
    #unified-details-modal .story-fullscreen-btn {
        display: block;
    }
}

#unified-details-modal .story-fullscreen-btn:hover {
    background-color: #FF9800 !important;
    color: white !important;
}

/* Fullscreen mode styles */
#unified-details-modal .story-fullscreen-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: white !important;
    z-index: 1000002 !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
}

#unified-details-modal .story-fullscreen-container .story-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 20px !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#unified-details-modal .story-fullscreen-container #story-editor-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100% !important;
}

#unified-details-modal .story-fullscreen-container .tox.tox-tinymce {
    flex: 1;
    height: auto !important;
    width: 100% !important;
}

#unified-details-modal .story-fullscreen-container .tox-edit-area {
    height: 100% !important;
}

#unified-details-modal .story-fullscreen-container .headline-options,
#unified-details-modal .story-fullscreen-container .title-container {
    width: 100% !important;
    max-width: none !important;
}

/* Exit fullscreen button position - MATCH NORMAL POSITION */
#unified-details-modal .story-fullscreen-container .story-fullscreen-btn {
    top: 20px; /* Same position as normal mode */
    background-color: transparent !important;
    color: #666 !important;
    border-color: #666 !important;
}

#unified-details-modal .story-fullscreen-container .story-fullscreen-btn:hover {
    background-color: #666 !important;
    color: white !important;
}

/* Headline options */
#unified-details-modal .headline-options {
    margin-bottom: 10px;
    width: 100%;
}

#unified-details-modal #headline-dropdown {
    width: 100%;
    padding: 8px 10px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background-color: white;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
	margin-bottom: 0; /* Remove any default margin */
}

#unified-details-modal #headline-dropdown:focus {
    border-color: #c0e600;
    box-shadow: 0 0 5px rgba(192, 230, 0, 0.3);
    outline: none;
}

/* Title container */
#unified-details-modal .title-container {
    position: relative;
    width: 100%;
}

#unified-details-modal #story-title-input {
    width: 100%;
    padding: 8px 115px 8px 10px;
    font-size: 15px;
    font-family: 'Lexend Deca', sans-serif;
    border: 2px solid #ddd;
    border-radius: 6px;
    margin-bottom: 0px;
}

#unified-details-modal #story-title-input:focus {
    border-color: #c0e600;
    outline: none;
    box-shadow: 0 0 5px rgba(192, 230, 0, 0.3);
}

#unified-details-modal #story-title-counter {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    color: #666;
    background: transparent;
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 5;
}

#unified-details-modal .story-save-status {
    margin-top: 0px;
    font-size: 11px;
    color: #4CAF50;
    font-family: 'Lexend Deca', sans-serif;
    text-align: left;
    flex-shrink: 0;
    min-height: 16px; /* REDUCED from 20px to 16px */
    line-height: 16px; /* Ensure text fits properly */
}

/* Force the editor container to be aggressive about taking space */
#unified-details-modal #story-editor-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important; /* CHANGED from block to flex */
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Fallback editor for when TinyMCE fails to load */
#unified-details-modal #story-editor-fallback {
    width: 100%;
    min-height: 300px;
    max-height: 600px;
    padding: 10px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
}

/* Synopsis tab styling */
#unified-details-modal .synopsis-section {
    padding: 10px 20px;
    max-width: 100%;
    margin: 0 auto;
}

/* Author info container */
#unified-details-modal .author-info-container {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    margin-bottom: 30px;
}

#unified-details-modal .author-info-item {
    margin-bottom: 15px;
    display: flex;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

#unified-details-modal .author-info-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

#unified-details-modal .author-info-value {
    flex: 1;
    font-size: 18px;
    font-weight: 400;
    font-family: "Lexend Deca", sans-serif;
    line-height: 1.3em;
}

/* ============================================
   QUOTES SECTION - APPLE-INSPIRED DESIGN
   ============================================ */

/* Quotes container */
#unified-details-modal .quotes-container {
    margin-top: 30px;
}

#unified-details-modal .quotes-heading {
    font-family: "Lexend Deca", sans-serif;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 24px;
    color: #1D1D1F;
}

/* Quotes grid - Apple-style responsive layout */
#unified-details-modal .quotes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 20px;
}

@media (max-width: 1200px) {
    #unified-details-modal .quotes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    #unified-details-modal .quotes-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Quote tile - Clean Apple aesthetic with subtle orange accent */
#unified-details-modal .quote-tile {
    background: #FFFFFF;
    border-radius: 0 12px 12px 0;
    padding: 24px;
    border: 1px solid #E5E5E5;
    border-left: 3px solid #f97316;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: background-color 200ms ease-out;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    overflow: hidden;
}

/* Subtle hover effect - Apple style (no lift, just background) */
#unified-details-modal .quote-tile:hover {
    background: #FFFAF5;
    transition: background-color 200ms ease-out;
}

/* Remove colorful borders - keep orange left accent */
#unified-details-modal .quote-tile:nth-child(1),
#unified-details-modal .quote-tile:nth-child(2),
#unified-details-modal .quote-tile:nth-child(3),
#unified-details-modal .quote-tile:nth-child(4),
#unified-details-modal .quote-tile:nth-child(5),
#unified-details-modal .quote-tile:nth-child(6) {
    border: 1px solid #E5E5E5;
    border-left: 3px solid #f97316;
}

/* Quote text - Typography focused */
#unified-details-modal .quote-text {
    font-family: "Lexend Deca", sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #1D1D1F;
    font-weight: 400;
    flex: 1;
    margin-bottom: 20px;
    quotes: """ """ "'" "'";
    position: relative;
    padding-left: 8px;
}

/* Subtle decorative quote mark - ties to PPEditor blockquotes */
#unified-details-modal .quote-text::before {
    content: '"';
    position: absolute;
    top: -12px;
    left: -16px;
    font-size: 2.5rem;
    font-family: Georgia, serif;
    color: #f97316;
    opacity: 0.2;
    line-height: 1;
    pointer-events: none;
}

/* Remove quote number - too playful for Apple style */
#unified-details-modal .quote-number {
    display: none;
}

/* Quote footer - Clean separation */
#unified-details-modal .quote-footer {
    border-top: 1px solid #E5E5E5;
    padding-top: 16px;
    margin-top: auto;
    flex-shrink: 0;
}

/* Attribution - Apple-style typography */
#unified-details-modal .quote-author {
    font-family: "Lexend Deca", sans-serif;
    font-size: 14px;
    color: #86868B;
    margin: 0 0 12px 0;
    line-height: 1.4;
    font-weight: 400;
}

/* Quote actions */
#unified-details-modal .quote-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

/* Copy button - Grey to not clash with orange accents */
#unified-details-modal .quote-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-family: "Lexend Deca", sans-serif;
    font-weight: 500;
    background-color: #F5F5F7;
    color: #1D1D1F;
    border: 1px solid #E5E5E5;
    cursor: pointer;
    transition: background-color 200ms ease-out;
    white-space: nowrap;
}

/* Copy button hover - Apple press effect */
#unified-details-modal .quote-copy-btn:hover {
    background-color: #E8E8ED;
    transform: none;
}

/* Copy button active - Apple scale effect */
#unified-details-modal .quote-copy-btn:active {
    transform: scale(0.95);
    transition: transform 100ms ease-out;
}

/* Success state - with checkmark */
#unified-details-modal .quote-copy-btn.copied {
    background-color: #34C759;
    color: white;
    border-color: #34C759;
}

#unified-details-modal .quote-copy-btn svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

/* Add to Slides button - Google integration */
#unified-details-modal .quote-slides-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-family: "Lexend Deca", sans-serif;
    font-weight: 500;
    background-color: #FFFFFF;
    color: #1D1D1F;
    border: 1px solid #E5E5E5;
    cursor: pointer;
    transition: background-color 200ms ease-out, border-color 200ms ease-out;
    white-space: nowrap;
}

#unified-details-modal .quote-slides-btn:hover {
    background-color: #F5F5F7;
    border-color: #D1D1D6;
}

#unified-details-modal .quote-slides-btn:active {
    transform: scale(0.95);
    transition: transform 100ms ease-out;
}

/* Add to Slides button - Loading state */
#unified-details-modal .quote-slides-btn.loading {
    opacity: 0.6;
    cursor: wait;
}

/* Add to Slides button - Success state */
#unified-details-modal .quote-slides-btn.success {
    background-color: #34C759;
    color: white;
    border-color: #34C759;
}

/* Google Slides icon */
#unified-details-modal .quote-slides-btn svg {
    width: 14px;
    height: 14px;
}

/* Bulk export section at top */
#unified-details-modal .quotes-bulk-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
    padding: 12px;
    background: #F5F5F7;
    border-radius: 8px;
}

#unified-details-modal .bulk-slides-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-family: "Lexend Deca", sans-serif;
    font-weight: 500;
    background-color: #FFEF00;
    color: #1D1D1F;
    border: none;
    cursor: pointer;
    transition: all 200ms ease-out;
}

#unified-details-modal .bulk-slides-btn:hover {
    background-color: #E6D600;
}

#unified-details-modal .bulk-slides-btn:active {
    transform: scale(0.95);
}

#unified-details-modal .bulk-slides-btn svg {
    width: 16px;
    height: 16px;
}

/* Google auth notice */
#unified-details-modal .google-auth-notice {
    background: #FFF9E6;
    border: 1px solid #FFEF00;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    display: none;
}

#unified-details-modal .google-auth-notice.show {
    display: block;
}

#unified-details-modal .google-auth-notice p {
    margin: 0 0 12px 0;
    font-family: "Lexend Deca", sans-serif;
    font-size: 14px;
    color: #1D1D1F;
}

#unified-details-modal .google-connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-family: "Lexend Deca", sans-serif;
    font-weight: 500;
    background-color: #FFEF00;
    color: #1D1D1F;
    border: none;
    cursor: pointer;
    transition: all 200ms ease-out;
}

#unified-details-modal .google-connect-btn:hover {
    background-color: #E6D600;
}

/* Google connection status indicator */
#unified-details-modal .google-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-family: "Lexend Deca", sans-serif;
    font-weight: 400;
    background: #F5F5F7;
    color: #86868B;
    margin-bottom: 12px;
}

#unified-details-modal .google-status.connected {
    background: #D1F4E0;
    color: #28A745;
}

#unified-details-modal .google-status-dot {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    width: 12px !important; /* Increased from 8px */
    height: 12px !important; /* Increased from 8px */
    border-radius: 50% !important;
    border: 2px solid white !important;
    background: #9AA0A6 !important;
    z-index: 1 !important;
}

/* Force Google icon to display */
.google-badge-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}

.google-badge-icon path {
    display: block !important;
}

.google-badge-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* No quotes message */
#unified-details-modal .no-quotes {
    text-align: center;
    color: #86868B;
    font-family: "Lexend Deca", sans-serif;
    font-size: 15px;
    font-weight: 400;
    padding: 40px;
    background: #F5F5F7;
    border-radius: 12px;
}

/* Mobile refinements */
@media (max-width: 768px) {
    #unified-details-modal .quote-tile {
        padding: 20px;
        min-height: 180px;
    }
    
    #unified-details-modal .quote-text {
        font-size: 16px;
    }
    
    #unified-details-modal .quote-author {
        font-size: 13px;
    }
}
 
/* Google Docs Buttons */
.google-docs-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-family: 'Lexend Deca', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.google-docs-btn svg {
    flex-shrink: 0;
}

/* Share Button - Yellow */
.google-docs-share {
    background: #FFEF00;
    color: #1D1D1F;
}

.google-docs-share:hover:not(:disabled) {
    background: #F0E000;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 239, 0, 0.3);
}

.google-docs-share:active:not(:disabled) {
    transform: translateY(0);
}

/* Import Button - Green */
.google-docs-import {
    background: #34C759;
    color: white;
}

.google-docs-import:hover:not(:disabled) {
    background: #2FB350;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
}

.google-docs-import:active:not(:disabled) {
    transform: translateY(0);
}

/* View Button - Blue */
.google-docs-view {
    background: #007AFF;
    color: white;
}

.google-docs-view:hover:not(:disabled) {
    background: #0051D5;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.google-docs-view:active:not(:disabled) {
    transform: translateY(0);
}

/* Disabled State */
.google-docs-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Success State */
.google-docs-btn.success {
    background: #34C759 !important;
    color: white !important;
}

/* Loading Animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .google-docs-btn {
        font-size: 12px;
        padding: 6px 12px;
        gap: 6px;
    }
    
    .google-docs-btn svg {
        width: 14px;
        height: 14px;
    }
}


/* TinyMCE Editor Fixes */
#unified-details-modal .mce-tinymce,
#unified-details-modal .tox-tinymce,
#unified-details-modal .tox {
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

#unified-details-modal .mce-edit-area,
#unified-details-modal .tox-edit-area {
    background: white !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

#unified-details-modal .mce-content-body,
#unified-details-modal iframe {
    height: 100% !important;
}

/* Target the actual content inside the iframe */
#unified-details-modal .mce-content-body {
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #333 !important;
    padding: 15px !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
}

/* Force TinyMCE iframe container to have proper height */
#unified-details-modal .tox-edit-area__iframe,
#unified-details-modal .mce-edit-area iframe {
    height: 100% !important;
    width: 100% !important;
}

/* TinyMCE toolbar and statusbar */
#unified-details-modal .tox-toolbar,
#unified-details-modal .tox-toolbar__primary,
#unified-details-modal .tox-statusbar {
    flex-shrink: 0 !important;
}

#unified-details-modal .tox-statusbar {
    position: relative !important;
    border-top: 1px solid #ccc;
}

#unified-details-modal .tox-sidebar-wrap {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    position: relative !important;
}
#unified-details-modal #images-tab {
    position: relative;
}

#unified-details-modal #images-tab.active {
    display: flex !important;
    flex-direction: column;
}

#unified-details-modal .images-container {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

#unified-details-modal .images-placeholder {
    text-align: center;
    color: #999;
    padding: 50px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 16px;
}

/* Image tab footer - Always show buttons on the right */
#unified-details-modal #images-tab ~ .modal-footer .footer-buttons,
#unified-details-modal .images-footer {
    display: flex !important;
    gap: 10px;
    justify-content: flex-end !important;
    width: 100%;
}

/* Image action buttons in footer - for images tab */
#unified-details-modal .image-action-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    width: 100%;
}

#unified-details-modal .download-images-btn {
    background-color: #FF9800;
    color: white;
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

#unified-details-modal .download-images-btn:hover {
    background-color: #F57C00;
}

#unified-details-modal .generate-images-btn {
    background-color: #2196F3;
    color: white;
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

#unified-details-modal .generate-images-btn:hover {
    background-color: #1976D2;
}

#unified-details-modal .upload-images-btn {
    background-color: #4CAF50;
    color: white;
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

#unified-details-modal .upload-images-btn:hover {
    background-color: #45a049;
}

/* Special footer styles for specific tabs */
#unified-details-modal #images-tab.active ~ .modal-footer .footer-buttons {
    justify-content: flex-end !important;
}

/* Ensure consistent footer structure */
#unified-details-modal .modal-footer .modal-footer-content {
    display: flex;
    width: 100%;
    align-items: center;
}

#unified-details-modal .modal-footer .save-status {
    margin-right: auto;
}

#unified-details-modal .modal-footer .footer-buttons {
    margin-left: auto;
}

/* Media query for small screens to ensure proper scrolling */
@media (max-height: 768px) {
    #unified-details-modal .story-container {
        padding: 10px; /* Less padding on small screens */
    }
    
    #unified-details-modal #story-editor-container {
        min-height: 250px; /* Smaller minimum on small screens */
    }
    
    /* Ensure TinyMCE content is fully scrollable */
    #unified-details-modal .mce-content-body {
        padding-bottom: 50px !important; /* Extra padding at bottom to ensure last line is visible */
    }
}

/* Additional responsive fixes */
@media (max-height: 600px) {
    #unified-details-modal .modal-header {
        padding: 10px 20px 0 20px; /* Less padding */
    }
    
    #unified-details-modal .modal-footer {
        padding: 10px 20px; /* Less padding */
        min-height: 50px; /* Smaller footer */
    }
    
    #unified-details-modal .story-fullscreen-btn {
        padding: 4px 10px; /* Smaller button */
        font-size: 12px;
    }
    
    #unified-details-modal .headline-options,
    #unified-details-modal .title-container {
        margin-bottom: 8px; /* Less margin */
    }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        transform: translate(-50%, -50%) translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) translateY(0);
        opacity: 1;
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Details button styling - match dashboard buttons */
#unified-details-modal .details-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 20px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s;
    margin-right: 5px;
}

#unified-details-modal .details-btn:hover {
    background-color: #45a049;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Modal action buttons styling */
#unified-details-modal #details-save-btn,
#unified-details-modal #details-delete-btn,
#unified-details-modal #details-close-btn {
    padding: 8px 16px;
    border-radius: 20px;
    font-family: "Lexend Deca", sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

#unified-details-modal #details-save-btn {
    background-color: #c0e600;
    color: #333;
}

#unified-details-modal #details-save-btn:hover {
    background-color: #a6c500;
}

#unified-details-modal #details-delete-btn {
    background-color: transparent;
    border: 1px solid #f44336 !important;
    color: #f44336;
}

#unified-details-modal #details-delete-btn:hover {
    background-color: #f44336;
    color: white;
}

#unified-details-modal #details-close-btn {
    background-color: #e0e0e0;
    color: #333;
}

#unified-details-modal #details-close-btn:hover {
    background-color: #ccc;
}

/* Ensure Close button is always visible */
#unified-details-modal .modal-footer .close-btn {
    display: inline-block !important;
    visibility: visible !important;
}

/* TinyMCE Integration Styles */
/* Z-index fixes - keep these as they are critical */
.tox.tox-tinymce-aux {
    z-index: 11000 !important;
}
.tox-dialog-wrap {
    z-index: 11000 !important;
}
.tox-silver-sink {
    z-index: 11000 !important;
}
.tox-notification--in {
    z-index: 11100 !important;
}

/* Ensure modal content is above any site elements */
#unified-details-modal .modal-content {
    position: relative;
    z-index: 1000000 !important; 
}

/* Remove extra scrollbars */
#unified-details-modal {
    overflow: hidden !important;
}

#unified-details-modal .modal-content {
    overflow: hidden !important;
}

/* Only allow scrolling in tab content */
#unified-details-modal .modal-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#unified-details-modal .details-tab-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f5f5f5;
    height: 100%;
}

#unified-details-modal .details-tab-content::-webkit-scrollbar {
    width: 8px;
}

#unified-details-modal .details-tab-content::-webkit-scrollbar-track {
    background: #f5f5f5;
}

#unified-details-modal .details-tab-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

#unified-details-modal .details-tab-content::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* ProofPoints Modal Styles - FULLY ISOLATED TO PREVENT ANY SPILLOVER */

/* Modal base styles - only for ProofPoints modals */
.proofpoints-dashboard-wrapper .modal,
#settings-modal,
#safe-forgot-modal,
#featured-image-modal,
#reset-password-modal {
    display: none;
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.proofpoints-dashboard-wrapper .modal[style*="display: block"],
.proofpoints-dashboard-wrapper .modal.show,
#safe-forgot-modal[style*="display: block"],
#featured-image-modal[style*="display: block"],
#reset-password-modal[style*="display: block"],
#settings-modal[style*="display: block"] {
    display: block !important;
}

.proofpoints-dashboard-wrapper .modal-content,
#settings-modal .modal-content,
#safe-forgot-modal .modal-content,
#featured-image-modal .modal-content,
#reset-password-modal .modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 500px;
    position: relative;
    z-index: 1000000;
}

/* Settings modal specific styles */
#settings-modal #brand-settings-editor {
    width: 100%;
    min-height: 400px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: 'Lexend Deca', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    resize: vertical;
    background-color: #fafafa;
    transition: all 0.3s ease;
}


/* Brand preview content styling */
#brand-preview-content {
    font-family: 'Lexend Deca', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

#brand-preview-content p {
    margin: 0 0 1em 0;
}

#brand-preview-content p:last-child {
    margin-bottom: 0;
}

/* Image modal specific styling */
.proofpoints-dashboard-wrapper .image-modal-content,
#featured-image-modal .image-modal-content {
    max-width: 80%;
    max-height: 80vh;
    width: auto;
    height: auto;
    margin: 5% auto;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* ProofPoints modal content only */
.proofpoints-dashboard-wrapper .modal-content h3,
#settings-modal .modal-content h3,
#safe-forgot-modal .modal-content h3 {
    margin: 0 0 20px 0;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    color: #333;
}

.proofpoints-dashboard-wrapper .modal-content label,
#settings-modal .modal-content label,
#safe-forgot-modal .modal-content label {
    display: block;
    margin-bottom: 8px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: #666;
}

.proofpoints-dashboard-wrapper .modal-content input[type="email"],
.proofpoints-dashboard-wrapper .modal-content input[type="password"],
#settings-modal .modal-content input[type="email"],
#settings-modal .modal-content input[type="password"],
#safe-forgot-modal .modal-content input[type="email"],
#safe-forgot-modal .modal-content input[type="password"] {
    width: 100%;
    padding: 12px 18px;
    border: 2px solid #e5e5e5;
    border-radius: 25px;
    box-sizing: border-box;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 300;
    font-size: 16px;
    margin-bottom: 20px;
}

.proofpoints-dashboard-wrapper .modal-content button,
#settings-modal .modal-content button,
#safe-forgot-modal .modal-content button {
    width: 100%;
    background: #f44336;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 400;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.proofpoints-dashboard-wrapper .modal-content button:hover,
#settings-modal .modal-content button:hover,
#safe-forgot-modal .modal-content button:hover {
    opacity: 0.9;
}

.proofpoints-dashboard-wrapper .close,
#settings-modal .close,
#safe-forgot-modal .close,
#featured-image-modal .close {
    position: absolute;
    right: 15px;
    top: 15px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.proofpoints-dashboard-wrapper .close:hover,
#settings-modal .close:hover,
#safe-forgot-modal .close:hover,
#featured-image-modal .close:hover {
    color: #000;
}

/* Modal messages - SCOPED */
.proofpoints-dashboard-wrapper .modal-message,
#settings-modal .modal-message,
#safe-forgot-modal .modal-message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 15px;
    text-align: center;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 15px;
    font-weight: 300;
    display: none;
    line-height: 1.3em;
}

.proofpoints-dashboard-wrapper .modal-message.success,
#settings-modal .modal-message.success,
#safe-forgot-modal .modal-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.proofpoints-dashboard-wrapper .modal-message.error,
#settings-modal .modal-message.error,
#safe-forgot-modal .modal-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Image modal improvements - SCOPED */
.proofpoints-dashboard-wrapper .modal-header,
#settings-modal .modal-header,
#featured-image-modal .modal-header {
    padding: 15px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
    border-radius: 15px 15px 0 0;
}

.proofpoints-dashboard-wrapper .modal-header h2,
#settings-modal .modal-header h2,
#featured-image-modal .modal-header h2 {
    margin: 0;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #333;
}

.proofpoints-dashboard-wrapper .modal-body,
#featured-image-modal .modal-body {
    flex: 1;
    padding: 15px;
    min-height: 200px;
    max-height: calc(80vh - 120px);
    overflow: auto;
}

.proofpoints-dashboard-wrapper .image-modal-body {
    text-align: center;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.proofpoints-dashboard-wrapper #featured-image-large {
    max-width: 100%;
    max-height: 60vh;
    width: auto;
    height: auto;
    object-fit: contain;
}



/* Smaller modal action buttons - SCOPED */
.proofpoints-dashboard-wrapper .modal-action-btn,
#settings-modal .modal-action-btn,
#featured-image-modal .modal-action-btn {
    padding: 8px 20px;
    border-radius: 25px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    white-space: nowrap;
    width: auto !important;
    max-width: 200px !important;
    display: inline-block !important;
}

.proofpoints-dashboard-wrapper #download-image-btn,
#featured-image-modal #download-image-btn {
    background-color: #555555;
    color: white;
}

.proofpoints-dashboard-wrapper #download-image-btn:hover,
#featured-image-modal #download-image-btn:hover {
    background-color: #333333;
}

.proofpoints-dashboard-wrapper #close-image-modal,
#featured-image-modal #close-image-modal {
    background-color: #e0e0e0;
    color: #333;
}

.proofpoints-dashboard-wrapper #close-image-modal:hover,
#featured-image-modal #close-image-modal:hover {
    background-color: #ccc;
}

/* Settings Modal Specific Styles - Match Story Details Modal */
#settings-modal {
    display: none;
    position: fixed !important;
    z-index: 999999 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7) !important;
}



/* Modal styles from dashboard.css integration */
body.client-authenticated .modal-backdrop,
body.dashboard-authenticated .modal-backdrop {
    display: none !important;
}

#settings-modal.active,
#settings-modal[style*="display: block"] {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
}

#client-details-modal.show,
#client-details-modal[style*="display: block"],
.unified-details-modal.show,
.unified-details-modal[style*="display: block"],
#unified-details-modal.show,
#unified-details-modal[style*="display: block"] {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
}

/* Loading spinner for buttons */
.btn-spinner {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 5px !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    border-radius: 50% !important;
    border-top-color: #fff !important;
    animation: spin 1s linear infinite !important;
}

/* Force iframe to respect height and scrolling */
#unified-details-modal iframe.tox-edit-area__iframe {
    height: 100% !important;
    width: 100% !important;
    display: block !important;
}

/* Ensure iframe body scrolls properly */
#unified-details-modal .tox-edit-area {
    position: relative !important;
    height: 100% !important;
    overflow: hidden !important; /* Container doesn't scroll, iframe content does */
}

/* Fix for small screens - ensure proper iframe scrolling */
@media (max-height: 768px) {
    #unified-details-modal iframe.tox-edit-area__iframe {
        min-height: 250px !important;
    }
}
@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-20px); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* AGGRESSIVE OVERRIDE: Prevent close button styling from leaking to other modals */
/* Target all modals that are NOT the unified details modal */
.modal:not(#unified-details-modal) .close-btn,
.modal-content:not(#unified-details-modal .modal-content) .close-btn,
#settings-modal .close-btn,
#safe-forgot-modal .close-btn,
#featured-image-modal .close-btn,
#reset-password-modal .close-btn,
.proofpoints-dashboard-wrapper .modal .close-btn {
    /* Reset any styles that might have leaked */
    background-color: initial !important;
    color: initial !important;
    padding: initial !important;
    border: initial !important;
    border-radius: initial !important;
    font-family: initial !important;
    font-size: initial !important;
    display: none !important; /* Hide these buttons completely */
}

/* Ensure ONLY the unified details modal has the styled close button */
#unified-details-modal .close-btn,
#unified-details-modal .modal-footer .close-btn,
#unified-details-modal .footer-buttons .close-btn {
    background-color: #6c757d !important;
    color: white !important;
    display: inline-block !important;
    visibility: visible !important;
}/* ============================================================================
   STORY DETAILS MODAL - BUTTON STYLE UPDATE
   Match Settings Modal Button Styling (6px border-radius, modern close button)
   
   ADD THIS TO THE END OF modal-COMPLETE-FIXED.css
   ============================================================================ */

/* ============================================
   CLOSE BUTTON (X) - MATCH SETTINGS MODAL
   ============================================ */

#unified-details-modal .close {
    position: absolute !important;
    right: 20px !important;
    top: 12px !important;
    width: 36px !important;
    height: 36px !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    font-size: 20px !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    border-radius: 8px !important;
    z-index: 100 !important;
    line-height: 1 !important;
    font-weight: 400 !important;
}

#unified-details-modal .close:hover,
#unified-details-modal .close:focus {
    color: #374151 !important;
    background: #e5e7eb !important;
    border-color: #d1d5db !important;
}

/* ============================================
   FOOTER ACTION BUTTONS - SQUARE STYLE
   Change from 20px (pill) to 6px (rounded rect)
   ============================================ */

#unified-details-modal #details-save-btn,
#unified-details-modal #details-delete-btn,
#unified-details-modal #details-close-btn {
    padding: 8px 20px !important;
    border-radius: 6px !important;
    font-family: "Lexend Deca", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    border: none !important;
}

/* Save button - keep existing green color */
#unified-details-modal #details-save-btn {
    background-color: #81b000 !important;
    color: white !important;
}

#unified-details-modal #details-save-btn:hover {
    background-color: #6a9300 !important;
}

/* Delete button - keep existing style */
#unified-details-modal #details-delete-btn {
    background-color: transparent !important;
    border: 1px solid #f44336 !important;
    color: #f44336 !important;
}

#unified-details-modal #details-delete-btn:hover {
    background-color: #f44336 !important;
    color: white !important;
}

/* Close button - match Settings modal style */
#unified-details-modal #details-close-btn {
    background-color: #1f2937 !important;
    color: white !important;
}

#unified-details-modal #details-close-btn:hover {
    background-color: #374151 !important;
}

/* ============================================
   OTHER BUTTONS - SQUARE STYLE
   ============================================ */

/* Generic details button */
#unified-details-modal .details-btn {
    border-radius: 6px !important;
}

/* Fullscreen button - make it square */
#unified-details-modal .story-fullscreen-btn {
    border-radius: 6px !important;
    padding: 6px 14px !important;
}

/* Any other buttons in the modal */
#unified-details-modal button:not(.details-tab-btn):not(.close) {
    border-radius: 6px !important;
}

/* ============================================================================
   END OF BUTTON STYLE UPDATE
   ============================================================================ */
/* ============================================================================
   EMERGENCY BUTTON FIX - ADD THIS TO YOUR CUSTOM CSS OR AT THE VERY END
   If buttons STILL look pill-shaped after using modal-COMPLETE-FIXED.css,
   add this as a separate stylesheet with higher priority
   ============================================================================ */

/* Use attribute selectors and body tag for ABSOLUTE maximum specificity */

html body #unified-details-modal button[id*="details-"],
html body #unified-details-modal button[class*="btn"]:not([class*="tab-btn"]),
html body #unified-details-modal .modal-footer button,
html body div#unified-details-modal div.modal-footer button {
    border-radius: 6px !important;
    -webkit-border-radius: 6px !important;
    -moz-border-radius: 6px !important;
}

/* Target specific buttons by ID with maximum specificity */
html body div#unified-details-modal div.modal-footer button#details-save-btn,
html body div#unified-details-modal button#details-save-btn {
    border-radius: 6px !important;
    background-color: #81b000 !important;
    color: white !important;
    padding: 8px 20px !important;
}

html body div#unified-details-modal div.modal-footer button#details-delete-btn,
html body div#unified-details-modal button#details-delete-btn {
    border-radius: 6px !important;
    background-color: transparent !important;
    border: 1px solid #f44336 !important;
    color: #f44336 !important;
    padding: 8px 20px !important;
}

html body div#unified-details-modal div.modal-footer button#details-close-btn,
html body div#unified-details-modal button#details-close-btn {
    border-radius: 6px !important;
    background-color: #1f2937 !important;
    color: white !important;
    padding: 8px 20px !important;
}

/* Close X button - Elegant square box */
html body div#unified-details-modal span.close,
html body div#unified-details-modal .modal-header .close,
html body #unified-details-modal > div.modal-content > div.modal-header > span.close {
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    right: 20px !important;
    top: 12px !important;
    border-radius: 8px !important;
    padding: 0 !important;
}

/* Fullscreen button */
html body div#unified-details-modal button.story-fullscreen-btn {
    border-radius: 6px !important;
}

/* If you see "Send Invitation", "Send Interview", "Send Review" buttons */
html body #unified-details-modal button,
html body #unified-details-modal input[type="button"],
html body #unified-details-modal input[type="submit"] {
    border-radius: 6px !important;
}

/* ============================================================================
   USAGE: If modal-COMPLETE-FIXED.css doesn't change the buttons:
   
   1. Add this file as a SEPARATE stylesheet AFTER modal.css
   2. OR copy this content to the END of modal-COMPLETE-FIXED.css
   3. OR add via WordPress > Appearance > Customize > Additional CSS
   ============================================================================ */

/* ============================================================================
   MAXIMUM SPECIFICITY TAB OVERRIDE
   Nuclear option to ensure tabs match between modals
   ============================================================================ */

/* ============================================
   STORY DETAILS MODAL TABS - NUCLEAR OVERRIDE
   ============================================ */

/* Tab container - maximum specificity */
html body div#unified-details-modal div.modal-header div.details-tabs,
html body #unified-details-modal .modal-header .details-tabs,
body #unified-details-modal .details-tabs,
#unified-details-modal > .modal-content > .modal-header > .details-tabs {
    display: flex !important;
    gap: 0 !important;
    width: 100% !important;
    border-bottom: 2px solid #e5e7eb !important;
    margin: 0 -20px !important;
    padding: 0 40px !important;
    flex-shrink: 0 !important;
    min-height: 45px !important;
    background: white !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Tab buttons - remove ALL existing styles and apply new ones */
html body div#unified-details-modal div.details-tabs button.details-tab-btn,
html body #unified-details-modal .details-tabs .details-tab-btn,
body #unified-details-modal button.details-tab-btn,
#unified-details-modal .modal-header .details-tabs button {
    /* Reset everything */
    padding: 10px 24px !important;
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    margin-right: 0 !important;
    bottom: 0 !important;
    position: relative !important;
    
    /* Typography */
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    
    /* Behavior */
    cursor: pointer !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Hover state */
html body #unified-details-modal .details-tab-btn:hover,
html body #unified-details-modal button.details-tab-btn:hover {
    color: #374151 !important;
    background: transparent !important;
}

/* Active tab - base styles */
html body div#unified-details-modal button.details-tab-btn.active,
html body #unified-details-modal .details-tabs .details-tab-btn.active,
body #unified-details-modal button.details-tab-btn.active {
    color: #111827 !important;
    font-weight: 500 !important;
    background: transparent !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

/* Individual tab colors - BOTTOM BORDER */
html body #unified-details-modal button.details-tab-btn[data-tab="outline-tab"].active,
html body #unified-details-modal .details-tab-btn[data-tab="outline-tab"].active {
    border-bottom-color: #80DABC !important;
}

html body #unified-details-modal button.details-tab-btn[data-tab="story-tab"].active,
html body #unified-details-modal .details-tab-btn[data-tab="story-tab"].active {
    border-bottom-color: #c0e600 !important;
}

html body #unified-details-modal button.details-tab-btn[data-tab="synopsis-tab"].active,
html body #unified-details-modal .details-tab-btn[data-tab="synopsis-tab"].active {
    border-bottom-color: #FFEF00 !important;
}

html body #unified-details-modal button.details-tab-btn[data-tab="transcript-tab"].active,
html body #unified-details-modal .details-tab-btn[data-tab="transcript-tab"].active {
    border-bottom-color: #8b8680 !important;
}

html body #unified-details-modal button.details-tab-btn[data-tab="audio-tab"].active,
html body #unified-details-modal .details-tab-btn[data-tab="audio-tab"].active {
    border-bottom-color: #2196F3 !important;
}

html body #unified-details-modal button.details-tab-btn[data-tab="images-tab"].active,
html body #unified-details-modal .details-tab-btn[data-tab="images-tab"].active {
    border-bottom-color: #FF9800 !important;
}

html body #unified-details-modal button.details-tab-btn[data-tab="languages-tab"].active,
html body #unified-details-modal .details-tab-btn[data-tab="languages-tab"].active {
    border-bottom-color: #B41D82 !important;
}

html body #unified-details-modal button.details-tab-btn[data-tab="publish-tab"].active,
html body #unified-details-modal .details-tab-btn[data-tab="publish-tab"].active {
    border-bottom-color: #9C27B0 !important;
}

/* ============================================================================
   END OF TAB OVERRIDE
   ============================================================================ */
/* ============================================================================
   STORY DETAILS MODAL - FULLSCREEN LAYOUT WITH FIXED FOOTER
   Match Settings Modal: Full viewport, fixed footer at bottom
   ============================================================================ */

/* ============================================
   FULLSCREEN MODAL CONTAINER
   ============================================ */

/* Make the modal overlay fullscreen */
#unified-details-modal {
    display: none !important;
    position: fixed !important;
    z-index: 999999 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: auto !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* When modal is shown */
#unified-details-modal.show,
#unified-details-modal[style*="display: block"] {
    display: block !important;
}

/* Modal content - FULLSCREEN */
#unified-details-modal .modal-content {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    background: white !important;
}
/* ============================================
   MODAL HEADER - FIXED AT TOP
   ============================================ */

/* CRITICAL FIX: Add :not(#settings-modal *) to prevent affecting nested Settings Modal */
#unified-details-modal .modal-header:not(#settings-modal .modal-header):not(#settings-modal *) {
    background: white !important;
    border-bottom: 2px solid #e5e7eb !important;
    padding: 20px 40px 0 40px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Title - exclude Settings Modal elements */
#unified-details-modal .modal-header:not(#settings-modal *) h2 {
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #333 !important;
    margin: 0 0 15px 0 !important;
    padding-right: 50px !important; /* Space for close button */
}

/* Close button - match Settings modal - exclude Settings Modal */
#unified-details-modal .close:not(#settings-modal .close):not(#settings-modal *) {
    position: absolute !important;
    right: 20px !important;
    top: 12px !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    font-size: 20px !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    border-radius: 8px !important;
    z-index: 100 !important;
    line-height: 1 !important;
    font-weight: 400 !important;
}

#unified-details-modal .close:not(#settings-modal *):hover {
    color: #374151 !important;
    background: #e5e7eb !important;
    border-color: #d1d5db !important;
}

/* Tab container - exclude Settings Modal */
#unified-details-modal .details-tabs:not(#settings-modal *) {
    margin: 0 -40px 0 -40px !important;
    padding: 0 40px !important;
    border-bottom: 2px solid #e5e7eb !important;
}

/* ============================================
   MODAL BODY - SCROLLABLE CONTENT AREA
   ============================================ */

/* Exclude Settings Modal from body styles */
#unified-details-modal .modal-body:not(#settings-modal .modal-body):not(#settings-modal *) {
    flex: 1 !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    background: white !important;
    position: relative !important;
    padding-bottom: 80px !important; /* Space for fixed footer */
    padding-top: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Tab content containers - exclude Settings Modal */
#unified-details-modal .tab-content-wrapper:not(#settings-modal *),
#unified-details-modal .details-tab-content-container:not(#settings-modal *) {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
}

#unified-details-modal .modal-body:not(#settings-modal .modal-body):not(#settings-modal *) {
    flex: 1 !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    background: white !important;
    position: relative !important;
    padding-bottom: 20px !important; /* CHANGED: was 80px */
    padding-top: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Scrollbar styling - exclude Settings Modal */
#unified-details-modal .details-tab-content:not(#settings-modal *)::-webkit-scrollbar {
    width: 8px !important;
}

#unified-details-modal .details-tab-content:not(#settings-modal *)::-webkit-scrollbar-track {
    background: #f5f5f5 !important;
}

#unified-details-modal .details-tab-content:not(#settings-modal *)::-webkit-scrollbar-thumb {
    background: #ccc !important;
    border-radius: 4px !important;
}

#unified-details-modal .details-tab-content:not(#settings-modal *)::-webkit-scrollbar-thumb:hover {
    background: #999 !important;
}

/* ============================================
   MODAL FOOTER - FIXED AT BOTTOM
   ============================================ */

/* Exclude Settings Modal from footer styles */
#unified-details-modal .modal-footer:not(#settings-modal .modal-footer):not(#settings-modal *) {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #f9fafb !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 12px 40px !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 20 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
    flex-shrink: 0 !important;
    min-height: 65px !important;
    box-sizing: border-box !important;
}

/* Footer content - exclude Settings Modal */
#unified-details-modal .modal-footer-content:not(#settings-modal *) {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* Save status on left - exclude Settings Modal */
#unified-details-modal #details-save-status:not(#settings-modal *),
#unified-details-modal .save-status:not(#settings-modal *) {
    position: relative !important;
    margin-right: auto !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 12px !important;
}

/* Buttons on right - exclude Settings Modal */
#unified-details-modal .footer-buttons:not(#settings-modal *) {
    display: flex !important;
    gap: 10px !important;
    margin-left: auto !important;
}

/* ============================================
   STORY TAB SPECIFIC - FILL HEIGHT
   ============================================ */

/* Story tab fills available space */
#unified-details-modal #story-tab {
    padding: 0 !important;
    overflow: hidden !important;
    height: 100% !important;
}

#unified-details-modal #story-tab.active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Story container fills space */
#unified-details-modal .story-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    padding: 20px 40px !important;
    overflow: hidden !important;
}

/* Editor container gets all remaining space */
#unified-details-modal #story-editor-container {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* PPEditor fills the container completely */
#unified-details-modal #story-editor-container .pp-editor-container {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
}

#unified-details-modal #story-editor-container .pp-editor-content {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* TinyMCE fills the container */
#unified-details-modal .tox-tinymce {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

#unified-details-modal .tox-editor-container {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

#unified-details-modal .tox-edit-area {
    flex: 1 !important;
    overflow: hidden !important;
}

/* ============================================
   OTHER TABS - SCROLLABLE CONTENT
   ============================================ */

/* All other tabs have scrollable content */
#unified-details-modal .details-tab-content:not(#story-tab) {
    padding: 20px 40px !important;
    overflow-y: auto !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* ============================================
   REMOVE FULLSCREEN BUTTON (not needed anymore)
   ============================================ */

#unified-details-modal .story-fullscreen-btn {
    display: none !important;
}

/* ============================================================================
   SUMMARY:
   
   Story Details Modal now matches Settings Modal:
   - Fullscreen layout (100vw × 100vh)
   - Fixed footer at bottom
   - Scrollable content area
   - Maximum editing space for TinyMCE
   
   Benefits:
   - Editor can be 800-1000px tall (vs 300-400px before)
   - Fixed footer always visible
   - Clean, professional layout
   - Matches Settings modal UX
   ============================================================================ */
   
   /**
 * GOOGLE DOCS BADGE IMPLEMENTATION - Option D
 * Replaces the button row with a compact status badge and dropdown menu
 */

/* ============================================================================
   CSS - Add to modal.css or your Story Details Modal CSS
   ============================================================================ */

/* Google Docs Badge - positioned next to title */
#unified-details-modal .google-docs-badge {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

#unified-details-modal .google-badge-btn {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 20px;
    padding: 0 26px;
    font-size: 13px;
    font-family: 'Lexend Deca', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

#unified-details-modal .google-badge-btn:hover {
    background: #f8f9fa;
    border-color: #4285f4;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.15);
}

/* Badge icon */
#unified-details-modal .google-badge-icon {
    font-size: 16px;
    line-height: 1;
}

/* Status indicator dot */
#unified-details-modal .google-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Status colors */
#unified-details-modal .google-badge-btn.status-synced .google-status-dot {
    background: #34a853; /* Green */
}

#unified-details-modal .google-badge-btn.status-needs-update .google-status-dot {
    background: #fbbc04; /* Yellow */
}

#unified-details-modal .google-badge-btn.status-syncing .google-status-dot {
    background: #4285f4; /* Blue */
    animation: pulse 1.5s ease-in-out infinite;
}

#unified-details-modal .google-badge-btn.status-error .google-status-dot {
    background: #ea4335; /* Red */
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Dropdown menu */
#unified-details-modal .google-badge-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 200px;
    z-index: 2147483647 !important; /* Maximum possible z-index */
    display: none;
    overflow: hidden;
}

#unified-details-modal .google-badge-menu.active {
    display: block;
}

/* Menu header */
#unified-details-modal .google-menu-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
}

#unified-details-modal .google-menu-title {
    font-size: 12px;
    font-weight: 600;
    color: #5f6368;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Lexend Deca', sans-serif;
}

/* Status line */
#unified-details-modal .google-menu-status {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #5f6368;
    font-family: 'Lexend Deca', sans-serif;
}

#unified-details-modal .google-menu-status .status-icon {
    font-size: 16px;
}

/* Menu items */
#unified-details-modal .google-menu-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Lexend Deca', sans-serif;
    color: #333;
    transition: background 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

#unified-details-modal .google-menu-item:hover {
    background: #f1f3f4;
}

#unified-details-modal .google-menu-item .item-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* Adjust title container to make room for badge */
#unified-details-modal .title-container {
    position: relative;
}

#unified-details-modal #story-title-input {
    padding-right: 115px !important; /* Make room for counter and badge */
}

/* Close menu when clicking outside */
#unified-details-modal .google-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483646 !important; /* Just below menu */
    display: none;
}

#unified-details-modal .google-menu-backdrop.active {
    display: block;
}
/* ============================================================================
   GOOGLE DOCS BADGE - Complete CSS
   Add this to the END of your modal.css file
   ============================================================================ */

/* Google Docs Badge - Main Container */
#unified-details-modal .google-docs-badge {
    position: absolute !important;
    right: 10px !important; /* Far right */
    top: calc(50% + 2px) !important;
    transform: translateY(-50%) !important;
    z-index: 999999 !important;
}

/* Badge Button - Pill-shaped with icon, text, and arrow */
#unified-details-modal .google-badge-btn {
    height: 28px !important;
    padding: 0px 26px !important;
    border: 1px solid #DADCE0 !important;
    background: white !important;
    cursor: pointer !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    font-family: 'Lexend Deca', sans-serif !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    position: relative !important;
}

#unified-details-modal .google-badge-btn:hover {
    background: #F8F9FA !important;
    border-color: #C6C6C6 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* Google Docs Logo Icon */
#unified-details-modal .google-docs-logo {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
}

#unified-details-modal .google-docs-logo path {
    display: block !important;
}

/* "Docs" Text Label */
#unified-details-modal .google-badge-text {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #202124 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Dropdown Arrow Icon */
#unified-details-modal .dropdown-arrow {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    flex-shrink: 0 !important;
    color: #5F6368 !important;
}

/* Status Indicator Dot - Positioned on Top Right Corner */
#unified-details-modal .google-status-dot {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    border: 2px solid white !important;
    background: #9AA0A6 !important;
    z-index: 1 !important;
}

/* Status Colors */
#unified-details-modal .google-badge-btn.status-synced .google-status-dot {
    background: #34A853 !important; /* Green */
}

#unified-details-modal .google-badge-btn.status-needs-update .google-status-dot {
    background: #FBBC04 !important; /* Yellow */
}

#unified-details-modal .google-badge-btn.status-syncing .google-status-dot {
    background: #4285F4 !important; /* Blue */
    animation: pulse 1.5s ease-in-out infinite !important;
}

#unified-details-modal .google-badge-btn.status-error .google-status-dot {
    background: #EA4335 !important; /* Red */
}

#unified-details-modal .google-badge-btn.status-connected .google-status-dot {
    background: #34A853 !important; /* Green */
}

#unified-details-modal .google-badge-btn.status-disconnected .google-status-dot {
    background: #EA4335 !important; /* Red */
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Dropdown Menu */
#unified-details-modal .google-badge-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: 260px !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 2147483647 !important; /* Maximum z-index */
    overflow: hidden !important;
}

#unified-details-modal .google-badge-menu.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Menu Header */
#unified-details-modal .google-menu-header {
    padding: 12px 16px !important;
    border-bottom: 1px solid #E8EAED !important;
}

#unified-details-modal .google-menu-title {
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #202124 !important;
}

/* Connection Status Section */
#unified-details-modal .google-connection-status {
    padding: 12px 16px !important;
    background: #F8F9FA !important;
}

#unified-details-modal .connection-indicator {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 12px !important;
    color: #5F6368 !important;
}

#unified-details-modal .connection-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #9AA0A6 !important;
    flex-shrink: 0 !important;
}

#unified-details-modal .connection-dot.connected {
    background: #34A853 !important; /* Green */
}

#unified-details-modal .connection-dot.disconnected {
    background: #EA4335 !important; /* Red */
}

#unified-details-modal .google-connect-btn,
#unified-details-modal .google-disconnect-btn {
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid #DADCE0 !important;
    background: white !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #202124 !important;
    transition: all 0.15s ease !important;
}

#unified-details-modal .google-connect-btn:hover,
#unified-details-modal .google-disconnect-btn:hover {
    background: #F8F9FA !important;
    border-color: #C6C6C6 !important;
}

#unified-details-modal .google-disconnect-btn {
    color: #EA4335 !important;
}

#unified-details-modal .google-menu-divider {
    height: 1px !important;
    background: #E8EAED !important;
    margin: 8px 0 !important;
}

#unified-details-modal .google-menu-section-header {
    padding: 8px 16px 4px !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #5F6368 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Status Section */
#unified-details-modal .google-menu-status {
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #F8F9FA !important;
    border-bottom: 1px solid #E8EAED !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 12px !important;
    color: #5F6368 !important;
}

#unified-details-modal .google-menu-status .status-icon {
    font-size: 14px !important;
}

/* Menu Items */
#unified-details-modal .google-menu-item {
    width: 100% !important;
    padding: 10px 16px !important;
    border: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    color: #202124 !important;
    transition: background 0.15s ease !important;
    text-align: left !important;
}

#unified-details-modal .google-menu-item:hover {
    background: #F8F9FA !important;
}

#unified-details-modal .google-menu-item:first-of-type {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

#unified-details-modal .google-menu-item:last-of-type {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

#unified-details-modal .google-menu-item .item-icon {
    font-size: 16px !important;
    width: 16px !important;
    text-align: center !important;
}

/* Backdrop */
#unified-details-modal .google-menu-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 2147483646 !important; /* Just below menu */
    transition: all 0.2s ease !important;
}

#unified-details-modal .google-menu-backdrop.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure Title Container Allows Absolute Positioning */
#unified-details-modal .title-container {
    position: relative !important;
}

/**
 * MINIMAL Outline Styles - ONLY AVATAR
 * No display text, no duplicates
 * 
 * VERSION: 2.5.0 - CENTERING FIX
 */

/* Remove tab padding */
#outline-tab.details-tab-content {
    padding: 0 !important;
}

/* Minimal container */
.outline-minimal {
    padding: 10px 15px;
}

/* ONLY YOUR AVATAR - Centered, compact - HIGH SPECIFICITY FIX v1.7.0 */
#unified-details-modal #outline-tab .avatar-section-minimal,
#unified-details-modal .outline-minimal .avatar-section-minimal,
#unified-details-modal .outline-real-content .avatar-section-minimal,
.avatar-section-minimal {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: center !important;
}

/* Avatar placeholder - HIGH SPECIFICITY FIX v1.7.0 */
#unified-details-modal #outline-tab .avatar-placeholder,
#unified-details-modal .outline-minimal .avatar-placeholder,
#unified-details-modal .avatar-section-minimal .avatar-placeholder,
#outline-avatar-placeholder,
.avatar-placeholder {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50%;
    background-color: #f0f0f0;
    overflow: hidden;
    position: relative;
    margin: 0 auto !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* Ensure ACF images display properly */
.avatar-placeholder img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Form */
.outline-form-minimal {
    margin: 0;
    padding: 0;
}

/* Two column grid */
.outline-grid-minimal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

@media (max-width: 1024px) {
    .outline-grid-minimal {
        grid-template-columns: 1fr;
    }
}

/* Section titles */
.section-title {
    margin: 0 0 10px 0;
    padding: 0 0 6px 0;
    border-bottom: 1px solid #e0e0e0;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Field groups */
.field-group {
    margin-bottom: 12px;
}

.field-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-bottom: 5px;
    font-family: 'Lexend Deca', sans-serif;
}

.field-group input[type="text"],
.field-group input[type="email"],
.field-group textarea {
    width: 100%;
    height: 42px;              /* Explicit height for consistency */
    padding: 10px 14px;        /* Increased left/right padding for better text inset */
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Lexend Deca', sans-serif;
    box-sizing: border-box;    /* Ensure padding is included in height */
    transition: border-color 0.2s;
}

/* Textarea should not have fixed height */
.field-group textarea {
    height: auto;
}

.field-group input:focus,
.field-group textarea:focus {
    outline: none;
    border-color: #667eea;
}

.field-group textarea {
    resize: vertical;
    line-height: 1.4;
}

/* Horizontal field rows */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 8px;
    align-items: end;
}

/* When one column has an action button, give it more space */
.field-row:has(.field-with-action) {
    grid-template-columns: 1fr 1.5fr;
}

.field-half {
    position: relative;
}

.field-half label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    margin-bottom: 4px;
    font-family: 'Lexend Deca', sans-serif;
}

.field-half input {
    width: 100%;
    height: 42px;              /* Match .field-group input height */
    padding: 10px 14px;        /* Match .field-group input padding */
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Lexend Deca', sans-serif;
    box-sizing: border-box;    /* Ensure padding is included in height */
}

.field-half input:focus {
    outline: none;
    border-color: #667eea;
}

/* Asset Type Dropdown - Specific styling only for this element */
#outline-asset-type {
    width: 100%;
    padding: 10px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Lexend Deca', sans-serif;
    transition: border-color 0.2s;
    background-color: white;
    cursor: pointer;
    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='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 35px;
}

#outline-asset-type:hover {
    border-color: #999;
}

#outline-asset-type:focus {
    outline: none;
    border-color: #667eea;
}

/* Workflow Override Select - Styled to match asset dropdown */
#outline-workflow-override,
.story-workflow-select {
    width: 100%;
    padding: 10px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Lexend Deca', sans-serif;
    transition: border-color 0.2s;
    background-color: white;
    cursor: pointer;
    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='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 35px;
}

#outline-workflow-override:hover,
.story-workflow-select:hover {
    border-color: #999;
}

#outline-workflow-override:focus,
.story-workflow-select:focus {
    outline: none;
    border-color: #667eea;
}

/* Character counters */
.counter {
    font-size: 11px;
    color: #aaa;
    margin-left: 5px;
    font-weight: normal;
}

.counter-micro {
    position: absolute;
    right: 3px;
    bottom: -14px;
    font-size: 10px;
    color: #bbb;
}

/* Contact cards */
.contact-card {
    padding: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    margin-bottom: 8px;
}

/* Inline email field with button */
.input-with-button {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.input-with-button input[type="email"],
.input-with-button input[type="text"] {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Lexend Deca', sans-serif;
    box-sizing: border-box;
}

.input-with-button input:focus {
    outline: none;
    border-color: #667eea;
}

.input-with-button .btn-sm {
    flex-shrink: 0;
    height: 32px;
    padding: 0 10px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.field-with-action {
    flex: 1.5;
}

/* Input with counter inside */
.input-with-counter {
    position: relative;
    flex: 1;
    min-width: 0;
}

.input-with-counter input {
    width: 100%;
    height: 42px;
    padding: 10px 50px 10px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Lexend Deca', sans-serif;
    box-sizing: border-box;
}

.input-with-counter input:focus {
    outline: none;
    border-color: #667eea;
}

.counter-inside {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #9ca3af;
    font-family: 'Lexend Deca', sans-serif;
    pointer-events: none;
}

/* Ensure counter works inside input-with-button */
.input-with-button .input-with-counter {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-button .input-with-counter input {
    padding-right: 50px !important;
}

.input-with-button .counter-inside {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #9ca3af;
}

.contact-header {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-family: 'Lexend Deca', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-header-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    background: linear-gradient(135deg, #80DABC, #5fcca6);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-header-badge.qa-badge {
    background: linear-gradient(135deg, #818cf8, #6366f1);
}

/* ============================================
   UNIFIED COLLAPSIBLE CONTACT CARDS
   ============================================ */

.contact-card-collapsible {
    transition: all 0.2s ease;
}

.contact-card-collapsible .contact-header-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    margin: -8px;
    margin-bottom: 0;
    border-radius: 4px;
    transition: background 0.15s ease;
    min-height: 36px;
}

.contact-card-collapsible.collapsed .contact-header-toggle {
    margin-bottom: -8px;
}

.contact-card-collapsible .contact-header-toggle:hover {
    background: rgba(0, 0, 0, 0.03);
}

.contact-card-collapsible .contact-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100px;
    min-width: 100px;
    flex-shrink: 0;
}

.contact-card-collapsible .contact-role-title {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Chevron styling - right-pointing when collapsed, down when open */
.contact-card-collapsible .collapse-chevron {
    transition: transform 0.2s ease;
    color: #9ca3af;
    flex-shrink: 0;
    transform: rotate(90deg);
}

.contact-card-collapsible.collapsed .collapse-chevron {
    transform: rotate(0deg);
}

.contact-card-collapsible .contact-header-toggle:hover .collapse-chevron {
    color: #6b7280;
}

/* Summary row - visible when collapsed, shows name and email in aligned columns */
.contact-header-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    color: #6b7280;
    flex: 1;
    min-width: 0;
    margin-left: 20px;
}

.contact-header-summary .summary-name {
    color: #374151;
    font-weight: 500;
    width: 140px;
    min-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.contact-header-summary .summary-email {
    color: #9ca3af;
    font-size: 11px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

/* LinkedIn badge - small square icon */
.contact-header-summary .linkedin-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* Summary Send button - visible in collapsed state */
.contact-header-summary .summary-send-btn {
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    font-family: 'Lexend Deca', sans-serif;
    color: white;
    background: #80DABC;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
    margin-left: 8px;
}

.contact-header-summary .summary-send-btn:hover {
    background: #5fcca6;
}

.contact-header-summary .summary-send-btn:active {
    background: #4dc299;
}

/* Sent state for summary send button - darker teal, still clickable */
.contact-header-summary .summary-send-btn.sent {
    background: #5fcca6;
}

.contact-header-summary .summary-send-btn.sent:hover {
    background: #4dc299;
}

/* Sending state for summary send button */
.contact-header-summary .summary-send-btn.sending {
    background: #9ca3af;
    cursor: wait;
}

/* Hide send button when card is open */
.contact-card-collapsible:not(.collapsed) .summary-send-btn {
    opacity: 0;
    pointer-events: none;
}

/* Legacy linkedin-status class support */
.contact-header-summary .linkedin-status {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #0a66c2;
    background: #e8f4fd;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Content area with smooth expand/collapse */
.contact-card-collapsible .contact-content {
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.2s ease;
    max-height: 500px;
    opacity: 1;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.contact-card-collapsible.collapsed .contact-content {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    border-top: none;
}

/* When collapsed, show summary; when open, hide summary */
.contact-card-collapsible:not(.collapsed) .contact-header-summary {
    opacity: 0.4;
}

/* Status badges in summary */
.contact-header-summary .summary-status {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
}

.contact-header-summary .summary-status.status-pending {
    background: #fef3c7;
    color: #d97706;
}

.contact-header-summary .summary-status.status-sent {
    background: #dbeafe;
    color: #2563eb;
}

.contact-header-summary .summary-status.status-complete {
    background: #d1fae5;
    color: #059669;
}

.review-status {
    margin-top: 4px;
    min-height: 18px;
}

/* Button rows */
.btn-row {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.btn-sm {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Lexend Deca', sans-serif;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.btn-sm:active {
    transform: translateY(0);
}

.btn-sm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Button colors */
.btn-purple {
    background: #8b5cf6;
    color: white;
}
.btn-purple:hover { background: #7c3aed; }

.btn-blue {
    background: #3b82f6;
    color: white;
}
.btn-blue:hover { background: #2563eb; }

.btn-green {
    background: #10b981;
    color: white;
}
.btn-green:hover { background: #059669; }

/* Status text */
.status-text {
    font-size: 10px;
    color: #10b981;
    font-family: 'Lexend Deca', sans-serif;
}

.status-text:empty {
    display: none;
}

/* Checkbox */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 11px;
    color: #555;
    font-family: 'Lexend Deca', sans-serif;
}

.checkbox-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* Google Doc link */
.doc-link {
    display: inline-block;
    padding: 5px 10px;
    background: #1a73e8;
    color: white;
    text-decoration: none;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    transition: background 0.2s;
}

.doc-link:hover {
    background: #1557b0;
}

.doc-time {
    font-size: 10px;
    color: #999;
    margin-left: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .outline-minimal {
        padding: 8px 12px;
    }
    
    .avatar-section-minimal {
        margin-bottom: 12px;
    }
    
    .avatar-placeholder {
        width: 60px !important;
        height: 60px !important;
    }
    
    .outline-grid-minimal {
        gap: 15px;
    }
    
    .field-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .contact-card {
        padding: 8px;
        margin-bottom: 8px;
    }
    
    .btn-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .btn-sm {
        width: 100%;
    }
}

/* Focus states */
input:focus,
textarea:focus {
    outline: none;
    border-color: #667eea !important;
}

/* Placeholders */
input::placeholder,
textarea::placeholder {
    color: #aaa;
    font-style: italic;
}


/* The dark overlay background */
.brand-more-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.6) !important;  /* Dark semi-transparent background */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000005 !important;
    animation: fadeIn 0.2s ease-out;
}

/* The white modal box */
.brand-more-modal {
    background: white !important;
    border-radius: 12px !important;
    width: 90% !important;
    max-width: 1200px !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Modal header */
.brand-more-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid #e5e7eb;
    background: white;
}

.brand-more-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Lexend Deca', sans-serif;
    color: #111827;
}

/* Close button */
.brand-more-close {
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
}

.brand-more-close:hover {
    background: #f3f4f6;
    color: #374151;
}

/* Score summary section */
.brand-more-scores {
    display: flex;
    gap: 16px;
    padding: 20px 28px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.brand-more-score-item {
    flex: 1;
    text-align: center;
}

.brand-more-score-item .score-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 6px;
    font-family: 'Lexend Deca', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.brand-more-score-item .score-value {
    display: block;
    font-size: 28px;
    font-weight: 600;
    font-family: 'Lexend Deca', sans-serif;
}

/* Footer */
.brand-more-footer {
    display: flex;
    justify-content: flex-end;
    padding: 20px 28px;
    border-top: 1px solid #e5e7eb;
    background: white;
}

.brand-more-btn-close {
    padding: 10px 24px;
    background: #2c3e50;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Lexend Deca', sans-serif;
}

.brand-more-btn-close:hover {
    background: #34495e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3);
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.brand-more-tabs {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    padding: 0 28px;
    background: white;
}

.brand-more-tab {
    padding: 16px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Lexend Deca', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.brand-more-tab:hover {
    color: #374151;
    background: #f9fafb;
}

.brand-more-tab.active {
    color: #9C27B0;
    border-bottom-color: #9C27B0;
}

.brand-more-content {
    padding: 28px;
    overflow-y: auto;
    flex: 1;
}

.brand-more-tab-content {
    display: none;
}

.brand-more-tab-content.active {
    display: block;
}

.brand-more-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.brand-more-list li {
    padding: 14px 18px;
    margin-bottom: 10px;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
    position: relative;
    padding-left: 46px;
}

.brand-more-list li::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.brand-more-list-good li {
    border-left: 3px solid #10b981;
    background: #f0fdf4;
}

.brand-more-list-good li::before {
    background: #10b981;
}

.brand-more-list-issues li {
    border-left: 3px solid #ef4444;
    background: #fef2f2;
}

.brand-more-list-issues li::before {
    background: #ef4444;
}

.brand-more-list-suggestions li {
    border-left: 3px solid #3b82f6;
    background: #eff6ff;
}

.brand-more-list-suggestions li::before {
    background: #3b82f6;
}

.brand-more-empty {
    padding: 40px 20px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
    background: #f9fafb;
    border-radius: 8px;
}

.brand-more-footer {
    display: flex;
    justify-content: flex-end;
    padding: 20px 28px;
    border-top: 1px solid #e5e7eb;
}

.brand-more-btn-close {
    padding: 10px 24px;
    background: #2c3e50;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Lexend Deca', sans-serif;
}

.brand-more-btn-close:hover {
    background: #34495e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3);
}

.brand-details-btn-close:hover {
    background: #34495e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3);
}

/* Score error state */
.brand-score-badge.score-error {
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
}

/* Needs rescoring indicator */
.llm-tab-btn.needs-rescore::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background: #f59e0b;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Score age indicator */
.score-age {
    font-size: 10px;
    color: #9ca3af;
    margin-left: 4px;
}

/**
 * Beautiful Mini Confirmation Modal Styles
 * Modern, subtle, and smooth - MATCHES UNIFIED MODAL STYLE
 */

/* Score Confirmation Mini Modal */
.score-confirm-mini-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000010;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.score-confirm-mini-modal.active {
    opacity: 1;
}

.score-confirm-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}

.score-confirm-dialog {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.2s ease;
    font-family: 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.score-confirm-mini-modal.active .score-confirm-dialog {
    transform: scale(1);
}

.score-confirm-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);
}

.score-confirm-icon svg {
    color: white;
    width: 24px;
    height: 24px;
}

.score-confirm-content {
    text-align: center;
    margin-bottom: 20px;
}

.score-confirm-content h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.score-confirm-content p {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.score-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.score-confirm-actions button {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Lexend Deca', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

.score-confirm-cancel {
    background: #f5f5f5;
    color: #666;
}

.score-confirm-cancel:hover {
    background: #e8e8e8;
    transform: translateY(-1px);
}

.score-confirm-ok {
    background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
}

.score-confirm-ok:hover {
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.4);
    transform: translateY(-1px);
}

.score-confirm-ok:active,
.score-confirm-cancel:active {
    transform: translateY(0);
}


/* =================================================================
   IMPROVED BRAND SCORE "MORE" MODAL
   Larger, centered, better close button, ESC + click outside
   MATCHES UNIFIED MODAL STYLE (white header, no gradients)
   ================================================================= */

/* Brand More Modal - IMPROVED */
.brand-more-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000005 !important;
    animation: fadeIn 0.2s ease-out;
    padding: 20px;
}

.brand-more-modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 720px; /* LARGER: was probably 600px before */
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: slideUpModal 0.2s ease-out;
    font-family: 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Header - WHITE with gray border, NO GRADIENT (matches unified modal) */
.brand-more-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: white; /* CLEAN WHITE - no gradient */
}

.brand-more-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

/* MUCH LARGER Close Button - matches unified modal style */
.brand-more-close {
    width: 40px; /* LARGER: was 32px */
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 28px; /* LARGER X */
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300;
    border-radius: 6px;
}

.brand-more-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.brand-more-close:active {
    transform: scale(0.95);
}

/* Category Scores Summary */
.brand-more-scores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 20px 24px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.brand-more-score-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.brand-more-score-item .score-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    text-align: center;
}

.brand-more-score-item .score-value {
    font-size: 24px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 8px;
}

/* Tabs */
.brand-more-tabs {
    display: flex;
    gap: 8px;
    padding: 16px 24px 0 24px;
    border-bottom: 2px solid #e5e7eb;
    background: white;
}

.brand-more-tab {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Lexend Deca', sans-serif;
    margin-bottom: -2px;
}

.brand-more-tab:hover {
    color: #374151;
    background: #f9fafb;
    border-radius: 8px 8px 0 0;
}

.brand-more-tab.active {
    color: #9C27B0;
    border-bottom-color: #9C27B0;
    background: white;
}

/* Content Area */
.brand-more-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    min-height: 300px;
}

.brand-more-tab-content {
    display: none;
}

.brand-more-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

/* Lists */
.brand-more-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.brand-more-list li {
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: #f9fafb;
    border-left: 4px solid #e5e7eb;
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
    transition: all 0.2s ease;
}

.brand-more-list li:hover {
    background: #f3f4f6;
    border-left-color: #9C27B0;
    transform: translateX(4px);
}

.brand-more-list-good li {
    border-left-color: #10b981;
    background: #ecfdf5;
}

.brand-more-list-good li:hover {
    background: #d1fae5;
}

.brand-more-list-issues li {
    border-left-color: #ef4444;
    background: #fef2f2;
}

.brand-more-list-issues li:hover {
    background: #fee2e2;
}

.brand-more-list-suggestions li {
    border-left-color: #3b82f6;
    background: #eff6ff;
}

.brand-more-list-suggestions li:hover {
    background: #dbeafe;
}

/* Empty State */
.brand-more-empty {
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
    padding: 40px 20px;
    font-style: italic;
}

/* Footer */
.brand-more-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    background: white; /* CLEAN WHITE - no gradient */
}
/* =================================================================
   IMPROVED BRAND SCORE "MORE" MODAL
   Larger, centered, better close button, ESC + click outside
   MATCHES UNIFIED MODAL STYLE (white header, no gradients)
   ================================================================= */

/* Brand More Modal - IMPROVED */
.brand-more-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000005 !important;
    animation: fadeIn 0.2s ease-out;
    padding: 20px;
}

.brand-more-modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 720px; /* LARGER: was probably 600px before */
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: slideUpModal 0.2s ease-out;
    font-family: 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Header - WHITE with gray border, NO GRADIENT (matches unified modal) */
.brand-more-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: white; /* CLEAN WHITE - no gradient */
}

.brand-more-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

/* MUCH LARGER Close Button - matches unified modal style */
.brand-more-close {
    width: 40px; /* LARGER: was 32px */
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 28px; /* LARGER X */
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300;
    border-radius: 6px;
}

.brand-more-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.brand-more-close:active {
    transform: scale(0.95);
}

/* Category Scores Summary */
.brand-more-scores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 20px 24px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.brand-more-score-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.brand-more-score-item .score-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    text-align: center;
}

.brand-more-score-item .score-value {
    font-size: 24px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 8px;
}

/* Tabs */
.brand-more-tabs {
    display: flex;
    gap: 8px;
    padding: 16px 24px 0 24px;
    border-bottom: 2px solid #e5e7eb;
    background: white;
}

.brand-more-tab {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Lexend Deca', sans-serif;
    margin-bottom: -2px;
}

.brand-more-tab:hover {
    color: #374151;
    background: #f9fafb;
    border-radius: 8px 8px 0 0;
}

.brand-more-tab.active {
    color: #9C27B0;
    border-bottom-color: #9C27B0;
    background: white;
}

/* Content Area */
.brand-more-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    min-height: 300px;
}

.brand-more-tab-content {
    display: none;
}

.brand-more-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

/* Lists */
.brand-more-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.brand-more-list li {
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: #f9fafb;
    border-left: 4px solid #e5e7eb;
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
    transition: all 0.2s ease;
}

.brand-more-list li:hover {
    background: #f3f4f6;
    border-left-color: #9C27B0;
    transform: translateX(4px);
}

.brand-more-list-good li {
    border-left-color: #10b981;
    background: #ecfdf5;
}

.brand-more-list-good li:hover {
    background: #d1fae5;
}

.brand-more-list-issues li {
    border-left-color: #ef4444;
    background: #fef2f2;
}

.brand-more-list-issues li:hover {
    background: #fee2e2;
}

.brand-more-list-suggestions li {
    border-left-color: #3b82f6;
    background: #eff6ff;
}

.brand-more-list-suggestions li:hover {
    background: #dbeafe;
}

/* Empty State */
.brand-more-empty {
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
    padding: 40px 20px;
    font-style: italic;
}

/* Footer */
.brand-more-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    background: white; /* CLEAN WHITE - no gradient */
}

.brand-more-btn-close {
    padding: 10px 24px;
    background: #2c3e50;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Lexend Deca', sans-serif;
}

.brand-more-btn-close:hover {
    background: #34495e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3);
}

.brand-more-btn-close:active {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .brand-more-modal {
        max-width: 95%;
        max-height: 90vh;
    }
    
    .brand-more-scores {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .brand-more-tabs {
        flex-direction: column;
        gap: 4px;
    }
    
    .brand-more-tab {
        border-bottom: none;
        border-left: 3px solid transparent;
        text-align: left;
    }
    
    .brand-more-tab.active {
        border-left-color: #9C27B0;
        border-bottom-color: transparent;
    }
}

/* =================================================================
   BRAND SCORE CARD - COMPLETE SECTION
   Floating card with backdrop, centered, ESC + click-outside support
   ================================================================= */

/* Backdrop for brand score card */
.brand-score-card-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: none;
}

.brand-score-card-backdrop.active {
    display: block;
}

/* Floating Brand Score Card - CENTERED */
.brand-score-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb; 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    z-index: 10000;
    overflow: hidden;
    animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Header - White with Black Text and Border */
.brand-score-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: white;
}

.brand-score-card-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Lexend Deca', sans-serif;
    color: #111827;
}

/* MUCH BIGGER Close Button */
.brand-score-close {
    width: 40px;  /* BIGGER: was 32px */
    height: 40px; /* BIGGER: was 32px */
    padding: 0;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;  /* BIGGER X */
    font-weight: 300;
    line-height: 1;
}

.brand-score-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.brand-score-close:active {
    transform: scale(0.95);
}

/* Main Content - Minimal Padding */
.brand-score-main {
    padding: 24px 20px;
}

/* Circular Score Chart */
.brand-score-circle {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.circular-chart {
    width: 100px;
    height: 100px;
}

.circle-bg {
    fill: none;
    stroke: #e5e7eb;
    stroke-width: 3.8;
}

.circle {
    fill: none;
    stroke: #9C27B0;
    stroke-width: 2;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dasharray 0.6s ease-in-out, stroke 0.6s ease-in-out;
}

.percentage {
    fill: #111827;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    font-weight: 300;
    text-anchor: middle;
    dominant-baseline: central;
}

/* Score Breakdown - Minimal Padding */
.brand-score-breakdown {
    padding: 0 20px;
}

.brand-score-category {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    gap: 10px;
}

.category-icon {
    font-size: 14px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.category-label {
    font-size: 12px;
    font-weight: 500;
    font-family: 'Lexend Deca', sans-serif;
    color: #374151;
    min-width: 80px;
    flex-shrink: 0;
}

.category-bars {
    display: flex;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.category-bars .bar {
    height: 7px;
    flex: 1;
    background: #e5e7eb;
    border-radius: 2px;
    transition: background-color 0.3s;
}

.category-bars .bar.score-excellent {
    background: #66bb6a;
}

.category-bars .bar.score-good {
    background: #ffa726;
}

.category-bars .bar.score-fair {
    background: #ffca28;
}

.category-bars .bar.score-poor {
    background: #ef5350;
}

.category-score {
    font-size: 12px;
    font-weight: 600;
    font-family: 'Lexend Deca', sans-serif;
    color: #6b7280;
    min-width: 32px;
    text-align: right;
    flex-shrink: 0;
}

/* Score Card Actions - Two buttons side by side */
.brand-score-actions {
    display: flex;
    gap: 8px;
    justify-content: space-between;  /* Space between buttons */
    padding: 20px;
    border-top: 1px solid #e5e7eb;
}

.brand-score-details-btn,
.brand-score-close-btn {
    padding: 8px 16px;
    border: none;
    background: #f3f4f6;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Lexend Deca', sans-serif;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.brand-score-details-btn:hover,
.brand-score-close-btn:hover {
    background: #e5e7eb;
}

.brand-score-close-btn {
    background: #2c3e50;
    color: white;
}

.brand-score-close-btn:hover {
    background: #34495e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .brand-score-card {
        width: 90%;
        max-width: 320px;
    }
}

/* Score Card Actions - Two buttons side by side */
.brand-score-actions {
    display: flex;
    gap: 8px;
    justify-content: space-between;  /* Space between buttons */
    padding: 20px;
    border-top: 1px solid #e5e7eb;
}

.brand-score-details-btn,
.brand-score-close-btn {
    padding: 8px 16px;
    border: none;
    background: #f3f4f6;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Lexend Deca', sans-serif;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.brand-score-details-btn:hover,
.brand-score-close-btn:hover {
    background: #e5e7eb;
}

.brand-score-close-btn {
    background: #2c3e50;
    color: white;
}

.brand-score-close-btn:hover {
    background: #34495e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3);
}


/**
 * GOOGLE FOOTER BUTTON STYLES
 * Compact yellow button with red/green status indicator
 * Only visible on Synopsis/Quotes tab
 */

/* Google Footer Button */
#unified-details-modal .google-footer-btn {
    display: none; /* Hidden by default, shown on Synopsis tab */
    position: relative;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-family: "Lexend Deca", sans-serif;
    font-weight: 500;
    background-color: #FFEF00;
    color: #1D1D1F;
    border: none;
    cursor: pointer;
    transition: all 200ms ease-out;
    margin-right: auto; /* Push to left side of footer */
}

#unified-details-modal .google-footer-btn:hover {
    background-color: #E6D600;
    transform: translateY(-1px);
}

#unified-details-modal .google-footer-btn:active {
    transform: scale(0.98);
}

#unified-details-modal .google-footer-btn .google-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

/* Status Indicator Dot */
#unified-details-modal .google-status-indicator {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #FFEF00;
    background: #9AA0A6; /* Default gray */
    z-index: 1;
    transition: background-color 200ms ease-out;
}

#unified-details-modal .google-status-indicator.connected {
    background: #28A745; /* Green */
    box-shadow: 0 0 6px rgba(40, 167, 69, 0.5);
}

#unified-details-modal .google-status-indicator.disconnected {
    background: #DC3545; /* Red */
    box-shadow: 0 0 6px rgba(220, 53, 69, 0.5);
}

/* Pulsing animation for disconnected state */
#unified-details-modal .google-status-indicator.disconnected {
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0%, 100% {
        box-shadow: 0 0 6px rgba(220, 53, 69, 0.5);
    }
    50% {
        box-shadow: 0 0 12px rgba(220, 53, 69, 0.8);
    }
}

/* Google Options Menu (popup) */
#unified-details-modal .google-options-menu {
    position: absolute;
    bottom: 60px;
    right: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 8px;
    min-width: 280px;
    z-index: 1001;
    animation: slideUp 200ms ease-out;
}

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

#unified-details-modal .google-menu-header {
    padding: 12px 16px;
    font-family: "Lexend Deca", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #86868B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #F5F5F7;
}

#unified-details-modal .google-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-family: "Lexend Deca", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #1D1D1F;
    cursor: pointer;
    transition: all 150ms ease-out;
    text-align: left;
}

#unified-details-modal .google-menu-item:hover {
    background: #F5F5F7;
}

#unified-details-modal .google-menu-item:active {
    transform: scale(0.98);
}

#unified-details-modal .google-menu-item svg {
    flex-shrink: 0;
}

#unified-details-modal .google-menu-disconnect {
    color: #DC3545;
    margin-top: 4px;
    border-top: 1px solid #F5F5F7;
}

#unified-details-modal .google-menu-disconnect:hover {
    background: #FFF5F5;
}

/* Update modal footer to accommodate the new button */
#unified-details-modal .modal-footer-content {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

#unified-details-modal .save-status {
    /* Allow this to stay in its position */
}

#unified-details-modal .footer-buttons {
    margin-left: auto; /* Push to right */
    display: flex;
    gap: 10px;
}

/* Remove old Google auth notice and bulk button styles (no longer needed in tab body) */
#unified-details-modal .google-auth-notice {
    display: none !important; /* Force hide old element */
}

#unified-details-modal .quotes-bulk-actions {
    display: none !important; /* Force hide old bulk actions */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    #unified-details-modal .google-footer-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    #unified-details-modal .google-footer-btn .google-icon {
        width: 16px;
        height: 16px;
    }
    
    #unified-details-modal .google-options-menu {
        right: 10px;
        left: 10px;
        min-width: auto;
    }
    
    #unified-details-modal .modal-footer-content {
        flex-wrap: wrap;
    }
    
    #unified-details-modal .google-footer-btn {
        order: -1; /* Move to top on mobile */
        width: 100%;
        margin-bottom: 10px;
    }
}

/**
 * Field Consistency Fix - HIGH SPECIFICITY VERSION
 * Makes all text input fields in the Outline tab have the same height and left padding
 * Add this at the END of modal.css or as a separate file loaded after modal.css
 */

/* Target ALL input fields in the outline form with high specificity */
#unified-details-modal .outline-form-minimal input[type="text"],
#unified-details-modal .outline-form-minimal input[type="email"],
#unified-details-modal .contact-card input[type="text"],
#unified-details-modal .contact-card input[type="email"],
#unified-details-modal .field-group input[type="text"],
#unified-details-modal .field-group input[type="email"],
#unified-details-modal .field-half input[type="text"],
#unified-details-modal .field-half input[type="email"],
#unified-details-modal #outline-author-name,
#unified-details-modal #outline-author-role,
#unified-details-modal #outline-author-email,
#unified-details-modal #outline-writer-name,
#unified-details-modal #outline-writer-email,
#unified-details-modal #outline-internal-reviewer-name,
#unified-details-modal #outline-internal-reviewer-email,
#unified-details-modal #outline-company-name {
    height: 42px !important;
    padding: 10px 14px !important;
    padding-left: 14px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-family: 'Lexend Deca', sans-serif !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s !important;
}

/* Focus states */
#unified-details-modal .outline-form-minimal input[type="text"]:focus,
#unified-details-modal .outline-form-minimal input[type="email"]:focus,
#unified-details-modal .contact-card input[type="text"]:focus,
#unified-details-modal .contact-card input[type="email"]:focus,
#unified-details-modal .field-group input[type="text"]:focus,
#unified-details-modal .field-group input[type="email"]:focus,
#unified-details-modal .field-half input[type="text"]:focus,
#unified-details-modal .field-half input[type="email"]:focus {
    outline: none !important;
    border-color: #667eea !important;
}

/* Required field error state */
#unified-details-modal .field-error {
    border-color: #dc3545 !important;
    background-color: #fff5f5 !important;
}

#unified-details-modal .field-error:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}

/* ========================================
   GET LINK BUTTON STYLES (Google Dropdown)
   ======================================== */
#unified-details-modal .google-get-link-btn {
    background: #FFC107 !important;
    color: #1a1a1a !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    margin: 4px auto 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: fit-content !important;
    padding: 8px 20px !important;
    justify-content: center !important;
    display: inline-flex !important;
}

#unified-details-modal .google-get-link-btn:hover {
    background: #FFD54F !important;
}

#unified-details-modal .google-get-link-btn.copied {
    background: #4CAF50 !important;
    color: white !important;
}

#unified-details-modal .google-get-link-btn .item-icon {
    font-size: 14px !important;
}

/* TinyMCE dialogs must appear above our modals */
.tox-tinymce-aux {
    z-index: 1200000 !important;
}
.tox-dialog-wrap {
    z-index: 1200000 !important;
}
.tox-dialog-wrap__backdrop {
    z-index: 1199999 !important;
}
.tox-dialog {
    z-index: 1200001 !important;
}


/* Ensure TinyMCE link dialog is fully visible */
.tox .tox-dialog-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tox .tox-dialog {
    position: relative !important;
    max-height: 90vh !important;
    overflow: visible !important;
}

/* TinyMCE silver skin overrides for visibility */
.tox-silver-sink {
    z-index: 1200000 !important;
}

.tox .tox-menu {
    z-index: 1200002 !important;
}

/* ============================================
   v1.8.0 - LAPTOP/MEDIUM SCREEN FOOTER FIX
   Ensures consistent footer sizing on laptop screens
   ============================================ */

/* Laptops and smaller desktops (1366px and below - common laptop resolution) */
@media (max-width: 1400px) {
    #unified-details-modal > .modal-content > .modal-footer {
        padding: 10px 16px !important;
        min-height: 46px !important;
        max-height: 54px !important;
    }
    
    /* Constrain ALL footer buttons to reasonable size */
    #unified-details-modal .modal-footer button,
    #unified-details-modal .modal-footer .save-btn,
    #unified-details-modal .modal-footer .close-btn,
    #unified-details-modal .modal-footer .delete-btn,
    #unified-details-modal .footer-buttons button,
    #upload-image-btn,
    #footer-upload-btn,
    #generate-image-btn,
    #footer-generate-btn {
        padding: 6px 16px !important;
        font-size: 13px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 36px !important;
        line-height: 20px !important;
    }
}

/* Small laptops (1280px and below) */
@media (max-width: 1280px) {
    #unified-details-modal > .modal-content > .modal-footer {
        padding: 8px 14px !important;
        min-height: 44px !important;
        max-height: 50px !important;
    }
    
    #unified-details-modal .modal-footer button,
    #unified-details-modal .modal-footer .save-btn,
    #unified-details-modal .modal-footer .close-btn,
    #unified-details-modal .modal-footer .delete-btn,
    #unified-details-modal .footer-buttons button,
    #upload-image-btn,
    #footer-upload-btn,
    #generate-image-btn,
    #footer-generate-btn {
        padding: 5px 14px !important;
        font-size: 12px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 34px !important;
        min-width: 100px !important;
    }
}

/* ============================================
   CONSOLIDATED MOBILE RESPONSIVE STYLES
   Version 2.0 - Fixed footer button stacking issue
   CRITICAL: Keep buttons horizontal, maximize content space
   ============================================ */

/* Tablet (768px) */
@media (max-width: 768px) {
    /* Modal tabs - horizontal scroll instead of wrap */
    #unified-details-modal .details-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 2px;
        padding: 6px 10px;
        scrollbar-width: none; /* Firefox */
    }
    
    #unified-details-modal .details-tabs::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    
    #unified-details-modal .details-tabs .tab-btn,
    #unified-details-modal .details-tab-btn {
        flex: 0 0 auto;
        padding: 6px 10px;
        font-size: 11px;
        text-align: center;
        white-space: nowrap;
    }
    
    /* Hide fullscreen button */
    #unified-details-modal .fullscreen-btn {
        display: none !important;
    }
    
    /* COMPACT HEADER - Critical for mobile */
    #unified-details-modal > .modal-content > .modal-header {
        padding: 8px 12px 0 12px !important;
        min-height: auto !important;
    }
    
    #unified-details-modal .modal-header h2 {
        font-size: 13px !important;
        margin-bottom: 6px !important;
        /* Truncate long titles */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 40px);
    }
    
    /* Compact body - maximize content space */
    #unified-details-modal .modal-body {
        padding: 0 !important;
    }
    
    #unified-details-modal .details-tab-content:not(#story-tab) {
        padding: 12px !important;
    }
    
    /* Stack outline form */
    #unified-details-modal .outline-form {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    
    /* Compact contact cards */
    #unified-details-modal .contact-card {
        padding: 8px !important;
    }
    
    #unified-details-modal .contact-card h5 {
        font-size: 12px;
    }
    
    /* Smaller inputs */
    #unified-details-modal .outline-form input,
    #unified-details-modal .outline-form textarea,
    #unified-details-modal .outline-form select {
        font-size: 14px !important;
        padding: 8px !important;
    }
    
    /* ==========================================
       FOOTER - CRITICAL: Keep buttons HORIZONTAL
       ========================================== */
    #unified-details-modal > .modal-content > .modal-footer {
        padding: 8px 12px !important;
        gap: 6px !important;
        min-height: 44px !important;
        max-height: 50px !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    /* All footer buttons - compact and horizontal */
    #unified-details-modal .modal-footer button,
    #unified-details-modal .modal-footer .save-btn,
    #unified-details-modal .modal-footer .close-btn,
    #unified-details-modal .modal-footer .delete-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }
    
    /* Footer buttons container - horizontal */
    #unified-details-modal .footer-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        margin-left: auto !important;
    }
    
    /* Footer left (delete button area) */
    #unified-details-modal .footer-left {
        flex: 0 0 auto !important;
    }
    
    /* Hide save status on mobile to save space */
    #unified-details-modal .save-status,
    #unified-details-modal #details-save-status {
        display: none !important;
    }
    
    /* Story editor - ensure it's scrollable */
    #unified-details-modal .story-editor-container {
        padding: 8px !important;
        height: 100% !important;
        overflow-y: auto !important;
    }
    
    #unified-details-modal #story-content-editor {
        font-size: 14px !important;
        min-height: 200px !important;
    }
    
    /* ==========================================
       STORY TAB - Critical mobile fixes
       ========================================== */
    #unified-details-modal #story-tab.active {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    
    #unified-details-modal .story-container {
        padding: 10px !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    
    #unified-details-modal #story-editor-container {
        flex: 1 !important;
        min-height: 150px !important;
        overflow: hidden !important;
    }
    
    /* Ensure TinyMCE toolbar doesn't take too much space */
    #unified-details-modal .tox-editor-header {
        flex-shrink: 0 !important;
    }
    
    #unified-details-modal .tox-toolbar-overlord {
        max-height: 80px !important;
        overflow-x: auto !important;
    }
    
    #unified-details-modal .tox-edit-area {
        flex: 1 !important;
        min-height: 100px !important;
    }
    
    /* All other tabs need compact padding on mobile */
    #unified-details-modal .details-tab-content:not(#story-tab) {
        padding: 12px !important;
    }
    
    /* ==========================================
       MEDIA TAB - Full width cards on mobile
       ========================================== */
    .media-grid {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
        gap: 12px !important;
    }
    
    .media-card {
        border-radius: 8px;
    }
    
    .media-header {
        padding: 10px 12px;
    }
    
    .media-question {
        font-size: 14px;
    }
    
    .media-footer {
        padding: 10px 12px;
    }
    
    /* ==========================================
       OUTLINE TAB - Compact form layout
       ========================================== */
    .input-with-button {
        flex-direction: row !important;
        gap: 6px;
    }
    
    .input-with-button input[type="email"],
    .input-with-button input[type="text"] {
        flex: 1;
        min-width: 0;
    }
    
    .input-with-button .btn-sm {
        flex: 0 0 auto;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    /* Stack field rows */
    .field-row {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile (480px) - iPhone sized */
@media (max-width: 480px) {
    /* Tabs - 4 columns grid, scrollable */
    #unified-details-modal .details-tabs {
        display: flex;
        gap: 2px;
        padding: 4px 8px;
    }
    
    #unified-details-modal .details-tabs .tab-btn,
    #unified-details-modal .details-tab-btn {
        padding: 5px 8px;
        font-size: 9px;
    }
    
    /* Hide tab icons on small screens */
    #unified-details-modal .details-tabs .tab-btn svg,
    #unified-details-modal .details-tab-btn svg {
        display: none;
    }
    
    /* Even more compact header */
    #unified-details-modal .modal-header h2 {
        font-size: 12px !important;
    }
    
    /* CRITICAL: Footer stays horizontal with smaller buttons */
    #unified-details-modal > .modal-content > .modal-footer {
        padding: 6px 10px !important;
        gap: 4px !important;
        min-height: 40px !important;
        max-height: 46px !important;
    }
    
    #unified-details-modal .modal-footer button {
        padding: 5px 10px !important;
        font-size: 11px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }
    
    /* Smaller gap in footer buttons */
    #unified-details-modal .footer-buttons {
        gap: 4px !important;
    }
    
    /* Compact contact cards */
    #unified-details-modal .contact-card {
        padding: 6px !important;
    }
    
    .contact-header {
        font-size: 10px;
    }
    
    /* Media tab - tighter spacing */
    .media-grid {
        padding: 8px !important;
        gap: 10px !important;
    }
    
    .media-header {
        padding: 8px 10px;
    }
    
    .media-question {
        font-size: 13px;
    }
    
    /* Compact form inputs */
    .input-with-button .btn-sm {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}

/* Small mobile (380px) - iPhone SE / small phones */
@media (max-width: 380px) {
    #unified-details-modal .modal-header h2 {
        font-size: 11px !important;
    }
    
    #unified-details-modal .details-tabs .tab-btn,
    #unified-details-modal .details-tab-btn {
        font-size: 8px;
        padding: 4px 6px;
    }
    
    /* Even smaller footer buttons */
    #unified-details-modal .modal-footer button {
        padding: 4px 8px !important;
        font-size: 10px !important;
        height: 30px !important;
        min-height: 30px !important;
    }
}

/* Touch device optimization - BUT respect mobile button sizes */
@media (hover: none) and (pointer: coarse) {
    #unified-details-modal .details-tabs .tab-btn,
    #unified-details-modal .details-tab-btn {
        min-height: 36px;
    }
    
    /* Only apply large touch targets on wider screens */
    @media (min-width: 481px) {
        #unified-details-modal .modal-footer button,
        #unified-details-modal .email-action-btn {
            min-height: 44px;
        }
    }
}

/* Landscape on short screens */
@media (max-height: 500px) and (orientation: landscape) {
    #unified-details-modal .modal-header {
        padding: 6px 15px !important;
    }
    
    #unified-details-modal .details-tabs {
        padding: 4px 10px;
    }
    
    #unified-details-modal .modal-body {
        padding: 6px !important;
    }
    
    #unified-details-modal .modal-footer {
        padding: 6px 10px !important;
    }
}

/* iPhone notch safe areas */
@supports (padding: max(0px)) {
    #unified-details-modal .modal-content {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    #unified-details-modal .modal-footer {
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
}

/* =============================================================================
   SKELETON LOADING ANIMATIONS - Story Modal Tabs
   ============================================================================= */

@keyframes ppsd-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ppsd-skeleton-bar {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: ppsd-shimmer 1.5s infinite;
    border-radius: 4px;
}

.ppsd-skeleton-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fafafa;
    z-index: 10;
    padding: 24px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.ppsd-skeleton-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Ensure tab content has position relative for skeleton overlay */
.details-tab-content {
    position: relative;
}

/* =============================================================================
   LINKEDIN PROFILE LOOKUP - Story Author Section
   Version 1.4.8
   ============================================================================= */

/* Contact header with LinkedIn status */
.contact-card .contact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.linkedin-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #dbeafe;
    color: #0a66c2;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    font-family: 'Lexend Deca', sans-serif;
}

/* LinkedIn Row - Compact */
.linkedin-row {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f0f0f0;
}

.linkedin-row label {
    display: flex;
    align-items: center;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.linkedin-input-wrapper {
    display: flex;
    gap: 5px;
    align-items: stretch;
}

.linkedin-input {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    color: #374151;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.linkedin-input:focus {
    outline: none;
    border-color: #0a66c2;
    box-shadow: 0 0 0 2px rgba(10, 102, 194, 0.1);
}

.linkedin-input::placeholder {
    color: #9ca3af;
    font-size: 11px;
}

.linkedin-input.has-value {
    border-color: #0a66c2;
    background: #f8fbff;
}

.linkedin-lookup-btn,
.linkedin-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    background: white;
    color: #6b7280;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    white-space: nowrap;
}

.linkedin-lookup-btn {
    background: linear-gradient(135deg, #0a66c2 0%, #004182 100%);
    border-color: #0a66c2;
    color: white;
}

.linkedin-lookup-btn:hover {
    background: linear-gradient(135deg, #004182 0%, #003366 100%);
}

.linkedin-lookup-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.linkedin-view-btn {
    background: #0a66c2;
    border-color: #0a66c2;
    color: white;
    padding: 7px 8px;
}

.linkedin-view-btn:hover {
    background: #004182;
    color: white;
}

/* Lookup Panel */
.linkedin-lookup-panel {
    margin-top: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    animation: linkedinSlideDown 0.2s ease-out;
}

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

.linkedin-lookup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #475569;
}

.linkedin-header-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.linkedin-refresh-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s;
}

.linkedin-refresh-btn:hover {
    background: #e2e8f0;
    color: #0a66c2;
}

.linkedin-lookup-close {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
}

.linkedin-lookup-close:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
}

.linkedin-lookup-content {
    padding: 8px;
}

.linkedin-lookup-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    color: #64748b;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 12px;
}

.linkedin-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e2e8f0;
    border-top-color: #0a66c2;
    border-radius: 50%;
    animation: linkedinSpin 0.8s linear infinite;
}

@keyframes linkedinSpin {
    to { transform: rotate(360deg); }
}

/* Suggestion Card */
.linkedin-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.linkedin-suggestion:last-child {
    margin-bottom: 0;
}

.linkedin-suggestion:hover {
    border-color: #0a66c2;
    box-shadow: 0 2px 6px rgba(10, 102, 194, 0.1);
}

.linkedin-suggestion-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #0a66c2 0%, #004182 100%);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.linkedin-suggestion-info {
    flex: 1;
    min-width: 0;
}

.linkedin-suggestion-url {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    color: #0a66c2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1px;
}

.linkedin-suggestion-reason {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    color: #64748b;
}

.linkedin-suggestion-name {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1px;
}

.linkedin-suggestion-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    color: #475569;
    margin-bottom: 2px;
}

.linkedin-source-label {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.linkedin-fallback-reason {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    color: #b45309;
    background: #fef3c7;
    padding: 6px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    border-left: 3px solid #f59e0b;
}

.linkedin-suggestion-confidence {
    padding: 2px 6px;
    border-radius: 8px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.linkedin-suggestion-confidence.high { background: #dcfce7; color: #16a34a; }
.linkedin-suggestion-confidence.medium { background: #fef3c7; color: #d97706; }
.linkedin-suggestion-confidence.low { background: #fee2e2; color: #dc2626; }

.linkedin-suggestion-use {
    padding: 5px 10px;
    background: #0a66c2;
    color: white;
    border: none;
    border-radius: 4px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.linkedin-suggestion-use:hover {
    background: #004182;
}

/* Tips and errors */
.linkedin-lookup-tips {
    margin-top: 8px;
    padding: 8px 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 5px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    color: #92400e;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.linkedin-lookup-tips.error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.linkedin-manual-hint {
    margin-top: 6px;
    text-align: center;
}

.linkedin-manual-hint a {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    color: #64748b;
    text-decoration: none;
}

.linkedin-manual-hint a:hover {
    color: #0a66c2;
    text-decoration: underline;
}

/* LinkedIn No Results State */
.linkedin-no-results {
    text-align: center;
    padding: 10px 8px;
    background: #f8fafc;
    border-radius: 6px;
    margin-bottom: 6px;
}

.linkedin-no-results-icon {
    font-size: 20px;
    margin-bottom: 4px;
    opacity: 0.6;
}

.linkedin-no-results-text {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}

.linkedin-search-tips {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    color: #64748b;
    line-height: 1.4;
    text-align: left;
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 6px 8px;
    border-radius: 4px;
}

/* Person Confirmed but no URL found */
.linkedin-person-confirmed {
    text-align: center;
    margin-bottom: 6px;
}

.linkedin-confirmed-icon {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #80DABC 0%, #5BC4A8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 4px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.linkedin-confirmed-text {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    margin-bottom: 4px;
}

.linkedin-person-info {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    color: #374151;
    line-height: 1.3;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 6px 8px;
    border-radius: 4px;
    text-align: left;
}

.linkedin-url-note {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 9px;
    color: #9ca3af;
    margin-top: 6px;
    font-style: italic;
}

/* LinkedIn Search Button */
.linkedin-search-btn-wrapper {
    margin-top: 6px;
    text-align: center;
}

.linkedin-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: #0a66c2;
    color: #fff !important;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.linkedin-search-btn:hover {
    background: #004182;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(10, 102, 194, 0.3);
}

.linkedin-search-btn svg {
    fill: currentColor;
    width: 12px;
    height: 12px;
}

/* Synopsis Textarea (Editable) */
.synopsis-textarea {
    width: 100%;
    min-height: 140px;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #374151;
    background: #fff;
    resize: vertical;
    box-sizing: border-box;
}

.synopsis-textarea:focus {
    outline: none;
    border-color: #80DABC;
    box-shadow: 0 0 0 2px rgba(128, 218, 188, 0.2);
}

.synopsis-textarea::placeholder {
    color: #9ca3af;
    font-style: italic;
}

/* ==========================================================================
   Story Selectors Row (Workflow, Stage, Asset Format)
   ========================================================================== */

.story-selectors-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: flex-end;
}

.story-selectors-row .story-selector-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.story-selectors-row .story-selector-group:first-child {
    flex: 0 0 140px;
}

.story-selectors-row .story-selector-group:nth-child(2) {
    flex: 0 0 160px;
}

.story-selectors-row .story-selector-group:last-child {
    flex: 1;
    min-width: 100px;
}

.story-selectors-row label {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #666;
    margin-bottom: 4px;
}

.story-selectors-row select {
    width: 100%;
    height: 36px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
}

.story-selectors-row select:focus {
    outline: none;
    border-color: #80DABC;
    box-shadow: 0 0 0 2px rgba(128, 218, 188, 0.2);
}

/* ==========================================================================
   Company Context Section (Outline Tab)
   Industry, Region, and AI-generated Synopsis
   ========================================================================== */

.company-context-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

/* New compact company row: Company | Region | Industry | Research btn */
.company-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}

.company-row .company-field {
    flex: 1;
    min-width: 0;
}

.company-row .region-field {
    width: 85px;
    flex-shrink: 0;
}

.company-row .industry-field {
    width: 160px;
    flex-shrink: 0;
}

.company-row label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-bottom: 5px;
}

.company-row input[type="text"] {
    width: 100%;
    height: 36px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Lexend Deca', sans-serif;
    box-sizing: border-box;
}

.company-row .context-select {
    width: 100%;
    height: 36px;
    padding: 6px 8px;
    font-size: 12px;
}

.company-row .btn-research-company {
    height: 36px;
    width: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 4px;
}

/* Focus and Synopsis side by side */
.focus-synopsis-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.focus-synopsis-row .focus-field {
    display: flex;
    flex-direction: column;
}

.focus-synopsis-row .focus-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-bottom: 5px;
    font-family: 'Lexend Deca', sans-serif;
}

.focus-synopsis-row .focus-field textarea {
    width: 100%;
    min-height: 140px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Lexend Deca', sans-serif;
    resize: vertical;
    box-sizing: border-box;
}

.focus-synopsis-row .synopsis-field-box {
    display: flex;
    flex-direction: column;
}

.focus-synopsis-row .synopsis-field-box label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-bottom: 5px;
    font-family: 'Lexend Deca', sans-serif;
}

.focus-synopsis-row .synopsis-text {
    flex: 1;
    min-height: 140px;
    padding: 10px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 4px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #166534;
}

.focus-synopsis-row .synopsis-text .synopsis-placeholder {
    color: #9ca3af;
    font-style: italic;
}

/* Hide old company context section styles - replaced by inline */
.context-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.context-label {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
}

.btn-research-company {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    background: #80DABC;
    color: white;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-research-company svg {
    stroke: white;
}

.btn-research-company:hover {
    background: #5fcca6;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(128, 218, 188, 0.4);
}

.btn-research-company.loading {
    opacity: 0.7;
    pointer-events: none;
}

.btn-research-company.loading svg {
    animation: spin-research 1s linear infinite;
}

@keyframes spin-research {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.context-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.context-field {
    display: flex;
    flex-direction: column;
}

.context-field label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.context-select {
    padding: 6px 8px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 12px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    background: white;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.2s;
}

.context-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.ai-badge {
    background: transparent;
    color: #9ca3af;
    font-size: 8px;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 3px;
    text-transform: uppercase;
}

.synopsis-field {
    margin-top: 2px;
}

.synopsis-text {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    color: #374151;
    line-height: 1.5;
    padding: 8px 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    min-height: 52px;
    max-height: 80px;
    overflow-y: auto;
}

.synopsis-text.has-content {
    background: #f9fafb;
    border-color: #d1d5db;
}

.synopsis-placeholder {
    color: #9ca3af;
    font-style: italic;
}

/* ==========================================================================
   Company Search Refinement Panel
   Slide-down panel for refining company lookup
   ========================================================================== */

.research-btn-group {
    display: flex;
    gap: 4px;
    align-items: flex-end;
}

.btn-refine-search {
    width: 36px;
    height: 36px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #6b7280;
    transition: all 0.15s ease;
}

.btn-refine-search svg {
    width: 14px;
    height: 14px;
}

.btn-refine-search:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}

.company-refine-panel {
    margin-top: 8px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    animation: slideDown 0.2s ease-out;
}

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

.refine-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.refine-panel-header span {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
}

.refine-panel-close {
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

.refine-panel-close:hover {
    background: #e5e7eb;
    color: #374151;
}

.refine-panel-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.refine-field label {
    display: block;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 4px;
}

.refine-field input,
.refine-field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    color: #374151;
    background: #fff;
    box-sizing: border-box;
}

.refine-field input:focus,
.refine-field textarea:focus {
    outline: none;
    border-color: #80DABC;
    box-shadow: 0 0 0 2px rgba(128, 218, 188, 0.2);
}

.refine-field textarea {
    resize: vertical;
    min-height: 50px;
}

.refine-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.btn-refine-cancel {
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-refine-cancel:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.btn-refine-search-go {
    padding: 6px 14px;
    border: none;
    border-radius: 4px;
    background: linear-gradient(135deg, #80DABC 0%, #5BC4A8 100%);
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.btn-refine-search-go:hover {
    background: linear-gradient(135deg, #6dd4b1 0%, #4ab899 100%);
    transform: translateY(-1px);
}

.btn-refine-search-go svg {
    width: 12px;
    height: 12px;
}

/* Refine Panel Checkbox */
.refine-checkbox-field {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.refine-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    color: #374151;
}

.refine-checkbox-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin-top: 1px;
    accent-color: #80DABC;
    cursor: pointer;
}

.refine-checkbox-text {
    line-height: 1.4;
}

.refine-checkbox-text strong {
    color: #0a66c2;
}

.refine-checkbox-help {
    margin: 4px 0 0 22px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    color: #9ca3af;
    line-height: 1.3;
}

/* ==========================================================================
   ProofPoints Notification Modal System
   Beautiful, on-brand replacements for browser confirm/alert dialogs
   ========================================================================== */

/* Modal Overlay */
.pp-notify-overlay {
    display: none;
    position: fixed;
    z-index: 1000002;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pp-notify-overlay.visible {
    opacity: 1;
}

/* Modal Container */
.pp-notify-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 440px;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.pp-notify-overlay.visible .pp-notify-modal {
    transform: translate(-50%, -50%) scale(1);
}

/* Modal Header */
.pp-notify-header {
    padding: 20px 24px 16px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* Icon styles */
.pp-notify-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pp-notify-icon svg {
    width: 24px;
    height: 24px;
}

/* Icon variants */
.pp-notify-icon.icon-confirm {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
}

.pp-notify-icon.icon-confirm svg {
    color: #0284c7;
}

.pp-notify-icon.icon-success {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.pp-notify-icon.icon-success svg {
    color: #16a34a;
}

.pp-notify-icon.icon-error {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

.pp-notify-icon.icon-error svg {
    color: #dc2626;
}

.pp-notify-icon.icon-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.pp-notify-icon.icon-warning svg {
    color: #d97706;
}

.pp-notify-icon.icon-info {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
}

.pp-notify-icon.icon-info svg {
    color: #4f46e5;
}

.pp-notify-icon.icon-email {
    background: linear-gradient(135deg, #80DABC 0%, #4ade80 100%);
}

.pp-notify-icon.icon-email svg {
    color: white;
}

/* Header text content */
.pp-notify-header-content {
    flex: 1;
    min-width: 0;
}

.pp-notify-title {
    margin: 0 0 4px 0;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}

.pp-notify-subtitle {
    margin: 0;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

/* Modal Body */
.pp-notify-body {
    padding: 0 24px 20px;
}

.pp-notify-message {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
    margin: 0;
    white-space: pre-wrap;
}

/* Highlight box for email addresses etc */
.pp-notify-highlight {
    background: #f3f4f6;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pp-notify-highlight-icon {
    width: 20px;
    height: 20px;
    color: #6b7280;
    flex-shrink: 0;
}

.pp-notify-highlight-text {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    word-break: break-all;
}

/* Modal Footer */
.pp-notify-footer {
    padding: 16px 24px 20px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Button base styles */
.pp-notify-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 100px;
}

.pp-notify-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Cancel button */
.pp-notify-btn.btn-cancel {
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
}

.pp-notify-btn.btn-cancel:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

/* Primary/Confirm button */
.pp-notify-btn.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
}

.pp-notify-btn.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Success button (for sending emails) - matches Send Review button */
.pp-notify-btn.btn-success {
    background: linear-gradient(135deg, #80DABC, #5fcca6);
    color: white;
    border: none;
}

.pp-notify-btn.btn-success:hover {
    background: linear-gradient(135deg, #5fcca6, #4abe94);
    box-shadow: 0 4px 12px rgba(128, 218, 188, 0.4);
}

/* Danger button */
.pp-notify-btn.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
}

.pp-notify-btn.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* OK button for alerts */
.pp-notify-btn.btn-ok {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    border: none;
    min-width: 80px;
}

.pp-notify-btn.btn-ok:hover {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
}

/* Loading state for buttons */
.pp-notify-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.pp-notify-btn .btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: ppNotifySpinner 0.6s linear infinite;
}

@keyframes ppNotifySpinner {
    to { transform: rotate(360deg); }
}

/* Success check animation */
.pp-notify-success-check {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pp-notify-success-check svg {
    width: 100%;
    height: 100%;
}

.pp-notify-success-check .check-circle {
    fill: none;
    stroke: #22c55e;
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: ppNotifyCheckCircle 0.6s ease forwards;
}

.pp-notify-success-check .check-mark {
    fill: none;
    stroke: #22c55e;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: ppNotifyCheckMark 0.3s ease forwards 0.4s;
}

@keyframes ppNotifyCheckCircle {
    to { stroke-dashoffset: 0; }
}

@keyframes ppNotifyCheckMark {
    to { stroke-dashoffset: 0; }
}

/* Responsive adjustments */
@media screen and (max-width: 480px) {
    .pp-notify-modal {
        width: 95%;
        max-width: none;
        margin: 0 10px;
    }
    
    .pp-notify-header {
        padding: 16px 20px 12px;
    }
    
    .pp-notify-body {
        padding: 0 20px 16px;
    }
    
    .pp-notify-footer {
        padding: 14px 20px 16px;
        flex-direction: column-reverse;
    }
    
    .pp-notify-btn {
        width: 100%;
    }
}

/* ============================================================
   v1.7.0 - NUCLEAR CENTERING FIX FOR AVATAR & WORKFLOW TIMELINE
   These rules use maximum specificity to override any conflicts
   ============================================================ */

/* AVATAR CENTERING - Maximum specificity */
html body #unified-details-modal #outline-tab .avatar-section-minimal,
html body #unified-details-modal .outline-real-content .avatar-section-minimal {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto 14px auto !important;
    padding: 0 !important;
    text-align: center !important;
}

html body #unified-details-modal #outline-tab .avatar-placeholder,
html body #unified-details-modal #outline-avatar-placeholder {
    margin: 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* WORKFLOW TIMELINE CENTERING - Maximum specificity */
html body #unified-details-modal #outline-tab .story-journey-section,
html body #unified-details-modal .outline-real-content .story-journey-section {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
}

html body #unified-details-modal #outline-tab .story-journey-timeline,
html body #unified-details-modal #story-journey-timeline {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ensure outline container allows centering */
html body #unified-details-modal #outline-tab .outline-real-content,
html body #unified-details-modal #outline-tab .outline-minimal {
    text-align: center !important;
}

/* Reset text-align for form elements below */
html body #unified-details-modal .outline-form-minimal,
html body #unified-details-modal .outline-grid-minimal,
html body #unified-details-modal .col-focus,
html body #unified-details-modal .col-contacts {
    text-align: left !important;
}

/* ==========================================================================
   COMPREHENSIVE MOBILE OPTIMIZATIONS - OUTLINE TAB
   ========================================================================== */

@media (max-width: 768px) {
    /* ==========================================
       STORY SELECTORS ROW (Workflow, Stage, Asset)
       ========================================== */
    .story-selectors-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    
    .story-selectors-row .story-selector-group {
        min-width: 0;
    }
    
    .story-selectors-row label {
        font-size: 10px !important;
        margin-bottom: 3px !important;
    }
    
    .story-selectors-row select {
        font-size: 11px !important;
        padding: 6px 4px !important;
        height: 34px !important;
    }
    
    /* ==========================================
       COMPANY ROW (Company, Region, Industry, Search)
       ========================================== */
    .company-row {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        gap: 8px !important;
        align-items: end !important;
    }
    
    .company-row .company-field {
        grid-column: 1;
        grid-row: 1;
    }
    
    .company-row .region-field {
        grid-column: 2;
        grid-row: 1;
        width: 75px !important;
    }
    
    .company-row .industry-field {
        grid-column: 1;
        grid-row: 2;
        width: auto !important;
    }
    
    .company-row .research-btn-group {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        gap: 4px;
    }
    
    .company-row label {
        font-size: 10px !important;
        margin-bottom: 2px !important;
    }
    
    .company-row input[type="text"],
    .company-row .context-select {
        height: 34px !important;
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
    
    .company-row .btn-research-company,
    .company-row .btn-refine-search {
        width: 34px !important;
        height: 34px !important;
    }
    
    /* ==========================================
       FOCUS/SYNOPSIS ROW (Story Focus, Company Overview)
       ========================================== */
    .focus-synopsis-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .focus-synopsis-row .focus-field,
    .focus-synopsis-row .synopsis-field-box {
        width: 100% !important;
    }
    
    .focus-synopsis-row label {
        font-size: 11px !important;
        margin-bottom: 3px !important;
    }
    
    .focus-synopsis-row textarea,
    .synopsis-textarea {
        min-height: 80px !important;
        font-size: 12px !important;
        padding: 8px !important;
    }
    
    /* ==========================================
       CONTACT CARDS (Story Author, Internal Reviewer, etc.)
       ========================================== */
    .contact-card {
        padding: 10px !important;
        margin-bottom: 10px !important;
        overflow: hidden !important;
    }
    
    .contact-card h5,
    .contact-header {
        font-size: 11px !important;
        margin-bottom: 8px !important;
        padding-bottom: 6px !important;
    }
    
    .contact-card .field-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 8px !important;
    }
    
    .contact-card .field-row .form-field,
    .contact-card .field-row .field-half {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
    }
    
    .contact-card .field-row .field-with-action {
        width: 100% !important;
    }
    
    .contact-card label {
        font-size: 10px !important;
        margin-bottom: 3px !important;
        display: block !important;
    }
    
    .contact-card input[type="text"],
    .contact-card input[type="email"] {
        width: 100% !important;
        height: 36px !important;
        font-size: 13px !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
    }
    
    /* Email row with Send Review button - FULL WIDTH */
    .contact-card .input-with-button {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 36px !important;
        padding: 0 !important;
        gap: 6px !important;
        box-sizing: border-box !important;
    }
    
    .contact-card .input-with-button input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        height: 36px !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
    }
    
    .contact-card .input-with-button .email-action-btn,
    .contact-card .input-with-button .btn-sm,
    .contact-card .input-with-button .btn-green {
        flex: 0 0 auto !important;
        height: 36px !important;
        font-size: 10px !important;
        padding: 0 10px !important;
        white-space: nowrap !important;
        min-width: auto !important;
        box-sizing: border-box !important;
    }
    
    /* ==========================================
       LINKEDIN SECTION
       ========================================== */
    .linkedin-row {
        margin-top: 8px !important;
        padding-top: 8px !important;
    }
    
    .linkedin-row label {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }
    
    .linkedin-input-group {
        display: flex !important;
        gap: 4px !important;
    }
    
    .linkedin-input {
        height: 34px !important;
        font-size: 11px !important;
        padding: 6px 8px !important;
        flex: 1;
        min-width: 0;
    }
    
    .linkedin-search-btn,
    .linkedin-view-btn,
    .btn-linkedin-lookup {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        flex-shrink: 0;
    }
    
    /* LinkedIn lookup panel - make it compact */
    .linkedin-lookup-panel {
        margin-top: 8px !important;
        padding: 8px !important;
    }
    
    .linkedin-lookup-panel .panel-header {
        font-size: 11px !important;
        padding-bottom: 6px !important;
        margin-bottom: 6px !important;
    }
    
    .linkedin-lookup-close {
        width: 28px !important;
        height: 28px !important;
        font-size: 18px !important;
    }
    
    /* Person confirmed result */
    .person-confirmed-result {
        padding: 8px !important;
    }
    
    .person-confirmed-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
    
    .person-confirmed-info {
        font-size: 11px !important;
        padding: 6px 8px !important;
    }
    
    .linkedin-search-btn-large {
        padding: 8px 12px !important;
        font-size: 11px !important;
    }
    
    /* ==========================================
       JOURNEY TIMELINE (Avatar and stages)
       ========================================== */
    .journey-container {
        padding: 10px 8px !important;
        margin-bottom: 10px !important;
    }
    
    .journey-avatar {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 8px !important;
    }
    
    .journey-avatar img {
        width: 45px !important;
        height: 45px !important;
    }
    
    .journey-timeline {
        padding: 0 5px !important;
    }
    
    .journey-stage {
        min-width: 50px !important;
    }
    
    .journey-stage-icon {
        width: 28px !important;
        height: 28px !important;
    }
    
    .journey-stage-icon svg {
        width: 14px !important;
        height: 14px !important;
    }
    
    .journey-stage-label {
        font-size: 9px !important;
        margin-top: 4px !important;
    }
    
    /* ==========================================
       SECTION HEADERS
       ========================================== */
    .section-header,
    .story-focus-header {
        font-size: 12px !important;
        padding-bottom: 6px !important;
        margin-bottom: 10px !important;
    }
    
    .contacts-header {
        font-size: 12px !important;
        margin: 12px 0 8px 0 !important;
    }
}

/* Extra small screens (480px and below) */
@media (max-width: 480px) {
    /* Story selectors - 2 columns for first two, full width for third */
    .story-selectors-row {
        grid-template-columns: 1fr 1fr !important;
    }
    
    .story-selectors-row .story-selector-group:last-child {
        grid-column: span 2;
    }
    
    /* Company row - all fields stack */
    .company-row {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
    }
    
    .company-row .company-field {
        grid-column: 1;
        grid-row: 1;
    }
    
    .company-row .region-field {
        grid-column: 1;
        grid-row: 2;
        width: 100% !important;
    }
    
    .company-row .industry-field {
        grid-column: 1;
        grid-row: 3;
    }
    
    .company-row .research-btn-group {
        position: absolute;
        right: 12px;
        top: 0;
    }
    
    /* Make company row relative for button positioning */
    .company-row {
        position: relative;
        padding-right: 80px !important;
    }
    
    /* Contact card field rows - already stacked from 768px */
    .contact-card .field-row {
        gap: 8px !important;
    }
    
    /* Smaller Send Review buttons on small screens */
    .contact-card .input-with-button .email-action-btn,
    .contact-card .input-with-button .btn-sm,
    .contact-card .input-with-button .btn-green {
        font-size: 9px !important;
        padding: 0 8px !important;
    }
    
    /* Journey timeline - smaller */
    .journey-avatar {
        width: 40px !important;
        height: 40px !important;
    }
    
    .journey-avatar img {
        width: 35px !important;
        height: 35px !important;
    }
    
    .journey-stage-icon {
        width: 24px !important;
        height: 24px !important;
    }
    
    .journey-stage-label {
        font-size: 8px !important;
    }
}


/* ==========================================================================
   EVENT HISTORY TIMELINE - Approval Tab Audit Trail
   Beautiful vertical timeline showing all story events
   ========================================================================== */

.pp-event-history {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.pp-event-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.pp-event-history-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    font-family: "Lexend Deca", sans-serif;
}

.pp-event-history-title svg {
    color: #9ca3af;
}

.pp-event-count {
    font-size: 13px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 4px 12px;
    border-radius: 12px;
    font-family: "Lexend Deca", sans-serif;
}

/* Timeline container */
.pp-event-timeline {
    position: relative;
    padding-left: 32px;
}

/* Vertical line */
.pp-event-timeline::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, #80DABC 0%, #e5e7eb 100%);
    border-radius: 1px;
}

/* Loading state */
/* Timeline Skeleton Loading */
.pp-event-skeleton {
    padding: 20px 0;
}

.pp-event-skeleton-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.pp-event-skeleton-item:last-child {
    border-bottom: none;
}

/* Individual event */
.pp-event-item {
    position: relative;
    padding-bottom: 24px;
    padding-left: 24px;
}

.pp-event-item:last-child {
    padding-bottom: 0;
}

/* Event dot/icon */
.pp-event-dot {
    position: absolute;
    left: -32px;
    top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid #e5e7eb;
    z-index: 1;
}

.pp-event-dot svg {
    width: 12px;
    height: 12px;
    stroke-width: 2.5;
}

/* Event states */
.pp-event-item.completed .pp-event-dot {
    background: #80DABC;
    border-color: #80DABC;
}

.pp-event-item.completed .pp-event-dot svg {
    color: white;
}

.pp-event-item.current .pp-event-dot {
    background: #f97316;
    border-color: #f97316;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15);
}

.pp-event-item.current .pp-event-dot svg {
    color: white;
}

.pp-event-item.pending .pp-event-dot {
    background: #f9fafb;
    border-color: #d1d5db;
}

.pp-event-item.pending .pp-event-dot svg {
    color: #9ca3af;
}

/* Event card */
.pp-event-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
    transition: all 0.15s ease;
}

.pp-event-item.current .pp-event-card {
    background: #fff7ed;
    border-color: #fed7aa;
}

.pp-event-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Event header */
.pp-event-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.pp-event-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    font-family: "Lexend Deca", sans-serif;
}

.pp-event-item.current .pp-event-title {
    color: #c2410c;
}

.pp-event-date {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
    font-family: "Lexend Deca", sans-serif;
}

/* Event details */
.pp-event-details {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
    font-family: "Lexend Deca", sans-serif;
}

.pp-event-details .detail-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.pp-event-details .detail-label {
    color: #9ca3af;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pp-event-details .detail-value {
    color: #4b5563;
}

.pp-event-details .detail-email {
    color: #6b7280;
    font-size: 12px;
}

/* Empty state */
.pp-event-empty {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.pp-event-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.pp-event-empty p {
    font-size: 14px;
    margin: 0;
}

/* Badge for current stage */
.pp-event-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #fef3c7;
    color: #b45309;
    margin-left: 8px;
}

/* Responsive */
@media (max-width: 600px) {
    .pp-event-history {
        padding: 16px;
    }
    
    .pp-event-timeline {
        padding-left: 24px;
    }
    
    .pp-event-timeline::before {
        left: 7px;
    }
    
    .pp-event-dot {
        left: -24px;
        width: 18px;
        height: 18px;
    }
    
    .pp-event-dot svg {
        width: 10px;
        height: 10px;
    }
    
    .pp-event-item {
        padding-left: 16px;
    }
    
    .pp-event-header {
        flex-direction: column;
        gap: 4px;
    }
    
    .pp-event-date {
        font-size: 11px;
    }
}


/* Event history section - no separator needed as it's the main content */
#pp-event-history-section {
    margin-top: 0;
    padding-top: 0;
}

/* Ensure publish container has padding */
#publish-container {
    padding: 20px;
}

#publish-container:empty {
    display: none;
}

/* Publication Status / Visibility Section */
.approval-visibility-section {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 20px;
    margin: 20px;
}

.approval-visibility-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.approval-visibility-header svg {
    color: #22c55e;
}

.approval-visibility-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: #166534;
    margin: 0;
    font-family: "Lexend Deca", sans-serif;
}

.approval-visibility-help {
    font-size: 13px;
    color: #6b7280;
    margin: 8px 0 0 28px;
    font-family: "Lexend Deca", sans-serif;
}

.approval-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: "Lexend Deca", sans-serif;
}

.approval-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #22c55e;
    cursor: pointer;
}

.approval-checkbox span {
    font-size: 15px;
    color: #1f2937;
    font-weight: 500;
}

/* Published event special styling */
.pp-event-item.pp-event-published .pp-event-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #86efac;
}

.pp-event-item.pp-event-published .pp-event-dot {
    background: #22c55e;
    border-color: #22c55e;
}

/* Publish controls inside event card */
.pp-event-publish-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Toggle switch */
.pp-visibility-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: "Lexend Deca", sans-serif;
}

.pp-visibility-toggle input {
    display: none;
}

.pp-toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: #d1d5db;
    border-radius: 12px;
    transition: background 0.2s ease;
}

.pp-toggle-slider::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.pp-visibility-toggle input:checked + .pp-toggle-slider {
    background: #22c55e;
}

.pp-visibility-toggle input:checked + .pp-toggle-slider::after {
    transform: translateX(20px);
}

.pp-toggle-label {
    font-size: 13px;
    color: #374151;
    font-weight: 500;
}

/* View Story button */
.pp-view-story-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #22c55e;
    color: white;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease;
    font-family: "Lexend Deca", sans-serif;
}

.pp-view-story-btn:hover {
    background: #16a34a;
    color: white;
    text-decoration: none;
}

.pp-view-story-btn svg {
    flex-shrink: 0;
}

/* Responsive adjustments for publish controls */
@media (max-width: 500px) {
    .pp-event-publish-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* Fix double scrollbar on Approval tab - force single scrollbar */
/* Override EVERYTHING for publish-tab to ensure only ONE scrollbar */
#unified-details-modal #publish-tab.details-tab-content,
#unified-details-modal .details-tab-content#publish-tab {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
    max-height: 100% !important;
}

/* Ensure ALL children don't create their own scroll */
#unified-details-modal #publish-tab *,
#publish-tab * {
    overflow: visible !important;
    max-height: none !important;
}

/* But the publish-tab itself CAN scroll */
#unified-details-modal #publish-tab,
#publish-tab.details-tab-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Approval Document Styles */
.pp-approval-doc {
    margin-top: 16px;
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.pp-approval-doc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #059669;
    margin-bottom: 12px;
}

.pp-approval-doc-header.pp-approval-pending {
    color: #d97706;
}

.pp-approval-doc-header svg {
    flex-shrink: 0;
}

.pp-approval-note {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.pp-approval-preview {
    margin-bottom: 12px;
}

.pp-approval-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: transform 0.2s;
}

.pp-approval-preview img:hover {
    transform: scale(1.02);
}

.pp-approval-file {
    margin-bottom: 12px;
}

.pp-approval-file-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #374151;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.15s;
}

.pp-approval-file-link:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    text-decoration: none;
    color: #111827;
}

.pp-approval-upload-area {
    display: flex;
    align-items: center;
}

.pp-approval-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: white;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    color: #6b7280;
    font-size: 13px;
    font-family: "Lexend Deca", sans-serif;
    cursor: pointer;
    transition: all 0.15s;
}

.pp-approval-upload-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #374151;
}

.pp-approval-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: none;
    color: #dc2626;
    font-size: 12px;
    font-family: "Lexend Deca", sans-serif;
    cursor: pointer;
    transition: all 0.15s;
}

.pp-approval-delete:hover {
    background: #fef2f2;
    border-radius: 4px;
}

.pp-uploading {
    font-size: 13px;
    color: #6b7280;
    font-style: italic;
    margin: 0;
}

/* Done event special styling */
.pp-event-item.pp-event-done .pp-event-card {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
}

.pp-event-item.pp-event-done .pp-event-dot {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Approval confirmed state */
.pp-approval-doc.pp-approval-confirmed {
    background: #f0fdf4;
    border-color: #86efac;
}

/* Approval required state */
.pp-approval-doc.pp-approval-required {
    background: #fffbeb;
    border-color: #fcd34d;
}

/* Advocate Approved event special styling */
.pp-event-item.pp-event-approved .pp-event-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #86efac;
}

.pp-event-item.pp-event-approved .pp-event-dot {
    background: #22c55e;
    border-color: #22c55e;
}

/* Approval Record Styles */
.pp-approval-record {
    margin-top: 16px;
    padding: 16px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
}

.pp-approval-record.pp-approval-legacy {
    background: #f9fafb;
    border-color: #e5e7eb;
}

.pp-approval-record-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #059669;
    margin-bottom: 12px;
}

.pp-approval-legacy .pp-approval-record-header {
    color: #6b7280;
}

.pp-approval-record-details {
    font-size: 13px;
    color: #374151;
    margin-bottom: 12px;
}

.pp-approval-record-details div {
    margin-bottom: 4px;
}

.pp-approval-record-details strong {
    color: #1f2937;
}

.pp-view-approval-record {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #374151;
    font-size: 13px;
    font-family: "Lexend Deca", sans-serif;
    cursor: pointer;
    transition: all 0.15s;
}

.pp-view-approval-record:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

/* Approval Record Modal */
.pp-approval-record-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000020;
}

.pp-approval-record-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    z-index: 10000021;
}

.pp-approval-record-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.pp-approval-record-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.pp-approval-record-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.pp-approval-record-close:hover {
    color: #6b7280;
}

.pp-approval-record-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.pp-approval-record-section {
    margin-bottom: 20px;
}

.pp-approval-record-section:last-child {
    margin-bottom: 0;
}

.pp-approval-record-section h4 {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 6px 0;
}

.pp-approval-record-section p {
    font-size: 14px;
    color: #1f2937;
    margin: 0;
    line-height: 1.5;
}

.pp-approval-email {
    color: #6b7280 !important;
    font-size: 13px !important;
}

.pp-approval-agreement-text {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    max-height: 200px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.6;
    color: #4b5563;
}

.pp-approval-record-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 12px 12px;
}

.pp-approval-record-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #9C27B0;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 14px;
    font-family: "Lexend Deca", sans-serif;
    cursor: pointer;
    transition: background 0.15s;
}

.pp-approval-record-download:hover {
    background: #7B1FA2;
}

.pp-approval-record-close-btn {
    padding: 10px 16px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #374151;
    font-size: 14px;
    font-family: "Lexend Deca", sans-serif;
    cursor: pointer;
    transition: all 0.15s;
}

.pp-approval-record-close-btn:hover {
    background: #f9fafb;
}

/* Signature Display in Approval Record Modal */
.pp-signature-display {
    background: #fafbfc;
    border: 2px solid #1e3a5f;
    border-radius: 8px;
    padding: 16px 24px;
    margin: 8px 0;
    display: inline-block;
    min-width: 200px;
    text-align: center;
}

.pp-signature-text {
    font-family: 'Caveat', cursive;
    font-size: 32px;
    color: #1e3a5f;
    line-height: 1.2;
}

.pp-signature-timestamp {
    font-size: 11px !important;
    color: #9ca3af !important;
    margin-top: 4px;
}

/* Import signature font */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap');

/* ============================================
   MOBILE VIEWPORT FIX v2.5.17
   
   Fixes:
   1. Modal height using dvh units
   2. Remove word count from PPEditor
   3. Outline tab content overflow
   4. Timeline fitting in viewport
   5. Hide download buttons to save space
   6. Ensure Close button always visible
   ============================================ */

@media (max-width: 768px) {
    /* ===========================================
       FIX 1: Modal container height
       =========================================== */
    
    #unified-details-modal {
        height: 100% !important;
        height: 100dvh !important;
        height: -webkit-fill-available !important;
        max-height: 100dvh !important;
    }
    
    #unified-details-modal > .modal-content,
    #unified-details-modal .modal-content:not(#settings-modal):not(#settings-modal *) {
        height: 100% !important;
        height: 100dvh !important;
        height: -webkit-fill-available !important;
        max-height: 100dvh !important;
        max-height: -webkit-fill-available !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    #unified-details-modal > .modal-content > .modal-header {
        flex: 0 0 auto !important;
        min-height: 70px !important;
        max-height: 80px !important;
    }
    
    #unified-details-modal > .modal-content > .modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #unified-details-modal .details-tabs-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #unified-details-modal .details-tab-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 16px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Footer - ensure it's always visible */
    #unified-details-modal > .modal-content > .modal-footer {
        flex: 0 0 auto !important;
        min-height: 52px !important;
        max-height: 58px !important;
        padding: 8px 12px !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 100 !important;
    }
    
    /* ===========================================
       FIX 2: Hide word count in PPEditor
       =========================================== */
    
    .pp-editor-word-count {
        display: none !important;
    }
    
    /* ===========================================
       FIX 3: Outline tab - prevent horizontal overflow
       =========================================== */
    
    #unified-details-modal #outline-tab {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    #unified-details-modal #outline-tab > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #unified-details-modal .outline-content,
    #unified-details-modal .outline-form,
    #unified-details-modal .outline-real-content,
    #unified-details-modal .outline-minimal {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    #unified-details-modal .outline-form input,
    #unified-details-modal .outline-form select,
    #unified-details-modal .outline-form textarea {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* ===========================================
       FIX 4: Story Journey Timeline - scrollable
       =========================================== */
    
    #unified-details-modal .story-journey-container {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 8px !important;
        margin: 0 !important;
    }
    
    #unified-details-modal .story-journey-timeline {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 8px 0 !important;
        min-width: min-content !important;
        transform: none !important;
    }
    
    #unified-details-modal .story-journey-timeline .journey-stage,
    #unified-details-modal .story-journey-timeline .timeline-stage {
        padding: 4px 8px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    #unified-details-modal .story-journey-timeline .journey-connector,
    #unified-details-modal .story-journey-timeline .timeline-connector {
        width: 12px !important;
        min-width: 12px !important;
    }
    
    /* ===========================================
       FIX 5: Hide ALL download buttons on mobile
       Saves footer space, ensures Close is visible
       =========================================== */
    
    #unified-details-modal .download-button-container,
    #unified-details-modal #story-download-container,
    #unified-details-modal #transcript-download-container,
    #unified-details-modal #story-download-btn,
    #unified-details-modal #transcript-download-btn,
    #unified-details-modal #story-download-dropdown,
    #unified-details-modal #transcript-download-dropdown,
    #unified-details-modal .download-main-btn,
    #unified-details-modal .download-dropdown-btn,
    #unified-details-modal .modal-footer [id*="download"],
    #unified-details-modal .footer-buttons [id*="download"],
    #unified-details-modal .footer-buttons .download-button-container {
        display: none !important;
    }
    
    /* Also hide the dropdown chevron button next to download */
    #unified-details-modal .modal-footer button[id*="dropdown"],
    #unified-details-modal .footer-buttons button[id*="dropdown"] {
        display: none !important;
    }
    
    /* ===========================================
       FIX 6: LLM tabs - horizontal scroll
       =========================================== */
    
    #unified-details-modal .llm-tabs,
    #unified-details-modal .story-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 6px !important;
        padding-bottom: 4px !important;
        max-width: 100% !important;
    }
    
    #unified-details-modal .llm-tabs::-webkit-scrollbar,
    #unified-details-modal .story-tabs::-webkit-scrollbar {
        display: none !important;
    }
    
    #unified-details-modal .llm-tab-btn,
    #unified-details-modal .story-tab-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
    
    /* ===========================================
       FIX 7: Delete button as trash icon
       =========================================== */
    
    #unified-details-modal #details-delete-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
        border-radius: 6px !important;
        font-size: 0 !important;
        color: transparent !important;
        background: #fee2e2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3C/svg%3E") center center no-repeat !important;
        border: 1px solid #fca5a5 !important;
    }
    
    /* ===========================================
       FIX 8: Footer buttons - ensure Close visible
       =========================================== */
    
    #unified-details-modal .footer-buttons {
        gap: 8px !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
    }
    
    #unified-details-modal .modal-footer .modal-action-btn {
        height: 36px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
    
    /* Close button must always be visible */
    #unified-details-modal #details-close-btn {
        display: inline-flex !important;
        flex-shrink: 0 !important;
    }
    
    /* ===========================================
       FIX 9: Fullscreen editor
       =========================================== */
    
    #unified-details-modal .pp-editor-container.fullscreen,
    .pp-editor-container.fullscreen {
        height: 100dvh !important;
        height: -webkit-fill-available !important;
        max-height: 100dvh !important;
        padding-bottom: 60px !important;
    }
    
    /* ===========================================
       FIX 10: Transcript cards - compact
       =========================================== */
    
    .transcript-header {
        flex-wrap: wrap !important;
        gap: 6px 8px !important;
        padding: 10px 12px !important;
    }
    
    .transcript-name {
        flex: 0 0 100% !important;
        order: 10 !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin-top: 4px !important;
    }
    
    .transcript-date {
        display: none !important;
    }
    
    .transcript-translate-btn {
        font-size: 11px !important;
        padding: 4px 10px !important;
        height: 26px !important;
    }
    
    /* ===========================================
       FIX 11: Story/other tab content constraints
       =========================================== */
    
    #unified-details-modal #story-tab {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    #unified-details-modal #story-tab > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #unified-details-modal .pp-editor-container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    #unified-details-modal .pp-editor-toolbar {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
}