/*
 * RestoAudit Pitch v2.3.0 — AI Everywhere core styles.
 * Loaded by the AI Hub (views/ai/hub.php) and by the shared Agent
 * Panel partial (views/ai/_agent_panel.php, once per page).
 *
 * Design law: dark glassmorphic luxury on navy #061725, gold #EDBD5A,
 * cream #FFFAF0. Body text is cream or --ink-soft #C9D6DF on the glass
 * surfaces below — both ≥ 10:1 against #061725, well past the 4.5:1
 * floor. No light/white chrome anywhere.
 */

/* ---------- Agent Panel ---------- */

.ai-panel {
    background: var(--glass-strong, rgba(10, 33, 51, 0.82));
    border: 1px solid var(--line, rgba(237, 189, 90, 0.22));
    border-radius: var(--radius, 14px);
    padding: 16px 18px;
    margin: 14px 0;
    color: var(--ink, #FFFAF0);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.ai-panel-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
}

.ai-panel-title {
    margin: 0;
    font-size: 1.05rem;
    color: var(--gold-text, #EDBD5A);
}

.ai-panel-tagline {
    margin: 4px 0 0;
    max-width: 52ch;
    color: var(--ink-soft, #C9D6DF);
    font-size: 0.92rem;
}

.ai-panel-modes {
    display: inline-flex;
    border: 1px solid var(--line-strong, rgba(237, 189, 90, 0.48));
    border-radius: 999px;
    overflow: hidden;
}

.ai-panel-mode {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink-soft, #C9D6DF);
    font: inherit;
    font-size: 0.9rem;
    padding: 8px 14px;
    cursor: pointer;
    text-align: left;
}

.ai-panel-mode .ai-panel-mode-note {
    display: block;
    font-size: 0.72rem;
    color: var(--ink-faint, #A8BFD0);
}

.ai-panel-mode.is-active {
    background: linear-gradient(180deg, var(--gold-bright, #F3CD77), var(--gold, #EDBD5A));
    color: #2e2303;
}

.ai-panel-mode.is-active .ai-panel-mode-note {
    color: #4a3a05;
    background: linear-gradient(180deg, var(--gold-bright, #F3CD77), var(--gold, #EDBD5A));
}

.ai-panel-mode:focus-visible {
    outline: 2px solid var(--gold, #EDBD5A);
    outline-offset: 2px;
}

.ai-panel-airow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line, rgba(237, 189, 90, 0.22));
}

.ai-panel-airow[hidden] {
    display: none;
}

.ai-panel-field label {
    display: block;
    font-size: 0.85rem;
    color: var(--ink-soft, #C9D6DF);
}

.ai-panel-field select,
.ai-panel-field input {
    margin-top: 4px;
    min-width: 210px;
}

/* The panel's controls live outside app.css's .form-row/.field scopes,
   so mirror the app's dark glass input treatment here — no white
   native chrome anywhere in the panel. */
.ai-panel-field select,
.ai-panel-field input,
.ai-panel-inputrow textarea {
    padding: 8px 10px;
    border: 1px solid var(--line-strong, rgba(237, 189, 90, 0.48));
    border-radius: 8px;
    font: inherit;
    font-size: 0.94rem;
    background: var(--glass-input, rgba(4, 15, 24, 0.55));
    color: var(--cream, #FFFAF0);
    box-sizing: border-box;
}

.ai-panel-field select option {
    background: #0d2a40;
    color: #FFFAF0;
}

.ai-panel-field select:focus,
.ai-panel-field input:focus,
.ai-panel-inputrow textarea:focus {
    outline: 2px solid rgba(237, 189, 90, 0.65);
    outline-offset: 1px;
    border-color: var(--gold, #EDBD5A);
}

.ai-panel-keynote {
    flex: 1 1 260px;
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-soft, #C9D6DF);
}

.ai-panel-keynote a {
    color: var(--link, #8FC7EE);
}

.ai-panel-inputrow {
    margin-top: 14px;
}

.ai-panel-inputlabel {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.ai-panel-optional {
    color: var(--ink-faint, #A8BFD0);
    font-size: 0.8rem;
}

.ai-panel-inputrow textarea {
    width: 100%;
    box-sizing: border-box;
}

.ai-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.ai-panel-status {
    margin: 12px 0 0;
    font-size: 0.9rem;
    color: var(--ink-soft, #C9D6DF);
}

.ai-panel-status.is-error {
    color: #FFB4A6;
}

.ai-panel-result {
    margin-top: 14px;
    border: 1px solid var(--line, rgba(237, 189, 90, 0.22));
    border-radius: var(--radius, 14px);
    background: var(--glass-input, rgba(4, 15, 24, 0.55));
    padding: 12px 14px;
}

.ai-panel-result[hidden] {
    display: none;
}

.ai-panel-result-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.ai-panel-result-mode {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gold-text, #EDBD5A);
}

.ai-panel-result-tools {
    display: flex;
    gap: 8px;
}

.ai-panel-apply {
    background: linear-gradient(180deg, var(--gold-bright, #F3CD77), var(--gold, #EDBD5A));
    border-color: rgba(0, 0, 0, 0.35);
    color: #2e2303;
}

.ai-panel-result-body {
    margin-top: 10px;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ink, #FFFAF0);
    font-size: 0.95rem;
    line-height: 1.55;
    max-height: 480px;
    overflow: auto;
}

.ai-panel-draftnote {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: var(--ink-faint, #A8BFD0);
}

/* ---------- AI Hub ---------- */

.ai230-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

.ai230-provider-card {
    border: 1px solid var(--line, rgba(237, 189, 90, 0.22));
    border-radius: var(--radius, 14px);
    background: var(--glass-soft, rgba(255, 250, 240, 0.05));
    padding: 14px 16px;
}

.ai230-provider-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.ai230-provider-head h3 {
    margin: 0;
    color: var(--gold-text, #EDBD5A);
}

.ai230-key-state {
    font-size: 0.8rem;
    color: var(--ink-faint, #A8BFD0);
    border: 1px solid var(--line, rgba(237, 189, 90, 0.22));
    border-radius: 999px;
    padding: 3px 10px;
}

.ai230-key-state.is-set {
    color: var(--ink, #FFFAF0);
    border-color: var(--line-strong, rgba(237, 189, 90, 0.48));
}

.ai230-clear {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--ink-soft, #C9D6DF);
}

.ai230-test-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.ai230-test-result {
    font-size: 0.88rem;
    color: var(--ink-soft, #C9D6DF);
}

.ai230-test-result.is-ok {
    color: #ABE3B0;
}

.ai230-test-result.is-error {
    color: #FFB4A6;
}

.ai230-radio {
    display: block;
    margin: 6px 0;
    color: var(--ink-soft, #C9D6DF);
}

.ai230-agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.ai230-agent-card {
    border: 1px solid var(--line, rgba(237, 189, 90, 0.22));
    border-radius: var(--radius, 14px);
    background: var(--glass-soft, rgba(255, 250, 240, 0.05));
    padding: 14px 16px;
}

.ai230-agent-card h3 {
    margin: 0 0 6px;
    color: var(--gold-text, #EDBD5A);
}

.ai230-agent-tagline {
    margin: 0 0 8px;
    color: var(--ink, #FFFAF0);
    font-size: 0.93rem;
}

.ai230-agent-meta {
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: var(--ink-faint, #A8BFD0);
}

.ai230-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ai230-chip {
    font-size: 0.78rem;
    color: var(--ink, #FFFAF0);
    border: 1px solid var(--line, rgba(237, 189, 90, 0.22));
    border-radius: 999px;
    padding: 3px 10px;
}

.ai230-usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ai230-usage-table th,
.ai230-usage-table td {
    text-align: left;
    padding: 7px 10px;
    border-bottom: 1px solid var(--line, rgba(237, 189, 90, 0.22));
    color: var(--ink, #FFFAF0);
}

.ai230-usage-table th {
    color: var(--gold-text, #EDBD5A);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}