/**
 * Writers Dashboard — Polish Layer (v3.2.0)
 * Adds modern animations, refined typography, and aesthetic depth on top of
 * the existing dashboard.css. Loaded AFTER dashboard.css so it takes precedence.
 *
 * Scope:
 *  - Editor surface refinement (title, toolbar, contentEditable)
 *  - Animated AI Content Check card (ring, gradient fill, adaptive messages)
 *  - Focus mode entry/exit polish
 *  - Smooth micro-interactions (buttons, cards, tabs, status chips)
 *  - Mobile surface refinement
 */

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — referenced throughout this polish layer
   ═══════════════════════════════════════════════════════════════ */
.wd-wrap {
    --wd-surface: #ffffff;
    --wd-surface-soft: #fafbfc;
    --wd-border: #eaedf2;
    --wd-border-soft: #f1f3f7;
    --wd-ink: #111827;
    --wd-ink-2: #1f2937;
    --wd-ink-3: #4b5563;
    --wd-muted: #6b7280;
    --wd-faint: #9ca3af;
    --wd-amber: #f59e0b;
    --wd-amber-2: #f97316;
    --wd-amber-soft: #fffbeb;
    --wd-green: #10b981;
    --wd-rose: #ec4899;
    --wd-blue: #3b82f6;
    --wd-shadow-sm: 0 1px 2px rgba(17,24,39,0.04), 0 1px 1px rgba(17,24,39,0.02);
    --wd-shadow: 0 4px 12px rgba(17,24,39,0.05), 0 2px 4px rgba(17,24,39,0.03);
    --wd-shadow-md: 0 10px 30px rgba(17,24,39,0.07), 0 4px 10px rgba(17,24,39,0.04);
    --wd-shadow-lg: 0 20px 50px rgba(17,24,39,0.10), 0 8px 20px rgba(17,24,39,0.05);
    --wd-shadow-amber: 0 8px 24px rgba(249,115,22,0.22), 0 2px 6px rgba(249,115,22,0.10);
    --wd-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --wd-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL — smoother antialiasing + selection color
   ═══════════════════════════════════════════════════════════════ */
.wd-wrap {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}
.wd-wrap ::selection { background: #fde68a !important; color: #78350f !important; }

/* Page entrance */
@keyframes wd-page-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.wd-wrap .wd-dashboard-view,
.wd-wrap .wd-editor-view {
    animation: wd-page-in 0.42s var(--wd-ease) both !important;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — header, status cards, tabs
   ═══════════════════════════════════════════════════════════════ */
.wd-wrap .wd-dash-header {
    padding: 4px 0 !important;
}
.wd-wrap .wd-dash-title {
    letter-spacing: -0.02em !important;
}
.wd-wrap .wd-dash-welcome {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Status cards — soft elevation, subtle gradient */
.wd-wrap .wd-scard {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
    box-shadow: var(--wd-shadow-sm) !important;
    transition: transform 0.25s var(--wd-ease), box-shadow 0.25s var(--wd-ease), border-color 0.2s !important;
}
.wd-wrap .wd-scard::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #eaedf2, transparent) !important;
    opacity: 0.8 !important;
}
.wd-wrap .wd-scard-draft::before { background: linear-gradient(90deg, transparent, #9ca3af, transparent) !important; }
.wd-wrap .wd-scard-pending::before { background: linear-gradient(90deg, transparent, #f59e0b, transparent) !important; }
.wd-wrap .wd-scard-published::before { background: linear-gradient(90deg, transparent, #10b981, transparent) !important; }
.wd-wrap .wd-scard:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--wd-shadow-md) !important;
    border-color: #dde2ea !important;
}
.wd-wrap .wd-scard-val {
    letter-spacing: -0.03em !important;
    background: linear-gradient(180deg, #1f2937, #374151) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.wd-wrap .wd-scard-pending .wd-scard-val {
    background: linear-gradient(180deg, #f59e0b, #d97706) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.wd-wrap .wd-scard-published .wd-scard-val {
    background: linear-gradient(180deg, #10b981, #059669) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Tabs — refined pill style */
.wd-wrap .wd-tab {
    box-shadow: var(--wd-shadow-sm) !important;
    transition: all 0.25s var(--wd-ease) !important;
}
.wd-wrap .wd-tab:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--wd-shadow) !important;
}
.wd-wrap .wd-tab.active {
    box-shadow: var(--wd-shadow-amber) !important;
}

/* Buttons — better physics */
.wd-wrap .wd-btn-primary {
    box-shadow: var(--wd-shadow-amber) !important;
    transition: transform 0.2s var(--wd-ease), box-shadow 0.25s var(--wd-ease), filter 0.2s !important;
    letter-spacing: 0.01em !important;
}
.wd-wrap .wd-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(249,115,22,0.32), 0 4px 10px rgba(249,115,22,0.16) !important;
    filter: brightness(1.03) !important;
}
.wd-wrap .wd-btn-primary:active {
    transform: translateY(0) !important;
    transition-duration: 0.08s !important;
}
.wd-wrap .wd-btn-primary:disabled,
.wd-wrap .wd-btn-primary[disabled] {
    filter: grayscale(0.4) brightness(0.98) !important;
    box-shadow: var(--wd-shadow-sm) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}
.wd-wrap .wd-btn-secondary {
    transition: all 0.2s var(--wd-ease) !important;
    box-shadow: var(--wd-shadow-sm) !important;
}
.wd-wrap .wd-btn-secondary:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--wd-shadow) !important;
}

/* Tools bar */
.wd-wrap .wd-tools-bar {
    background: linear-gradient(180deg, #ffffff, #fafbfc) !important;
    box-shadow: var(--wd-shadow-sm) !important;
}
.wd-wrap .wd-tool-item {
    box-shadow: var(--wd-shadow-sm) !important;
    transition: all 0.25s var(--wd-ease) !important;
}
.wd-wrap .wd-tool-item span:first-child {
    transition: transform 0.3s var(--wd-ease-snap) !important;
    display: inline-block !important;
}
.wd-wrap .wd-tool-item:hover span:first-child {
    transform: scale(1.15) rotate(-6deg) !important;
}

/* ═══════════════════════════════════════════════════════════════
   EDITOR — refined surface, title, toolbar, contentEditable
   ═══════════════════════════════════════════════════════════════ */
.wd-wrap .wd-ed-header {
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--wd-border-soft) !important;
    margin-bottom: 22px !important;
}
.wd-wrap .wd-ed-title {
    letter-spacing: -0.02em !important;
    background: linear-gradient(90deg, #111827, #374151) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.wd-wrap .wd-back-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    transition: all 0.2s var(--wd-ease) !important;
}
.wd-wrap .wd-back-link:hover {
    background: #fef3c7 !important;
    transform: translateX(-2px) !important;
}

/* Card upgrades — softer shadow, smoother borders */
.wd-wrap .wd-card {
    border-color: var(--wd-border) !important;
    box-shadow: var(--wd-shadow-sm) !important;
    transition: box-shadow 0.25s var(--wd-ease), border-color 0.2s !important;
}
.wd-wrap .wd-card:focus-within {
    border-color: #fde68a !important;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.08), var(--wd-shadow) !important;
}
.wd-wrap .wd-card-head {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    color: var(--wd-faint) !important;
}

/* Title input — bigger breathing room, subtle focus */
.wd-wrap .wd-title-input {
    font-size: 26px !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
    padding: 6px 0 !important;
    border-bottom: 2px solid transparent !important;
    transition: border-color 0.25s var(--wd-ease) !important;
}
.wd-wrap .wd-title-input:focus {
    border-bottom-color: var(--wd-amber) !important;
}
.wd-wrap .wd-title-count {
    font-size: 11px !important;
    color: var(--wd-faint) !important;
}

/* Toolbar — floating button feel with segmented clusters */
.wd-wrap .wd-toolbar {
    background: linear-gradient(180deg, #fbfcfd, #f6f8fb) !important;
    border: 1px solid var(--wd-border-soft) !important;
    padding: 8px !important;
    border-radius: 12px !important;
    gap: 2px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
}
.wd-wrap .wd-toolbar button {
    padding: 7px 11px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: var(--wd-ink-3) !important;
    transition: all 0.15s var(--wd-ease) !important;
    position: relative !important;
}
.wd-wrap .wd-toolbar button:hover {
    background: #ffffff !important;
    color: var(--wd-ink) !important;
    box-shadow: var(--wd-shadow-sm) !important;
    transform: translateY(-1px) !important;
}
.wd-wrap .wd-toolbar button:active {
    transform: translateY(0) !important;
}
.wd-wrap .wd-toolbar button.active,
.wd-wrap .wd-toolbar button.wd-tb-active {
    background: linear-gradient(135deg, var(--wd-amber), var(--wd-amber-2)) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(249,115,22,0.28) !important;
}
.wd-wrap .wd-tb-sep {
    background: linear-gradient(180deg, transparent, #d1d5db, transparent) !important;
    margin: 0 4px !important;
    height: 20px !important;
}
.wd-wrap #wd-focus-mode {
    background: linear-gradient(135deg, #1f2937, #374151) !important;
    color: #fff !important;
    margin-left: auto !important;
}
.wd-wrap #wd-focus-mode:hover {
    background: linear-gradient(135deg, #111827, #1f2937) !important;
    color: #fff !important;
}

/* Content editable — luxury typography */
.wd-wrap .wd-content-editable {
    min-height: 420px !important;
    padding: 22px 24px !important;
    border-radius: 14px !important;
    background: #fdfefe !important;
    font-size: 16.5px !important;
    line-height: 1.85 !important;
    color: var(--wd-ink-2) !important;
    font-family: -apple-system, 'Segoe UI', 'Charter', Georgia, serif !important;
    transition: all 0.25s var(--wd-ease) !important;
    caret-color: var(--wd-amber) !important;
}
.wd-wrap .wd-content-editable:focus {
    background: #ffffff !important;
    border-color: var(--wd-amber) !important;
    box-shadow: 0 0 0 4px rgba(245,158,11,0.08) !important;
}
.wd-wrap .wd-content-editable[data-wd-empty="1"]::before {
    content: 'Begin writing your article…' !important;
    color: #d1d5db !important;
    pointer-events: none !important;
    position: absolute !important;
    font-style: italic !important;
}
.wd-wrap .wd-content-editable { position: relative !important; }
.wd-wrap .wd-content-editable h2,
.wd-wrap .wd-content-editable h3,
.wd-wrap .wd-content-editable h4 {
    letter-spacing: -0.015em !important;
    color: var(--wd-ink) !important;
}
.wd-wrap .wd-content-editable blockquote {
    border-radius: 0 10px 10px 0 !important;
    font-style: italic !important;
    color: #78350f !important;
}

/* Editor footer — status pill */
.wd-wrap .wd-ed-footer {
    padding: 14px 4px 4px !important;
    font-size: 13px !important;
    color: var(--wd-muted) !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}
.wd-wrap .wd-ed-footer span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.wd-wrap .wd-ed-footer strong {
    font-variant-numeric: tabular-nums !important;
    font-size: 14px !important;
}
.wd-wrap #wd-autosave-status {
    margin-left: auto !important;
    color: var(--wd-green) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    opacity: 0 !important;
    transition: opacity 0.3s !important;
}
.wd-wrap #wd-autosave-status:not(:empty) {
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   AI CONTENT CHECK — modern adaptive card with animated ring
   ═══════════════════════════════════════════════════════════════ */
.wd-wrap .wd-ai-checker {
    background: #ffffff !important;
    border: 1px solid var(--wd-border) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    transition: all 0.3s var(--wd-ease) !important;
    box-shadow: var(--wd-shadow-sm) !important;
}
.wd-wrap .wd-ai-checker.wd-ai-running {
    border-color: #fde68a !important;
    box-shadow: 0 0 0 4px rgba(245,158,11,0.08), var(--wd-shadow) !important;
}
.wd-wrap .wd-ai-checker.wd-ai-pass {
    border-color: #a7f3d0 !important;
    box-shadow: 0 0 0 4px rgba(16,185,129,0.08), var(--wd-shadow) !important;
}
.wd-wrap .wd-ai-checker.wd-ai-warn {
    border-color: #fde68a !important;
}
.wd-wrap .wd-ai-checker.wd-ai-fail {
    border-color: #fecaca !important;
}
.wd-wrap .wd-ai-checker-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    background: linear-gradient(180deg, #fafbfc, #f3f4f6) !important;
    border-bottom: 1px solid var(--wd-border-soft) !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}
.wd-wrap .wd-ai-checker-header:hover {
    background: linear-gradient(180deg, #f3f4f6, #eef0f3) !important;
}
.wd-wrap .wd-ai-checker-header h4 {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--wd-ink-2) !important;
    margin: 0 !important;
    letter-spacing: -0.005em !important;
}
.wd-wrap .wd-ai-check-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    background: linear-gradient(135deg, var(--wd-amber), var(--wd-amber-2)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(249,115,22,0.25) !important;
    transition: all 0.2s var(--wd-ease) !important;
}
.wd-wrap .wd-ai-check-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(249,115,22,0.32) !important;
    filter: brightness(1.05) !important;
}
.wd-wrap .wd-ai-check-btn:disabled {
    opacity: 0.7 !important;
    cursor: wait !important;
}
.wd-wrap .wd-ai-checker-body {
    padding: 14px !important;
    background: #ffffff !important;
}

/* Score row — large animated number with ring */
.wd-wrap .wd-ai-score-text {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--wd-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}
.wd-wrap #wd-ai-percent {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--wd-ink) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}
.wd-wrap .wd-ai-score-bar {
    position: relative !important;
    height: 8px !important;
    background: #f1f3f7 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
}
.wd-wrap .wd-ai-score-fill {
    position: relative !important;
    height: 100% !important;
    border-radius: 999px !important;
    transition: width 0.9s var(--wd-ease), background 0.4s !important;
}
.wd-wrap .wd-ai-score-fill::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%) !important;
    background-size: 200% 100% !important;
    animation: wd-score-shimmer 2.2s ease-in-out infinite !important;
    opacity: 0 !important;
    transition: opacity 0.3s !important;
}
.wd-wrap .wd-ai-checker.wd-ai-running .wd-ai-score-fill::after {
    opacity: 1 !important;
}
@keyframes wd-score-shimmer {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* AI status messages — card style */
.wd-wrap .wd-ai-status {
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    animation: wd-fade-up 0.4s var(--wd-ease) !important;
}
@keyframes wd-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.wd-wrap .wd-ai-issue {
    animation: wd-fade-up 0.35s var(--wd-ease) both !important;
    transition: transform 0.2s var(--wd-ease), box-shadow 0.2s !important;
}
.wd-wrap .wd-ai-issue:hover {
    transform: translateX(2px) !important;
    box-shadow: var(--wd-shadow-sm) !important;
}
.wd-wrap .wd-ai-issue:nth-child(1) { animation-delay: 0.04s !important; }
.wd-wrap .wd-ai-issue:nth-child(2) { animation-delay: 0.08s !important; }
.wd-wrap .wd-ai-issue:nth-child(3) { animation-delay: 0.12s !important; }
.wd-wrap .wd-ai-issue:nth-child(4) { animation-delay: 0.16s !important; }
.wd-wrap .wd-ai-issue:nth-child(5) { animation-delay: 0.20s !important; }

/* Find-phrase chips */
.wd-wrap .wd-ai-find-phrase {
    transition: all 0.18s var(--wd-ease) !important;
}
.wd-wrap .wd-ai-find-phrase:hover {
    background: #fcd34d !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(245,158,11,0.25) !important;
}

/* Highlight for found phrase in editor */
.wd-wrap .wd-ai-highlight {
    animation: wd-pulse-mark 1.5s var(--wd-ease) 3 !important;
}
@keyframes wd-pulse-mark {
    0%, 100% { background: #fde68a; box-shadow: 0 0 0 0 rgba(245,158,11,0.35); }
    50% { background: #fcd34d; box-shadow: 0 0 0 6px rgba(245,158,11,0); }
}

/* ═══════════════════════════════════════════════════════════════
   SUBMIT HELPER — refined check list
   ═══════════════════════════════════════════════════════════════ */
.wd-wrap .wd-submit-helper {
    background: linear-gradient(180deg, #fafbfc, #f3f4f6) !important;
    border: 1px solid var(--wd-border-soft) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin: 10px 0 !important;
    transition: all 0.3s var(--wd-ease) !important;
}
.wd-wrap .wd-submit-helper.passed {
    background: linear-gradient(180deg, #f0fdf4, #ecfdf5) !important;
    border-color: #a7f3d0 !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.08) !important;
}
.wd-wrap .wd-submit-helper.blocked {
    background: linear-gradient(180deg, #fffbeb, #fef3c7) !important;
    border-color: #fde68a !important;
}
.wd-wrap .wd-submit-helper > div > div {
    padding: 3px 0 !important;
    transition: color 0.25s !important;
}

/* Integrity + Fact Check cards refinement */
.wd-wrap #wd-integrity-checker,
.wd-wrap #wd-fact-checker {
    box-shadow: var(--wd-shadow-sm) !important;
    transition: box-shadow 0.25s var(--wd-ease) !important;
}
.wd-wrap #wd-integrity-checker:hover,
.wd-wrap #wd-fact-checker:hover {
    box-shadow: var(--wd-shadow) !important;
}

/* ═══════════════════════════════════════════════════════════════
   STATUS BADGES — softer pill look
   ═══════════════════════════════════════════════════════════════ */
.wd-wrap .wd-status-badge {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03) !important;
    letter-spacing: 0.01em !important;
}

/* Table rows — subtle hover lift */
.wd-wrap .wd-article-row {
    transition: background 0.2s !important;
}
.wd-wrap .wd-article-row:hover {
    background: #fafbfc !important;
}
.wd-wrap .wd-edit-btn,
.wd-wrap .wd-del-btn,
.wd-wrap .wd-btn-view {
    transition: all 0.18s var(--wd-ease) !important;
}
.wd-wrap .wd-edit-btn:hover,
.wd-wrap .wd-btn-view:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--wd-shadow-sm) !important;
}

/* ═══════════════════════════════════════════════════════════════
   FOCUS MODE — refined entry, better typography, smoother chrome
   ═══════════════════════════════════════════════════════════════ */
@keyframes wd-focus-in-smooth {
    from { opacity: 0; transform: scale(0.98); filter: blur(4px); }
    to { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes wd-focus-out-smooth {
    from { opacity: 1; transform: scale(1); filter: blur(0); }
    to { opacity: 0; transform: scale(0.985); filter: blur(3px); }
}
.wd-focus-active {
    animation: wd-focus-in-smooth 0.38s var(--wd-ease) !important;
    background: linear-gradient(180deg, #fefefe, #fafafa) !important;
}
.wd-focus-active.wd-focus-exiting {
    animation: wd-focus-out-smooth 0.22s ease-in forwards !important;
}
.wd-focus-active .wd-focus-toolbar {
    padding: 10px 18px !important;
    background: linear-gradient(180deg, #ffffff, #fafbfc) !important;
    border-bottom: 1px solid #eaedf2 !important;
    box-shadow: 0 1px 0 rgba(17,24,39,0.02) !important;
}
.wd-focus-active .wd-focus-toolbar .wd-toolbar {
    padding: 0 !important;
    gap: 2px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.wd-focus-active .wd-focus-toolbar .wd-toolbar button {
    background: #f9fafb !important;
    border: 1px solid transparent !important;
    color: #4b5563 !important;
    border-radius: 7px !important;
    padding: 5px 10px !important;
    font-size: 11.5px !important;
    transition: all 0.15s var(--wd-ease) !important;
}
.wd-focus-active .wd-focus-toolbar .wd-toolbar button:hover {
    background: #fff !important;
    border-color: #e5e7eb !important;
    color: var(--wd-ink) !important;
    box-shadow: var(--wd-shadow-sm) !important;
}
.wd-focus-active .wd-focus-toolbar .wd-toolbar button.wd-tb-active {
    background: linear-gradient(135deg, var(--wd-amber), var(--wd-amber-2)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 3px 8px rgba(249,115,22,0.26) !important;
}

.wd-focus-center {
    padding: 44px 24px !important;
    background: linear-gradient(180deg, #fefefe, #fbfbfc) !important;
}
.wd-focus-center > div {
    max-width: 780px !important;
    width: 100% !important;
}
.wd-focus-center #wd-focus-title {
    font-size: 28px !important;
    letter-spacing: -0.025em !important;
    line-height: 1.3 !important;
    padding: 14px 0 !important;
    font-family: -apple-system, 'Segoe UI', 'Charter', Georgia, serif !important;
    transition: border-color 0.3s var(--wd-ease) !important;
}
.wd-focus-center .wd-content-editable {
    font-family: 'Charter', Georgia, -apple-system, 'Segoe UI', serif !important;
    font-size: 18px !important;
    line-height: 1.95 !important;
    color: var(--wd-ink-2) !important;
    padding: 0 !important;
    caret-color: var(--wd-amber) !important;
    max-height: none !important;
}
.wd-focus-center .wd-content-editable h2 { font-size: 1.55em !important; letter-spacing: -0.02em !important; margin: 1.5em 0 0.5em !important; }
.wd-focus-center .wd-content-editable h3 { font-size: 1.28em !important; letter-spacing: -0.015em !important; margin: 1.2em 0 0.4em !important; }
.wd-focus-center .wd-content-editable p { margin: 0 0 1.1em !important; }
.wd-focus-center .wd-content-editable p:first-child::first-letter {
    font-size: 3.2em !important;
    font-weight: 700 !important;
    float: left !important;
    line-height: 1 !important;
    padding: 4px 10px 0 0 !important;
    color: var(--wd-amber) !important;
}

.wd-focus-active .wd-focus-footer {
    padding: 8px 18px !important;
    background: linear-gradient(180deg, #fafbfc, #f3f4f6) !important;
    border-top: 1px solid #eaedf2 !important;
    font-size: 12px !important;
}
.wd-focus-active .wd-focus-footer strong {
    color: var(--wd-ink) !important;
    font-variant-numeric: tabular-nums !important;
}
.wd-focus-active .wd-focus-footer kbd {
    font-family: inherit !important;
}

.wd-focus-done-btn {
    padding: 7px 18px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    transition: all 0.2s var(--wd-ease) !important;
    box-shadow: 0 3px 8px rgba(249,115,22,0.22) !important;
}
.wd-focus-done-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(249,115,22,0.32) !important;
}

/* Focus mode fact-check overlay — glassy, modern */
#wd-focus-fc-overlay {
    animation: wd-focus-in-smooth 0.32s var(--wd-ease) !important;
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
#wd-focus-fc-overlay > div {
    animation: wd-fade-up 0.35s var(--wd-ease) 0.1s both !important;
}

/* Focus sidebar cards — tighter, more refined */
.wd-focus-left .wd-card > div:first-child,
.wd-focus-right .wd-card > div:first-child,
.wd-focus-left .wd-ai-checker .wd-ai-checker-header,
.wd-focus-right .wd-ai-checker .wd-ai-checker-header {
    background: linear-gradient(180deg, #fafbfc, #f3f4f6) !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid #eaedf2 !important;
}
.wd-focus-left .wd-ai-checker-body,
.wd-focus-right .wd-ai-checker-body {
    padding: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL REFINEMENT
   ═══════════════════════════════════════════════════════════════ */
.wd-wrap .wd-modal {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    background: rgba(17,24,39,0.35) !important;
}
.wd-wrap .wd-modal-box {
    box-shadow: 0 30px 80px rgba(17,24,39,0.35), 0 10px 30px rgba(17,24,39,0.18) !important;
    animation: wd-modal-in 0.32s var(--wd-ease-snap) !important;
}
@keyframes wd-modal-in {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — smooth, aesthetic, touch-friendly
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .wd-wrap .wd-ed-body {
        grid-template-columns: 1fr !important;
    }
    .wd-wrap .wd-ed-side {
        position: static !important;
    }
    .wd-wrap .wd-content-editable {
        min-height: 340px !important;
        padding: 16px 18px !important;
        font-size: 16px !important;
        line-height: 1.8 !important;
    }
    .wd-wrap .wd-title-input {
        font-size: 22px !important;
    }
}

@media (max-width: 768px) {
    /* Sticky editor header for better UX */
    .wd-wrap .wd-ed-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
        background: rgba(255,255,255,0.94) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        padding: 12px 4px !important;
        margin: -4px -4px 16px -4px !important;
        border-bottom: 1px solid var(--wd-border-soft) !important;
    }
    .wd-wrap .wd-ed-title {
        font-size: 18px !important;
        flex: 1 1 100% !important;
    }

    /* Toolbar — horizontal scroll for clean look */
    .wd-wrap .wd-toolbar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 6px 8px !important;
        gap: 1px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%) !important;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%) !important;
    }
    .wd-wrap .wd-toolbar::-webkit-scrollbar { display: none !important; }
    .wd-wrap .wd-toolbar button {
        flex-shrink: 0 !important;
        padding: 7px 10px !important;
        font-size: 12px !important;
    }

    /* Cards — lighter shadows on mobile */
    .wd-wrap .wd-card {
        border-radius: 14px !important;
        padding: 16px !important;
        box-shadow: none !important;
        border-width: 1px !important;
    }

    /* Title input — breathing room */
    .wd-wrap .wd-title-input {
        font-size: 20px !important;
        padding: 6px 2px !important;
    }

    /* AI checker mobile — tighter */
    .wd-wrap #wd-ai-percent {
        font-size: 18px !important;
    }
    .wd-wrap .wd-ai-score-bar {
        height: 7px !important;
    }

    /* Submit buttons — more tappable */
    .wd-wrap .wd-btn-full {
        padding: 14px !important;
        font-size: 14px !important;
        border-radius: 11px !important;
        min-height: 48px !important;
    }

    /* Status cards animate slightly on tap */
    .wd-wrap .wd-scard:active {
        transform: scale(0.98) !important;
    }

    /* Tab bar — horizontal scroll without scrollbar */
    .wd-wrap .wd-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding: 2px 0 10px !important;
        margin: 0 -4px 14px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .wd-wrap .wd-tabs::-webkit-scrollbar { display: none !important; }
    .wd-wrap .wd-tab {
        flex-shrink: 0 !important;
    }

    /* Touch-specific button feedback */
    .wd-wrap .wd-btn-primary:active,
    .wd-wrap .wd-btn-secondary:active,
    .wd-wrap .wd-btn-sm:active {
        transform: scale(0.97) !important;
        transition-duration: 0.08s !important;
    }

    /* Integrity and fact checkers - tighter mobile */
    .wd-wrap #wd-integrity-checker > div:first-child,
    .wd-wrap #wd-fact-checker > div:first-child {
        padding: 10px 12px !important;
    }

    /* Edit toolbar overflow indicator */
    .wd-wrap .wd-ed-footer {
        gap: 12px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    .wd-wrap {
        padding: 12px 12px !important;
    }
    .wd-wrap .wd-dash-title {
        font-size: 26px !important;
        letter-spacing: -0.02em !important;
    }
    .wd-wrap .wd-ed-title {
        font-size: 16px !important;
    }
    .wd-wrap .wd-title-input {
        font-size: 19px !important;
    }
    .wd-wrap .wd-content-editable {
        padding: 14px 16px !important;
        border-radius: 12px !important;
        min-height: 320px !important;
    }
    .wd-wrap .wd-toolbar {
        border-radius: 10px !important;
    }

    /* Focus footer cleaner on phone */
    .wd-focus-active .wd-focus-footer > div:last-child {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY — reduce motion
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .wd-wrap *,
    .wd-wrap *::before,
    .wd-wrap *::after {
        animation-duration: 0.001s !important;
        transition-duration: 0.001s !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DARK-MODE INK (subtle — only if system prefers dark, optional)
   Disabled by default to keep parity with plugin's light theme.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   ADAPTIVE AI MESSAGE — the color of the helper changes by tier
   ═══════════════════════════════════════════════════════════════ */
.wd-wrap .wd-ai-tier-banner {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    animation: wd-fade-up 0.35s var(--wd-ease) !important;
}
.wd-wrap .wd-ai-tier-banner.tier-excellent {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
    border: 1px solid #6ee7b7 !important;
    color: #065f46 !important;
}
.wd-wrap .wd-ai-tier-banner.tier-good {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
    border: 1px solid #86efac !important;
    color: #166534 !important;
}
.wd-wrap .wd-ai-tier-banner.tier-warn {
    background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
    border: 1px solid #fde68a !important;
    color: #78350f !important;
}
.wd-wrap .wd-ai-tier-banner.tier-fail {
    background: linear-gradient(135deg, #fef2f2, #fee2e2) !important;
    border: 1px solid #fecaca !important;
    color: #7f1d1d !important;
}
.wd-wrap .wd-ai-tier-icon {
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    background: rgba(255,255,255,0.7) !important;
}

/* Detected article type pill animation */
.wd-wrap .wd-ai-type-pill {
    animation: wd-fade-up 0.3s var(--wd-ease) !important;
}

/* Pulsing ring around AI button while running */
.wd-wrap .wd-ai-checker.wd-ai-running .wd-ai-check-btn {
    position: relative !important;
}
.wd-wrap .wd-ai-checker.wd-ai-running .wd-ai-check-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: -3px !important;
    border-radius: 11px !important;
    border: 2px solid rgba(245,158,11,0.4) !important;
    animation: wd-ring-pulse 1.4s ease-out infinite !important;
    pointer-events: none !important;
}
@keyframes wd-ring-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.18); opacity: 0; }
}

/* Subtle confetti-like pop for "passed" state */
@keyframes wd-pass-pop {
    0% { transform: scale(0.9); opacity: 0; }
    60% { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.wd-wrap .wd-ai-checker.wd-ai-pass #wd-ai-percent {
    animation: wd-pass-pop 0.55s var(--wd-ease-snap) !important;
    color: var(--wd-green) !important;
}

/* ═══════════════════════════════════════════════════════════════
   FOCUS MODE OPT-IN PROMPT (v3.4.0)
   Appears below title card on desktop editor load.
   Offers "Switch to Focus" or "No thanks". Dismisses once per session.
   ═══════════════════════════════════════════════════════════════ */
.wd-wrap .wd-focus-opt {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 14px 18px !important;
    margin-top: 14px !important;
    background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%) !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.08) !important;
    animation: wd-focus-opt-in 0.45s var(--wd-ease) 0.15s both !important;
    flex-wrap: wrap !important;
}
@keyframes wd-focus-opt-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.wd-wrap .wd-focus-opt.wd-focus-opt-gone {
    animation: wd-focus-opt-out 0.3s ease-in forwards !important;
}
@keyframes wd-focus-opt-out {
    to { opacity: 0; transform: translateY(-8px) scale(0.98); max-height: 0; padding: 0; margin: 0; }
}
.wd-wrap .wd-focus-opt-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.wd-wrap .wd-focus-opt-icon {
    flex-shrink: 0 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    box-shadow: 0 6px 14px rgba(59, 130, 246, 0.3) !important;
}
.wd-wrap .wd-focus-opt-text {
    flex: 1 !important;
    min-width: 0 !important;
}
.wd-wrap .wd-focus-opt-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #1e3a8a !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
    margin-bottom: 3px !important;
}
.wd-wrap .wd-focus-opt-sub {
    font-size: 12.5px !important;
    color: #3730a3 !important;
    opacity: 0.85 !important;
    line-height: 1.5 !important;
}
.wd-wrap .wd-focus-opt-sub kbd {
    display: inline-block !important;
    padding: 1px 6px !important;
    background: #fff !important;
    border: 1px solid #c7d2fe !important;
    border-radius: 4px !important;
    font-size: 10.5px !important;
    color: #1e3a8a !important;
    font-weight: 600 !important;
    font-family: inherit !important;
}
.wd-wrap .wd-focus-opt-actions {
    display: inline-flex !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}
.wd-wrap .wd-focus-opt-dismiss {
    padding: 8px 14px !important;
    background: transparent !important;
    color: #4338ca !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.18s var(--wd-ease) !important;
    font-family: inherit !important;
}
.wd-wrap .wd-focus-opt-dismiss:hover {
    background: rgba(79, 70, 229, 0.08) !important;
    border-color: #c7d2fe !important;
}
.wd-wrap .wd-focus-opt-enter {
    padding: 9px 18px !important;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.18s var(--wd-ease) !important;
    font-family: inherit !important;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3) !important;
    letter-spacing: 0.01em !important;
}
.wd-wrap .wd-focus-opt-enter:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4) !important;
    filter: brightness(1.05) !important;
}
.wd-wrap .wd-focus-opt-enter:active {
    transform: translateY(0) !important;
}

/* Mobile — hide the opt-in prompt (focus mode is desktop only anyway) */
@media (max-width: 1024px) {
    .wd-wrap .wd-focus-opt {
        display: none !important;
    }
}

/* Small screen fallback: stack actions */
@media (max-width: 600px) {
    .wd-wrap .wd-focus-opt {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .wd-wrap .wd-focus-opt-actions {
        width: 100% !important;
    }
    .wd-wrap .wd-focus-opt-dismiss,
    .wd-wrap .wd-focus-opt-enter {
        flex: 1 !important;
        text-align: center !important;
    }
}