/* AI Repair Assistant — component styles
 * No inline styles.  All presentation here, referenced by class only.
 */

/* ── Chat bubbles ────────────────────────────────────────────────────────── */
.chat-bubble-user {
    background-color: #0d6efd;
    color: #fff;
    max-width: 75%;
    word-break: break-word;
    white-space: pre-wrap;
}

.chat-bubble-ai {
    background-color: #f1f3f5;
    color: #212529;
    border: 1px solid #dee2e6;
    max-width: 85%;
    word-break: break-word;
}
.chat-bubble-ai .msg-text p { margin-bottom: 0.4rem; }
.chat-bubble-ai .msg-text p:last-child { margin-bottom: 0; }
.chat-bubble-ai .msg-text .ai-heading {
    font-size: 0.9rem;
    color: #0d6efd;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 2px;
}
.chat-bubble-ai .msg-text .ai-list {
    margin-top: 0.2rem;
    margin-bottom: 0.4rem;
}
.chat-bubble-ai .msg-text .ai-list li {
    margin-bottom: 0.15rem;
    line-height: 1.45;
}
.chat-bubble-ai .msg-text .ai-code-block {
    background-color: #1e1e1e;
    color: #d4d4d4;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    margin: 0.3rem 0;
    font-size: 0.8rem;
    overflow-x: auto;
    white-space: pre;
}
.chat-bubble-ai .msg-text .ai-inline-code {
    background-color: #e9ecef;
    color: #c7254e;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.85em;
}
.chat-bubble-ai .msg-text strong {
    color: #1a1a2e;
}

/* ── Typing indicator dots ───────────────────────────────────────────────── */
.typing-dots .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 2px;
    background-color: #6c757d;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out;
}
.typing-dots .dot:nth-child(1) { animation-delay: 0s; }
.typing-dots .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dots .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
    40%            { transform: scale(1.0); opacity: 1.0; }
}

/* ── Severity indicator colors ───────────────────────────────────────────── */
.severity-critical { border-left: 4px solid #dc3545 !important; }
.severity-high     { border-left: 4px solid #ffc107 !important; }
.severity-moderate { border-left: 4px solid #0d6efd !important; }
.severity-low      { border-left: 4px solid #6c757d !important; }

/* ── Video thumbnail ratio ───────────────────────────────────────────────── */
.vid-thumb-wrapper {
    position: relative;
    padding-top: 56.25%; /* 16:9 */
    overflow: hidden;
    background-color: #000;
}
.vid-thumb-wrapper img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* ── Procedure trust tier indicator ─────────────────────────────────────── */
.proc-card {
    border-left: 4px solid #dee2e6 !important;
    transition: border-color 0.15s;
}
.proc-card:hover {
    border-left-color: #0d6efd !important;
}

/* ── Disclaimer alert — compact ─────────────────────────────────────────── */
.alert-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}

/* ── Extra small text ────────────────────────────────────────────────────── */
.xsmall { font-size: 0.75rem; }

/* ── Suggestion quick-action buttons ────────────────────────────────────── */
.chat-suggestion {
    font-size: 0.78rem;
    padding: 0.2rem 0.5rem;
}

/* ── Wiring Diagrams tab ─────────────────────────────────────────────────── */
.wiring-ai-result {
    font-size: 0.875rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}