/**
 * WP Agentic Writer — Dark Sidebar Override (Stitch Design System)
 *
 * This file is loaded AFTER agentic-sidebar.css to override the light theme
 * with a dark sidebar that matches the Stitch design references.
 *
 * The sidebar is ALWAYS dark (--aw-inverse-surface: #2c3137).
 * All text, borders, inputs, and interactive elements are overridden
 * for dark-context legibility.
 *
 * Three reference patterns:
 *   Pattern 1 — Welcome/Empty Chat
 *   Pattern 2 — Clarity Quiz (Dark)
 *   Pattern 3 — Executing/Writing (Dark + animated)
 *
 * @package WP_Agentic_Writer
 * @since 0.4.0
 */

/* =========================================================================
   0. DARK THEME TOKEN OVERRIDES
   ========================================================================= */

#wp-agentic-writer\:wp-agentic-writer {
    --aw-dark-surface: #2c3137;
    --aw-dark-surface-deep: #1e1e1e;
    --aw-dark-surface-deeper: #121212;
    --aw-dark-bubble: #2d2d2d;
    --aw-dark-text: #edf1f9;
    --aw-dark-text-muted: #8b95a5;
    --aw-dark-accent: #92ccff;
    --aw-dark-accent-bright: #007cba;
    --aw-dark-border: rgba(255, 255, 255, 0.1);
    --aw-dark-border-subtle: rgba(255, 255, 255, 0.05);
    --aw-dark-border-strong: rgba(255, 255, 255, 0.2);
    --aw-dark-card-bg: rgba(255, 255, 255, 0.05);
    --aw-dark-option-bg: rgba(64, 72, 80, 0.1);
    --aw-dark-option-bg-active: rgba(64, 72, 80, 0.2);
    --aw-dark-progress-track: rgba(0, 0, 0, 0.4);
    --aw-dark-selected-pill: rgba(0, 124, 186, 0.2);
    --aw-dark-scrollbar: #404850;
    --aw-dark-scrollbar-hover: #707881;
}

/* =========================================================================
   1. ROOT SCAFFOLDING — Dark Background
   ========================================================================= */

#wp-agentic-writer\:wp-agentic-writer .components-panel,
#wp-agentic-writer\:wp-agentic-writer .components-panel__body {
    background: var(--aw-dark-surface) !important;
    color: var(--aw-dark-text) !important;
}

/* =========================================================================
   2. TAB NAVIGATION — Bottom to Top Restyle
   ========================================================================= */

/*
 * The bottom tab bar is rendered as the LAST child of .wpaw-tab-content-wrapper.
 * We use order: -1 to visually move it to the top and restyle as a top nav bar
 * with dark theme colors.
 */

/* The wrapper must use order-aware layout */
.wpaw-tab-content-wrapper {
    background: var(--aw-dark-surface) !important;
}

/* Move bottom tab bar to the top via flexbox order */
.wpaw-bottom-tab-bar {
    order: -1 !important;
    border-top: none !important;
    border-bottom: 1px solid var(--aw-dark-border) !important;
    background: var(--aw-dark-surface) !important;
    position: static !important;
    flex-shrink: 0;
}

.wpaw-bottom-tab-btn {
    border-top: 2px solid transparent !important;
    border-bottom: 2px solid transparent !important;
    color: var(--aw-dark-text-muted) !important;
    transition:
        color 150ms ease-out,
        border-color 150ms ease-out,
        background 150ms ease-out;
}

.wpaw-bottom-tab-btn:hover {
    color: var(--aw-dark-text) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.wpaw-bottom-tab-btn.active {
    color: var(--aw-dark-accent) !important;
    font-weight: 700 !important;
    border-bottom-color: var(--aw-dark-accent-bright) !important;
    border-top-color: transparent !important;
}

/* Also restyle the top tab navigation (.wpaw-tabs) if present */
.wpaw-tabs {
    background: var(--aw-dark-surface) !important;
    border-bottom-color: var(--aw-dark-border) !important;
}

.wpaw-tab-btn {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-tab-btn:hover {
    color: var(--aw-dark-text) !important;
}

.wpaw-tab-btn.active {
    color: var(--aw-dark-accent) !important;
    border-bottom-color: var(--aw-dark-accent-bright) !important;
}

/* Minimal tabs variant */
.wpaw-tabs-minimal .wpaw-tab-btn {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-tabs-minimal .wpaw-tab-btn:hover {
    color: var(--aw-dark-text) !important;
}

.wpaw-tabs-minimal .wpaw-tab-btn.active {
    color: var(--aw-dark-accent) !important;
}

/* =========================================================================
   3. CHAT AREA — Dark Backgrounds
   ========================================================================= */

.wpaw-chat-tab {
    background: var(--aw-dark-surface) !important;
}

.wpaw-chat-container {
    background: var(--aw-dark-surface) !important;
}

.wpaw-messages {
    background: var(--aw-dark-surface) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-messages-inner {
    /*background: var(--aw-dark-surface) !important;*/
    background: #1f2327 !important;
}

/* Dark scrollbar */
.wpaw-messages-inner::-webkit-scrollbar {
    width: 6px;
}

.wpaw-messages-inner::-webkit-scrollbar-track {
    background: transparent !important;
}

.wpaw-messages-inner::-webkit-scrollbar-thumb {
    background: var(--aw-dark-scrollbar) !important;
    border-radius: 10px;
}

.wpaw-messages-inner::-webkit-scrollbar-thumb:hover {
    background: var(--aw-dark-scrollbar-hover) !important;
}

/* =========================================================================
   4. STATUS BAR — Dark
   ========================================================================= */

.wpaw-status-bar {
    background: var(--aw-dark-surface) !important;
    color: var(--aw-dark-text) !important;
    border-bottom-color: var(--aw-dark-border) !important;
}

.wpaw-status-label {
    color: var(--aw-dark-text) !important;
}

.wpaw-status-cost {
    color: var(--aw-dark-text-muted) !important;
}

/* Status dot — green for idle on dark */
.wpaw-status-dot.idle {
    background: #4caf50 !important;
}

/* Active states use the accent blue */
.wpaw-status-dot.checking,
.wpaw-status-dot.refining,
.wpaw-status-dot.writing {
    background: var(--aw-dark-accent-bright) !important;
}

/* Green-dot animation for header avatar indicator */
@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* =========================================================================
   5. MESSAGES — Dark Bubbles
   ========================================================================= */

/* AI message bubble — always #2d2d2d with rounded corners */
.wpaw-message {
    background: var(--aw-dark-bubble) !important;
    border-color: var(--aw-dark-border-subtle) !important;
    color: var(--aw-dark-text) !important;
    border-radius: 12px !important;
}

/* First AI message gets top-left flatten */
.wpaw-message:not(.wpaw-message-user):not(.wpaw-message-error):first-of-type,
.wpaw-message:first-child {
    border-top-left-radius: 0 !important;
}

/* User message — accent blue background on dark */
.wpaw-message-user {
    background: var(--aw-dark-accent-bright) !important;
    border-color: var(--aw-dark-accent-bright) !important;
    color: #fffeff !important;
}

/* Error message — red on dark */
.wpaw-message-error {
    background: rgba(186, 26, 26, 0.2) !important;
    border-color: #ba1a1a !important;
    border-left-color: #ba1a1a !important;
    color: #ff8a80 !important;
}

.wpaw-message-error .wpaw-error-title {
    color: #ff8a80 !important;
}

.wpaw-message-error .wpaw-error-detail {
    color: #ffab91 !important;
}

.wpaw-message-error details summary {
    color: #ff8a80 !important;
}

.wpaw-message-error button.is-secondary {
    background: rgba(186, 26, 26, 0.3) !important;
    color: #ff8a80 !important;
    border-color: #ba1a1a !important;
}

.wpaw-message-error button.is-secondary:hover {
    background: rgba(186, 26, 26, 0.45) !important;
}

/* Research message */
.wpaw-message[type="research"] {
    background: var(--aw-dark-bubble) !important;
    border-color: var(--aw-dark-border-subtle) !important;
    border-left-color: var(--aw-dark-accent-bright) !important;
}

/* Message content */
.wpaw-message-content {
    color: var(--aw-dark-text) !important;
}

.wpaw-citation {
    color: var(--aw-dark-accent) !important;
    background: var(--aw-dark-selected-pill) !important;
}

/* Links in messages */
.wpaw-message-error a,
.wpaw-message a[rel="noopener"] {
    color: var(--aw-dark-accent) !important;
}

.wpaw-message-error a:hover,
.wpaw-message a[rel="noopener"]:hover {
    color: #b4dbff !important;
}

/* =========================================================================
   6. AI RESPONSE & ITERATION HISTORY
   ========================================================================= */

.wpaw-ai-response {
    border-left-color: var(--aw-dark-border) !important;
}

/* Iteration history timeline — dark variant */
.wpaw-timeline-entry {
    color: var(--aw-dark-text) !important;
}

.wpaw-timeline-entry.inactive {
    border-color: var(--aw-dark-border) !important;
    opacity: 0.7;
}

.wpaw-timeline-entry.complete {
    background: rgba(0, 108, 28, 0.08) !important;
}

/* Timeline dots */
.wpaw-timeline-dot {
    background: var(--aw-dark-surface) !important;
    border-color: var(--aw-dark-border) !important;
}

/* Active/current iteration dot — blue accent */
.wpaw-timeline-entry.is-current .wpaw-timeline-dot {
    background: var(--aw-dark-accent-bright) !important;
    border-color: var(--aw-dark-accent-bright) !important;
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.5) !important;
}

/* Completed iteration dot */
.wpaw-timeline-entry.complete .wpaw-timeline-dot {
    background: rgba(0, 108, 28, 0.15) !important;
    border-color: #4caf50 !important;
    box-shadow: 0 0 0 1px #4caf50 !important;
}

/* Old/inactive dot */
.wpaw-timeline-entry.inactive .wpaw-timeline-dot {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: var(--aw-dark-border) !important;
    box-shadow: none !important;
}

.wpaw-timeline-content {
    color: var(--aw-dark-text) !important;
}

.wpaw-timeline-message {
    color: rgba(237, 241, 249, 0.7) !important;
}

.wpaw-timeline-complete {
    color: #4caf50 !important;
}

.wpaw-timeline-elapsed {
    color: var(--aw-dark-text-muted) !important;
}

/* Timeline colored lines */
.wpaw-timeline-entry.active:not(:first-of-type)::before {
    background: var(--aw-dark-accent-bright) !important;
}

.wpaw-timeline-entry.complete:not(:first-of-type)::before {
    background: #4caf50 !important;
}

/* Pulse ring for active dot */
@keyframes pulse-ring-dark {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 124, 186, 0.6);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(0, 124, 186, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 124, 186, 0);
    }
}

.wpaw-timeline-entry.is-current .wpaw-timeline-dot {
    animation: pulse-ring-dark 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite !important;
}

/* =========================================================================
   7. INPUT AREA — Dark Backgrounds
   ========================================================================= */

.wpaw-input-area {
    background: var(--aw-dark-surface) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-input-label {
    color: var(--aw-dark-text-muted) !important;
}

/* Mode select dropdown */
.wpaw-mode-select {
    background: var(--aw-dark-option-bg) !important;
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-mode-select:hover {
    border-color: var(--aw-dark-border-strong) !important;
}

.wpaw-mode-select:focus {
    border-color: var(--aw-dark-accent-bright) !important;
    box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
}

#agentMode {
    background-color: var(--aw-dark-option-bg) !important;
    color: var(--aw-dark-text) !important;
}

/* Command input area */
.wpaw-command-area {
    background: var(--aw-dark-surface) !important;
    border-top-color: var(--aw-dark-border) !important;
}

.wpaw-command-toolbar {
    /* inherits from command area */
}

.wpaw-command-mode {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-command-mode-value {
    color: var(--aw-dark-accent) !important;
}

/* Command input wrapper — textarea background */
.wpaw-command-input-wrapper {
    background: var(--aw-dark-option-bg) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-command-input-wrapper textarea,
.wpaw-command-input-wrapper .components-textarea-control__input {
    color: var(--aw-dark-text) !important;
}

.wpaw-command-input-wrapper textarea::placeholder {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-command-prefix {
    color: var(--aw-dark-accent) !important;
}

/* Expanded input — darker */
.wpaw-command-input-wrapper.expanded textarea {
    /* inherits dark */
}

/* =========================================================================
   8. WELCOME SCREEN — Dark
   ========================================================================= */

.wpaw-welcome-screen {
    background: var(--aw-dark-surface) !important;
}

.wpaw-welcome-title {
    color: var(--aw-dark-text) !important;
}

.wpaw-welcome-subtitle {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-welcome-icon {
    color: var(--aw-dark-accent-bright) !important;
}

/* Welcome input field */
.wpaw-welcome-input {
    background: var(--aw-dark-surface-deep) !important;
    border-color: var(--aw-dark-border-strong) !important;
    color: var(--aw-dark-text) !important;
    border-radius: 12px !important;
}

.wpaw-welcome-input:focus {
    border-color: var(--aw-dark-accent-bright) !important;
    background: var(--aw-dark-surface-deep) !important;
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.3) !important;
}

.wpaw-welcome-input::placeholder {
    color: var(--aw-dark-text-muted) !important;
}

/* Suggestion chips */
.wpaw-welcome-pills button {
    /* reset */
}

.wpaw-welcome-pill {
    background: transparent !important;
    border-color: var(--aw-dark-border-strong) !important;
    color: var(--aw-dark-text) !important;
    border-radius: 9999px !important;
}

.wpaw-welcome-pill:hover {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border-strong) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-welcome-pill.active {
    background: var(--aw-dark-selected-pill) !important;
    border-color: var(--aw-dark-accent-bright) !important;
    color: var(--aw-dark-accent) !important;
}

/* Session list */
.wpaw-session-list {
    /* inherits dark */
}

.wpaw-session-open-btn:disabled {
    opacity: 0.5;
}

/* Start button */
.wpaw-welcome-start-btn {
    background: var(--aw-dark-accent-bright) !important;
    color: #fffeff !important;
    border-radius: 8px !important;
}

/* =========================================================================
   9. CLARIFICATION QUIZ — Dark Context
   ========================================================================= */

.wpaw-clarification-quiz {
    color: var(--aw-dark-text) !important;
}

.wpaw-quiz-header h3 {
    color: var(--aw-dark-accent) !important;
}

.wpaw-quiz-header span {
    color: var(--aw-dark-text-muted) !important;
}

/* Quiz progress bar */
.wpaw-progress-bar {
    background: var(--aw-dark-progress-track) !important;
}

.wpaw-progress-fill {
    background: var(--aw-dark-accent-bright) !important;
}

/* Question cards */
.wpaw-question-card {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border-subtle) !important;
}

.wpaw-question-card h4 {
    color: var(--aw-dark-text) !important;
    font: var(--aw-text-label-caps) !important;
    letter-spacing: var(--aw-tracking-label-caps) !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
}

/* Answer option buttons */
.wpaw-answer-options label {
    background: var(--aw-dark-option-bg) !important;
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text) !important;
    border-radius: 8px !important;
}

.wpaw-answer-options label:hover {
    background: var(--aw-dark-option-bg-active) !important;
    border-color: var(--aw-dark-border-strong) !important;
}

/* Selected option */
.wpaw-answer-options label:has(input:checked) {
    border-color: rgba(0, 124, 186, 0.5) !important;
    background: var(--aw-dark-option-bg-active) !important;
    color: var(--aw-dark-accent) !important;
    box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
    font-weight: 700 !important;
}

/* Quiz textarea */
.wpaw-answer-options textarea {
    background: var(--aw-dark-option-bg) !important;
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-answer-options textarea:focus {
    border-color: var(--aw-dark-accent-bright) !important;
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.3) !important;
}

/* Previous answers */
.wpaw-previous-answers {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border-subtle) !important;
}

.wpaw-previous-answers strong {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-question-label {
    color: var(--aw-dark-accent) !important;
}

.wpaw-answer-text {
    background: var(--aw-dark-option-bg) !important;
    color: var(--aw-dark-text) !important;
}

/* Custom answer input */
.wpaw-custom-answer-wrapper {
    border-top-color: var(--aw-dark-border) !important;
}

.wpaw-custom-text-input {
    background: var(--aw-dark-option-bg) !important;
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-custom-text-input:focus {
    border-color: var(--aw-dark-accent-bright) !important;
}

/* Quiz action buttons */
.wpaw-quiz-actions button.is-primary {
    background: var(--aw-dark-accent-bright) !important;
    color: #fffeff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}

.wpaw-quiz-actions button.is-secondary {
    border: 1px solid var(--aw-dark-accent-bright) !important;
    color: var(--aw-dark-accent-bright) !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: none;
    background-color: #007cba0f !important;
}

/* =========================================================================
   10. PLAN CARDS & SECTIONS — Dark
   ========================================================================= */

.wpaw-plan-card,
.wpaw-edit-plan {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border) !important;
    box-shadow: none !important;
}

.wpaw-plan-card:hover {
    border-color: var(--aw-dark-accent-bright) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.wpaw-plan-title {
    color: var(--aw-dark-text) !important;
}

.wpaw-plan-section-status {
    /* inherits */
}

.wpaw-plan-section.pending .wpaw-plan-section-status {
    color: var(--aw-dark-text-muted) !important;
    background: var(--aw-dark-option-bg) !important;
}

.wpaw-plan-section.done .wpaw-plan-section-status {
    color: #4caf50 !important;
    background: rgba(76, 175, 80, 0.15) !important;
}

.wpaw-plan-section.in_progress .wpaw-plan-section-status {
    color: var(--aw-dark-accent) !important;
    background: rgba(0, 124, 186, 0.15) !important;
}

.wpaw-plan-sections,
.wpaw-edit-plan-list {
    color: var(--aw-dark-text) !important;
}

.wpaw-plan-section {
    /* inherits */
}

.wpaw-plan-section-title {
    color: var(--aw-dark-text) !important;
}

.wpaw-plan-section-desc {
    color: rgba(237, 241, 249, 0.7) !important;
}

/* Plan section edit */
.wpaw-plan-section-edit-input {
    background: var(--aw-dark-surface-deep) !important;
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-plan-section-edit-input:focus {
    border-color: var(--aw-dark-accent-bright) !important;
}

.wpaw-plan-section-edit-save {
    background: var(--aw-dark-accent-bright) !important;
    color: #fffeff !important;
}

.wpaw-plan-section-edit-cancel {
    background: transparent !important;
    color: var(--aw-dark-text-muted) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-plan-section-edit-cancel:hover {
    color: var(--aw-dark-text) !important;
    border-color: var(--aw-dark-border-strong) !important;
}

.wpaw-plan-section-wordcount {
    color: var(--aw-dark-text-muted) !important;
}

/* Edit plan items */
.wpaw-edit-plan-item {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border) !important;
}


.wpaw-edit-plan-item-target {
    background: var(--aw-dark-option-bg) !important;
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-edit-plan-item-target:hover:not(:disabled) {
    border-color: var(--aw-dark-accent-bright) !important;
}

.wpaw-edit-plan-item-target:disabled {
    opacity: 0.4;
}

.wpaw-edit-plan-accept-btn {
    background: var(--aw-dark-accent-bright) !important;
    color: #fffeff !important;
}

.wpaw-edit-plan-reject-btn {
    background: transparent !important;
    color: var(--aw-dark-text-muted) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-edit-plan-reject-btn:hover {
    color: #ff8a80 !important;
    border-color: #ba1a1a !important;
}

/* Plan header */
.wpaw-plan-header {
    color: var(--aw-dark-text) !important;
}

.wpaw-plan-version {
    color: var(--aw-dark-accent) !important;
}

/* =========================================================================
   11. BUTTONS & ACTIONS — Dark Context
   ========================================================================= */

/* Primary buttons */
.wpaw-actions .is-primary,
.wpaw-actions .components-button.is-primary,
.wpaw-plan-actions .is-primary {
    background: var(--aw-dark-accent-bright) !important;
    border-color: var(--aw-dark-accent-bright) !important;
    color: #fffeff !important;
}

.wpaw-actions .is-primary:hover,
.wpaw-actions .components-button.is-primary:hover,
.wpaw-plan-actions .is-primary:hover {
    background: #005f8a !important;
    border-color: #005f8a !important;
}

.wpaw-actions .is-primary:disabled {
    background: var(--aw-dark-text-muted) !important;
    border-color: var(--aw-dark-text-muted) !important;
    opacity: 0.5;
}

/* Command buttons */
.wpaw-command-btn {
    background: var(--aw-dark-accent-bright) !important;
    color: #fffeff !important;
}

.wpaw-command-btn:hover {
    background: #005f8a !important;
}

.wpaw-command-btn:disabled {
    background: var(--aw-dark-text-muted) !important;
    opacity: 0.4;
}

.wpaw-command-btn.secondary {
    background: transparent !important;
    color: var(--aw-dark-text) !important;
    border-color: var(--aw-dark-border-strong) !important;
}

.wpaw-command-btn.secondary:hover {
    background: var(--aw-dark-card-bg) !important;
}

/* Circle buttons */
.wpaw-command-circle-btn {
    background: var(--aw-dark-accent-bright) !important;
    color: #fffeff !important;
}

.wpaw-send-circle-btn {
    background: var(--aw-dark-accent-bright) !important;
    color: #fffeff !important;
}

.wpaw-send-circle-btn:hover:not(:disabled) {
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.4) !important;
}

.wpaw-send-circle-btn:disabled {
    background: var(--aw-dark-text-muted) !important;
    opacity: 0.3;
}

.wpaw-stop-circle-btn {
    background: #c2410c !important;
    color: #fffeff !important;
}

.wpaw-stop-circle-btn.is-stopping,
.wpaw-stop-circle-btn.is-stopping:hover {
    background: var(--aw-dark-text-muted) !important;
}

/* Command stop button */
.wpaw-command-stop-btn {
    background: rgba(194, 65, 12, 0.2) !important;
    color: #ff8a80 !important;
    border-color: #c2410c !important;
}

.wpaw-command-stop-btn:hover {
    background: rgba(194, 65, 12, 0.3) !important;
}

/* Text buttons */
.wpaw-command-text-btn {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-command-text-btn:hover {
    color: var(--aw-dark-text) !important;
}

/* Status action buttons */
.wpaw-status-icon-btn {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-status-icon-btn:hover {
    color: var(--aw-dark-text) !important;
    background: var(--aw-dark-card-bg) !important;
}

.wpaw-status-icon-btn:disabled {
    color: var(--aw-dark-text-muted) !important;
    opacity: 0.3;
}

/* Undo button */
.wpaw-undo-btn {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-undo-btn:hover:not(:disabled) {
    color: var(--aw-dark-text) !important;
}

/* Back button */
.wpaw-back-btn {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-back-btn:hover {
    color: var(--aw-dark-text) !important;
}

/* Link button */
.wpaw-link-button {
    color: var(--aw-dark-accent) !important;
}

.wpaw-link-button:hover {
    color: var(--aw-dark-accent) !important;
    text-decoration: underline;
}

/* Session delete button */
.wpaw-session-delete {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-session-delete:hover {
    color: #ff8a80 !important;
    background: rgba(186, 26, 26, 0.2) !important;
}

/* =========================================================================
   12. CONFIG TAB — Dark
   ========================================================================= */

.wpaw-config-tab {
    background: var(--aw-dark-surface) !important;
}

.wpaw-config-tab .wpaw-config-unavailable {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-config-tab h3 {
    color: var(--aw-dark-text) !important;
}

.wpaw-config-section {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border-subtle) !important;
}

.wpaw-config-section:hover {
    background: var(--aw-dark-option-bg-active) !important;
}

.wpaw-config-section label {
    color: var(--aw-dark-text) !important;
}

.wpaw-config-section h4 {
    color: var(--aw-dark-text) !important;
}

/* Select dropdown */
.wpaw-select {
    background: var(--aw-dark-option-bg) !important;
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-select:focus {
    border-color: var(--aw-dark-accent-bright) !important;
    box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
}

/* Tab content inputs */
.wpaw-select,
.wpaw-tab-content input[type="text"],
.wpaw-tab-content select {
    background: var(--aw-dark-option-bg) !important;
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-tab-content input[type="text"]::placeholder {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-tab-content .description,
.wpaw-tab-content .components-checkbox-control__help {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-tab-content textarea {
    background: var(--aw-dark-option-bg) !important;
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-tab-content textarea::placeholder {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-tab-content label {
    color: var(--aw-dark-text) !important;
}

.wpaw-tab-content.wpaw-insights-tab,
.wpaw-tab-content.wpaw-config-tab {
    overflow: auto;
}

/* Config divider */
.wpaw-config-divider {
    border-color: var(--aw-dark-border) !important;
}

.wpaw-config-divider span {
    color: var(--aw-dark-text-muted) !important;
    background: var(--aw-dark-surface) !important;
}

/* Config form fields */
.wpaw-config-field {
    /* inherits */
}

.wpaw-config-label-text {
    color: var(--aw-dark-text) !important;
}

.wpaw-config-description {
    color: var(--aw-dark-text-muted) !important;
}

/* Toggle slider */
.wpaw-toggle-slider {
    background: var(--aw-dark-text-muted) !important;
}

.wpaw-toggle-slider:before {
    background: var(--aw-dark-surface) !important;
}

.wpaw-config-toggle input:checked + .wpaw-toggle-slider {
    background: var(--aw-dark-accent-bright) !important;
}

.wpaw-config-text-input {
    background: var(--aw-dark-option-bg) !important;
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-config-text-input:focus {
    border-color: var(--aw-dark-accent-bright) !important;
}

.wpaw-config-text-input::placeholder {
    color: var(--aw-dark-text-muted) !important;
}

/* Generic input */
.wpaw-input {
    background: var(--aw-dark-surface-deep) !important;
    border-color: var(--aw-dark-border-strong) !important;
    color: var(--aw-dark-text) !important;
}

/* Meta info */
.wpaw-meta-info span {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-meta-info span.good {
    color: #4caf50 !important;
}

.wpaw-meta-info span.warning {
    color: #ff9800 !important;
}

/* =========================================================================
   13. COST TAB — Dark
   ========================================================================= */

.wpaw-tab-content.wpaw-cost-tab {
    overflow: auto;
}

.wpaw-cost-tab {
    background: var(--aw-dark-surface) !important;
}

.wpaw-cost-tab h3 {
    color: var(--aw-dark-text) !important;
}

.wpaw-cost-card {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border-subtle) !important;
}

.wpaw-cost-stat {
    border-color: var(--aw-dark-border-subtle) !important;
}

.wpaw-cost-stat:hover {
    background: var(--aw-dark-option-bg) !important;
}

.wpaw-cost-stat label {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-cost-value {
    color: var(--aw-dark-text) !important;
}

/* Budget bar */
.wpaw-budget-bar {
    background: var(--aw-dark-progress-track) !important;
}

.wpaw-budget-fill {
    background: var(--aw-dark-accent-bright) !important;
}

.wpaw-budget-fill.warning {
    background: #ff9800 !important;
}

.wpaw-budget-fill.danger {
    background: #ba1a1a !important;
}

.wpaw-budget-bar ~ .description {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-budget-label {
    color: var(--aw-dark-text) !important;
}

.wpaw-budget-warning {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-budget-warning.warning {
    color: #ff9800 !important;
}

.wpaw-budget-warning.danger {
    color: #ff8a80 !important;
}

/* Cost table */
.wpaw-cost-table-wrapper {
    border-color: var(--aw-dark-border) !important;
}

.wpaw-cost-table {
    border-color: var(--aw-dark-border) !important;
}

.wpaw-cost-table thead {
    background: var(--aw-dark-card-bg) !important;
}

.wpaw-cost-table th {
    color: var(--aw-dark-text-muted) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-cost-table td {
    color: var(--aw-dark-text) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-cost-table tbody tr:hover {
    background: var(--aw-dark-option-bg) !important;
}

/* Cost colors */
.wpaw-cost-value.ok {
    color: #4caf50 !important;
}

.wpaw-cost-value.warning {
    color: #ff9800 !important;
}

.wpaw-cost-value.danger {
    color: #ff8a80 !important;
}

.wpaw-cost-remaining .wpaw-cost-value {
    color: var(--aw-dark-accent) !important;
}

/* Cost footer */
.wpaw-cost-footer {
    border-color: var(--aw-dark-border) !important;
}

.wpaw-cost-settings-link {
    color: var(--aw-dark-accent) !important;
}

.wpaw-cost-settings-link:hover {
    color: #b4dbff !important;
}

/* Cost history */
.wpaw-cost-history h4 {
    color: var(--aw-dark-text) !important;
}

/* Refresh button */
.wpaw-refresh-btn {
    color: var(--aw-dark-text-muted) !important;
    background: transparent !important;
}

.wpaw-refresh-btn:hover {
    color: var(--aw-dark-text) !important;
    background: var(--aw-dark-card-bg) !important;
}

/* =========================================================================
   14. ACTIVITY LOG — Dark
   ========================================================================= */

.wpaw-activity-log {
    background: var(--aw-dark-surface) !important;
}

.wpaw-log-entry {
    border-bottom-color: var(--aw-dark-border-subtle) !important;
}

/* User command */
.wpaw-log-entry.user-command {
    background: rgba(0, 124, 186, 0.1) !important;
    border-left-color: var(--aw-dark-accent-bright) !important;
}

.wpaw-log-entry.user-command::before {
    color: var(--aw-dark-accent) !important;
}

/* Agent status */
.wpaw-log-entry.agent-status {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-log-entry.agent-status::before {
    color: var(--aw-dark-border) !important;
}

.wpaw-log-entry.agent-status.active::before {
    color: var(--aw-dark-accent-bright) !important;
}

/* Agent success */
.wpaw-log-entry.agent-success {
    border-left-color: #4caf50 !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-log-entry.agent-success::before {
    color: #4caf50 !important;
}

/* Agent error */
.wpaw-log-entry.agent-error {
    background: rgba(186, 26, 26, 0.15) !important;
    border-left-color: #ba1a1a !important;
    color: #ff8a80 !important;
}

.wpaw-log-entry.agent-error::before {
    color: #ff8a80 !important;
}

/* Agent response */
.wpaw-log-entry.agent-response {
    border-left-color: var(--aw-dark-border) !important;
}

/* =========================================================================
   15. WORKSPACE CARDS — Dark
   ========================================================================= */

.wpaw-agent-workspace-card {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border-subtle) !important;
}

.wpaw-agent-workspace-header {
    border-color: var(--aw-dark-border-subtle) !important;
}

.wpaw-agent-workspace-heading {
    /* inherits */
}

.wpaw-agent-workspace-kicker {
    color: var(--aw-dark-accent) !important;
}

.wpaw-agent-workspace-title {
    color: var(--aw-dark-text) !important;
}

.wpaw-agent-workspace-status {
    color: var(--aw-dark-text-muted) !important;
    background: var(--aw-dark-option-bg) !important;
}

.wpaw-agent-workspace-toggle {
    color: var(--aw-dark-text-muted) !important;
    background: var(--aw-dark-option-bg) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-agent-workspace-toggle:hover,
.wpaw-agent-workspace-toggle:focus {
    color: var(--aw-dark-text) !important;
    background: var(--aw-dark-option-bg-active) !important;
    border-color: var(--aw-dark-border-strong) !important;
}

/* Context grid */
.wpaw-agent-context-grid {
    border-color: var(--aw-dark-border-subtle) !important;
}

.wpaw-agent-context-item {
    background: var(--aw-dark-option-bg) !important;
    border-color: var(--aw-dark-border-subtle) !important;
}

.wpaw-agent-context-item span {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-agent-context-item strong {
    color: var(--aw-dark-text) !important;
}

/* Keyword input */
.wpaw-agent-keyword-input {
    background: var(--aw-dark-surface-deep) !important;
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-agent-keyword-input:focus {
    border-color: var(--aw-dark-accent-bright) !important;
    box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
}

/* Resume card */
.wpaw-agent-resume-card {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-agent-resume-card strong {
    color: var(--aw-dark-text) !important;
}

.wpaw-agent-resume-card span {
    color: var(--aw-dark-accent) !important;
}

/* =========================================================================
   16. HISTORY TAB — Dark
   ========================================================================= */

.wpaw-history-tab {
    background: var(--aw-dark-surface) !important;
}

.wpaw-history-header h3 {
    color: var(--aw-dark-text) !important;
}

.wpaw-history-count {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-history-empty {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-history-empty p {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-history-item {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-history-item:hover {
    background: var(--aw-dark-option-bg-active) !important;
    border-color: var(--aw-dark-border-strong) !important;
}

.wpaw-history-item.active {
    border-color: var(--aw-dark-accent-bright) !important;
}

.wpaw-history-item-title {
    color: var(--aw-dark-text) !important;
}

.wpaw-history-item-meta {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-history-restore-btn {
    background: var(--aw-dark-option-bg) !important;
    color: var(--aw-dark-accent) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-history-restore-btn:hover {
    background: var(--aw-dark-option-bg-active) !important;
    color: var(--aw-dark-accent) !important;
    border-color: var(--aw-dark-accent-bright) !important;
}

.wpaw-history-item.active .wpaw-history-restore-btn {
    background: var(--aw-dark-accent-bright) !important;
    color: #fffeff !important;
    border-color: var(--aw-dark-accent-bright) !important;
}

.wpaw-history-delete-btn {
    color: var(--aw-dark-text-muted) !important;
    background: transparent !important;
}

.wpaw-history-delete-btn:hover {
    color: #ff8a80 !important;
    background: rgba(186, 26, 26, 0.2) !important;
}

/* =========================================================================
   17. INSIGHTS TAB — Dark
   ========================================================================= */

.wpaw-insights-tab {
    background: var(--aw-dark-surface) !important;
}

.wpaw-insights-header h3 {
    color: var(--aw-dark-text) !important;
}

.wpaw-insights-refresh-btn {
    color: var(--aw-dark-text-muted) !important;
    background: transparent !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-insights-refresh-btn:hover {
    color: var(--aw-dark-text) !important;
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border-strong) !important;
}

.wpaw-insights-card {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border-subtle) !important;
}

.wpaw-insights-card-title {
    color: var(--aw-dark-text) !important;
}

.wpaw-insights-stat-value {
    color: var(--aw-dark-accent) !important;
}

.wpaw-insights-stat-label {
    color: var(--aw-dark-text-muted) !important;
}

/* Budget section */
.wpaw-insights-budget-label {
    color: var(--aw-dark-text) !important;
}

.wpaw-insights-budget-track {
    background: var(--aw-dark-progress-track) !important;
}

.wpaw-insights-budget-fill {
    background: var(--aw-dark-accent-bright) !important;
}

.wpaw-insights-budget-fill.warning {
    background: #ff9800 !important;
}

.wpaw-insights-budget-fill.danger {
    background: #ba1a1a !important;
}

/* Activity list */
.wpaw-insights-activity-item {
    border-color: var(--aw-dark-border-subtle) !important;
}

.wpaw-insights-activity-item:nth-child(even) {
    background: var(--aw-dark-card-bg) !important;
}

.wpaw-insights-activity-action {
    color: var(--aw-dark-text) !important;
}

.wpaw-insights-activity-cost {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-insights-settings-link {
    color: var(--aw-dark-accent) !important;
}

.wpaw-insights-settings-link:hover {
    color: #b4dbff !important;
}

.wpaw-insights-audit-btn {
    border-color: var(--aw-dark-accent-bright) !important;
    color: var(--aw-dark-accent) !important;
}

.wpaw-insights-audit-btn:hover {
    background: var(--aw-dark-option-bg-active) !important;
}

/* =========================================================================
   18. SEO TAB — Dark
   ========================================================================= */

.wpaw-seo-tab {
    background: var(--aw-dark-surface) !important;
}

.wpaw-seo-header h3 {
    color: var(--aw-dark-text) !important;
}

.wpaw-seo-section h4 {
    color: var(--aw-dark-text) !important;
}

.wpaw-seo-field input,
.wpaw-seo-field textarea {
    background: var(--aw-dark-surface-deep) !important;
    border-color: var(--aw-dark-border-strong) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-seo-field input:focus,
.wpaw-seo-field textarea:focus {
    border-color: var(--aw-dark-accent-bright) !important;
}

.wpaw-char-count {
    color: var(--aw-dark-text-muted) !important;
}

/* SEO preview */
.wpaw-seo-preview {
    background: #ffffff !important;
    border-radius: 8px;
    padding: 12px;
}

.wpaw-seo-preview-title {
    color: #1a0dab !important;
}

.wpaw-seo-preview-url {
    color: #006621 !important;
}

.wpaw-seo-preview-desc {
    color: #545454 !important;
}

/* SEO audit */
.wpaw-seo-audit-header label {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-seo-score {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-seo-score .score-value {
    color: var(--aw-dark-text) !important;
}

.wpaw-seo-score .score-label {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-seo-stat .stat-label {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-seo-stat .stat-value {
    color: var(--aw-dark-text) !important;
}

.wpaw-seo-check {
    border-color: var(--aw-dark-border-subtle) !important;
}

.wpaw-seo-check .check-label {
    color: var(--aw-dark-text) !important;
}

.wpaw-seo-fix-button.components-button.is-secondary.is-small {
    color: var(--aw-dark-accent) !important;
    border-color: var(--aw-dark-accent-bright) !important;
    background: transparent !important;
}

.wpaw-seo-fix-button.components-button.is-secondary.is-small:hover:not(
        :disabled
    ),
.wpaw-seo-fix-button.components-button.is-secondary.is-small:focus:not(
        :disabled
    ) {
    background: var(--aw-dark-selected-pill) !important;
    color: var(--aw-dark-accent) !important;
}

/* Score colors */
.wpaw-seo-score.good,
.wpaw-score-value.good {
    color: #4caf50 !important;
}

.wpaw-seo-score.warning,
.wpaw-score-value.warning {
    color: #ff9800 !important;
}

.wpaw-seo-score.poor,
.wpaw-score-value.bad {
    color: #ff8a80 !important;
}

/* Issue items */
.wpaw-issue-item {
    border-color: var(--aw-dark-border) !important;
}

.wpaw-issue-name {
    color: var(--aw-dark-text) !important;
}

.wpaw-issue-message {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-issue-item.good .wpaw-issue-severity {
    color: #4caf50 !important;
    background: rgba(76, 175, 80, 0.15) !important;
}

.wpaw-issue-item.error .wpaw-issue-severity,
.wpaw-issue-item.failed .wpaw-issue-severity {
    color: #ff8a80 !important;
    background: rgba(186, 26, 26, 0.2) !important;
}

.wpaw-issue-item.warning .wpaw-issue-severity {
    color: #ff9800 !important;
    background: rgba(255, 152, 0, 0.15) !important;
}

/* =========================================================================
   19. OUTLINE PANEL — Dark
   ========================================================================= */

.wpaw-outline-panel {
    background: var(--aw-dark-surface) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-outline-title {
    color: var(--aw-dark-text) !important;
}

.wpaw-outline-close {
    color: var(--aw-dark-text-muted) !important;
    background: transparent !important;
}

.wpaw-outline-close:hover {
    color: var(--aw-dark-text) !important;
    background: var(--aw-dark-card-bg) !important;
}

.wpaw-outline-item {
    color: var(--aw-dark-text) !important;
    border-color: var(--aw-dark-border-subtle) !important;
}

.wpaw-outline-item:hover {
    background: var(--aw-dark-option-bg) !important;
}

.wpaw-outline-label {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-outline-text {
    color: var(--aw-dark-text) !important;
}

.wpaw-outline-count {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-outline-footer {
    border-color: var(--aw-dark-border) !important;
}

.wpaw-outline-empty {
    color: var(--aw-dark-text-muted) !important;
}

/* =========================================================================
   20. CONTEXT INDICATOR — Dark
   ========================================================================= */

.wpaw-context-indicator {
    background: var(--aw-dark-surface) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-context-info {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-context-count,
.wpaw-context-tokens,
.wpaw-context-cost {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-context-toggle {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-context-toggle:hover {
    color: var(--aw-dark-text) !important;
}

/* =========================================================================
   21. FOCUS KEYWORD BAR — Dark
   ========================================================================= */

.wpaw-focus-keyword-bar {
    background: var(--aw-dark-surface) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-fk-select,
.wpaw-fk-select-full {
    background: var(--aw-dark-surface-deep) !important;
    border-color: var(--aw-dark-border-strong) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-fk-input {
    background: var(--aw-dark-surface-deep) !important;
    border-color: var(--aw-dark-border-strong) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-fk-input:focus {
    border-color: var(--aw-dark-accent-bright) !important;
    box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
}

.wpaw-fk-input::placeholder {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-fk-custom-input {
    background: var(--aw-dark-surface-deep) !important;
    border-color: var(--aw-dark-border-strong) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-fk-custom-input::placeholder {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-fk-select:focus,
.wpaw-fk-select-full:focus {
    border-color: var(--aw-dark-accent-bright) !important;
    box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
}

.wpaw-fk-select option,
.wpaw-fk-select-full option {
    background: var(--aw-dark-surface-deep) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-fk-cost {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-fk-expand,
.wpaw-fk-collapse {
    color: var(--aw-dark-text-muted) !important;
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-fk-expand:hover,
.wpaw-fk-collapse:hover {
    color: var(--aw-dark-text) !important;
    background: var(--aw-dark-option-bg-active) !important;
    border-color: var(--aw-dark-border-strong) !important;
}

.wpaw-fk-header {
    color: var(--aw-dark-text) !important;
}

.wpaw-fk-suggestions {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-fk-suggestions-label {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-fk-suggestion-item {
    border-color: var(--aw-dark-border) !important;
}

.wpaw-fk-suggestion-item:hover {
    background: var(--aw-dark-option-bg) !important;
}

.wpaw-fk-suggestion-item.selected {
    background: var(--aw-dark-selected-pill) !important;
    border-color: var(--aw-dark-accent-bright) !important;
}

.wpaw-fk-suggestion-text {
    color: var(--aw-dark-text) !important;
}

.wpaw-fk-suggestion-source {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-fk-stats {
    border-top-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-fk-divider {
    color: var(--aw-dark-border) !important;
}

/* =========================================================================
   22. SESSIONS LIST — Dark
   ========================================================================= */

.wpaw-sessions-list-view {
    background: var(--aw-dark-surface) !important;
}

.wpaw-sessions-header-bar {
    border-color: var(--aw-dark-border) !important;
}

.wpaw-sessions-title {
    color: var(--aw-dark-text) !important;
}

.wpaw-new-conversation-btn {
    color: var(--aw-dark-accent) !important;
}

.wpaw-sessions-list {
    /* inherits */
}

.wpaw-no-sessions {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-session-item {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-session-item:hover {
    background: var(--aw-dark-option-bg-active) !important;
    border-color: var(--aw-dark-border-strong) !important;
}

.wpaw-session-title {
    color: var(--aw-dark-text) !important;
}

.wpaw-session-meta {
    color: var(--aw-dark-text-muted) !important;
}

/* =========================================================================
   23. CONTEXTUAL ACTION — Dark
   ========================================================================= */

.wpaw-contextual-action {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-action-content h4 {
    color: var(--aw-dark-text) !important;
}

.wpaw-action-content p {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-action-content .components-button {
    background: var(--aw-dark-accent-bright) !important;
    color: #fffeff !important;
}

.wpaw-action-content .components-button:hover {
    background: #005f8a !important;
}

/* =========================================================================
   24. WRITING EMPTY STATE — Dark
   ========================================================================= */

.wpaw-writing-empty-state {
    background: var(--aw-dark-surface) !important;
}

.wpaw-empty-state-content h3 {
    color: var(--aw-dark-text) !important;
}

.wpaw-empty-state-content p {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-empty-state-button {
    background: var(--aw-dark-accent-bright) !important;
    color: #fffeff !important;
}

.wpaw-empty-state-hint {
    color: var(--aw-dark-text-muted) !important;
}

/* =========================================================================
   25. AUTOCOMPLETE / MENTION — Dark
   ========================================================================= */

.wpaw-mention-autocomplete {
    background: var(--aw-dark-surface-deep) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-mention-option {
    border-bottom-color: var(--aw-dark-border) !important;
}

.wpaw-mention-option.selected,
.wpaw-mention-option:hover {
    background: var(--aw-dark-option-bg-active) !important;
}

.wpaw-mention-option strong {
    color: var(--aw-dark-text) !important;
}

.wpaw-mention-option span {
    color: var(--aw-dark-text-muted) !important;
}

/* Block mentioned */
.wpaw-block-mentioned {
    background: var(--aw-dark-selected-pill) !important;
    color: var(--aw-dark-accent) !important;
}

.wpaw-block-mentioned:hover {
    background: rgba(0, 124, 186, 0.35) !important;
}

/* =========================================================================
   26. LOADING & ANIMATION
   ========================================================================= */

/* Loading bar — top of sidebar during execution */
.wpaw-loading-bar {
    height: 4px;
    background: var(--aw-dark-surface-deeper);
    overflow: hidden;
    flex-shrink: 0;
}

.wpaw-loading-bar-fill {
    height: 100%;
    background: var(--aw-dark-accent-bright);
    animation: loading-bar 2s ease-in-out infinite;
}

@keyframes loading-bar {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(200%);
    }
}

/* AI pulse background for executing state */
.wpaw-ai-pulse-bg {
    animation: pulse-bg 3s ease-in-out infinite;
}

@keyframes pulse-bg {
    0%,
    100% {
        background-color: var(--aw-dark-surface);
    }
    50% {
        background-color: #31373d;
    }
}

/* Dots loader */
.wpaw-dots-loader {
    background-color: var(--aw-dark-accent) !important;
    box-shadow:
        12px 0 var(--aw-dark-accent),
        -12px 0 var(--aw-dark-accent) !important;
}

/* Streaming indicator */
.wpaw-streaming-indicator {
    color: var(--aw-dark-accent) !important;
}

.wpaw-streaming-indicator::after {
    background: var(--aw-dark-accent) !important;
}

/* Typing indicator */
.wpaw-typing-indicator {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-typing-dots span {
    background: var(--aw-dark-text-muted) !important;
}

/* Processing indicator */
.wpaw-processing-indicator {
    color: var(--aw-dark-text-muted) !important;
}

/* Spinning icon */
.wpaw-spinning-icon svg {
    color: var(--aw-dark-accent) !important;
}

/* =========================================================================
   27. PROGRESS BAR — Dark Track, Blue Fill (Pattern 3)
   ========================================================================= */

.wpaw-progress-bar {
    background: var(--aw-dark-progress-track) !important;
    height: 6px !important;
    border-radius: 3px !important;
}

.wpaw-progress-fill {
    background: var(--aw-dark-accent-bright) !important;
    border-radius: 3px !important;
}

/* Status card for executing state */
.wpaw-status-card {
    background: var(--aw-dark-card-bg) !important;
    border: 1px solid var(--aw-dark-border) !important;
    border-radius: 8px !important;
    padding: 12px 16px;
}

.wpaw-status-card .wpaw-progress-text {
    color: var(--aw-dark-accent) !important;
    font: var(--aw-text-code-sm);
}

.wpaw-status-card .wpaw-progress-percentage {
    color: var(--aw-dark-accent) !important;
    font: var(--aw-text-code-sm);
    font-weight: 700;
}

/* =========================================================================
   28. SUGGESTIONS — Dark
   ========================================================================= */

.wpaw-suggestions-banner {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-suggestion-analyzing {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-suggestion-item {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-suggestion-header {
    color: var(--aw-dark-text) !important;
}

.wpaw-suggestion-location {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-suggestion-priority {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-suggestion-content {
    color: var(--aw-dark-text) !important;
}

.wpaw-suggestion-issue {
    color: var(--aw-dark-accent) !important;
}

.wpaw-suggestion-text {
    color: rgba(237, 241, 249, 0.7) !important;
}

.wpaw-suggestion-actions .wpaw-btn {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-suggestion-actions .wpaw-btn-apply {
    background: var(--aw-dark-accent-bright) !important;
    color: #fffeff !important;
}

.wpaw-suggestion-dismiss-all {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-suggestion-dismiss-all:hover {
    color: var(--aw-dark-text) !important;
}

/* =========================================================================
   29. COMMAND PALETTE — Dark
   ========================================================================= */

.wpaw-command-palette-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
}

.wpaw-command-palette {
    background: var(--aw-dark-surface-deep) !important;
    border-color: var(--aw-dark-border-strong) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

.wpaw-command-palette-input {
    background: var(--aw-dark-surface-deeper) !important;
    border-color: var(--aw-dark-border-strong) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-command-palette-input::placeholder {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-command-palette-results {
    border-color: var(--aw-dark-border) !important;
}

.wpaw-command-palette-item {
    color: var(--aw-dark-text) !important;
}

.wpaw-command-palette-item:hover,
.wpaw-command-palette-item.selected {
    background: var(--aw-dark-option-bg-active) !important;
}

.wpaw-command-palette-item.selected {
    border-left-color: var(--aw-dark-accent-bright) !important;
}

.wpaw-command-icon {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-command-label {
    color: var(--aw-dark-text) !important;
}

/* Command palette scrollbar */
.wpaw-command-palette-results::-webkit-scrollbar {
    width: 6px;
}

.wpaw-command-palette-results::-webkit-scrollbar-track {
    background: transparent !important;
}

.wpaw-command-palette-results::-webkit-scrollbar-thumb {
    background: var(--aw-dark-scrollbar) !important;
    border-radius: 10px;
}

.wpaw-command-palette-results::-webkit-scrollbar-thumb:hover {
    background: var(--aw-dark-scrollbar-hover) !important;
}

/* =========================================================================
   30. OVERLAYS & MODALS — Dark
   ========================================================================= */

.wpaw-refine-confirm-overlay,
.wpaw-write-confirm-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

.wpaw-refine-confirm-modal,
.wpaw-write-confirm-modal {
    background: var(--aw-dark-surface-deep) !important;
    border-color: var(--aw-dark-border) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

.wpaw-refine-confirm-title,
.wpaw-write-confirm-title {
    color: var(--aw-dark-text) !important;
}

.wpaw-refine-confirm-body,
.wpaw-write-confirm-body {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-refine-confirm-actions .components-button.is-primary,
.wpaw-write-confirm-actions .components-button.is-primary {
    background: var(--aw-dark-accent-bright) !important;
    color: #fffeff !important;
}

/* =========================================================================
   31. EDITOR LOCK BANNER — Dark
   ========================================================================= */

.wpaw-editor-lock-banner {
    background: rgba(0, 124, 186, 0.15) !important;
    border-color: var(--aw-dark-accent-bright) !important;
    color: var(--aw-dark-accent) !important;
}

.wpaw-refinement-lock-banner {
    background: rgba(194, 65, 12, 0.15) !important;
    border-color: #c2410c !important;
    color: #ff9800 !important;
}

/* =========================================================================
   32. INFO PANEL — Dark
   ========================================================================= */

.wpaw-info {
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-info a {
    color: var(--aw-dark-accent) !important;
}

.wpaw-info a:hover {
    color: #b4dbff !important;
}

/* =========================================================================
   33. RESPONSE CONTENT — Dark Typography
   ========================================================================= */

#wp-agentic-writer\:wp-agentic-writer .interface-complementary-area h3,
.wpaw-response-content h3,
.wpaw-messages-inner h3 {
    color: var(--aw-dark-text) !important;
}

.wpaw-response-content h1 {
    color: var(--aw-dark-text) !important;
}

.wpaw-response-content h2 {
    color: var(--aw-dark-text) !important;
}

.wpaw-response-content h4,
.wpaw-response-content h5,
.wpaw-response-content h6 {
    color: var(--aw-dark-text) !important;
}

.wpaw-response-content table {
    border-color: var(--aw-dark-border) !important;
}

.wpaw-response-content table th,
.wpaw-response-content table td {
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-response-content {
    color: var(--aw-dark-text) !important;
}

.wpaw-response-content p {
    color: var(--aw-dark-text) !important;
}

/* Code blocks in AI response */
.wpaw-ai-response pre {
    background: var(--aw-dark-surface-deeper) !important;
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-ai-response code {
    background: var(--aw-dark-option-bg) !important;
    color: var(--aw-dark-accent) !important;
}

/* =========================================================================
   34. MODE BADGE — Dark
   ========================================================================= */

.wpaw-mode-badge {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-mode-badge.mode-chat {
    border-color: var(--aw-dark-accent-bright) !important;
    color: var(--aw-dark-accent) !important;
}

.wpaw-mode-badge.mode-planning {
    border-color: #ff9800 !important;
    color: #ff9800 !important;
}

.wpaw-mode-badge.mode-writing {
    border-color: #4caf50 !important;
    color: #4caf50 !important;
}

/* =========================================================================
   35. PROVIDER BADGES — Dark
   ========================================================================= */

.wpaw-provider-info {
    color: var(--aw-dark-text-muted) !important;
    background: var(--aw-dark-card-bg) !important;
}

.wpaw-provider-info:hover {
    background: var(--aw-dark-option-bg-active) !important;
}

.wpaw-provider-badge {
    background: var(--aw-dark-card-bg) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-provider-badge[title*="warning"],
.wpaw-provider-badge[title*="Warning"],
.wpaw-provider-info:has(.wpaw-fallback) {
    color: #ff9800 !important;
    background: rgba(255, 152, 0, 0.15) !important;
}

/* =========================================================================
   36. WEB SEARCH TOGGLE — Dark
   ========================================================================= */

.wpaw-web-search-toggle {
    color: var(--aw-dark-text-muted) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-web-search-toggle:hover {
    background: var(--aw-dark-card-bg) !important;
    color: var(--aw-dark-text) !important;
}

.wpaw-web-search-icon {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-web-search-label {
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-web-search-toggle input:checked ~ .wpaw-web-search-label {
    color: var(--aw-dark-accent) !important;
}

.wpaw-web-search-toggle.wpaw-search-blocked {
    opacity: 0.5;
}

.wpaw-web-search-toggle.wpaw-search-blocked .wpaw-web-search-label {
    color: var(--aw-dark-text-muted) !important;
}

/* =========================================================================
   37. KEYBOARD HINTS — Dark
   ========================================================================= */

.wpaw-keyboard-hints {
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-kbd kbd {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text) !important;
}

/* Input hint */
.wpaw-input-hint {
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text-muted) !important;
}

.wpaw-input-hint kbd {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border) !important;
    color: var(--aw-dark-text) !important;
}

/* =========================================================================
   38. NOTICES — Dark
   ========================================================================= */

.wpaw-heartbeat-notice {
    background: rgba(255, 152, 0, 0.1) !important;
    border-color: rgba(255, 152, 0, 0.3) !important;
    color: #ff9800 !important;
}

.wpaw-provider-warning {
    background: rgba(186, 26, 26, 0.1) !important;
    border-color: rgba(186, 26, 26, 0.3) !important;
    color: #ff8a80 !important;
}

.wpaw-provider-warning a {
    color: var(--aw-dark-accent) !important;
}

.wpaw-health-notice {
    background: rgba(255, 152, 0, 0.1) !important;
    border-color: rgba(255, 152, 0, 0.3) !important;
    color: #ff9800 !important;
}

.wpaw-health-notice a {
    color: var(--aw-dark-accent) !important;
}

/* =========================================================================
   39. CLEAR CONTEXT BUTTON — Dark
   ========================================================================= */

.wpaw-clear-context {
    color: var(--aw-dark-text-muted) !important;
    background: transparent !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-clear-context:disabled {
    opacity: 0.3;
}

/* =========================================================================
   40. MEMANTO BADGE — Dark
   ========================================================================= */

.wpaw-memanto-badge {
    background: rgba(0, 124, 186, 0.2) !important;
    color: var(--aw-dark-accent) !important;
    border-color: var(--aw-dark-accent-bright) !important;
}

/* =========================================================================
   41. CONFIG SUMMARY — Dark
   ========================================================================= */

.wpaw-plan-config-summary {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border) !important;
}

.wpaw-config-summary-item {
    border-color: var(--aw-dark-border-subtle) !important;
    color: var(--aw-dark-text-muted) !important;
}

/* =========================================================================
   42. GENERIC DARK SCROLLBAR FOR ALL SIDEBAR SCROLLABLE AREAS
   ========================================================================= */

#wp-agentic-writer\:wp-agentic-writer ::-webkit-scrollbar {
    width: 6px;
}

#wp-agentic-writer\:wp-agentic-writer ::-webkit-scrollbar-track {
    background: transparent !important;
}

#wp-agentic-writer\:wp-agentic-writer ::-webkit-scrollbar-thumb {
    background: var(--aw-dark-scrollbar) !important;
    border-radius: 10px;
}

#wp-agentic-writer\:wp-agentic-writer ::-webkit-scrollbar-thumb:hover {
    background: var(--aw-dark-scrollbar-hover) !important;
}

/* =========================================================================
   43. AI ITEM INFO TYPE — Dark
   ========================================================================= */

.wpaw-ai-item[data-type="info"] {
    background: var(--aw-dark-card-bg) !important;
    border-color: var(--aw-dark-border-subtle) !important;
}

.wpaw-ai-item[data-type="info"] .wpaw-ai-content {
    color: var(--aw-dark-text-muted) !important;
}

/* =========================================================================
   44. TYPING INDICATOR — Dark
   ========================================================================= */

.wpaw-typing-indicator {
    color: var(--aw-dark-text-muted) !important;
}

/* =========================================================================
   45. GLOBAL DARK RESETS — Catch-all for WordPress component overrides
   ========================================================================= */

/* Force dark background on any WP panel elements inside the sidebar */
#wp-agentic-writer\:wp-agentic-writer .components-panel__body {
    background: var(--aw-dark-surface) !important;
}

/* Ensure all text inside the sidebar is light by default */
#wp-agentic-writer\:wp-agentic-writer,
#wp-agentic-writer\:wp-agentic-writer * {
    --aw-surface: #2c3137;
    --aw-surface-container-lowest: #2c3137;
    --aw-surface-container-low: #333a40;
    --aw-surface-container: #383f45;
    --aw-surface-container-high: #3d444a;
    --aw-surface-container-highest: #424950;
    --aw-on-surface: #edf1f9;
    --aw-on-surface-variant: #8b9298;
    --aw-outline: rgba(255, 255, 255, 0.15);
    --aw-outline-variant: rgba(255, 255, 255, 0.1);
    --aw-outline-subtle: rgba(255, 255, 255, 0.05);
}

/* Override the sidebar toggle icon inversion — the WP block editor makes the button dark when active, so we always need inversion */
.is-pressed[aria-controls="wp-agentic-writer:wp-agentic-writer"] img,
.components-button.is-pressed[aria-controls="wp-agentic-writer:wp-agentic-writer"]
    img {
    filter: invert(1) !important;
}

/* =========================================================================
   END OF DARK THEME OVERRIDES
   ========================================================================= */