/**
 * repair-assistant.css — DOAT Repair Assistant widget (first-party).
 * Public Website AI Repair Assistant Programme — RC1-STYLE1 presentation
 * alignment (post-RC1 maintenance; NOT a programme phase).
 *
 * This file no longer carries a parallel visual system. The widget CONSUMES
 * the website design language instead of restating it:
 *   • colour / type / spacing / radius / elevation come from the main.css
 *     :root tokens and the config-driven brand block in includes/header.php;
 *   • buttons are .btn + .btn-sm + .btn-primary / .btn-accent / .btn-outline;
 *   • fields are .form-control inside .form-row, errors .form-error,
 *     hints and secondary copy .form-hint;
 *   • notices are .alert + .alert-error / .alert-success;
 *   • hidden-but-announced text is .visually-hidden;
 *   • focus rings come from the global :focus-visible rule (var(--ring)).
 *
 * What remains below is ONLY what the site has no primitive for: the floating
 * mount geometry, the chat transcript, the panel chrome, the small-screen
 * bottom sheet, forced-colors fallbacks — plus two SAFETY-PROMINENCE
 * modifiers that deliberately STRENGTHEN (never weaken) .alert-error where a
 * verified hazard is shown. Safety semantics outrank pure visual reuse.
 *
 * Unchanged and still asserted by the guards: every selector is namespaced
 * .doat-rai* — nothing here restyles the site, the sticky WhatsApp CTA bar,
 * site forms or any existing control. No colour literal appears here except
 * #fff, which is the site's own convention for text on a primary surface
 * (see .btn-primary in main.css).
 */

/* ---------- Mount geometry ----------------------------------------------
   The site has no floating-panel primitive, so the geometry lives here.
   Sits ABOVE the sticky mobile CTA bar (z-index 40) so the two never
   overlap, and below modals. */
.doat-rai {
    position: fixed;
    right: var(--space-4);
    bottom: 5.25rem;
    z-index: 900;
}

/* The launcher and every conversion section ship `hidden` and are revealed by
   the external JS. Site primitives such as .btn set `display`, which beats the
   UA [hidden] rule — this single scoped rule keeps `hidden` authoritative for
   every element in the widget, whatever site class it wears. */
.doat-rai [hidden] { display: none; }

/* ---------- Launcher -----------------------------------------------------
   Wears .btn .btn-sm .btn-primary. Only the float elevation is added here:
   a floating control needs more lift than an in-page button, and .btn-primary
   would otherwise drop to --shadow-md on hover. */
.doat-rai-launcher,
.doat-rai-launcher:hover { box-shadow: var(--shadow-lg); }

/* ---------- Panel chrome ------------------------------------------------- */
.doat-rai-panel {
    position: fixed;
    right: var(--space-4);
    bottom: 5.25rem;
    width: min(24rem, calc(100vw - 2rem));
    max-height: min(34rem, calc(100vh - 7rem));
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.doat-rai-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-primary);
    color: #fff;
}
/* h2 carries the site heading colour and a clamp() page-scale size; both are
   wrong inside a compact panel header on a primary-coloured surface. */
.doat-rai-title { margin: 0; font-size: 1rem; color: #fff; }
.doat-rai-close {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--space-2);
}

.doat-rai-disclosure {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    font-size: .78rem;
    color: var(--color-muted);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

/* ---------- Transcript ---------------------------------------------------
   The site has no chat primitive; the transcript is genuinely widget-owned.
   Every value below still resolves through site tokens. */
.doat-rai-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 6rem;
}
.doat-rai-msg { display: flex; }
.doat-rai-msg--user { justify-content: flex-end; }
.doat-rai-bubble {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    max-width: 85%;
    font-size: .92rem;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
.doat-rai-msg--assistant .doat-rai-bubble { background: var(--color-surface); color: var(--color-text); }
.doat-rai-msg--user .doat-rai-bubble { background: var(--color-primary); color: #fff; }

/* ---------- Safety prominence -------------------------------------------
   The hazard notice and its review-step echo wear the site's own .alert
   .alert-error. These modifiers only ever STRENGTHEN that primitive: a 2px
   rule in the alert's own (darker) text colour in place of the 1px pale one,
   plus bold weight. No new colour literal is introduced — the emphasis is
   derived from the site error palette via currentColor. Deliberately written
   at higher specificity than .alert-error so hazard prominence never depends
   on stylesheet load order. */
.doat-rai .doat-rai-alert,
.doat-rai .doat-rai-review-safety {
    border-width: 2px;
    border-color: currentColor;
    font-weight: 600;
}
.doat-rai-alert {
    margin: 0 var(--space-4) var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: .88rem;
}
.doat-rai-alert-head { display: block; margin-bottom: var(--space-1); }
.doat-rai-alert-body { margin: 0; }
.doat-rai-review-safety {
    margin: var(--space-2) 0;
    padding: var(--space-2) var(--space-3);
    font-size: .85rem;
}

/* Status line wears .form-hint; only panel-edge spacing is added. */
.doat-rai-status { margin: 0 var(--space-4) var(--space-2); }

/* ---------- Composer ----------------------------------------------------- */
.doat-rai-form {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    align-items: flex-end;
}
/* .form-control is the site field. The composer needs the compact,
   non-resizing variant of it — the site's textarea.form-control is a 150px
   page field. Higher specificity than textarea.form-control on purpose. */
.doat-rai-form .doat-rai-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    resize: none;
    padding: var(--space-2) var(--space-3);
    font-size: .92rem;
}

/* The site .btn has no disabled treatment; the widget disables Send/Submit
   while a request is in flight. Scoped — never reaches a site button. */
.doat-rai .btn:disabled { opacity: .55; cursor: default; transform: none; }

/* ---------- Human fallback ----------------------------------------------- */
.doat-rai-fallback {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: .82rem;
    color: var(--color-muted);
    background: var(--color-surface);
}
/* Colour comes from the site `a` rule; only the emphasis is widget-specific. */
.doat-rai-fallback-link { font-weight: 600; text-decoration: underline; }

.doat-rai-reset {
    border: 0;
    background: transparent;
    color: var(--color-muted);
    font-size: .78rem;
    text-decoration: underline;
    cursor: pointer;
    padding: var(--space-1) var(--space-4) var(--space-2);
    align-self: flex-start;
}

/* ---------- Conversion flow (contact → review → done) --------------------
   Buttons are site buttons, fields are site fields, the consent box and the
   review list are the only widget-owned surfaces left. */
.doat-rai-convert { margin: var(--space-1) var(--space-4); }
.doat-rai-contact, .doat-rai-review, .doat-rai-done {
    padding: var(--space-2) var(--space-4) var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: .9rem;
    flex-shrink: 0;
}
/* While converting, the PANEL is the single scroll context (the chat list is
   hidden), so the form, its actions and the human fallback never overlap —
   every control stays reachable in every engine. */
.doat-rai-panel--convert { overflow-y: auto; }
/* h3 carries a clamp() page-scale size; the panel needs a compact subtitle. */
.doat-rai-subtitle { margin: 0 0 var(--space-1); font-size: .95rem; }
.doat-rai-contact-note { margin: 0 0 var(--space-2); }
/* Site .form-row spacing is page-scale; the panel is compact. */
.doat-rai-contact .form-row { margin-bottom: var(--space-3); }
.doat-rai-field label { font-size: .85rem; }
.doat-rai-review-list { margin: 0 0 var(--space-2); }
.doat-rai-review-list dt { font-weight: 600; font-size: .8rem; color: var(--color-muted); margin-top: var(--space-1); }
.doat-rai-review-list dd { margin: 0; overflow-wrap: anywhere; }
.doat-rai-consent {
    margin: var(--space-2) 0;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: .82rem;
}
.doat-rai-contact-actions, .doat-rai-review-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    flex-wrap: wrap;
}
/* Wears .alert .alert-success; the site alert's page margin is not wanted. */
.doat-rai-done-msg { margin: 0; }

/* Mobile: bottom sheet, still clear of the sticky CTA bar. */
@media (max-width: 640px) {
    .doat-rai { right: var(--space-3); bottom: 5.5rem; }
    .doat-rai-panel {
        right: var(--space-2);
        left: var(--space-2);
        width: auto;
        bottom: 5.5rem;
        max-height: calc(100vh - 7.5rem);
    }
}

/* Reduced motion: this widget animates nothing, and never will by default —
   the rule below also neutralises any future transition someone adds, and any
   transition inherited from a reused site primitive. */
@media (prefers-reduced-motion: reduce) {
    .doat-rai *, .doat-rai *::before, .doat-rai *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Forced colors / high contrast: keep semantic borders. Site buttons and site
   fields are covered by their reused classes, so this list is now short. */
@media (forced-colors: active) {
    .doat-rai-panel, .doat-rai-alert { border: 1px solid CanvasText; }
    .doat-rai .btn, .doat-rai .form-control { border: 1px solid CanvasText; }
}