/* assets/css/style.css */

/* Root Variables */
:root {
  --primary-color: #2271b1; /* Updated WP Blue */
  --primary-hover: #1e639a;
  --secondary-color: #f0f0f1; /* WP Light Grey */
  --secondary-hover: #e1e1e3;
  --accent-color: #d63638; /* WP Red */
  --text-dark: #1d2327;
  --text-medium: #3c434a; /* WP Grey */
  --text-light: #50575e; /* WP Lighter Grey */
  --error-color: #d63638;
  --success-color: #00a32a; /* WP Green */
  --border-color: #ccd0d4; /* WP Medium Grey Border */
  --shadow-color: rgba(0, 0, 0, 0.08);
  --background-light: #f6f7f7; /* WP Lighter Background */
  --background-medium: #f0f0f1;
  --background-white: #fff;
  --border-radius: 3px; /* WP Standard Radius */
  --spacing-unit: 16px; /* Adjusted spacing */
  --font-size-base: 14px;
  --font-size-large: 24px;
  --font-size-medium: 18px;
  --font-size-small: 12px;
  --line-height: 1.6;
}

/* --- Auto Generate Overlay Styling --- */
#auto-generate-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10000;
  color: #fff;
  align-items: center; /* Flexbox alignment properties */
  justify-content: center;
}

/* General Body & Links */
#wai-book-gen-container a { color: var(--primary-color); text-decoration: none; }
#wai-book-gen-container a:hover { color: var(--primary-hover); text-decoration: underline; }

/* Base Container */
.wai-container {
  max-width: 900px;
  margin: calc(var(--spacing-unit) * 2) auto;
  padding: calc(var(--spacing-unit) * 1.5);
  background: var(--background-white);
  border-radius: var(--border-radius);
  box-shadow: 0 1px 3px var(--shadow-color);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

/* Header */
.wai-header {
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 1.5);
  padding-bottom: var(--spacing-unit);
  border-bottom: 1px solid var(--border-color);
}
.wai-header h2 {
  font-size: var(--font-size-large);
  color: var(--text-dark);
  margin: 0 0 calc(var(--spacing-unit) / 2);
  font-weight: 600;
}
.wai-login-notice { /* Style reused for error panel */
  font-size: var(--font-size-base);
  color: var(--text-light);
  background-color: var(--background-light);
  padding: var(--spacing-unit);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  margin-top: var(--spacing-unit);
}
.wai-error-panel {
  color: var(--error-color);
  background-color: #fef1f1; /* Lighter red background */
  border: 1px solid var(--error-color);
  padding: var(--spacing-unit);
  margin-top: var(--spacing-unit);
  border-radius: var(--border-radius);
  text-align: left;
}

/* Login Overlay */
#wai-login-required-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.75); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
}
.wai-login-box {
  background-color: var(--background-white); padding: calc(var(--spacing-unit) * 2);
  border-radius: var(--border-radius); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center; max-width: 400px; width: 90%;
}
.wai-login-box h2 { margin-top: 0; margin-bottom: var(--spacing-unit); color: var(--text-dark); font-size: var(--font-size-medium); }
.wai-login-box p { margin-bottom: calc(var(--spacing-unit) * 1.5); color: var(--text-medium); }
.wai-login-box .wai-btn { margin: 5px; }
.wai-content-obscured { filter: blur(5px); /* ... */ }

/* Wizard Structure */
.wai-wizard-nav {
  display: flex; justify-content: center; flex-wrap: wrap; /* Allow wrapping */
  margin-bottom: calc(var(--spacing-unit) * 1.5);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0; /* Remove padding, border handles spacing */
}
.wai-step-nav-btn {
  background: none; border: none;
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.2);
  cursor: pointer; font-size: var(--font-size-base);
  color: var(--text-medium); /* Slightly darker inactive */
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  margin-bottom: -1px; /* Overlap border */
  position: relative; /* For z-index */
}
.wai-step-nav-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  font-weight: 600;
  z-index: 1; /* Bring active tab above border */
}
.wai-step-nav-btn:hover:not(.active) { color: var(--primary-hover); }

.wai-wizard-step { display: none; animation: fadeIn 0.4s ease-in-out; }
.wai-wizard-step.active { display: block; }
.wai-wizard-step h3 {
  font-size: var(--font-size-medium); color: var(--text-dark);
  margin-top: var(--spacing-unit); /* Add space above step title */
  margin-bottom: var(--spacing-unit);
  padding-bottom: calc(var(--spacing-unit) / 2);
  border-bottom: 1px solid var(--border-color); /* Lighter border */
  font-weight: 500; /* Less heavy */
}

/* Wizard Navigation Buttons (Prev/Next) */
.wai-wizard-buttons {
  margin-top: calc(var(--spacing-unit) * 1.5);
  padding-top: var(--spacing-unit);
  border-top: 1px solid var(--border-color);
  display: flex; justify-content: space-between;
}



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

/* Sections and Grids */
.section-divider {
    margin-top: calc(var(--spacing-unit) * 1.5);
    padding-top: calc(var(--spacing-unit) * 1.5);
    border-top: 1px dashed #dcdcde; /* Lighter dash */
}
.section-divider h4 {
    margin-top: 0; margin-bottom: var(--spacing-unit);
    font-size: 1.05em; /* Slightly smaller */ color: var(--text-medium);
    font-weight: 500;
}
.wai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-unit); }

/* Form Elements */
.wai-form-group { margin-bottom: var(--spacing-unit); }
.wai-form-group label {
  display: block; font-weight: 500; /* Regular weight */
  color: var(--text-medium); margin-bottom: 6px;
  font-size: var(--font-size-base);
}
.wai-form-group .required { color: var(--error-color); margin-left: 2px; font-weight: 500; }

.wai-form-group input[type="text"],
.wai-form-group input[type="number"],
.wai-form-group input[type="password"],
.wai-form-group select,
.wai-form-group textarea {
  width: 100%; padding: 8px 10px; /* WP standard padding */
  border: 1px solid var(--border-color); border-radius: var(--border-radius);
  font-size: var(--font-size-base); box-sizing: border-box;
  transition: border-color 0.1s linear, box-shadow 0.1s linear;
  background-color: var(--background-white); color: var(--text-dark);
}
.wai-form-group select { height: 38px; /* Match input height */ } /* Adjust if needed */
.wai-form-group input:focus,
.wai-form-group select:focus,
.wai-form-group textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
    outline: 2px solid transparent; /* WP focus style */
}
.wai-form-group input[type="number"] { max-width: 100px; }
.wai-full-width { grid-column: 1 / -1; }
.wai-note { font-size: var(--font-size-small); color: var(--text-light); margin-top: 6px; display: block; }
.wai-error { font-size: var(--font-size-small); color: var(--error-color); margin-top: 5px; }

/* Checkboxes */
.wai-checkbox { display: flex; align-items: center; margin: calc(var(--spacing-unit) / 2) 0; }
.wai-checkbox input[type="checkbox"] { margin-right: 8px; height: 16px; width: 16px; }
.wai-checkbox span { font-size: var(--font-size-base); color: var(--text-medium); }
.wai-checkbox label { margin-bottom: 0; font-weight: normal; display: flex; align-items: center; cursor: pointer; }
.wai-checkbox label span:last-child { margin-left: 5px; }

/* Title Generation Area */
.wai-title-group { display: flex; gap: var(--spacing-unit); align-items: center; }
.wai-title-group input[type="text"] { flex-grow: 1; }
.wai-title-ideas {
  margin-top: var(--spacing-unit); padding: var(--spacing-unit);
  background: var(--background-light); border: 1px solid var(--border-color);
  border-radius: var(--border-radius); max-height: 200px; overflow-y: auto;
}
.wai-title-ideas ul { list-style: none; padding: 0; margin: 0; }
.wai-title-ideas li {
  margin: 0; padding: 8px 0; /* Slightly more padding */ color: var(--text-dark);
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #e7e7e9; /* Lighter border */
}
.wai-title-ideas li:last-child { border-bottom: none; }
.wai-title-ideas .use-title-btn {
    padding: 3px 8px; font-size: 11px; line-height: 1;
    margin-left: var(--spacing-unit); flex-shrink: 0;
}

/* Buttons */
.wai-btn, .wai-modal .button, .user-book-manager .button {
  padding: 8px 14px; /* Adjusted padding */ border: 1px solid transparent; /* Base border */
  border-radius: var(--border-radius); font-size: var(--font-size-base);
  cursor: pointer; transition: all 0.15s ease-in-out; /* Smoother transition */
  line-height: 1.5; text-align: center; display: inline-flex; /* Align icon+text */
  align-items: center; justify-content: center; gap: 6px; /* Space between icon & text */
  vertical-align: middle; font-weight: 500;
}
.wai-btn .dashicons { font-size: 18px; line-height: 1; /* Adjust icon alignment */ }
.wai-btn:disabled, .wai-modal .button:disabled, .user-book-manager .button:disabled {
    background-color: #a0a5aa !important; /* Use important to override specificity */
    border-color: #a0a5aa !important;
    color: #fff !important; cursor: not-allowed; opacity: 0.7;
    box-shadow: none !important;
}

/* --- Pulsating Animation --- */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 113, 177, 0.7); /* Use primary color */
  }
  70% {
    transform: scale(1.03); /* Slightly larger */
    box-shadow: 0 0 0 10px rgba(34, 113, 177, 0); /* Fade out shadow */
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 113, 177, 0);
  }
}

/* Class to apply the animation */
.wai-btn-next-action {
  animation: pulse 1.5s infinite;
  /* Ensure primary button styles are applied */
  background: var(--primary-color) !important;
  color: #fff !important;
  border-color: var(--primary-hover) !important;
}

/* Override default hover effect slightly while pulsing if needed */
.wai-btn-next-action:hover:not(:disabled) {
    background: var(--primary-hover) !important;
    transform: scale(1.03); /* Keep scale consistent */
}

/* --- Overlay Styles --- */
#docx-popup-overlay {
  display: none; /* Start hidden */
  position: fixed; /* Crucial for full screen */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85); /* Slightly darker */
  z-index: 100000 !important; /* Very high z-index, use !important to force override */
  color: #fff;
  /* Flexbox for centering */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

#docx-popup-message {
  font-size: 1.6em; /* Slightly larger text */
  font-weight: bold;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5); /* Optional inner background */
  border-radius: 5px;
}
/* --- Button Contrast Fix --- */
.wai-btn-primary {
  background: var(--primary-color);
  color: #fff !important; /* Ensure white text */
  border-color: var(--primary-color);
  box-shadow: 0 1px 1px var(--shadow-color);
}

/* Ensure disabled primary buttons also have white text */
.wai-btn-primary:disabled,
.wai-btn-primary.disabled { /* Add .disabled class check too */
    background-color: #a0a5aa !important;
    border-color: #a0a5aa !important;
    color: #fff !important; /* Keep text white */
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none !important;
}

/* Style for the "Preparing..." state */
.wai-btn.wai-btn-preparing {
  cursor: wait; /* Indicate waiting */
  opacity: 0.8;
}
.wai-btn.wai-btn-preparing .dashicons-update {
  margin-right: 6px; /* Add space between spinner and text */
}

.wai-btn-primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); box-shadow: 0 2px 3px rgba(0,0,0,0.1); }
.wai-btn-secondary {
  background: var(--secondary-color); color: var(--text-medium);
  border-color: var(--border-color);
}
.wai-btn-secondary:hover:not(:disabled) { background: var(--secondary-hover); border-color: #adadad; color: var(--text-dark); }

.wai-button-group, .wai-actions { margin-top: var(--spacing-unit); display: flex; flex-wrap: wrap; gap: var(--spacing-unit); }
.wai-actions { justify-content: center; margin: calc(var(--spacing-unit) * 1.5) 0; padding-top: var(--spacing-unit); border-top: 1px solid var(--border-color); }
.main-actions { padding: var(--spacing-unit) 0; } /* Actions in Step 4 */

/* Editor Controls */
.wai-editor-controls { margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.wai-editor-controls .wai-btn { padding: 4px 8px; font-size: 11px; line-height: 1; font-weight: normal; }
.wai-editor-controls .wai-note { margin-top: 0; margin-left: var(--spacing-unit); }

/* Progress and Feedback */
.wai-progress { /* Legacy container for outline/status */
  margin-top: var(--spacing-unit); padding: var(--spacing-unit);
  background: var(--background-light); border: 1px solid var(--border-color);
  border-radius: var(--border-radius); min-height: 50px; /* Smaller min-height */
}
.wai-progress-container { /* Bar container */
    margin: var(--spacing-unit) 0; padding: var(--spacing-unit);
    background: var(--background-light); border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
.wai-progress-bar { background-color: #e1e1e3; border-radius: var(--border-radius); padding: 2px; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); height: 24px; }
.wai-progress-bar .progress-fill {
    height: 18px; background-color: var(--primary-color);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 30px 30px; border-radius: 2px;
    width: 0%; transition: width 0.5s ease-out; display: block;
}
.wai-progress-text { text-align: center; margin-bottom: 5px; font-weight: 600; color: var(--text-dark); font-size: 0.95em; }
.wai-progress-status { text-align: center; margin-top: 5px; font-size: 0.9em; color: var(--text-light); }

/* Outline Display */
.wai-outline-display {
    margin-top: var(--spacing-unit); padding: var(--spacing-unit);
    background: var(--background-white); border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
.wai-outline-display h4 {
    margin-top: 0; margin-bottom: var(--spacing-unit); font-size: 1.1em;
    color: var(--text-dark); border-bottom: 1px solid #eee; padding-bottom: 8px;
    font-weight: 500; display: flex; align-items: center; gap: 8px;
}
#book-outline ul { list-style: none; padding-left: 0; }
#book-outline .wai-chapter-item { margin-bottom: calc(var(--spacing-unit) + 5px); border-left: 3px solid var(--primary-color); padding-left: var(--spacing-unit); }
#book-outline .wai-chapter-item > strong { font-size: 1.1em; font-weight: 600; }
#book-outline .wai-section-list { padding-left: var(--spacing-unit); list-style: none; margin-top: 8px; } /* No list style */
#book-outline .wai-section-item { margin-bottom: 10px; padding-left: var(--spacing-unit); border-left: 2px solid #ddd; }
#book-outline .wai-section-item > em { font-weight: 500; font-style: normal; } /* Non-italic section */
#book-outline .wai-subsection-list { padding-left: var(--spacing-unit); list-style: none; margin-top: 8px; }
#book-outline .wai-subsection { margin-bottom: 8px; padding: 8px; border-radius: var(--border-radius); transition: background-color 0.2s; border: 1px solid transparent; }
#book-outline .wai-subsection:hover { background-color: #f8f9fa; border-color: #eee; }
#book-outline .wai-subsection [contenteditable="true"] { border-bottom: 1px dotted #999; padding: 1px 3px; cursor: text; background: #fff; }
#book-outline .wai-subsection [contenteditable="true"]:focus { outline: 1px solid var(--primary-color); background: #fff; border-bottom: 1px solid var(--primary-color); box-shadow: 0 0 3px rgba(34,113,177,0.3); }
#book-outline .wai-outline-label { font-size: 0.85em; color: var(--text-light); margin-left: 5px; }
#book-outline .wai-summary-label { font-size: 0.9em; color: var(--text-light); margin-right: 4px; font-weight: 500; }
#book-outline .wai-subsection-summary-container { margin-left: calc(var(--spacing-unit) / 2); margin-top: 4px; font-size: 0.9em; }
#book-outline .wai-subsection-content-preview { display: none; margin-left: calc(var(--spacing-unit) / 2); margin-top: 10px; padding: var(--spacing-unit); border: 1px dashed var(--border-color); background: var(--background-light); max-height: 250px; overflow-y: auto; font-size: 0.95em; line-height: 1.5; border-radius: var(--border-radius); }
#book-outline .view-subsection-content { cursor: pointer; /* text-decoration: underline; */ /* text-decoration-style: dotted; */ } /* Remove underline, editable provides cue */
#book-outline .wai-sub-status { font-size: 0.8em; margin-left: 10px; font-weight: 600; text-transform: uppercase; }
#book-outline .wai-sub-status[data-status="pending"] { color: var(--text-light); }
#book-outline .wai-sub-status[data-status="writing"] { color: var(--primary-color); }
#book-outline .wai-sub-status[data-status="complete"] { color: var(--success-color); }
#book-outline .wai-sub-status[data-status="error"] { color: var(--error-color); }

.wai-status-log { margin-top: var(--spacing-unit); padding-top: var(--spacing-unit); border-top: 1px dashed #eee; font-size: 0.9em; color: var(--text-light); }
.wai-status-log p { margin: 5px 0; }
#download-book-bottom-container { text-align: center; margin-top: calc(var(--spacing-unit) * 1.5); padding-top: var(--spacing-unit); border-top: 1px solid #eee; }

/* Modals */
.wai-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  /* --- INCREASE Z-INDEX HERE --- */
  z-index: 100001; /* Was 10000, needs to be > overlay's 100000 */
  overflow-y: auto;
  padding: 40px 20px;
  box-sizing: border-box;
}

.wai-modal .modal-content {
  background: var(--background-white); margin: 2% auto;
  padding: calc(var(--spacing-unit) * 1.5); width: 90%;
  max-width: 800px; border-radius: var(--border-radius);
  box-shadow: 0 5px 20px rgba(0,0,0,0.15); position: relative;
  font-family: inherit; animation: slideInDown 0.3s ease-out;
}
.wai-modal .modal-close {
  position: absolute; top: 10px; right: 12px; /* Closer */
  font-size: 24px; font-weight: bold; line-height: 1;
  color: var(--text-light); cursor: pointer; transition: color 0.2s;
  background: none; border: none; padding: 5px;
}
.wai-modal .modal-close:hover { color: var(--text-dark); }
.wai-modal .modal-header { border-bottom: 1px solid var(--border-color); padding-bottom: var(--spacing-unit); margin-bottom: var(--spacing-unit); }
.wai-modal .modal-header h3 { margin: 0; font-size: var(--font-size-medium); color: var(--text-dark); border-bottom: none; padding-bottom: 0; font-weight: 500; }
.wai-modal .modal-body { margin-bottom: var(--spacing-unit); }
.wai-modal .modal-body p { margin: var(--spacing-unit) 0; font-size: var(--font-size-base); color: var(--text-medium); line-height: 1.6; }
.wai-modal .modal-body label { font-weight: 500; color: var(--text-medium); margin-bottom: 6px; }
.wai-modal .modal-body input[type="text"], .wai-modal .modal-body textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: var(--border-radius); margin-bottom: var(--spacing-unit); }
.wai-modal .modal-body textarea { min-height: 120px; font-family: inherit; font-size: var(--font-size-base); }
.wai-modal .modal-body .modal-text-area { padding: 10px; background: #f9f9f9; border: 1px solid #eee; max-height: 150px; overflow-y: auto; border-radius: var(--border-radius); font-size: 0.95em; line-height: 1.5; color: var(--text-medium); }
.wai-modal .modal-footer { margin-top: calc(var(--spacing-unit) * 1.5); padding-top: var(--spacing-unit); border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 10px; }

/* Modal Specifics */
#author-data-modal .modal-content { max-width: 550px; }
#author-data-modal .wai-data-list { list-style: none; padding: 0; margin: 0; }
#author-data-modal .wai-data-list li { border-bottom: 1px solid #eee; padding: 10px 0; }
#author-data-modal .wai-data-list li:last-child { border-bottom: none; }
#author-data-modal .wai-data-list li > div:first-child { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
#author-data-modal .wai-data-list strong { font-weight: 500; }
#author-data-modal .wai-data-list .wai-btn { padding: 3px 7px; font-size: 11px; margin-left: 5px; }
#author-data-modal .wai-data-list .data-preview { font-size: 0.9em; color: var(--text-light); max-height: 60px; overflow: hidden; }

#summary-modal .modal-content { max-width: 700px; max-height: 80vh; overflow-y: auto; }
#approval-modal .modal-content { max-width: 700px; }
#image-selection-modal .modal-content { max-width: 850px; }
#book-info-modal .modal-content { max-width: 800px; max-height: 90vh; overflow-y: auto; }
#book-info-modal h4 { font-size: 1.05em; margin-top: var(--spacing-unit); margin-bottom: calc(var(--spacing-unit)/2); border-bottom: 1px solid #eee; padding-bottom: 5px; font-weight: 500; }
#book-info-modal ul { list-style: none; padding-left: 0; }
#book-info-modal li { margin-bottom: 8px; }
#book-info-modal pre { background:#f9f9f9; padding:8px; border:1px solid #ddd; max-height: 200px; overflow: auto; white-space: pre-wrap; word-wrap: break-word; font-size: 0.9em; }
#book-info-modal table.info-table { width: 100%; border-collapse: collapse; margin-bottom: var(--spacing-unit); }
#book-info-modal table.info-table th, #book-info-modal table.info-table td { border: 1px solid var(--border-color); padding: 6px 8px; text-align: left; font-size: 0.9em; }
#book-info-modal table.info-table th { background: var(--background-medium); font-weight: 500; }

/* User Book Manager Table */
.user-book-manager table { border-collapse: collapse; width: 100%; margin-top: var(--spacing-unit); border: 1px solid var(--border-color); }
.user-book-manager table th, .user-book-manager table td { padding: 10px var(--spacing-unit); text-align: left; border-bottom: 1px solid var(--border-color); font-size: var(--font-size-base); color: var(--text-dark); vertical-align: middle; }
.user-book-manager table th { background: var(--background-medium); font-weight: 500; }
.user-book-manager table th span { vertical-align: middle; }
.user-book-manager table td .action-icon { margin-right: 8px; }

/* Action Icons */
.action-icon { display: inline-block; cursor: pointer; color: var(--text-light); transition: color 0.2s; vertical-align: middle; }
.action-icon .dashicons { font-size: 18px; vertical-align: middle; }
.action-icon:hover { color: var(--primary-color); }

/* Reset Link */
.wai-footer { margin-top: calc(var(--spacing-unit) * 1.5); text-align: center; }
.wai-reset { color: var(--text-light); font-size: 0.9em; }
.wai-reset .dashicons { font-size: 16px; margin-right: 4px; vertical-align: text-bottom; }
.wai-reset:hover { color: var(--primary-color); }

/* WP Editor Specifics */
.wp-editor-wrap { border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; margin-top: 5px; }
.wp-editor-tools { background: var(--background-medium); border-bottom: 1px solid var(--border-color); }
.mce-tinymce { border: none !important; }

/* Responsive */
@media (max-width: 782px) {
  .wai-grid { grid-template-columns: 1fr; }
  .wai-title-group, .wai-button-group, .wai-actions, .wai-wizard-buttons { flex-direction: column; align-items: stretch; }
  .wai-btn, .wai-button-group button, .wai-actions button, .wai-wizard-buttons button { width: 100%; margin-bottom: 10px; }
  .wai-wizard-buttons button:last-child { margin-bottom: 0; }
  /* .wai-wizard-nav */ 
  /* .wai-step-nav-btn */
  .user-book-manager table th:nth-child(2), .user-book-manager table td:nth-child(2) { display: none; } /* Hide Format col */
}
@media (max-width: 480px) {
   .wai-wizard-nav { padding-bottom: 0; }
   .wai-step-nav-btn { padding: 10px; font-size: 13px; }
   .wai-header h2 { font-size: var(--font-size-medium); }
   .wai-wizard-step h3 { font-size: calc(var(--font-size-medium) - 2px); }
   .wai-container { padding: var(--spacing-unit); }
}

/* Keyframe for modal slide-in */
@keyframes slideInDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* --- Title Ideas Mobile Friendliness --- */
.wai-title-ideas ul {
  padding: 0; /* Ensure no default ul padding */
  margin: 0; /* Ensure no default ul margin */
  list-style: none; /* Remove bullets */
}

.wai-title-ideas li {
  display: flex; /* Use flexbox for layout */
  justify-content: space-between; /* Space between title and button */
  align-items: center; /* Align items vertically */
  flex-wrap: nowrap; /* Prevent button wrapping initially */
  padding: 10px 5px; /* Adjust padding */
  border-bottom: 1px solid #e7e7e9;
  gap: 10px; /* Add space between title and button */
}

.wai-title-ideas li:last-child {
  border-bottom: none;
}

/* Allow title text to take up available space */
.wai-title-ideas li span.title-text { /* Assuming title is in a span, adjust if not */
  flex-grow: 1;
  word-break: break-word; /* Allow long titles to wrap */
  margin-right: 5px; /* Ensure space before button */
}

/* Style the 'Use' button */
.wai-title-ideas .use-title-btn {
  flex-shrink: 0; /* Prevent button from shrinking */
  padding: 5px 10px; /* Slightly larger padding */
  font-size: 0.9em; /* Adjust font size */
  line-height: 1.2; /* Adjust line height */
  white-space: nowrap; /* Prevent button text wrapping */
}

/* --- Responsive adjustments for Title Ideas --- */
@media (max-width: 480px) {
  .wai-title-ideas li {
      flex-wrap: wrap; /* Allow button to wrap below title */
      justify-content: flex-start; /* Align items to start */
       padding: 8px 0;
  }

  .wai-title-ideas li span.title-text {
       width: 100%; /* Make title take full width */
       margin-right: 0; /* No right margin needed when wrapping */
       margin-bottom: 5px; /* Add space below title */
  }

 /*  .wai-title-ideas .use-title-btn */
}

/* --- User Manager Progress Bar --- */
.user-book-manager .manager-progress-container {
  width: 100%;
  max-width: 150px; /* Adjust as needed */
  height: 20px;
  background-color: #e9ecef;
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative; /* For text overlay */
  border: 1px solid var(--border-color);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
  display: inline-block; /* Allow it to sit alongside status text if needed */
  vertical-align: middle;
}

.user-book-manager .manager-progress-bar {
  height: 100%;
  background-color: var(--primary-color);
  /* Optional gradient/stripes like the main progress bar */
  background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  background-size: 30px 30px;
  transition: width 0.3s ease-in-out;
  display: block;
}

.user-book-manager .manager-progress-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff; /* White text on the bar */
  text-shadow: 1px 1px 1px rgba(0,0,0,0.4); /* Make text readable */
  line-height: 20px; /* Match container height */
}

/* Status text styles */
.user-book-manager .status-text {
  font-weight: 500;
  font-size: 0.95em;
  vertical-align: middle;
  margin-left: 5px; /* Space if shown next to progress bar */
}
.user-book-manager .status-complete { color: var(--success-color); }
.user-book-manager .status-pending { color: var(--text-light); }

/* Resume Button alignment */
.user-book-manager .action-icon.resume-writing {
  color: var(--primary-color); /* Make it stand out */
}
.user-book-manager .action-icon.resume-writing:hover {
  color: var(--primary-hover);
}

/* (Keep all existing CSS rules) */

/* --- Ensure LaTeX button is hidden initially --- */
#download-latex {
  display: none;
}

/* --- Image Selection Modal --- */
#wai-image-selection-modal .modal-content {
    max-width: 90%;
    width: 1000px;
}

#wai-image-selection-modal .image-modal-progress {
    margin-bottom: 15px;
    background: #eee;
    border-radius: 4px;
    padding: 2px;
    height: 20px;
    position: relative;
}

#wai-image-selection-modal .image-modal-progress-fill {
    width: 0%;
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 3px;
    transition: width 0.3s ease;
}

#wai-image-selection-modal .image-modal-progress-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 20px;
    font-size: 11px;
    color: white;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

#wai-image-selection-modal .image-results-grid {
    list-style: none;
    padding: 0;
    margin: 0 -5px;
    display: flex;
    flex-wrap: wrap;
    max-height: 45vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    background: #fdfdfd;
    padding: 5px;
    min-height: 110px;
}

#wai-image-selection-modal .image-results-grid li {
    padding: 5px;
    box-sizing: border-box;
    width: 20%; /* 5 items per row */
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 3px;
    transition: border-color 0.2s, transform 0.2s;
    text-align: center;
    position: relative;
}

#wai-image-selection-modal .image-results-grid li img {
    max-width: 100%;
    height: 100px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    background-color: #f0f0f1;
}

#wai-image-selection-modal .image-results-grid li:hover {
    border-color: #ccc;
    transform: scale(1.03);
}

#wai-image-selection-modal .image-results-grid li.selected {
    border-color: var(--primary-color);
    background-color: #eaf2fa;
    transform: scale(1.05);
}

#wai-image-selection-modal .image-results-grid li.selected::after {
    content: '✔';
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
}

#wai-image-selection-modal #image-modal-pagination {
    text-align: center;
    margin-top: 10px;
}

#wai-image-selection-modal #image-modal-pagination .pagination-info {
    margin: 0 10px;
    font-size: 0.9em;
    vertical-align: middle;
}

/* Responsive grid */
@media (max-width: 900px) { #wai-image-selection-modal .image-results-grid li { width: 25%; } } /* 4 items */
@media (max-width: 700px) { #wai-image-selection-modal .image-results-grid li { width: 33.33%; } } /* 3 items */
@media (max-width: 500px) { #wai-image-selection-modal .image-results-grid li { width: 50%; } } /* 2 items */

/* Add to assets/css/style.css */

/* Image Generation Wizard Styles */
#wai-image-generation-modal .modal-content {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

#wai-image-generation-modal .modal-header h3 {
    margin: 0;
    font-size: 1.4em;
    color: #333;
}

#img-gen-preview-area {
    border: 1px dashed #ccc;
    background-color: #f7f7f7;
    overflow: hidden;
    position: relative;
}

#img-gen-result {
    transition: opacity 0.3s ease;
}

#img-gen-context {
    font-family: 'Georgia', serif;
    line-height: 1.5;
}

.wai-progress-bar {
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}

.wai-progress-bar .progress-fill {
    height: 100%;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

/* Pulsing effect for Auto-Generating status */
@keyframes pulse-border {
    0% { border-color: var(--primary-color); box-shadow: 0 0 0 0 rgba(34, 113, 177, 0.4); }
    70% { border-color: var(--primary-color); box-shadow: 0 0 0 6px rgba(34, 113, 177, 0); }
    100% { border-color: var(--primary-color); box-shadow: 0 0 0 0 rgba(34, 113, 177, 0); }
}

.img-gen-auto-active {
    animation: pulse-border 2s infinite;
    border: 1px solid var(--primary-color) !important;
}








/* Add to assets/css/style.css */

/* Image Generation Wizard Styles */
#wai-image-generation-modal .modal-content {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

#wai-image-generation-modal .modal-header h3 {
    margin: 0;
    font-size: 1.4em;
    color: #333;
}

#img-gen-preview-area {
    border: 1px dashed #ccc;
    background-color: #f7f7f7;
    overflow: hidden;
    position: relative;
}

#img-gen-result {
    transition: opacity 0.3s ease;
}

#img-gen-context {
    font-family: 'Georgia', serif;
    line-height: 1.5;
}

.wai-progress-bar {
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}

.wai-progress-bar .progress-fill {
    height: 100%;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

/* Pulsing effect for Auto-Generating status */
@keyframes pulse-border {
    0% { border-color: var(--primary-color); box-shadow: 0 0 0 0 rgba(34, 113, 177, 0.4); }
    70% { border-color: var(--primary-color); box-shadow: 0 0 0 6px rgba(34, 113, 177, 0); }
    100% { border-color: var(--primary-color); box-shadow: 0 0 0 0 rgba(34, 113, 177, 0); }
}

.img-gen-auto-active {
    animation: pulse-border 2s infinite;
    border: 1px solid var(--primary-color) !important;
}