/*
 * The homepage Answer Strip's search bar (shared/ai/chat/answer_strip.php, js/answer-strip.js). Every rule is under
 * .dmg-as, so nothing reaches the rest of the page; the design's own standard form inside it keeps the design's
 * styles. The answer is the chat panel docked under the bar, styled by the widget (css/widget.css, .cw--docked).
 * The accent is the chat's own color (classes/dmg/ai/chat/AnswerStrip.php clientConfig()), set by the script.
 */
.dmg-as {
    --dmg-as-accent: #F26722;
    /* black or white, whichever reads on the accent (js/answer-strip.js) */
    --dmg-as-on-accent: #fff;
    /* the accent darkened until it reads on white, for text and focus rings */
    --dmg-as-brand: #1F4E8C;
    --dmg-as-radius: 4px;
    --dmg-as-text: #1d2430;
    --dmg-as-surface: #fff;
    --dmg-as-line: #eee;
    --dmg-as-muted: #5a626c;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
    text-align: left;
}

.dmg-as *,
.dmg-as *::before,
.dmg-as *::after {
    box-sizing: border-box;
}

/* the design shows .qsearch blocks with display:block (its Buy tab), so the root stays a block; hidden must still hide */
.dmg-as [hidden] {
    display: none !important;
}

.dmg-as__box {
    display: flex;
    flex-direction: column;
    border-radius: var(--dmg-as-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.dmg-as__bar {
    display: flex;
    align-items: stretch;
    min-height: 54px;
    background: #fff;
}

.dmg-as__standard,
.dmg-as__ai {
    flex: 1;
    min-width: 0;
    display: flex;
    margin: 0;
}

.dmg-as__standard > * {
    flex: 1;
    min-width: 0;
}

/* ── AI switch ─────────────────────────────────────────────────────── */
.dmg-as__toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 12px 0 14px;
    border: 0;
    border-right: 1px solid #eee;
    background: #fff;
    color: #8a929c;
    font: 800 12.5px/1 "Nunito Sans", Helvetica, Arial, sans-serif;
    white-space: nowrap;
    cursor: pointer;
}

.dmg-as__toggle[aria-checked="true"] {
    color: var(--dmg-as-brand);
}

.dmg-as__track {
    position: relative;
    width: 30px;
    height: 18px;
    border-radius: 999px;
    background: #c9ced4;
    transition: background 0.15s;
}

.dmg-as__toggle[aria-checked="true"] .dmg-as__track {
    background: var(--dmg-as-accent);
}

.dmg-as__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: left 0.15s;
}

.dmg-as__toggle[aria-checked="true"] .dmg-as__knob {
    left: 14px;
    background: var(--dmg-as-on-accent);
}

/* ── AI input ──────────────────────────────────────────────────────── */
.dmg-as__input {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 15px 14px;
    border: 0;
    outline: 0;
    background: #fff;
    color: var(--dmg-as-text);
    font: 400 17px/1.3 "Nunito Sans", Helvetica, Arial, sans-serif;
    box-shadow: none;
}

.dmg-as__input::placeholder {
    color: #7a828c;
}

.dmg-as__submit {
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--dmg-as-accent);
    color: var(--dmg-as-on-accent);
    cursor: pointer;
}

.dmg-as__submit[aria-disabled="true"] {
    cursor: progress;
    opacity: 0.8;
}

/* ── Microphone (shown only when the chat's voice setting is on and the browser can listen) ── */
.dmg-as__mic {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--dmg-as-surface);
    color: var(--dmg-as-brand);
    cursor: pointer;
}

/* listening: the accent fills the button and a ring pulses out of it */
.dmg-as[data-as-state="listening"] .dmg-as__mic {
    background: var(--dmg-as-accent);
    color: var(--dmg-as-on-accent);
    animation: dmg-as-listening 1.4s ease-out infinite;
}

/* looking it up, or the chat is starting: nothing more can be sent */
.dmg-as[data-as-state="processing"] .dmg-as__mic {
    cursor: progress;
    opacity: 0.6;
}

@keyframes dmg-as-listening {
    from { box-shadow: inset 0 0 0 0 var(--dmg-as-on-accent); }
    50% { box-shadow: inset 0 0 0 4px var(--dmg-as-on-accent); }
    to { box-shadow: inset 0 0 0 0 var(--dmg-as-on-accent); }
}

/* ── Note under the bar: an MLS# read back, the quick search's matches, a voice error ── */
/* it floats over the page under the box, like the docked chat: js/answer-strip.js moves it to <body>, copies the
   strip's colors onto it and sets its top / left / width from the box; the page under it never moves */
.dmg-as__note {
    position: fixed;
    z-index: 2147483000;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    max-height: min(320px, 60vh);
    overflow-y: auto;
    margin: 0;
    padding: 10px 14px 12px;
    border-top: 1px solid var(--dmg-as-line, #eee);
    border-radius: 0 0 var(--dmg-as-radius, 4px) var(--dmg-as-radius, 4px);
    background: var(--dmg-as-surface, #fff);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    color: var(--dmg-as-text, #1d2430);
    font: 400 14px/1.4 "Nunito Sans", Helvetica, Arial, sans-serif;
    text-align: left;
}

.dmg-as__note[hidden] {
    display: none !important;
}

.dmg-as__note *,
.dmg-as__note *::before,
.dmg-as__note *::after {
    box-sizing: border-box;
}

.dmg-as__note[data-tone="warning"] .dmg-as__note-text {
    font-weight: 700;
}

.dmg-as__note-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dmg-as__chip {
    margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--dmg-as-brand);
    border-radius: 999px;
    background: var(--dmg-as-surface);
    color: var(--dmg-as-brand);
    font: 700 13px/1.3 "Nunito Sans", Helvetica, Arial, sans-serif;
    text-align: left;
    cursor: pointer;
}

.dmg-as__chip:hover {
    background: var(--dmg-as-accent);
    border-color: var(--dmg-as-accent);
    color: var(--dmg-as-on-accent);
}

.dmg-as__link {
    margin: 0;
    padding: 6px 2px;
    border: 0;
    background: none;
    color: var(--dmg-as-brand);
    font: 700 13px/1.3 "Nunito Sans", Helvetica, Arial, sans-serif;
    text-decoration: underline;
    cursor: pointer;
}

/* read by screen readers only (role="status") */
.dmg-as__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Focus, motion, small screens ──────────────────────────────────── */
.dmg-as__note button:focus-visible,
.dmg-as button:focus-visible,
.dmg-as__input:focus-visible {
    outline: 3px solid var(--dmg-as-brand);
    outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
    .dmg-as__track,
    .dmg-as__knob {
        transition: none;
    }

    /* still plainly listening, without the pulse */
    .dmg-as[data-as-state="listening"] .dmg-as__mic {
        animation: none;
        box-shadow: inset 0 0 0 3px var(--dmg-as-on-accent);
    }
}

/* phones: the switch shrinks to its sparkle and track so the input keeps the room */
@media (max-width: 480px) {
    .dmg-as__toggle {
        padding: 0 8px 0 10px;
        gap: 5px;
    }

    .dmg-as__toggle-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .dmg-as__input {
        padding: 13px 10px;
        font-size: 16px;
    }

    .dmg-as__mic {
        flex-basis: 40px;
    }

    .dmg-as__submit {
        flex-basis: 48px;
    }
}