/* ================================================== */
/* == START: Contents for worddrop-app.css (Corrected) == */
/* == (Based on User's Original Standalone CSS)   == */
/* ================================================== */

/* --- Full CSS Code --- */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --light-grey: #f8f9fa;
    --medium-grey: #e9ecef;
    --dark-grey: #495057;
    --border-color: #ced4da;
    --danger-color: #dc3545;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --warning-dark-color: #e0a800;
    --card-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    --border-radius: 8px; /* Use a consistent radius */
    --right-panel-width: 280px; /* **Consistent Width** */
}

/* Basic Reset & Body Styling - Apply only within the app scope */
#worddrop-app-view * { box-sizing: border-box; margin: 0; padding: 0; }
#worddrop-app-view { /* Apply base font to the container */
    font-family: 'Roboto', sans-serif;
    color: var(--dark-grey);
    line-height: 1.5;
    height: 100%; /* Fill parent container */
    display: flex; /* Enable flex for layout */
    flex-direction: column;
    overflow: hidden; /* Prevent container overflow */
    background-color: #ffffff; /* App background */
    /* border-radius: 8px; /* Optional: Match shell module radius */
    /* box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Optional shadow */
}

/* Removed body styles specific to standalone */
/* body { ... } */

/* Removed Main App Container styles specific to standalone */
/* .word-drop-app { ... } */

/* --- Styles scoped to elements WITHIN #worddrop-app-view --- */

/* Tab Navigation */
#worddrop-app-view .tab-nav {
    display: flex; border-bottom: 1px solid var(--medium-grey); padding: 0 20px; flex-shrink: 0;
    background-color: #fff;
    /* Removed border-top-radius for integration */
     overflow-x: auto; /* Allow horizontal scroll on mobile if needed */
     white-space: nowrap;
}
#worddrop-app-view .tab-link {
    padding: 12px 18px; /* Slightly less padding */ cursor: pointer; border: none; background: none; font-size: 14px; /* Slightly smaller */ font-weight: 500;
    color: var(--secondary-color); border-bottom: 3px solid transparent; transition: color 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0; /* Prevent shrinking */
}
#worddrop-app-view .tab-link:hover { color: var(--primary-color); }
#worddrop-app-view .tab-link.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }

/* Tab Content Area */
#worddrop-app-view .tab-content-area {
    flex-grow: 1; /* Take remaining height */
    overflow: hidden; /* Let tabs handle internal scroll */
    position: relative;
}
#worddrop-app-view .tab-content {
    display: none; /* Hide inactive tabs */
    height: 100%;
    overflow: hidden; /* Base overflow setting */
    /* Position static is fine, only active one is displayed */
}
#worddrop-app-view .tab-content.active { display: block; } /* Show active tab */

/* Common Grid Layout for Tabs with Right Panel */
#worddrop-app-view .two-panel-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--right-panel-width);
    gap: 20px;
    height: 100%; /* Fill tab content area */
    padding: 20px; /* Padding inside the tab content */
}
 #worddrop-app-view .left-panel-area {
     display: flex; flex-direction: column; gap: 15px; height: 100%;
     overflow: hidden; background-color: var(--light-grey);
     border-radius: var(--border-radius); padding: 20px;
 }
 #worddrop-app-view .right-panel-area {
     display: flex; flex-direction: column; gap: 15px; /* Consistent gap */ height: 100%;
     overflow-y: auto; /* Allow this panel to scroll */ background-color: #fff; border-radius: var(--border-radius);
     padding: 20px; border: 1px solid var(--medium-grey);
 }

/* --- Dictation Tab --- */
#worddrop-app-view #dictation-tab { padding: 0; } /* Padding handled by grid */
#worddrop-app-view .mic-wrapper { position: relative; display: flex; justify-content: center; align-items: center; margin-bottom: 10px; flex-shrink: 0; }
#worddrop-app-view .mic-button { background-color: var(--medium-grey); color: var(--secondary-color); border: none; border-radius: 50%; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 36px; transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; position: relative; z-index: 2; }
#worddrop-app-view .mic-button:hover { background-color: #dee2e6; }
#worddrop-app-view .mic-button.active { background-color: var(--primary-color); color: #ffffff; box-shadow: 0 0 15px rgba(0, 123, 255, 0.5); }
#worddrop-app-view .mic-button.active:hover { background-color: #0056b3; }
#worddrop-app-view .mic-pulse { position: absolute; width: 80px; height: 80px; border-radius: 50%; background-color: rgba(0, 123, 255, 0.5); transform: scale(1); opacity: 0; z-index: 1; pointer-events: none; }
#worddrop-app-view .mic-pulse.active { animation: wd-pulse 1.5s infinite ease-out; } /* Use prefixed animation name */
@keyframes wd-pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.8); opacity: 0; } } /* Use prefixed animation name */
#worddrop-app-view #dictate-textarea { width: 100%; flex-grow: 1; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 15px; font-size: 16px; resize: none; background-color: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); overflow-y: auto; font-family: 'Roboto', sans-serif; line-height: 1.6;}
#worddrop-app-view #dictate-textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2), inset 0 1px 2px rgba(0,0,0,0.05); }
#worddrop-app-view .control-panel { /* Base styles apply via .right-panel-area */ }
#worddrop-app-view .control-section { margin-bottom: 15px; } /* Spacing for sections */
#worddrop-app-view .info-section { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px dashed var(--medium-grey); }
#worddrop-app-view .info-item { text-align: center; }
#worddrop-app-view .control-label { display: block; font-weight: 500; margin-bottom: 6px; color: var(--secondary-color); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
#worddrop-app-view .control-display { font-size: 1.1em; font-weight: 500; color: var(--primary-color); display: inline-block; min-width: 55px; }
#worddrop-app-view .sound-controls { display: flex; align-items: center; gap: 10px; }
#worddrop-app-view .toggle-button { background-color: var(--light-grey); border: 1px solid var(--border-color); color: var(--secondary-color); border-radius: 50%; width: 34px; height: 34px; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; font-size: 14px; transition: all 0.2s ease; flex-shrink: 0; }
#worddrop-app-view .toggle-button:hover { border-color: var(--secondary-color); }
#worddrop-app-view .toggle-button.active { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); }
#worddrop-app-view #volume-slider { flex-grow: 1; cursor: pointer; accent-color: var(--primary-color); height: 5px;}
#worddrop-app-view #volume-slider:disabled { opacity: 0.5; cursor: not-allowed; }
#worddrop-app-view .utility-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#worddrop-app-view .control-button { background-color: var(--secondary-color); color: #fff; border: none; border-radius: var(--border-radius); padding: 9px 12px; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background-color 0.2s ease, transform 0.1s ease; white-space: nowrap; }
#worddrop-app-view .control-button i { font-size: 1.1em; }
#worddrop-app-view .control-button:hover { background-color: var(--dark-grey); transform: translateY(-1px); }
#worddrop-app-view .control-button:active { transform: translateY(0); }
#worddrop-app-view #save-btn { background-color: var(--success-color); } #worddrop-app-view #save-btn:hover { background-color: #218838; }
#worddrop-app-view #clear-text { background-color: var(--danger-color); } #worddrop-app-view #clear-text:hover { background-color: #c82333; }
#worddrop-app-view #copy-text {}
#worddrop-app-view #send-editor-btn { background-color: var(--warning-color); color: #333; } #worddrop-app-view #send-editor-btn:hover { background-color: var(--warning-dark-color); }
#worddrop-app-view .audio-recorder-row { border-top: 1px dashed var(--medium-grey); padding-top: 15px; margin-top: 15px; }
#worddrop-app-view .audio-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px;}
#worddrop-app-view .audio-buttons { display: flex; gap: 8px; }
#worddrop-app-view .audio-button { background-color: #fff; border: 1px solid var(--border-color); color: var(--secondary-color); border-radius: var(--border-radius); padding: 6px 10px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all 0.2s ease; }
#worddrop-app-view .audio-button i { font-size: 1em; } #worddrop-app-view .audio-button:hover { border-color: var(--dark-grey); color: var(--dark-grey); } #worddrop-app-view .audio-button:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--medium-grey); }
#worddrop-app-view #record-audio-btn { color: var(--danger-color); border-color: var(--danger-color);} #worddrop-app-view #record-audio-btn.recording { background-color: var(--danger-color); color: #fff;}
#worddrop-app-view #pause-audio-btn { color: var(--primary-color); border-color: var(--primary-color);} #worddrop-app-view #pause-audio-btn.paused { background-color: var(--primary-color); color: #fff;}
#worddrop-app-view #stop-audio-btn { color: var(--secondary-color); border-color: var(--secondary-color);}
#worddrop-app-view .audio-status { font-size: 13px; color: var(--secondary-color); } #worddrop-app-view .audio-status.recording { color: var(--danger-color); font-weight: 500; }

/* --- Editor Tab --- */
#worddrop-app-view #editor-tab { padding: 0; height: 100%; } /* Padding handled by grid */
#worddrop-app-view #editor-area { width: 100%; flex-grow: 1; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 15px; font-size: 16px; font-family: sans-serif; resize: none; background-color: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); overflow-y: auto; line-height: 1.6; }
#worddrop-app-view #editor-area:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2), inset 0 1px 2px rgba(0,0,0,0.05); }
#worddrop-app-view .formatting-toolbar { /* Base styles */ }
#worddrop-app-view .toolbar-section { margin-bottom: 15px; } .toolbar-section:last-child { margin-bottom: 0; }
#worddrop-app-view .toolbar-label { margin-bottom: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; color: var(--secondary-color); }
#worddrop-app-view .button-group { display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--medium-grey); }
#worddrop-app-view .toolbar-section:last-of-type .button-group:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
#worddrop-app-view .format-button { background: var(--light-grey); border: 1px solid var(--border-color); color: var(--dark-grey); border-radius: 5px; width: 32px; height: 32px; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; font-size: 15px; transition: all 0.2s ease; flex-shrink: 0; }
#worddrop-app-view .format-button:hover { background-color: var(--medium-grey); border-color: var(--secondary-color); }
#worddrop-app-view .format-button.active { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); }
#worddrop-app-view .format-button i { line-height: 1; }
#worddrop-app-view .font-controls-group { display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--medium-grey); }
#worddrop-app-view .font-controls-group .format-button { width: 32px; height: 32px; }
#worddrop-app-view .font-controls-group .format-button.has-more::after { content: '\f0d7'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.6em; margin-left: 3px; opacity: 0.6; vertical-align: middle; }
#worddrop-app-view .color-button { position: relative; }
#worddrop-app-view .color-swatch { display: block; width: 12px; height: 4px; border-radius: 2px; background-color: currentColor; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); border: 1px solid rgba(0,0,0,0.1); }
#worddrop-app-view .editor-utilities { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--medium-grey); display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
#worddrop-app-view .editor-utilities .control-button { padding: 8px 10px; font-size: 13px; }
#worddrop-app-view #save-rtf-btn { background-color: var(--primary-color); } #worddrop-app-view #save-rtf-btn:hover { background-color: #0056b3; }
#worddrop-app-view #editor-clear-all { background-color: var(--danger-color); } #worddrop-app-view #editor-clear-all:hover { background-color: #c82333; }
#worddrop-app-view #editor-copy-all { background-color: var(--secondary-color); } #worddrop-app-view #editor-copy-all:hover { background-color: var(--dark-grey); }

/* --- Read It Tab --- */
#worddrop-app-view #read-tab { padding: 0; height: 100%; } /* Padding handled by grid */
#worddrop-app-view #textToRead { width: 100%; flex-grow: 1; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 15px; font-size: 16px; resize: none; background-color: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); overflow-y: auto; line-height: 1.6; }
#worddrop-app-view #textToRead:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2), inset 0 1px 2px rgba(0,0,0,0.05); }
#worddrop-app-view .readit-controls-section { display: flex; flex-direction: column; gap: 15px; margin-bottom: 15px; }
#worddrop-app-view .readit-controls-section:last-child { margin-bottom: 0; }
#worddrop-app-view .readit-language-select { width: 100%; padding: 8px 10px; font-size: 14px; border-radius: var(--border-radius); border: 1px solid var(--border-color); background-color: var(--light-grey); cursor: pointer; }
#worddrop-app-view .readit-button { background-color: var(--secondary-color); color: #fff; border: none; border-radius: var(--border-radius); padding: 9px 12px; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background-color 0.2s ease, transform 0.1s ease; white-space: nowrap; width: 100%; }
#worddrop-app-view .readit-button:hover { background-color: var(--dark-grey); transform: translateY(-1px); }
#worddrop-app-view .readit-button i { font-size: 1.1em; }
#worddrop-app-view #readFromClipboard { background-color: var(--primary-color); } #worddrop-app-view #readFromClipboard:hover { background-color: #0056b3; }
#worddrop-app-view #readitStatus { font-size: 13px; color: var(--secondary-color); text-align: center; margin-top: 10px; height: 1.5em; /* Reserve space */ }

/* --- Dashboard Tab (Within Word Drop App) --- */
#worddrop-app-view #dashboard-tab {
    padding: 0; /* No padding on the tab content itself */
    height: 100%;
    overflow: hidden; /* Let inner container scroll */
    display: flex;
    flex-direction: column;
    background-color: var(--light-grey); /* Background for the tab */
}
#worddrop-app-view #dashboard-tab .dashboard-header {
    margin: 0; /* Remove margin */
    padding: 20px; /* Add padding */
    border-bottom: 1px solid var(--medium-grey);
    flex-shrink: 0; /* Prevent header from shrinking */
    background-color: #fff; /* White background for header */
}
#worddrop-app-view #dashboard-tab .dashboard-header h2 { font-size: 1.4em; color: var(--dark-grey); margin: 0; }
#worddrop-app-view #dashboard-tab .dashboard-table-container {
    width: 100%;
    overflow: auto; /* Allow scroll WITHIN this container */
    flex-grow: 1; /* Take remaining space */
    padding: 20px; /* Padding around the table */
}
#worddrop-app-view #dashboard-tab .dashboard-table {
    width: 100%; border-collapse: separate; font-size: 14px;
    border-spacing: 0; /* Needed for border-radius */
    background-color: #fff; /* Table background */
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden; /* Clip for radius */
}
#worddrop-app-view #dashboard-tab .dashboard-table th,
#worddrop-app-view #dashboard-tab .dashboard-table td {
    padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--medium-grey);
    
    /* === CSS CONTINUATION - PASTE THIS AFTER THE td RULE === */

            white-space: nowrap; /* Prevent wrapping */
        }
        #worddrop-app-view #dashboard-tab .dashboard-table tbody tr:last-child td {
            border-bottom: none; /* Remove border on last row */
        }
        #worddrop-app-view #dashboard-tab .dashboard-table thead th {
            background-color: var(--light-grey); font-weight: 500; color: var(--secondary-color);
            text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px;
            position: sticky; top: 0; /* Make header sticky */
            z-index: 1; /* Ensure header stays on top */
             border-bottom-width: 2px; /* Thicker bottom border for header */
             border-bottom-color: var(--medium-grey);
        }
        #worddrop-app-view #dashboard-tab .dashboard-table tbody tr:hover { background-color: #f8f9fa; }
        #worddrop-app-view #dashboard-tab .dashboard-actions a,
        #worddrop-app-view #dashboard-tab .dashboard-actions button {
            color: var(--primary-color); text-decoration: none; margin-right: 10px; cursor: pointer;
            background: none; border: none; padding: 0; font-size: inherit;
            vertical-align: middle;
            transition: color 0.2s ease;
        }
        #worddrop-app-view #dashboard-tab .dashboard-actions a:hover,
        #worddrop-app-view #dashboard-tab .dashboard-actions button:hover {
             /* text-decoration: underline; */ /* Optional */
             color: #0056b3;
         }
        #worddrop-app-view #dashboard-tab .dashboard-actions .delete-btn { color: var(--danger-color); }
        #worddrop-app-view #dashboard-tab .dashboard-actions .delete-btn:hover { color: #c82333; }
        #worddrop-app-view #dashboard-tab .dashboard-actions i {
             margin-right: 4px; /* Icon spacing in actions */
             font-size: 1.1em; /* Ensure icons are visible */
        }

        /* --- Responsive Adjustments (Scoped to WD App) --- */
        @media (max-width: 992px) { /* Tablet: Stack */
             /* Styles for two-panel grid stacking */
             #worddrop-app-view .two-panel-grid {
                 grid-template-columns: 1fr;
                 height: auto; /* Allow natural height */
                 padding: 15px;
                 gap: 15px;
             }
             #worddrop-app-view .left-panel-area {
                 order: 0;
                 min-height: 35vh; /* Adjust as needed */
                 height: auto;
                 padding: 15px;
                 overflow: visible; /* Let content flow */
             }
             #worddrop-app-view #dictate-textarea {
                 overflow-y: auto; /* Ensure textarea scrolls if needed */
                 min-height: 150px; /* Give textarea min height */
             }
             #worddrop-app-view .right-panel-area {
                 order: 1;
                 margin-top: 0;
                 max-height: none;
                 height: auto;
                 overflow-y: visible; /* Let content flow */
                 padding: 15px;
                 gap: 12px;
             }
             /* Tablet adjustments for WD Dashboard tab */
             #worddrop-app-view #dashboard-tab .dashboard-header { padding: 15px; }
             #worddrop-app-view #dashboard-tab .dashboard-table-container { padding: 15px; }
             #worddrop-app-view #dashboard-tab .dashboard-table th,
             #worddrop-app-view #dashboard-tab .dashboard-table td { padding: 10px 12px; }
        }

        @media (max-width: 576px) { /* Mobile */
             /* Adjust grid layout for mobile */
             #worddrop-app-view .two-panel-grid { padding: 10px; gap: 10px; }
             #worddrop-app-view .left-panel-area { padding: 15px; min-height: 30vh;}
             #worddrop-app-view .right-panel-area { padding: 15px; gap: 10px; }

             /* Mobile adjustments for Dictation controls */
             #worddrop-app-view .utility-buttons { grid-template-columns: 1fr 1fr; gap: 8px;}
             #worddrop-app-view .info-section { flex-direction: column; gap: 10px; align-items: stretch; padding-bottom: 10px;}
             #worddrop-app-view .control-label { text-align: center; }
             #worddrop-app-view .control-display { text-align: center; display: block; min-width: 0;}
             #worddrop-app-view .audio-controls { flex-direction: column; align-items: stretch; gap: 8px; }
             #worddrop-app-view .audio-buttons { justify-content: center; }
             #worddrop-app-view .audio-recorder-row { margin-top: 10px; padding-top: 10px; }

             /* Mobile adjustments for tabs and mic */
             #worddrop-app-view .tab-link { padding: 10px 12px; font-size: 13px;}
             #worddrop-app-view .mic-button { width: 65px; height: 65px; font-size: 28px; }
             #worddrop-app-view .mic-pulse { width: 65px; height: 65px; }

             /* Mobile adjustments for Editor */
             #worddrop-app-view .format-button { width: 30px; height: 30px; font-size: 14px;}
             #worddrop-app-view .button-group { gap: 4px; }
             #worddrop-app-view .toolbar-label { font-size: 10px; }
             #worddrop-app-view .editor-utilities { grid-template-columns: 1fr 1fr; gap: 8px; }

             /* Mobile adjustments for WD Dashboard tab */
             #worddrop-app-view #dashboard-tab .dashboard-header { padding: 15px; }
             #worddrop-app-view #dashboard-tab .dashboard-header h2 { font-size: 1.2em; }
             #worddrop-app-view #dashboard-tab .dashboard-table-container { padding: 10px; }
             #worddrop-app-view #dashboard-tab .dashboard-table { font-size: 12px; }
             #worddrop-app-view #dashboard-tab .dashboard-table th,
             #worddrop-app-view #dashboard-tab .dashboard-table td { padding: 8px 10px; }
             #worddrop-app-view #dashboard-tab .dashboard-actions a,
             #worddrop-app-view #dashboard-tab .dashboard-actions button { margin-right: 8px; }
             #worddrop-app-view #dashboard-tab .dashboard-actions i { font-size: 1.2em; margin-right: 2px; }
        }

/* ================================================ */
/* == END: Contents for worddrop-app.css (Corrected) == */
/* ================================================ */