/* "Ask GenersysAI": the floating button and the chat panel, in Master Transport's
   rounded journey-board look: navy head, 16px panel, a green route accent on the
   assistant's answers.

   Requirements rather than taste, so do not "tidy" them away:

   1. --gen-navgap is set by assets/js/genersys.js to the real measured height of the
      mobile bottom nav (0 on the public pages, which have none). Both the button and
      the panel sit ABOVE that gap, so neither can ever cover the bottom navigation.
   2. .gen-fab-clear is added by the same script whenever the button's own rectangle
      would land on the driver's sticky action bar, a chat composer, or the Master
      Suite attribution line. It takes the button out of the way and out of the tab
      order rather than letting it sit over a control somebody needs in a hurry.
   3. The button is a COMPACT CIRCLE at rest on every screen size and only grows its
      label on hover or keyboard focus. Do not make it a pill again: a pill covered
      live data at the foot of the client portal.
   4. .app-main is given enough bottom room for the button, so the last row of any
      list can always be scrolled clear of it. */

:root {
    --gen-navgap: 0px;          /* replaced at runtime where a bottom nav exists */
    --gen-edge: 16px;
    --gen-fab-size: 48px;
}
/* Before genersys.js has measured it (or where it never runs), a page with the phone's bottom
   nav already keeps its height clear; the measured value, set inline, wins once it is known. */
@media (max-width: 1023px) {
    :root:has(#mt-bottom-nav) { --gen-navgap: calc(var(--mt-bottom-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------- the button */
.gen-fab {
    position: fixed;
    right: var(--gen-edge);
    bottom: calc(var(--gen-navgap) + var(--gen-edge));
    z-index: 240;
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: var(--gen-fab-size);
    height: var(--gen-fab-size);
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: linear-gradient(140deg, var(--ms-navy-900), var(--ms-navy-800));
    color: #fff;
    font-family: var(--ms-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(8, 27, 51, .34);
    transition: gap .15s ease-out, padding .15s ease-out, opacity .15s ease, transform .15s ease;
}
.gen-fab .ic { color: var(--ms-green-400); flex: 0 0 auto; }
.gen-fab:hover { background: linear-gradient(140deg, var(--ms-navy-800), var(--ms-navy-700)); }
.gen-fab:focus-visible { outline: 3px solid var(--ms-green-400); outline-offset: 3px; }
/* The label is folded away at rest and unfolds on hover or focus (pointer devices
   only). The text stays in the DOM so a screen reader always has the button's name. */
.gen-fab-label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .18s ease-out, opacity .12s ease-out;
}
@media (hover: hover) and (pointer: fine) {
    .gen-fab:hover, .gen-fab:focus-visible { gap: 9px; padding: 0 17px 0 14px; }
    .gen-fab:hover .gen-fab-label, .gen-fab:focus-visible .gen-fab-label { max-width: 160px; opacity: 1; }
}

/* Room at the foot of every app page for the button, ABOVE whatever the shell already
   reserves for the bottom nav, so the last row of a table can be scrolled out from
   under it. The public shell needs none: its footer is a full navy band and the
   button steps aside for the attribution line instead. */
.app-main { padding-bottom: calc(var(--gen-navgap) + var(--gen-fab-size) + (var(--gen-edge) * 2) + 8px); }
/* On a desktop the button gets its own gutter down the right of every app page, so
   it never sits over a card, a table row or a status chip at any scroll position. */
@media (min-width: 1024px) {
    .app-main { padding-right: calc(var(--gen-fab-size) + (var(--gen-edge) * 2) + 10px); }
}

/* Never on a driver's screen or a focus screen (the booking steps, the driver's trip; design
   round 30/09/2026): a thumb reaching for the main action must never find it. The assistant
   is still one tap away there, from the More sheet and the account menu ("Ask GenersysAI"
   clicks this button, which works while it is not displayed). The foot room is given back. */
body.role-driver .gen-fab, body.is-focus .gen-fab { display: none !important; }
body.role-driver .app-main, body.is-focus .app-main { padding-right: 26px; }
@media (max-width: 1023px) {
    body.role-driver .app-main, body.is-focus .app-main { padding-right: 14px; }
    body.role-driver .app-main { padding-bottom: calc(var(--mt-bottom-h) + 22px + env(safe-area-inset-bottom, 0px)); }
}

/* Out of the way: the panel is open, or the button would sit on something important. */
.gen-fab.gen-fab-clear,
.gen-open .gen-fab {
    opacity: 0;
    pointer-events: none;
    transform: scale(.9);
}

/* ---------------------------------------------------------------- the panel */
/* The scrim stops ABOVE the bottom nav: with the panel open the nav is still visible
   and still tappable, so nothing stands between a driver and the trip screen. */
.gen-scrim {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    bottom: var(--gen-navgap);
    z-index: 320;
    background: rgba(8, 27, 51, .38);
}
.gen-open .gen-scrim { display: block; }

.gen-panel {
    display: none;
    position: fixed;
    z-index: 330;
    right: var(--gen-edge);
    bottom: calc(var(--gen-navgap) + var(--gen-edge));
    width: 384px;
    max-width: calc(100vw - (var(--gen-edge) * 2));
    max-height: min(640px, calc(100vh - var(--gen-navgap) - 90px));
    flex-direction: column;
    overflow: hidden;
    background: var(--ms-card);
    border: 1px solid var(--ms-line);
    border-radius: var(--mt-radius);
    box-shadow: 0 18px 48px rgba(8, 27, 51, .3);
    font-family: var(--ms-font);
    animation: gen-rise .16s ease-out;
}
.gen-open .gen-panel { display: flex; }

@keyframes gen-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .gen-panel { animation: none; }
    .gen-fab { transition: none; }
}

/* head */
.gen-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 12px 12px 14px;
    background: linear-gradient(140deg, var(--ms-navy-950), var(--ms-navy-900));
    color: #fff;
    flex: 0 0 auto;
}
.gen-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: rgba(74, 182, 83, .16);
    border: 1px solid rgba(74, 182, 83, .38);
    color: var(--ms-green-400);
    flex: 0 0 auto;
}
.gen-head-text { min-width: 0; }
.gen-title { font-size: 14.5px; font-weight: 800; letter-spacing: .01em; }
.gen-sub {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(255, 255, 255, .58);
}
.gen-close {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    flex: 0 0 auto;
}
.gen-close:hover { background: rgba(255, 255, 255, .1); }
.gen-close:focus-visible { outline: 3px solid var(--ms-green-400); outline-offset: 2px; }

/* body */
.gen-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px;
    background: var(--ms-bg);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gen-body:focus-visible { outline: 2px solid var(--ms-green-500); outline-offset: -2px; }

.gen-msg {
    max-width: 92%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;      /* the answers are written with real line breaks */
    overflow-wrap: anywhere;
}
.gen-bot {
    align-self: flex-start;
    background: var(--ms-card);
    border: 1px solid var(--ms-line);
    border-left: 3px solid var(--ms-green-500);
    border-top-left-radius: 5px;
    color: var(--ms-ink);
}
/* An honest "I do not know" is flagged amber, not dressed up as an answer. */
.gen-bot.gen-unsure { border-left-color: var(--mt-amber); background: #fffdf6; }
/* An AI answer carries a navy accent instead of the guide's green, and a line under
   it saying so. The two must never look the same. */
.gen-bot.gen-ai { border-left-color: var(--ms-navy-500); }
.gen-src {
    align-self: flex-start;
    max-width: 92%;
    margin-top: -6px;
    padding: 0 2px;
    color: var(--ms-muted);
    font-size: 11.5px;
    line-height: 1.4;
}
.gen-user {
    align-self: flex-end;
    background: var(--ms-navy-900);
    border: 1px solid var(--ms-navy-800);
    border-top-right-radius: 5px;
    color: #fff;
}
.gen-typing {
    align-self: flex-start;
    color: var(--ms-muted);
    font-size: 12.5px;
    font-weight: 700;
    padding: 4px 2px;
}

/* suggestion and starter chips: ONE compact row that scrolls sideways, never a stack. */
.gen-chips {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    padding: 8px 14px;
    background: var(--ms-bg);
    border-top: 1px solid var(--ms-line);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.gen-chips::-webkit-scrollbar { display: none; }
.gen-chips:empty { display: none; }
.gen-chips-label { flex: 0 0 auto; margin: 0 2px 0 0; white-space: nowrap; }
.gen-chip {
    flex: 0 0 auto;
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid var(--ms-navy-100);
    background: var(--ms-card);
    color: var(--ms-navy-800);
    border-radius: 999px;
    padding: 6px 12px;
    min-height: 32px;
    font-family: var(--ms-font);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    text-align: left;
}
.gen-chip:hover { border-color: var(--ms-green-500); color: var(--ms-green-700); }
.gen-chip:focus-visible { outline: 3px solid var(--ms-green-400); outline-offset: 2px; }

/* composer: a textarea that starts as one line and grows to five (data-max-lines, the
   system-wide rule in app.js; genersys.js sizes it itself on the public shell). */
.gen-form {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px;
    background: var(--ms-card);
    border-top: 1px solid var(--ms-line);
}
.gen-input {
    flex: 1 1 auto;
    display: block;
    min-width: 0;
    min-height: 44px;
    height: 44px;                    /* one line at rest; the script grows it */
    border: 1px solid var(--ms-line);
    border-radius: 22px;
    padding: 11px 14px;
    font-family: var(--ms-font);
    font-size: 15px;                 /* 15px or more, or iOS zooms the page on focus */
    line-height: 1.4;
    color: var(--ms-ink);
    background: #fff;
    resize: none;
    overflow-y: hidden;              /* the script switches this to auto at five lines */
}
.gen-input:focus { outline: none; border-color: var(--ms-green-500); box-shadow: 0 0 0 3px var(--ms-green-100); }
.gen-send {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--ms-green-700);
    color: #fff;
    cursor: pointer;
}
.gen-send:not(:disabled) {
    position: relative;
    overflow: hidden;
    background-color: var(--ms-green-700);
    background-image: linear-gradient(180deg, var(--ms-green-600) 0%, var(--ms-green-700) 32%, var(--ms-green-800) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.18);
}
.gen-send:not(:disabled):hover {
    background-color: var(--ms-green-800);
    background-image: linear-gradient(180deg, var(--ms-green-700) 0%, var(--ms-green-800) 32%, var(--ms-green-900) 100%);
}
.gen-send:not(:disabled)::after {
    content: ""; position: absolute; top: -1px; bottom: -1px; left: -55%; width: 40%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%);
    transform: translateX(0) skewX(-18deg); transition: transform 0s; pointer-events: none;
}
.gen-send:not(:disabled):hover::after,
.gen-send:not(:disabled):focus-visible::after { transform: translateX(430%) skewX(-18deg); transition: transform .62s cubic-bezier(.3,.72,.32,1); }
@media (prefers-reduced-motion: reduce) {
    .gen-send:not(:disabled):hover::after, .gen-send:not(:disabled):focus-visible::after { transform: translateX(0) skewX(-18deg); transition: none; }
}
.gen-send:disabled { background: var(--ms-muted); box-shadow: none; cursor: default; }
.gen-send:focus-visible { outline: 3px solid var(--ms-navy-900); outline-offset: 2px; }

.gen-foot {
    flex: 0 0 auto;
    padding: 9px 14px 11px;
    background: var(--ms-navy-50);
    border-top: 1px solid var(--ms-line);
    color: var(--ms-muted);
    font-size: 11.5px;
    line-height: 1.5;
}
.gen-foot a { color: var(--ms-green-700); font-weight: 700; }

/* Visually hidden label, still read out. */
.gen-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 680px) {
    :root { --gen-edge: 12px; }
    /* The circle never unfolds here: there is no hover on a phone. */
    .gen-fab, .gen-fab:hover, .gen-fab:focus-visible { padding: 0 12px; gap: 0; }
    .gen-fab:hover .gen-fab-label, .gen-fab:focus-visible .gen-fab-label { max-width: 0; opacity: 0; }
    .gen-panel {
        left: var(--gen-edge);
        right: var(--gen-edge);
        width: auto;
        max-width: none;
        max-height: calc(100vh - var(--gen-navgap) - 74px);
    }
    .gen-msg { max-width: 96%; }
    .gen-chips-label { display: none; }
    .gen-chip { max-width: 190px; }
}
/* Small phones (under 600px): an exact 48px icon-only circle. The label is taken out of
   the flow the way .gen-sr is, so it can never widen the button, and it is still read
   out (the button's aria-label says the same). Everywhere this applies to the signed-in
   app too, only the size changes; position and the keep-clear rules are untouched. */
@media (max-width: 599.98px) {
    .gen-fab, .gen-fab:hover, .gen-fab:focus-visible {
        width: var(--gen-fab-size);
        min-width: var(--gen-fab-size);
        padding: 0;
        gap: 0;
        justify-content: center;
    }
    .gen-fab .gen-fab-label,
    .gen-fab:hover .gen-fab-label,
    .gen-fab:focus-visible .gen-fab-label {
        position: absolute;
        width: 1px; height: 1px;
        max-width: none;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
    /* PUBLIC PAGES ONLY (there is no bottom nav to sit above): the button keeps clear of
       the phone's rounded corner and home bar, and the page ends with room for it, so the
       last lines of the footer (the registration line under the protected suite line)
       scroll up clear of the button instead of finishing underneath it. */
    body.pub .gen-fab {
        right: calc(var(--gen-edge) + env(safe-area-inset-right, 0px));
        bottom: calc(var(--gen-edge) + env(safe-area-inset-bottom, 0px));
    }
    body.pub .pub-footer {
        padding-bottom: calc(var(--gen-fab-size) + (var(--gen-edge) * 2) + 12px + env(safe-area-inset-bottom, 0px));
    }
}
@media (max-height: 720px) {
    .gen-chips-label { display: none; }
    .gen-foot { padding: 6px 12px 7px; font-size: 11px; line-height: 1.3; }
}