/* ══════════════════════════════════════════════════════════════
   AI DIAGNOSTICS PAGE  (style-34-ai-diagnostics.css)  prefix: .aidx-*
   ══════════════════════════════════════════════════════════════ */

.aidx-page {
    padding: 24px;
    max-width: 900px;
}

/* ── Form card ───────────────────────────────────────────────── */
.aidx-form-card {
    background: #1e2537;
    border: 1px solid #2d3548;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 14px;
}

.aidx-question-input {
    width: 100%;
    min-height: 80px;
    max-height: 160px;
    resize: vertical;
    background: #252b3b !important;
    border-color: #3a4060 !important;
    color: #e8eaf0 !important;
    font-size: 0.9rem;
}

.aidx-question-input:focus {
    border-color: #4a9eff !important;
    box-shadow: 0 0 0 2px rgba(74,158,255,0.18) !important;
    outline: none !important;
}

.aidx-run-btn { padding: 6px 22px; font-size: 0.88rem; }

/* ── Status ──────────────────────────────────────────────────── */
.aidx-status {
    font-size: 0.8rem;
    color: #e8854a;
    min-height: 20px;
    margin-bottom: 8px;
}

/* ── Result card ─────────────────────────────────────────────── */
.aidx-result-card {
    background: #1e2537;
    border: 1px solid #2d3548;
    border-radius: 8px;
    padding: 20px;
    margin-top: 8px;
}

.aidx-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #7a8097;
    margin-bottom: 14px;
}

/* ── Waterfall bars ──────────────────────────────────────────── */
.aidx-waterfall {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.aidx-stage-row {
    display: grid;
    grid-template-columns: 90px 1fr 130px;
    align-items: center;
    gap: 10px;
}

.aidx-stage-name {
    font-size: 0.82rem;
    color: #adb5bd;
    text-align: right;
    white-space: nowrap;
}

.aidx-bar-track {
    height: 20px;
    background: #252b3b;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #2d3548;
}

.aidx-bar-fill {
    height: 100%;
    background: #4a9eff;
    border-radius: 3px;
    min-width: 4px;
    transition: width 0.3s ease;
}

.aidx-bar-slow { background: #e8734a; }

.aidx-stage-time {
    font-size: 0.8rem;
    color: #adb5bd;
    white-space: nowrap;
}

.aidx-slowest-label {
    color: #e8734a;
    font-weight: 600;
}

/* ── Summary lines ───────────────────────────────────────────── */
.aidx-total-line {
    font-size: 0.9rem;
    font-weight: 700;
    color: #e8eaf0;
    margin-bottom: 8px;
}

.aidx-meta-bar {
    font-size: 0.8rem;
    color: #7a8097;
    margin-bottom: 10px;
}

/* ── SQL collapsible ─────────────────────────────────────────── */
.aidx-sql-details { margin-top: 12px; }

.aidx-sql-summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: #7a8097;
    user-select: none;
}

.aidx-sql-code {
    background: #151924;
    border: 1px solid #2d3548;
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 0.79rem;
    color: #a8d5ff;
    overflow-x: auto;
    margin-top: 8px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Refused / error / empty ─────────────────────────────────── */
.aidx-refused {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(232, 115, 74, 0.1);
    border: 1px solid #e8734a;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #e8734a;
}

.aidx-error {
    padding: 14px;
    color: #e8734a;
    font-size: 0.88rem;
}

.aidx-empty {
    padding: 14px;
    color: #7a8097;
    font-size: 0.88rem;
}

.aidx-results { min-height: 40px; }

/* ── Light theme ─────────────────────────────────────────────── */
body[data-theme="light"] .aidx-form-card     { background: #fff; border-color: #dee2e6; }
body[data-theme="light"] .aidx-question-input {
    background: #fff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}
body[data-theme="light"] .aidx-result-card   { background: #fff; border-color: #dee2e6; }
body[data-theme="light"] .aidx-section-title { color: #6c757d; }
body[data-theme="light"] .aidx-stage-name    { color: #495057; }
body[data-theme="light"] .aidx-bar-track     { background: #f0f2f5; border-color: #dee2e6; }
body[data-theme="light"] .aidx-stage-time    { color: #495057; }
body[data-theme="light"] .aidx-total-line    { color: #212529; }
body[data-theme="light"] .aidx-meta-bar      { color: #6c757d; }
body[data-theme="light"] .aidx-sql-code      { background: #f0f4ff; border-color: #c5d3f0; color: #1e3a8a; }
body[data-theme="light"] .aidx-sql-summary   { color: #6c757d; }

/* ── Mobile (390 px) ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .aidx-page         { padding: 14px; }
    .aidx-stage-row    { grid-template-columns: 72px 1fr 110px; gap: 6px; }
    .aidx-stage-name   { font-size: 0.75rem; }
    .aidx-stage-time   { font-size: 0.73rem; }
}