/*
 * Adriano — the chat assistant.
 *
 * DESIGN DIRECTION: the parts counter.
 *
 * Not a tech chatbot and not a support widget. The person using this is standing next to a broken
 * car holding a phone, and what they want is the feeling of a good counter man pulling a ticket:
 * warm paper, fine rules, everything legible, nothing shouting. Red is the stamp on the ticket -
 * it marks the price, the action and the identity, and nothing else.
 *
 * Three decisions carry it:
 *
 *   PAPER, NOT GREY. The ground is a warm off-white rather than a cold neutral. A screen full of
 *   grey reads as software; a warm ground reads as a document, and this window is a list of
 *   tickets.
 *
 *   MONO FOR NUMBERS. Prices, yard names and the status line use a monospaced face. Part numbers
 *   and stock codes are already monospaced throughout this trade - it is the native typography of
 *   the subject, and a column of prices in tabular figures scans in a way proportional ones never
 *   do.
 *
 *   A HAIRLINE INSTEAD OF A SLAB. The header was solid black and far too heavy for a window this
 *   size. It is now warm white under a 4px red edge, like the tab on a parts folder: branded,
 *   present, and it does not dominate the conversation beneath it.
 *
 * A separate file on purpose. app.css needs `npm run minify:css` before an edit does anything, and
 * a new module should not be able to break the site's stylesheet build.
 *
 * MOBILE IS THE PRIMARY CASE. docs/CHAT-ASSISTANT.md §4. Each awkward-looking rule below - dvh,
 * 16px, 44px, safe-area - is there because of a specific way mobile chat windows break.
 */

#adri-root {
    --adri-red: rgb(var(--primaryColor, 218, 26, 54));
    --adri-red-deep: rgb(var(--secondaryColor, 199, 0, 24));
    --adri-red-wash: rgba(var(--primaryColor, 218, 26, 54), .06);
    --adri-red-edge: rgba(var(--primaryColor, 218, 26, 54), .24);

    /* Warm neutrals. Every one carries a little red so nothing reads blue beside the brand. */
    --adri-paper: #fbfaf8;
    --adri-card: #ffffff;
    /* The header and footer band: warm grey, a shade darker than the paper it frames. */
    --adri-chrome: #f4f1ee;
    --adri-ink: #211f1e;
    --adri-muted: #7b736e;
    --adri-line: #eae5e1;

    --adri-sans: var(--font-family, "IBM Plex Sans", system-ui, sans-serif);
    --adri-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    font-family: var(--adri-sans);
}

/* ── Launcher ─────────────────────────────────────────────────────────────── */
/* Stays red - the user's call, and it is the one element that has to be found. */

#adri-launcher {
    position: fixed;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    right: 18px;
    z-index: 1040;

    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;            /* clears the 44px tap minimum with room to spare */
    padding: 0 22px 0 16px;

    border: 0;
    border-radius: 999px;
    background: linear-gradient(145deg, var(--adri-red), var(--adri-red-deep));
    color: #fff;
    font: 600 15px/1 var(--adri-sans);
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(var(--primaryColor, 218, 26, 54), .32),
                0 2px 6px rgba(0, 0, 0, .14);
    transition: transform .2s cubic-bezier(.34, 1.4, .64, 1), box-shadow .2s ease;
    animation: adri-breathe 3.4s ease-in-out infinite;
}

#adri-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(var(--primaryColor, 218, 26, 54), .4),
                0 3px 8px rgba(0, 0, 0, .16);
}
#adri-launcher:focus-visible { outline: 3px solid var(--adri-ink); outline-offset: 3px; }

.adri-launcher-icon { display: inline-flex; }

/*
 * ATTENTION WITHOUT NAGGING. A slow halo that stops the moment it is opened, one double bounce five
 * seconds in, and the robot blinks. Nothing loops forever: a widget still flashing after it has
 * been seen is an advert, and people learn not to see adverts.
 */
#adri-launcher:hover, #adri-launcher[aria-expanded="true"] { animation: none; }

@keyframes adri-breathe {
    0%, 100% { box-shadow: 0 8px 22px rgba(var(--primaryColor, 218, 26, 54), .32), 0 0 0 0 rgba(var(--primaryColor, 218, 26, 54), .4); }
    70%      { box-shadow: 0 8px 22px rgba(var(--primaryColor, 218, 26, 54), .32), 0 0 0 15px rgba(var(--primaryColor, 218, 26, 54), 0); }
}

#adri-launcher.adri-nudge { animation: adri-nudge 1.1s cubic-bezier(.34, 1.4, .64, 1) 3; }
@keyframes adri-nudge {
    0%, 100% { transform: translateY(0) scale(1); }
    30%      { transform: translateY(-6px) scale(1.05); }
    60%      { transform: translateY(0) scale(1); }
}

.adri-bot-eye { transform-origin: center; animation: adri-blink-eye 5s infinite; }
@keyframes adri-blink-eye {
    0%, 92%, 100% { transform: scaleY(1); }
    95%           { transform: scaleY(.1); }
}

/* ── Panel ────────────────────────────────────────────────────────────────── */

#adri-panel {
    position: fixed;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    right: 18px;
    z-index: 1050;

    display: flex;
    flex-direction: column;
    width: 420px;
    height: min(660px, calc(100dvh - 40px));

    background: var(--adri-paper);
    border-radius: 20px;
    /* The red top edge: a folder tab, not a banner. All the brand this window needs. */
    border-top: 4px solid var(--adri-red);
    box-shadow: 0 32px 64px -12px rgba(33, 31, 30, .3),
                0 0 0 1px rgba(33, 31, 30, .06);
    overflow: hidden;
    animation: adri-panel-in .28s cubic-bezier(.16, 1, .3, 1);
}

@keyframes adri-panel-in {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

#adri-panel[hidden] { display: none; }

/* ── Header ───────────────────────────────────────────────────────────────── */
/*
 * A warm grey band, not white and not black.
 *
 * White gave the header no edge at all - it merged into the log below it and the panel read as one
 * undifferentiated sheet. Black was too heavy, which is where this started. A soft grey separates
 * the chrome from the conversation, which is the only job it has, and lets the robot badge stay the
 * one saturated thing in the window.
 */

.adri-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 12px 13px 15px;
    background: var(--adri-chrome);
    border-bottom: 1px solid var(--adri-line);
    color: var(--adri-ink);
    flex: 0 0 auto;
}

.adri-head-who { display: flex; align-items: center; gap: 11px; min-width: 0; }

.adri-head-who strong {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
}

/* Mono and uppercase - a label on a ticket, not a tagline. The dot says "someone is here". */
.adri-head-who small {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--adri-mono);
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--adri-muted);
}

.adri-head-who small::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, .18);
}

.adri-avatar {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    flex: 0 0 36px;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--adri-red), var(--adri-red-deep));
    color: #fff;
    box-shadow: 0 3px 8px rgba(var(--primaryColor, 218, 26, 54), .28);
}

.adri-close {
    display: grid; place-items: center;
    width: 44px; height: 44px;       /* a close button people cannot hit is worse than none */
    flex: 0 0 44px;
    border: 0; border-radius: 12px;
    background: transparent;
    color: var(--adri-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.adri-close:hover { background: var(--adri-red-wash); color: var(--adri-red); }

/* ── Log ──────────────────────────────────────────────────────────────────── */

.adri-log {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    background: var(--adri-paper);
    /* A whisper of paper grain. Invisible as texture, felt as warmth. */
    background-image: radial-gradient(rgba(33, 31, 30, .022) 1px, transparent 1px);
    background-size: 22px 22px;
    scrollbar-width: thin;
    scrollbar-color: var(--adri-line) transparent;
}

.adri-log::-webkit-scrollbar { width: 7px; }
.adri-log::-webkit-scrollbar-thumb { background: var(--adri-line); border-radius: 4px; }
.adri-log::-webkit-scrollbar-track { background: transparent; }

.adri-msg {
    max-width: 86%;
    padding: 11px 14px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--adri-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    animation: adri-msg-in .26s cubic-bezier(.16, 1, .3, 1);
}

@keyframes adri-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.adri-msg.is-adri {
    align-self: flex-start;
    background: var(--adri-card);
    border: 1px solid var(--adri-line);
    border-radius: 16px 16px 16px 5px;
    box-shadow: 0 1px 2px rgba(33, 31, 30, .04);
}

/*
 * The buyer's own words: a soft red wash with a red edge. Not solid red - that made every message
 * the customer sent look like a warning - and not grey, which loses the sense of "this is you".
 */
.adri-msg.is-buyer {
    align-self: flex-end;
    background: var(--adri-red-wash);
    border: 1px solid var(--adri-red-edge);
    border-radius: 16px 16px 5px 16px;
    color: var(--adri-ink);
}

/* ── Loaders ──────────────────────────────────────────────────────────────── */
/*
 * Shown on EVERY fetch, not only slow ones. A 200ms wait with no feedback reads as a broken window
 * and the customer retypes - which costs a second API call for the same question.
 *
 * Two kinds, because the two waits differ: dots while Adriano composes, skeleton tickets while the
 * search runs, so a list that is coming already looks like a list.
 */

.adri-typing {
    align-self: flex-start;
    display: flex; align-items: center; gap: 5px;
    padding: 13px 16px;
    background: var(--adri-card);
    border: 1px solid var(--adri-line);
    border-radius: 16px 16px 16px 5px;
}

.adri-typing i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--adri-red);
    opacity: .3;
    animation: adri-blink 1.25s infinite ease-in-out both;
}
.adri-typing i:nth-child(2) { animation-delay: .16s; }
.adri-typing i:nth-child(3) { animation-delay: .32s; }

@keyframes adri-blink {
    0%, 80%, 100% { opacity: .25; transform: translateY(0); }
    40%           { opacity: 1;   transform: translateY(-4px); }
}

.adri-skeleton { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.adri-skeleton span {
    height: 66px;
    border-radius: 13px;
    background: linear-gradient(100deg, #f2eeea 30%, #fbf8f6 45%, #f2eeea 60%);
    background-size: 300% 100%;
    animation: adri-shimmer 1.4s linear infinite;
}
.adri-skeleton span:nth-child(2) { animation-delay: .1s; }
.adri-skeleton span:nth-child(3) { animation-delay: .2s; }
@keyframes adri-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* A visitor who asked for less motion still gets the loader - it just stops moving, because its
   job is to say "working", not to animate. */
@media (prefers-reduced-motion: reduce) {
    .adri-typing i, .adri-skeleton span, #adri-launcher, #adri-launcher.adri-nudge,
    .adri-bot-eye, #adri-panel, .adri-msg, .adri-part { animation: none !important; }
    .adri-typing i { opacity: .55; }
}

/* ── Result tickets ───────────────────────────────────────────────────────── */
/*
 * Cards, never a table. A part row carries a name, a year, a seller and a price, and a table forces
 * horizontal scrolling on a phone - which is where most of these are read.
 *
 * They arrive staggered, which turns a list appearing into a list being dealt out.
 */

.adri-parts { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }

.adri-part {
    position: relative;
    display: block;
    padding: 13px 15px 13px 16px;
    background: var(--adri-card);
    border: 1px solid var(--adri-line);
    border-radius: 13px;
    text-decoration: none;
    color: var(--adri-ink);
    min-height: 48px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(33, 31, 30, .04);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    animation: adri-msg-in .3s cubic-bezier(.16, 1, .3, 1) backwards;
}

.adri-part:nth-child(1) { animation-delay: .02s; }
.adri-part:nth-child(2) { animation-delay: .06s; }
.adri-part:nth-child(3) { animation-delay: .10s; }
.adri-part:nth-child(4) { animation-delay: .14s; }
.adri-part:nth-child(5) { animation-delay: .18s; }
.adri-part:nth-child(n+6) { animation-delay: .22s; }

/* The accent rule slides in on hover - the ticket being picked up. */
.adri-part::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--adri-red);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .18s ease;
}

.adri-part:hover {
    border-color: var(--adri-red-edge);
    box-shadow: 0 4px 14px rgba(33, 31, 30, .09);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--adri-ink);
}
.adri-part:hover::before { transform: scaleY(1); }

.adri-part-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.adri-part-name {
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: -.005em;
}

/* Mono with tabular figures, so a column of prices lines up and scans like a price list. */
.adri-part-price {
    font-family: var(--adri-mono);
    font-weight: 600;
    font-size: 14px;
    color: var(--adri-red);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* "Ask the yard" where no price was published - never "$0". A free engine is a promise nobody made,
   and an unpriced part is not a cheap one. */
.adri-part-price.is-none {
    font-family: var(--adri-sans);
    color: var(--adri-muted);
    font-weight: 500;
    font-size: 12.5px;
}

.adri-part-meta {
    margin-top: 4px;
    font-family: var(--adri-mono);
    font-size: 11.5px;
    letter-spacing: .01em;
    color: var(--adri-muted);
}

.adri-seller-link .adri-part-price { font-family: var(--adri-sans); font-size: 12.5px; }

/*
 * The yard's phone and page, under the ticket.
 *
 * A separate row rather than part of the card link, because a phone number inside an <a> cannot be
 * its own link. Set in mono like every other piece of yard data, and sized as a proper 44px tap
 * target - this is the row a buyer reaches for on a phone.
 */
.adri-part-group {
    display: flex;
    flex-direction: column;
    background: var(--adri-card);
    border: 1px solid var(--adri-line);
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(33, 31, 30, .04);
    animation: adri-msg-in .3s cubic-bezier(.16, 1, .3, 1) backwards;
}

.adri-part-group:nth-child(1) { animation-delay: .02s; }
.adri-part-group:nth-child(2) { animation-delay: .06s; }
.adri-part-group:nth-child(3) { animation-delay: .10s; }
.adri-part-group:nth-child(4) { animation-delay: .14s; }
.adri-part-group:nth-child(n+5) { animation-delay: .18s; }

/* Inside a group the card loses its own frame - the group carries it. */
.adri-part-group .adri-part {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
    padding-bottom: 11px;
}
.adri-part-group .adri-part:hover { transform: none; box-shadow: none; }
.adri-part-group:hover { border-color: var(--adri-red-edge); box-shadow: 0 4px 14px rgba(33, 31, 30, .09); }

.adri-part-actions {
    display: flex;
    gap: 1px;
    background: var(--adri-line);
    border-top: 1px solid var(--adri-line);
}

.adri-act {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;                 /* the row people tap */
    padding: 10px 8px;
    background: var(--adri-card);
    font-family: var(--adri-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--adri-muted);
    text-decoration: none;
    transition: background .14s ease, color .14s ease;
}

.adri-act:hover { background: var(--adri-red-wash); color: var(--adri-red); text-decoration: none; }

/* The number is the point of the row, so it carries the colour. */
.adri-act-call { color: var(--adri-red); font-weight: 600; }
.adri-act-call::before { content: "\260E"; font-size: 13px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
    .adri-part-group { animation: none !important; }
}

/*
 * "Which kind?" — small tag buttons.
 *
 * Tags rather than full-width rows: these are a choice between siblings, and stacking seven
 * full-width buttons would read as seven separate offers. Wrapped inline, they read as one
 * question with several answers, which is what they are.
 */
.adri-options {
    align-self: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.adri-opt {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    /* 36px, below the 44px rule on purpose: these sit in a wrapped row where a 44px tag would push
       three to a line and turn a quick choice into a scroll. They are also never the only way
       forward - the customer can always just type. */
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid var(--adri-line);
    border-radius: 999px;
    background: var(--adri-card);
    color: var(--adri-ink);
    font: 500 12.5px/1.2 var(--adri-sans);
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, color .14s ease;
}

.adri-opt small {
    font-family: var(--adri-mono);
    font-size: 10.5px;
    color: var(--adri-muted);
}

.adri-opt:hover {
    border-color: var(--adri-red-edge);
    background: var(--adri-red-wash);
    color: var(--adri-red);
}
.adri-opt:hover small { color: var(--adri-red); }

/* ── Request a part ───────────────────────────────────────────────────────── */
/*
 * Back to the dashed outline, which the user preferred to the solid block - and they were right. A
 * dashed red rule reads as a form waiting to be filled in, which is exactly what it is; a solid
 * black bar reads as a confirm button and competes with the results above it for the eye.
 */

.adri-cta {
    align-self: stretch;
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 3px;
    padding: 13px 16px;
    border: 1.5px dashed var(--adri-red-edge);
    border-radius: 13px;
    background: var(--adri-red-wash);
    color: var(--adri-red);
    font: 600 13.5px/1.35 var(--adri-sans);
    cursor: pointer;
    text-align: center;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.adri-cta:hover {
    background: rgba(var(--primaryColor, 218, 26, 54), .1);
    border-color: var(--adri-red);
    transform: translateY(-1px);
}
.adri-cta:active { transform: translateY(0); }

/* ── Composer ─────────────────────────────────────────────────────────────── */

.adri-form {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 9px;
    padding: 11px 12px;
    border-top: 1px solid var(--adri-line);
    background: var(--adri-chrome);
}

#adri-input {
    flex: 1 1 auto;
    /*
     * 16px IS NOT A STYLE CHOICE. Below 16px, iOS Safari zooms the whole page when the field is
     * focused and does not zoom back out, leaving the visitor pinching around a chat window.
     */
    font: 400 16px/1.45 var(--adri-sans);
    padding: 11px 15px;
    border: 1px solid var(--adri-line);
    border-radius: 14px;
    resize: none;
    max-height: 120px;
    color: var(--adri-ink);
    background: var(--adri-card);
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

#adri-input::placeholder { color: #a8a09b; }

#adri-input:focus {
    outline: 0;
    background: var(--adri-card);
    border-color: var(--adri-red-edge);
    box-shadow: 0 0 0 3px var(--adri-red-wash);
}

.adri-send {
    display: grid; place-items: center;
    width: 46px; height: 46px;
    flex: 0 0 46px;
    border: 0; border-radius: 14px;
    background: linear-gradient(145deg, var(--adri-red), var(--adri-red-deep));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--primaryColor, 218, 26, 54), .3);
    transition: transform .16s ease, box-shadow .16s ease;
}
.adri-send:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(var(--primaryColor, 218, 26, 54), .38); }
.adri-send:disabled { background: #ddd6d1; box-shadow: none; cursor: default; transform: none; }

.adri-foot {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 14px calc(9px + env(safe-area-inset-bottom, 0px));
    background: var(--adri-chrome);
    border-top: 1px solid var(--adri-line);
    /* SANS, not mono. Mono earns its place on labels and figures - a yard name, a price, a status
       tag. A sentence set in it reads as code and wraps badly at 10px, which is exactly what
       happened here. */
    font-family: var(--adri-sans);
    /* Small print, kept small. The first version ran to five lines on a phone and ate 120px of an
       844px screen - a disclaimer nobody can avoid reading is still a disclaimer, and it should not
       cost the conversation a seventh of the window. */
    /* FULL WIDTH. It was capped at 52ch and centred, which forced four lines in a 420px panel for
       no reason - the words were narrower than the window they sat in. Across the full width it is
       two lines and takes half the height. */
    font-size: 10px;
    line-height: 1.4;
    color: #8d8580;
    text-align: center;
    max-width: none;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* ── Tablet ───────────────────────────────────────────────────────────────── */

@media (max-width: 991px) and (min-width: 576px) {
    #adri-panel { width: min(440px, calc(100vw - 32px)); height: min(640px, calc(100dvh - 32px)); }
}

/* ── Phone: full screen ───────────────────────────────────────────────────── */

@media (max-width: 575px) {
    #adri-panel {
        inset: 0;
        width: 100%;
        /*
         * dvh, NOT vh.
         *
         * 100vh on iOS Safari is the height of the viewport WITHOUT the browser chrome, so it is
         * taller than what you can actually see. With a bottom-anchored input the text box ends up
         * behind the keyboard and the customer cannot see what they are typing. The single most
         * common way a mobile chat ships broken. 100vh stays first as a fallback.
         */
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        border-top: 0;
        box-shadow: none;
        animation: none;
    }

    /* The red edge moves onto the header when the panel is full screen - a top border there would
       sit under the status bar and never be seen. */
    .adri-head {
        padding: 12px;
        border-top: 4px solid var(--adri-red);
    }

    .adri-log { padding: 15px 14px; gap: 10px; }
    .adri-msg { max-width: 90%; }

    /* The label goes; a circle is enough and takes less of a small screen. */
    #adri-launcher { padding: 0; width: 58px; height: 58px; justify-content: center; right: 16px; }
    .adri-launcher-label { display: none; }

    /*
     * THE USERWAY ACCESSIBILITY BUTTON floats bottom-left, and the panel is full screen here, so
     * the two collide - a screenshot at 390x844 showed it on top of the text field.
     *
     * It is NOT hidden and NOT moved. Hiding an accessibility tool to make room for a chat widget
     * is the wrong trade every time, and lifting it only relocated the collision onto the request
     * button. Anywhere it moves to inside a scrolling conversation eventually has something under
     * it. So the space is reserved instead: the composer is indented past it, that being the one
     * part of the panel which never scrolls.
     */
    .adri-form { padding-left: 62px; }
    .adri-foot { padding-left: 62px; }
}

html.adri-locked, html.adri-locked body { overflow: hidden; }

/* Landscape on a phone: barely any height, so trim the chrome rather than let the log vanish. */
@media (max-width: 991px) and (max-height: 460px) {
    .adri-head-who small, .adri-foot { display: none; }
    .adri-head { padding: 8px 12px; }
}