/**
 * WWL AI Widget — base styling. Issue #1562.
 *
 * Defaults are subtle so the widget blends into any page; override
 * .wwl-ai-btn / .wwl-ai-option in a host stylesheet for custom branding.
 */

.wwl-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: filter 0.15s, transform 0.05s;
}
.wwl-ai-btn:hover:not(:disabled)  { filter: brightness(1.08); }
.wwl-ai-btn:active:not(:disabled) { transform: translateY(1px); }
.wwl-ai-btn:disabled,
.wwl-ai-btn.wwl-ai-loading        { opacity: 0.7; cursor: progress; }

.wwl-ai-spinner {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    border: 2px solid rgba(255,255,255,0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wwl-ai-spin 0.7s linear infinite;
}
@keyframes wwl-ai-spin { to { transform: rotate(360deg); } }

.wwl-ai-options {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.5rem 0;
    padding: 0.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    max-width: 640px;
}
.wwl-ai-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: border-color 0.1s, background 0.1s;
}
.wwl-ai-option:hover         { border-color: #7c3aed; background: #faf5ff; }
.wwl-ai-option-dismiss       { color: #64748b; background: transparent; border-style: dashed; }
.wwl-ai-option-dismiss:hover { background: #f1f5f9; }

.wwl-ai-error {
    margin: 0.4rem 0;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
}

.wwl-ai-filled {
    animation: wwl-ai-flash 1.4s ease-out;
}
@keyframes wwl-ai-flash {
    0%   { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.0); background-color: transparent; }
    20%  { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35); background-color: #faf5ff; }
    100% { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.0); background-color: transparent; }
}

/* ---- Panel UI (model dropdown + extra context + side-by-side results) ---- */
.wwl-ai-panel {
    display: block;
    margin: 0.6rem 0 0.4rem;
    padding: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    max-width: 920px;
}
.wwl-ai-panel-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.wwl-ai-panel-title { color: #6d28d9; font-size: 0.95rem; }
.wwl-ai-panel-label { font-size: 0.85rem; color: #475569; margin: 0; }
.wwl-ai-context-label { display: block; margin-top: 0.25rem; }
.wwl-ai-hint { font-weight: 400; color: #64748b; font-size: 0.8rem; }
.wwl-ai-provider {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    background: #fff;
}
.wwl-ai-close {
    margin-left: auto;
    width: 1.75rem; height: 1.75rem;
    padding: 0;
    font-size: 1.1rem; line-height: 1;
    color: #64748b;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
}
.wwl-ai-close:hover { background: #e2e8f0; color: #334155; }
.wwl-ai-context {
    width: 100%;
    margin: 0.25rem 0 0.5rem;
    padding: 0.5rem;
    font-size: 0.85rem;
    font-family: inherit;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    resize: vertical;
}
.wwl-ai-actions {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.wwl-ai-go {
    padding: 0.4rem 1rem;
    font-size: 0.85rem; font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    border: 0; border-radius: 0.375rem;
    cursor: pointer;
}
.wwl-ai-go:hover:not(:disabled) { filter: brightness(1.08); }
.wwl-ai-go:disabled { opacity: 0.6; cursor: progress; }
.wwl-ai-status { font-size: 0.8rem; color: #64748b; }

.wwl-ai-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.5rem;
}
.wwl-ai-col {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    overflow: hidden;
}
.wwl-ai-col-head {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: #475569;
}
.wwl-ai-col-body { padding: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
.wwl-ai-col-meta { font-size: 0.72rem; color: #94a3b8; margin-bottom: 0.2rem; }
.wwl-ai-col-msg  { font-size: 0.85rem; color: #64748b; padding: 0.25rem; }
.wwl-ai-col-error .wwl-ai-col-msg { color: #b91c1c; }
.wwl-ai-col .wwl-ai-spinner { border-color: rgba(124, 58, 237, 0.25); border-top-color: #7c3aed; }
.wwl-ai-col .wwl-ai-option { font-size: 0.85rem; line-height: 1.35; }

/* Rich HTML preview inside an option button */
.wwl-ai-option-html {
    text-align: left;
    height: auto;
    cursor: pointer;
}
.wwl-ai-html-preview {
    pointer-events: none; /* clicks fall through to the button */
    font-size: 0.85rem;
    line-height: 1.45;
    color: #1e293b;
}
.wwl-ai-html-preview p  { margin: 0 0 0.4rem; }
.wwl-ai-html-preview ul { margin: 0 0 0.4rem; padding-left: 1.2rem; }
.wwl-ai-html-preview li { margin-bottom: 0.15rem; }

/*
 * Dark theme. [#2104]
 *
 * Every surface above is a hardcoded light value, while the text on it
 * comes from the page: in dark mode the option buttons took the page's
 * near-white text onto their own white fill, so the suggestions rendered
 * as blank boxes. Per THEMING.md, each rule here darkens a surface and the
 * text on it together. Light mode is unchanged: none of these match.
 */
:root[data-theme="dark"] .wwl-ai-panel,
:root[data-theme="dark"] .wwl-ai-options {
    background: var(--wwl-surface);
    border-color: var(--wwl-border);
    color: var(--wwl-text);
}
:root[data-theme="dark"] .wwl-ai-panel-title  { color: var(--wwl-link); }
:root[data-theme="dark"] .wwl-ai-panel-label,
:root[data-theme="dark"] .wwl-ai-hint,
:root[data-theme="dark"] .wwl-ai-status,
:root[data-theme="dark"] .wwl-ai-col-meta,
:root[data-theme="dark"] .wwl-ai-col-msg      { color: var(--wwl-text-muted); }
:root[data-theme="dark"] .wwl-ai-provider,
:root[data-theme="dark"] .wwl-ai-context {
    background: var(--wwl-input-bg);
    border-color: var(--wwl-border-strong);
    color: var(--wwl-input-text);
}
:root[data-theme="dark"] .wwl-ai-close        { color: var(--wwl-text-muted); }
:root[data-theme="dark"] .wwl-ai-close:hover  { background: var(--wwl-surface-3); color: var(--wwl-text); }
:root[data-theme="dark"] .wwl-ai-col {
    background: var(--wwl-surface-2);
    border-color: var(--wwl-border);
}
:root[data-theme="dark"] .wwl-ai-col-head     { background: var(--wwl-surface-3); color: var(--wwl-text); }
:root[data-theme="dark"] .wwl-ai-option {
    background: var(--wwl-surface);
    border-color: var(--wwl-border-strong);
    color: var(--wwl-text);
}
:root[data-theme="dark"] .wwl-ai-option:hover {
    background: var(--wwl-accent-soft);
    border-color: var(--wwl-accent);
    color: var(--wwl-accent-soft-text);
}
:root[data-theme="dark"] .wwl-ai-option-dismiss       { background: transparent; color: var(--wwl-text-muted); }
:root[data-theme="dark"] .wwl-ai-option-dismiss:hover { background: var(--wwl-surface-3); }
:root[data-theme="dark"] .wwl-ai-html-preview { color: inherit; }
:root[data-theme="dark"] .wwl-ai-error,
:root[data-theme="dark"] .wwl-ai-col-error .wwl-ai-col-msg {
    background: var(--wwl-danger-soft);
    border-color: var(--wwl-danger);
    color: var(--wwl-danger-soft-text);
}
@keyframes wwl-ai-flash-dark {
    0%   { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.0); }
    20%  { box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.5); background-color: var(--wwl-accent-soft); }
    100% { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.0); }
}
:root[data-theme="dark"] .wwl-ai-filled { animation-name: wwl-ai-flash-dark; }