/* css/nav-menu.css — inline style moved out of index.html unchanged (was <style>). */

      #nav-menu-overlay {
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: 500;
        background: rgba(0,0,0,0.93);
        display: none; flex-direction: column; align-items: center;
        justify-content: flex-start;
        padding: 20px 8px 32px;
        opacity: 0; transition: opacity 0.2s;
        overflow-y: auto;
      }
      #nav-menu-overlay.open { opacity: 1; }
      #nm-grid {
        display: flex; flex-wrap: wrap;
        justify-content: center;
        gap: 4px 0;
        width: 100%; max-width: 440px;
      }
      .nmb {
        flex: 0 0 33.33%; max-width: 146px;
        background: none; border: none; color: var(--text);
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 7px; padding: 16px 6px 14px;
        font-family: 'Inter', sans-serif; font-size: 12px;
        font-weight: 600; letter-spacing: 0.4px;
        text-transform: uppercase; cursor: pointer;
      }
      .nmb.active { color: var(--accent); }
      .nmb .nm-icon {
        width: 56px; height: 48px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 14px;
      }
      .nmb.active .nm-icon { background: rgba(200,168,75,0.2); }
      .nmb .nm-icon svg { width: 36px; height: 36px; display: block; }

      /* ── Support chat ── */
      /* ⛔⭐ THE HEIGHT IS INHERITED, NOT CALCULATED — Santi, 2026-09-03: "the screen
         doesn't use the whole height of the device". There used to be
         `calc(100dvh / var(--tl-zoom) - 220px)` here, and the 220 was a magic number
         that corresponded to nothing measurable: screen was left over at the bottom.
         ⭐ The app ALREADY solves this well and in one single place. `body` measures
         `var(--app-h, 100dvh)` —which `js/app.js` feeds from `visualViewport`,
         so it follows the browser bar AND the keyboard— and `.content` is
         `flex: 1`. With the view as a column and the card at `flex: 1`, the chat
         takes what's left, without this file having to know how tall the
         header or the button bar are.
         ⛔ And that's why `100dvh` is NOT used here: the lesson is written in the
         Quick Shot overlay —«bare `100dvh` overshoots when Safari shows
         its bottom bar: the footer ends up BEHIND it» (iPhone, 2026-08-06)—.
         ⚠️ NOR `env(safe-area-inset-bottom)`: the iOS safe area is handled by
         `.bottom-nav`, which sits below `.content`. Adding it here would
         count it twice. */
      #view-contacto.active {
        display: flex; flex-direction: column; min-height: 100%;
      }
      .support-chat {
        margin: 10px 12px 0;
        display: flex; flex-direction: column;
        flex: 1;
        /* ⛔⭐ `min-height: 0`, AND HERE WAS THE FAILURE IN SANTI'S PHOTO. It set
           360 px, so with the keyboard open —which leaves about 400 of frame— the
           chat INSISTED on measuring 360 even though it didn't fit and the typing field
           went off the bottom. Measured: clipped 11 px, and removing the button bar
           at the bottom did NOT fix it —it stayed clipped exactly the same—, because the
           minimum wins over whatever space there is.
           ⚠️ And `min-height: 0` is needed ALSO for the usual reason in
           flex: a child doesn't shrink below its content unless told to, and without this
           the message thread pushes the typing field off the screen
           instead of shrinking itself, which is the one that has the scroll. */
        min-height: 0;
        background: var(--card); border: 1px solid var(--border);
        border-radius: 14px; overflow: hidden;
      }
      /* ⛔ `flex-wrap` is what makes the two states with a single box: the
         paragraph carries `width:100%`, so when present it takes its own
         line and pushes the button to the one below. When it's hidden, everything fits in
         one row. */
      .support-header {
        padding: 12px 14px; border-bottom: 1px solid var(--border);
        background: linear-gradient(180deg, var(--accent-dim), transparent);
        display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
      }
      /* WITH MESSAGES: a single 44 px row. The button already measures 44 —it's the
         touch target of the norm—, so the padding is adjusted so that the
         whole row stays at that and not at 68. */
      /* EMPTY THREAD: title and badge on top, the notice below and the button
         last. ⛔ It's placed with `order` and not by moving the node: the button has
         to be THE SAME in both states —duplicating it would give two to keep
         in sync— and in the single-line row it goes on the right.
         ⚠️ The cross stays on top in both: it's the card's close, not
         part of the notice. */
      .support-header[data-vacio="1"] .support-aviso-txt { order: 1; }
      .support-header[data-vacio="1"] .support-human-btn { order: 2; }
      .support-header[data-vacio="0"] { padding: 4px 10px 4px 14px; }
      .support-header[data-vacio="0"] .support-title,
      .support-header[data-vacio="0"] .support-aviso-txt { display: none; }
      /* ⛔ On the right, and with `auto` instead of a width: that way the button sticks to the
         edge in both states without this file knowing how wide the
         badge or the cross are. */
      .support-header[data-vacio="0"] .support-human-btn { margin-left: auto; }
      /* ⛔⭐ IN THE REDUCED ROW, THREE ICONS OF THE SAME SIZE — Santi,
         2026-09-03: *"the trash can and the x look terrible, ugly, they take up a line
         for two tiny icons"*. He was right and besides they were 28 px, below
         the touch target. Now all three measure 48x44 and share the
         width the text button took up, so the row doesn't grow.
         ⛔ THE ORDER IS PERSON · DELETE · CLOSE, which is what he asked for, BUT
         with an extra gap before the cross: deleting is the only thing with no way back
         and can't be stuck next to what's pressed to leave.
         ⚠️ And delete does NOT go in the corner, even though there's room there: the corner is
         where the thumb goes alone, and that's the last action that should
         receive a distracted tap. */
      .support-header[data-vacio="1"] .sh-ico { display: none; }
      .support-header[data-vacio="0"] .sh-txt { display: none; }
      .support-header[data-vacio="0"] .support-human-btn,
      .support-header[data-vacio="0"] .support-del-btn,
      .support-header[data-vacio="0"] .support-close-btn {
        min-width: 48px; min-height: 44px; padding: 0;
        display: flex; align-items: center; justify-content: center;
      }
      .support-header[data-vacio="0"] .support-close-btn { margin-left: 6px; }
      .support-header[data-vacio="0"] .support-human-btn { border-radius: 10px; }
      .support-close-btn {
        background: none; border: none; color: var(--muted);
        cursor: pointer; padding: 4px; display: flex; align-items: center;
        justify-content: center; border-radius: 6px; flex-shrink: 0;
        transition: background .15s, color .15s;
      }
      .support-close-btn:hover { background: var(--hover-soft); color: var(--accent); }
      /* Same box as close —so the row doesn't get misaligned— and danger
         color. ⚠️ The color is NOT the only thing that tells them apart: the icon is different
         and the label says it; the norm forbids relying on color. */
      .support-del-btn {
        background: none; border: none; color: var(--danger, #c0392b);
        cursor: pointer; display: flex; align-items: center;
        justify-content: center; border-radius: 6px; flex-shrink: 0;
        transition: background .15s;
        /* ⛔ 44x44, the touch target of the norm, and here it's no detail:
           measured it came out at 28x28 and this DELETES FOR GOOD. A small target
           on a destructive button is a wrong tap waiting to happen.
           ⭐ And it goes to the LEFT of the cross on purpose: the corner is where the
           thumb goes to close, so the action with no way back is not put there. */
        min-width: 44px; min-height: 44px;
      }
      .support-del-btn:hover { background: var(--hover-soft); }
      .support-title {
        font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 700;
        color: var(--accent); letter-spacing: .5px;
      }
      /* ⛔ The AI label and the title, on the SAME line and always visible.
         `flex-wrap` because on a narrow phone with big lettering the two don't fit:
         before clipping the product name, the badge drops down. */
      /* Static badge, with the same shape as the «(Beta)» on the `/app`
         door: no new family is invented for the same thing. ⛔ It is NOT a
         `.chip` of the app: that one is interactive (hand cursor, 38 px touch
         target) and this isn't pressed. */
      .support-ia-chip {
        display: inline-block; flex-shrink: 0;
        padding: 2px 8px;
        font-family: 'Oswald', sans-serif;
        font-size: 10px; font-weight: 500; letter-spacing: .14em;
        text-transform: uppercase;
        /* ⛔ FILL, NOT TINT ON A FAINT BACKGROUND, and it comes from MEASURING IT: with
           `--accent` on `--accent-dim` the contrast in LIGHT theme was 4.02
           —below the 4.5:1 the norm demands for small text— and in
           dark 5.86. Fill gives 4.80 and 8.48: passes in both.
           ⭐ And for a badge that exists out of legal obligation, being seen
           more is not a side effect: it's what's sought. */
        color: var(--accent-fg);
        background: var(--accent);
        border: 1px solid var(--accent);
        border-radius: 999px;
      }
      /* The notice: FIXED text of the screen, outside the thread that scrolls.
         ⚠️ `--muted` and not `--text-dim`: it's secondary information, but it has
         to meet 4.5:1 in both themes — `--muted` does and `unit-contraste-tokens`
         watches it. */
      /* The notice, only with an empty thread. ⛔ `width:100%` so it takes its
         own line: it's what splits the header into two rows without needing
         one more container. */
      .support-aviso-txt {
        width: 100%;
        margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45;
      }
      .support-human-btn {
        min-height: 44px;
        padding: 0 14px;
        border-radius: 10px;
        border: 1px solid var(--accent);
        background: var(--accent-dim);
        /* ⛔ `--text`, NOT `--accent`, and it comes from MEASURING IT: with the accent color
           on the faint background the contrast in light theme was 4.02 —below
           4.5:1— and in dark 6.16. With `--text` it gives 14.58 and 12.09.
           ⭐ The accent border still says it's a button, so the color
           wasn't the only indicator and nothing is lost by dropping it. And it isn't
           filled with accent on purpose: the main button of this screen is
           SEND, and two filled buttons compete. */
        color: var(--text);
        font-family: 'Oswald', sans-serif;
        font-size: 13px; letter-spacing: .4px;
        cursor: pointer;
        transition: background .15s, opacity .15s;
      }
      .support-human-btn:hover { background: var(--hover-soft); }
      .support-human-btn:disabled { opacity: .5; cursor: default; }
      .support-messages {
        /* `min-height: 0`: it's the one that HAS to shrink when space runs out —it's
           the only one that scrolls—. Without this it pushes the ones below out. */
        flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px;
        scroll-behavior: smooth;
      }
      .support-msg {
        max-width: 82%; padding: 9px 12px; border-radius: 14px;
        font-size: 14px; line-height: 1.45; word-wrap: break-word; white-space: pre-wrap;
      }
      .support-msg.user {
        align-self: flex-end;
        background: var(--chat-user-bg); color: var(--chat-user-fg); border-bottom-right-radius: 4px;
      }
      .support-msg.bot {
        align-self: flex-start;
        background: var(--chat-bot-bg); color: var(--chat-bot-fg); border: 1px solid var(--accent-dim);
        border-bottom-left-radius: 4px;
      }
      /* ⛔ IT MUST BE SEEN AT FIRST GLANCE THAT THE MACHINE DIDN'T WRITE THIS
         (art. 50.1). Before, it was told apart from the bot only by the border tone
         —`--accent` against `--accent-dim`—, a difference nobody
         notices and which is also COLOR ONLY: the house norm forbids
         color being the only indicator. Now it also carries a thick band on the
         left and its label says «persona» (person) in so many words. */
      .support-msg.admin {
        align-self: flex-start;
        background: linear-gradient(180deg, var(--accent-dim), var(--accent-dim)); color: var(--text);
        border: 1px solid var(--accent);
        border-left: 4px solid var(--accent);
        border-bottom-left-radius: 4px;
      }
      .support-msg-label {
        display: block; font-size: 10px; letter-spacing: .6px; text-transform: uppercase;
        color: var(--muted); margin-bottom: 3px; font-family: 'Oswald', sans-serif;
      }
      .support-msg.admin .support-msg-label { color: var(--gold, #c8a84b); }
      .support-typing {
        align-self: flex-start; padding: 9px 14px; border-radius: 14px;
        background: var(--card); border: 1px solid var(--accent-dim);
        display: inline-flex; gap: 4px;
      }
      .support-typing span {
        width: 6px; height: 6px; border-radius: 50%; background: rgba(200,168,75,.7);
        animation: sup-typing 1.2s infinite ease-in-out;
      }
      .support-typing span:nth-child(2) { animation-delay: .2s; }
      .support-typing span:nth-child(3) { animation-delay: .4s; }
      @keyframes sup-typing {
        0%, 80%, 100% { opacity: .3; transform: scale(.8); }
        40%           { opacity: 1;  transform: scale(1.15); }
      }
      .support-input-row {
        display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border);
        background: var(--bg);
      }
      /* 16 px and not 14: below that iOS zooms the page on focus and doesn't
         give it back (see the block at the end of css/main.css). This style goes
         in a <style> of the document, so it beats main.css by order and the
         minimum there doesn't reach it — it has to be set here. */
      .support-input {
        flex: 1; background: var(--card); color: var(--text); border: 1px solid var(--accent-dim);
        border-radius: 10px; padding: 10px 12px; font-size: 16px; font-family: inherit;
        resize: none; max-height: 120px; line-height: 1.35;
      }
      .support-input:focus { outline: none; border-color: var(--accent); }
      .support-send {
        background: var(--accent); color: var(--accent-fg); border: none; border-radius: 10px;
        width: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center;
        cursor: pointer; transition: background .15s;
      }
      .support-send:hover { opacity: .88; }
      .support-send:disabled { opacity: .4; cursor: not-allowed; }
      .support-status {
        padding: 0 12px 8px; font-size: 11px; color: var(--muted); min-height: 16px;
      }
      .support-msg.system {
        align-self: center; background: var(--accent-dim);
        border: 1px dashed var(--accent); color: var(--text);
        font-size: 12px; font-style: italic; padding: 7px 12px; border-radius: 10px;
        max-width: 90%;
      }
      .support-closed-bar {
        display: flex; align-items: center; gap: 10px; padding: 10px 12px;
        background: var(--accent-dim);
        border-top: 1px solid var(--accent); flex-wrap: wrap;
      }
      .support-closed-bar-text {
        flex: 1; min-width: 120px; font-size: 12px; color: var(--text);
      }
      .support-closed-bar button {
        background: var(--accent); color: var(--accent-fg); border: none; border-radius: 6px;
        padding: 8px 14px; font-family: 'Oswald', sans-serif; font-size: 12px;
        letter-spacing: .6px; cursor: pointer; text-transform: uppercase;
      }
      .support-closed-bar button:hover { background: #e0bd5a; }
      .support-input:disabled { opacity: .5; cursor: not-allowed; }
      .support-status.error { color: #ff8a8a; }

      /* Unread support badge over the tab icon */
      .support-unread-dot {
        position: absolute; top: 6px; right: 6px;
        width: 10px; height: 10px; border-radius: 50%;
        background: #ff3b3b; box-shadow: 0 0 0 2px #000;
        pointer-events: none;
      }