/* "Ask GenersysAI" — the floating button and the chat panel.
   Master Security's own command look: dark navy head, hairline-bordered card body,
   left status accent on the assistant's answers. Deliberately NOT the white marketing
   panel the sibling products use.

   Two things in here are 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 top of the guard's EMERGENCY button or the Master Suite attribution
      line in a footer. It takes the button out of the way and out of the tab order
      rather than letting it sit over a control somebody may need in a hurry, or over
      a line that has to stay readable.
   3. The button is a COMPACT CIRCLE at rest on every screen size, and only grows its
      "Ask GenersysAI" label on hover or keyboard focus. The wide pill covered live
      data in the client portal on a desktop (the "Covered" chips scrolling past its
      left end); a 48 px circle at the corner has a quarter of the footprint. Do not
      make it a pill again.
   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. A fixed button must pass over content
      while the page scrolls; it must never be the thing that hides the final line. */

:root {
    --gen-navgap: 0px;          /* replaced at runtime where a bottom nav exists */
    --gen-edge: 16px;
    --gen-fab-size: 48px;
}

/* ---------------------------------------------------------------- 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 6px 22px rgba(8, 27, 51, .34);
    transition: gap .15s ease-out, padding .15s ease-out;
}
.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: a thumb cannot hover, and on a phone the circle is the whole story). The text
   stays in the DOM throughout, 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 (see keepClear() in the script). */
.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, not only
   at the foot of the page. The client portal's "Covered" chips were the case that
   proved it: a fixed button passes over whatever scrolls under it unless the content
   stops short of it. 90px, against the 84px rail on the left, so it reads as balance
   rather than a hole. Phones keep the full width: there the circle sits in the corner
   and the foot padding above is what keeps the last row clear. */
@media (min-width: 1024px) {
    .app-main { padding-right: calc(var(--gen-fab-size) + (var(--gen-edge) * 2) + 10px); }
}

/* Out of the way: the panel is open, or the button would sit on the EMERGENCY button. */
.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 rather than covering the viewport. A help panel
   must not put a sheet of glass over an officer's navigation: with the panel open the
   nav is still visible AND still tappable, so nothing stands between somebody and the
   duty screen. Everything else behind the panel closes it on a tap, as a dialog should. */
.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(--msec-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: var(--ms-navy-950);
    color: #fff;
    flex: 0 0 auto;
}
.gen-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 9px;
    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: 34px; height: 34px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9px;
    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 12px;
    border-radius: var(--msec-radius-sm);
    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);
    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(--msec-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);
    color: #fff;
}
.gen-typing {
    align-self: flex-start;
    color: var(--ms-muted);
    font-size: 12.5px;
    font-weight: 700;
    padding: 4px 2px;
}

/* suggestion + starter chips: ONE compact row that scrolls sideways, never a stack.
   Four wrapped chips used to take most of a phone's panel and push the opening message
   out of sight. The starters are shown once per browser (genersys.js keeps the flag)
   and the chips under an answer are capped at two. A long question is cut with an
   ellipsis on the chip and carried in full on its title; the click sends the whole
   question, which then appears in the person's own bubble. */
.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: 5px 11px;
    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. The question box is a textarea that starts as one line and is grown by
   script to five lines (data-max-lines, the system-wide rule in assets/js/app.js;
   genersys.js sizes it itself where app.js is not loaded), then scrolls inside itself.
   The send button keeps its own height and sits at the foot of the row, so it does not
   stretch into a tall green slab while the box grows. */
.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: var(--msec-radius-sm);
    padding: 11px 12px;
    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: var(--msec-radius-sm);
    background: var(--ms-green-700);
    color: #fff;
    cursor: pointer;
}
/* Same glaze as .btn-green / .chat-send / .call-btn.answer: the face deepens from the
   top edge to the foot (never lighter than green-600, so white stays legible) with one
   soft band that sweeps across on hover or focus. Disabled goes flat and grey. */
.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, and a wide pill has
       more chance of landing on something. */
    .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;
        /* Stops short of the bottom nav, never over it. */
        max-height: calc(100vh - var(--gen-navgap) - 74px);
    }
    .gen-msg { max-width: 96%; }
    /* The chip row is narrow here: without the label the first chip fits and the
       second peeks in from the edge, which is what tells a thumb the row scrolls. */
    .gen-chips-label { display: none; }
    .gen-chip { max-width: 190px; }
}

/* Phones and short screens: give the conversation the room instead of the trimmings.
   Inside the app the bottom bar takes another 70px, so the threshold is a phone, not
   only a very short screen. */
@media (max-height: 720px) {
    .gen-chips-label { display: none; }
    .gen-foot { padding: 6px 12px 7px; font-size: 11px; line-height: 1.3; }
}