@font-face {
      font-family: 'Roboto';
      src: url('fonts/Roboto-Light.ttf') format('truetype');
      font-weight: 200;
      font-style: normal;
    }
    @font-face {
      font-family: 'Roboto';
      src: url('fonts/Roboto-Regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
    }
    /* ── Reset & Base ─────────────────────────────────────────────────────── */
    .qa-chat-host *, .qa-chat-host *::before, .qa-chat-host *::after { box-sizing: border-box; margin: 0; padding: 0; }
    .qa-chat-host *:focus, .qa-chat-host *:active { outline: none !important; }
    .qa-chat-host * { -webkit-tap-highlight-color: transparent; }
    .qa-chat-host button, .qa-chat-host a, .qa-chat-host input, .qa-chat-host textarea, .qa-chat-host select { outline: none !important; -webkit-tap-highlight-color: transparent; }
    .qa-chat-host button:focus, .qa-chat-host a:focus, .qa-chat-host input:focus, .qa-chat-host textarea:focus { outline: none !important; box-shadow: none !important; }
    .qa-chat-host { font-weight: 200; }
    .qa-chat-host strong, .qa-chat-host b, .qa-chat-host th, .qa-chat-host .header-name, .qa-chat-host .option-label, .qa-chat-host .btn { font-weight: 400; }

    .qa-chat-host {
      --brand:        #000000;
      --brand-mid:    #000000;
      --brand-accent: #000000;
      --brand-gold:   #000000;
      --bg:           #F6F7FB;
      --surface:      #ffffff;
      --bubble-ai:    #F6F7FB;
      --bubble-user:  #000000;
      --text-primary: #000000;
      --text-muted:   #000000;
      --text-light:   #ffffff;
      --border:       #dde3e6;
      --shadow:       0 3px 8px 0 rgb(116, 129, 141, 15%);
      --radius-lg:    20px;
      --radius-md:    10px;
      --radius-sm:    8px;
      --font:         'Roboto', sans-serif;
    }

    .qa-chat-host {
      font-family: var(--font);
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 0px 20px;
    }

    /* ── Widget Shell ─────────────────────────────────────────────────────── */
    .qa-chat-host .chat-widget {
      width: 100%;
      max-width: 400px;
      height: 800px;
      max-height: 95vh;
      background: var(--surface);
      border-radius: 10px;
      /*box-shadow: var(--shadow);*/
      border: 1px solid #dde3e6;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }

    /* The mobile @media block lives at the END of this <style> block so its
       rules always win the cascade against the base layout rules that follow.
       Search for "── Mobile shell ──" at the bottom to edit it. */

    /* ── Header ───────────────────────────────────────────────────────────── */
    .qa-chat-host .chat-header {
      background: #ffffff;
      border-bottom: 1px solid var(--border);
      padding: 10px 15px;
      /*display: flex;*/
      display: none;
      align-items: center;
      gap: 0px;
      flex-shrink: 0;
    }

    .qa-chat-host .header-back {
      width: 15px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: #141413;
      cursor: default;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      padding: 0;
      margin-left: -10px;
      margin-right: -7px; /* cancels chat-header gap while collapsed */
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      /* Reverse (hide): opacity fades out 0-0.25s, then width collapses 0.25-0.5s */
      transition:
        opacity 0.25s ease,
        width 0.25s ease 0.25s,
        margin-right 0.25s ease 0.25s,
        background 0.2s;
    }
    .qa-chat-host .chat-widget.show-back .header-back {
      width: 32px;
      margin-right: 0;
      opacity: 1;
      pointer-events: auto;
      /* Forward (show): width grows 0-0.25s pushing avatar right, then opacity fades in 0.25-0.5s */
      transition:
        width 0.25s ease,
        margin-right 0.25s ease,
        opacity 0.25s ease 0.25s,
        background 0.2s;
    }
    @media (hover: hover) { .qa-chat-host .header-back:hover { background: var(--bg); } }
    .qa-chat-host .header-back:active { background: var(--bg); }

    .qa-chat-host .header-back-label {
      font-size: 16px;
      color: #000000;
      cursor: pointer;
      user-select: none;
      opacity: 0;
      max-width: 0;
      overflow: hidden;
      white-space: nowrap;
      pointer-events: none;
      /* Reverse (hide): opacity fades out 0-0.25s, then width collapses 0.25-0.5s */
      transition:
        opacity 0.25s ease,
        max-width 0.25s ease 0.25s;
    }
    .qa-chat-host .chat-widget.show-back .header-back-label {
      opacity: 1;
      max-width: 80px;
      pointer-events: auto;
      /* Forward (show): width grows 0-0.25s, then opacity fades in 0.25-0.5s */
      transition:
        max-width 0.25s ease,
        opacity 0.25s ease 0.25s;
    }

    .qa-chat-host .header-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #141413;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .qa-chat-host .header-info { flex: 1; min-width: 0; }
    .qa-chat-host .header-name {
      color: #141413;
      font-size: 15px;
      font-weight: 400;
      line-height: 1.2;
    }
    .qa-chat-host .header-status {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 2px;
    }
    .qa-chat-host .status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #4ade80;
      flex-shrink: 0;
    }
    .qa-chat-host .status-dot.offline { background: var(--text-muted); }
    .qa-chat-host .header-status span { color: var(--text-muted); font-size: 12px; }

    .qa-chat-host .header-actions { display: flex; gap: 4px; }
    .qa-chat-host .header-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: #141413;
      cursor: pointer;
      /*display: flex;*/
      display: none;
      align-items: center;
      justify-content: center;
      transition: background .2s;
    }
    @media (hover: hover) { .qa-chat-host .header-btn:hover { background: var(--bg); } }
    .qa-chat-host .header-btn:active { background: var(--bg); }

    /* ── Messages Area ────────────────────────────────────────────────────── */
    .qa-chat-host .messages-area {
      flex: 1;
      overflow-y: auto;
      /* Bottom padding reserves clearance so the last message can scroll fully clear
         of the docked input. Matches mobile's 160px reserve so desktop and mobile
         behave identically on this axis. Static — updateSuggestionPadding's desktop
         branch no longer inflates this dynamically. */
      padding: 20px 20px 160px;
      /* margin-bottom intentionally removed so .messages-area extends to the
         wrapper's bottom edge; the input area now floats OVER the messages-area's
         bottom region instead of sitting in a separate gap below it. */
      display: flex;
      flex-direction: column;
      gap: 10px;
      scroll-behavior: smooth;
      /* Intentionally NOT setting scrollbar-width / scrollbar-color (the CSS
         standard properties). Chromium 121+ honors them, but doing so switches
         the scrollbar to the standard rendering path which paints up/down
         arrow buttons that ::-webkit-scrollbar-button cannot override. We rely
         on the ::-webkit-scrollbar pseudo-element rules below for Chrome/Edge/
         Safari styling; Firefox falls back to its default thin scrollbar
         (which doesn't render arrow buttons either). */
    }
    .qa-chat-host .messages-area-wrapper {
      flex: 1;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .qa-chat-host .input-area-floating {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
      /* Opaque background so messages scrolling past behind the docked input
         (now possible since .messages-area extends to the wrapper's bottom edge)
         are visually covered. Without this, the 15px margin around the rounded
         input bar would let bubbles peek through at the corners. */
      background: transparent;
    }
    .qa-chat-host .input-area-baseplate {
      position: absolute;
      left: 0;
      /* Leave 5px on the right uncovered so the .messages-area scrollbar
         (5px wide) shows through at the bottom. */
      right: 5px;
      bottom: -15px;
      height: 45px;
      background: #FFFFFF;
      z-index: 0;
      /* Click-through — purely visual element, never intercepts pointer
         events from anything behind/around it (scrollbar drag, message
         interaction, suggestion ribbon clicks, etc.). */
      pointer-events: none;
    }
    .qa-chat-host .messages-fade {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 30px;
      pointer-events: none;
      z-index: 2;
      /*background: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 1) 90%
      );
      background-size: calc(100% - 4px) 100%;
      background-repeat: no-repeat;*/
    }
    .qa-chat-host .messages-area::-webkit-scrollbar { width: 5px; height: 5px; }
    .qa-chat-host .messages-area::-webkit-scrollbar-track { background: transparent; }
    .qa-chat-host .messages-area::-webkit-scrollbar-thumb { background: var(--bubble-ai); border-radius: 0px; }
    .qa-chat-host .messages-area::-webkit-scrollbar-button {
      display: none;
      width: 0;
      height: 0;
    }

    /* ── Message Groups ───────────────────────────────────────────────────── */
    .qa-chat-host .msg-group {
      display: flex;
      flex-direction: column;
      gap: 3px;
      max-width: 100%;
    }
    .qa-chat-host .msg-group.user { align-self: flex-end; align-items: flex-end; width: 100%;}
    .qa-chat-host .msg-group.ai { align-self: flex-start; align-items: flex-start; width: 100%;}

    .qa-chat-host .msg-row {
      display: flex;
      align-items: flex-end;
      gap: 0px;
      min-width: 0;
      width: 100%;
      max-width: 100%;
    }
    .qa-chat-host .msg-group.user .msg-row { flex-direction: row-reverse; width: 100%;}

    .qa-chat-host .msg-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      bottom: -5px;
      position: relative;

    }
    .qa-chat-host .msg-avatar.hidden { visibility: hidden; }
    .qa-chat-host .msg-avatar.thinking-avatar {
      background: transparent;
      border-radius: 0;
      overflow: visible;
    }
    .qa-chat-host #typingIndicator .msg-row { align-items: center; gap: 8px; }

    .qa-chat-host .bubble {
      padding: 10px 15px 10px 15px;
      border-radius: 20px;
      font-size: 16px;
      word-wrap: break-word;
    }

    /* AI bubble */
    .qa-chat-host .msg-group.ai .bubble {
      background: var(--bubble-ai);
      color: var(--text-primary);
      max-width: 75%;
      position: relative;
    }
    .qa-chat-host .msg-group.ai .bubble::after {
      content: '';
      position: absolute;
      left: 8px;
      bottom: -7px;
      width: 16px;
      height: 12px;
      background-color: var(--bubble-ai);
      -webkit-mask: url('bubble-tip.svg') no-repeat center / contain;
      mask: url('bubble-tip.svg') no-repeat center / contain;
      transform: scaleX(-1);
      pointer-events: none;
    }
    /* Stacked-bubble tip suppression: when more than one AI bubble renders directly
       above another (same .msg-group, OR consecutive .msg-group.ai siblings that
       both carry a .bubble), only the bottom-most bubble in the tranche shows the
       SVG tip. A card-only group (.msg-group.ai without a .bubble) breaks the
       chain — the bubble above it keeps its tip. */
    .qa-chat-host .msg-group.ai .bubble:has(+ .bubble)::after { display: none; }
    .qa-chat-host .msg-group.ai:has(.bubble):has(+ .msg-group.ai:has(.bubble)) .bubble::after { display: none; }

    /* User bubble */
    .qa-chat-host .msg-group.user .bubble {
      background: var(--bubble-user);
      color: var(--text-light);
      max-width: 75%;
      position: relative;
    }
    .qa-chat-host .msg-group.user .bubble::after {
      content: '';
      position: absolute;
      right: 8px;
      bottom: -7px;
      width: 16px;
      height: 12px;
      background-color: var(--bubble-user);
      -webkit-mask: url('bubble-tip.svg') no-repeat center / contain;
      mask: url('bubble-tip.svg') no-repeat center / contain;
      pointer-events: none;
    }

    /* Streaming cursor */
    .qa-chat-host .bubble .cursor {
      display: inline-block;
      width: 2px;
      height: 16px;
      background: var(--text-muted);
      margin-left: 2px;
      vertical-align: middle;
      animation: blink .9s step-end infinite;
    }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

    .qa-chat-host .msg-meta {
      font-size: 12px;
      color: #4b4b4b;
      padding: 0 4px;
      margin-top: 0px;
    }
    .qa-chat-host .msg-group.ai .msg-meta { padding-left: 50px; } /* avatar 28px + gap 8px + bubble padding 14px */

    .qa-chat-host .msg-day-separator {
      font-size: 12px;
      color: #4b4b4b;
      text-align: center;
      padding: 10px 0px 0px 0px;
    }

    /* ── Typing Indicator ─────────────────────────────────────────────────── */
    .qa-chat-host .typing-indicator {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 0 4px;
      margin-top: 4px;
    }
    /* ── Thinking animation (replaces typing dots) ─────────────────────── */
    .qa-chat-host .thinking-avatar #ti-group {
      transform-origin: 110px 84px;
      animation: tiGroupSpin 5s ease-in-out 2s infinite;
    }
    .qa-chat-host .thinking-avatar #ti-star-large {
      transform-origin: 120px 75px;
      animation: tiLargeSteady 8s linear infinite;
    }
    .qa-chat-host .thinking-avatar #ti-star-small {
      transform-origin: 78px 118px;
      animation: tiSmallWobble 3s ease-in-out infinite;
    }
    .qa-chat-host .thinking-avatar #ti-dot {
      animation: tiDotOrbit 1.6s ease-in-out infinite;
      transform-origin: 61px 56px;
    }
    @keyframes tiGroupSpin {
      0%   { transform: rotate(0deg);   }
      60%  { transform: rotate(360deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes tiLargeSteady {
      from { transform: rotate(0deg) scale(0.72); }
      to   { transform: rotate(360deg) scale(0.72); }
    }
    @keyframes tiSmallWobble {
      0%   { transform: rotate(0deg)    scale(0.9);  }
      15%  { transform: rotate(-120deg) scale(1.0);  }
      30%  { transform: rotate(-200deg) scale(0.88); }
      50%  { transform: rotate(-190deg) scale(0.9);  }
      70%  { transform: rotate(-80deg)  scale(0.95); }
      100% { transform: rotate(0deg)    scale(0.9);  }
    }
    @keyframes tiDotOrbit {
      0%   { transform: translate(0px,  0px) scale(1);   }
      25%  { transform: translate(4px, -3px) scale(1.4); }
      50%  { transform: translate(0px, -5px) scale(0.7); }
      75%  { transform: translate(-4px,-2px) scale(1.3); }
      100% { transform: translate(0px,  0px) scale(1);   }
    }
    .qa-chat-host .thinking-word-area {
      font-size: 16px;
      color: var(--text-primary);
      font-family: var(--font);
      position: relative;
      height: 20px;
      overflow: visible;
      top: 2px;
    }
    .qa-chat-host .thinking-word {
      white-space: nowrap;
      font-weight: 200;
    }
    .qa-chat-host .thinking-word .ti-char {
      opacity: 0;
      display: inline-block;
    }
    .qa-chat-host .thinking-word .ti-char.visible {
      opacity: 1;
    }
    .qa-chat-host .thinking-dots .td { opacity: 0; }
    .qa-chat-host .thinking-dots .td.visible { opacity: 1; }
    .qa-chat-host .ti-cursor {
      display: inline-block;
      width: 7px;
      margin-left: 1px;
      border-bottom: 1px solid var(--text-primary);
      animation: tiCursorBlink 0.6s step-end infinite;
    }
    @keyframes tiCursorBlink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
    .qa-chat-host .ti-cursor-solid { animation: none !important; opacity: 1 !important; }

    /* ── Date Picker (disconnect date selection) ────────────────────────── */
    .qa-chat-host .date-picker-row {
      display: flex;
      align-items: center;
      gap: 6px;
      overflow-x: auto;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      /* Break out of messages-area padding to touch chat edges */
      margin-left: -20px;
      margin-right: -20px;
      padding: 10px 0 10px 20px;
      min-height: 75px;
      box-sizing: border-box;
      cursor: pointer;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .qa-chat-host .date-picker-row::-webkit-scrollbar { display: none; }
    .qa-chat-host .date-picker-day {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      background: #FFFFFF;
      border: 1px solid var(--border);
      border-radius: 10px;
      width: 55px;
      min-width: 55px;
      height: 55px;
      cursor: pointer;
      flex-shrink: 0;
    }
    @media (hover: hover) {
      .qa-chat-host .date-picker-day:hover { background: #000; border: 1px solid #000000;}
      .qa-chat-host .date-picker-day:hover .dp-num { color: #fff; }
      .qa-chat-host .date-picker-day:hover .dp-label { color: #fff; }
    }
    .qa-chat-host .date-picker-day:active { background: #000; border: 1px solid #000000;}
    .qa-chat-host .date-picker-day:active .dp-num { color: #fff; }
    .qa-chat-host .date-picker-day:active .dp-label { color: #fff; }
    .qa-chat-host .date-picker-day .dp-num {
      font-size: 18px;
      font-weight: 400;
      color: #000;
      line-height: 1;
    }
    .qa-chat-host .date-picker-day .dp-label {
      font-size: 12px;
      color: #000;
      line-height: 1;
      font-weight: 200;
    }
    .qa-chat-host .date-picker-day.dp-today {
      background: #000;
      border: 1px solid var(--brand);
    }
    .qa-chat-host .date-picker-day.dp-today .dp-num { color: #fff; }
    .qa-chat-host .date-picker-day.dp-today .dp-label { color: #fff; }
    /* dp-selected removed — selected tile reuses dp-today (black) style */

    /* ── Action Cards ─────────────────────────────────────────────────────── */
    .qa-chat-host .action-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
      margin-top: 8px;
      min-width: 60%;
      max-width: 100%;
      box-sizing: border-box;
    }
    /* Grid-table cards and the address-options card keep wider rendering (full msg-row width). */
    .qa-chat-host .action-card.grid-table-card, .qa-chat-host .action-card.address-list-card {
      max-width: 100%;
    }
    /* Confirm cards (payment, autopay, billing-info, disconnect, add-card/bank confirm) render narrower. */
    .qa-chat-host .action-card:has(.confirm-body) {
      max-width: 70%;
    }
    /* Payment history card — wider min so the 6 columns (Status, Amount, Method, Payment type, Date, Time) breathe. */
    .qa-chat-host .action-card[data-context="payment_history"] {
      min-width: 75%;
    }
    /* Login history card — wider min so the long Date + IP + Location values don't wrap awkwardly. */
    .qa-chat-host .action-card[data-context="login_history"] {
      min-width: 80%;
    }
    /* Contract-expiration document picker — wider min so labels like "60-day Expiration Notice" + "Month-to-Month EFL" sit on one line. */
    .qa-chat-host .action-card[data-context="contract_expiration_download"] {
      min-width: 70%;
    }
    .qa-chat-host .action-card.with-text-above {
      margin-left: 40px;
      min-width: 85%;
    }
    /* The service-availability ESI ID card is a narrow 3-row key/value grid
       (ESI ID / Address / TDSP). The 85 % min-width was tuned for wider cards
       and stretches this one unnaturally; let it size to its natural width. */
    .qa-chat-host .action-card.with-text-above[data-context="service_availability"] {
      min-width: 0;
    }
    /* Outage cards (city/zip/county/TDSP summary) are sparse key/value lists
       with short numeric values (counts, served, restoration time). The 85 %
       min-width stretches them unnaturally next to the bubble that summarizes
       the same data. Let them size to their natural content width — same
       carve-out shape as service_availability above. */
    .qa-chat-host .action-card.with-text-above[data-context="outages"] {
      min-width: 0;
    }
    .qa-chat-host .action-card-header {
      display:none;
      padding: 10px 14px 8px;
      font-size: 16px;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border);
      text-transform: propercase;
    }

    /* Options (select_one / select_multiple) */
    .qa-chat-host .option-list { display: flex; flex-direction: column; }
    .qa-chat-host .option-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      font-size: 16px;
      cursor: pointer;
      transition: background .15s;
      border-bottom: 1px solid var(--border);
      user-select: none;
      min-width: 0;
      max-width: 100%;
    }
    .qa-chat-host .option-item:last-child { border-bottom: none; }
    @media (hover: hover) { .qa-chat-host .option-item:hover { background: #F6F7FB; } }
    .qa-chat-host .option-item:active { background: #F6F7FB; }
    .qa-chat-host .option-item.selected { background: #F6F7FB; }
    .qa-chat-host .option-item.disabled { cursor: default; pointer-events: none; }

    .qa-chat-host .option-check {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all .2s;
    }
    .qa-chat-host .option-item.selected .option-check {
      background: var(--brand);
      border-color: var(--brand);
    }
    .qa-chat-host .option-icon { font-size: 18px; flex-shrink: 0; }
    .qa-chat-host .option-label { font-size: 16px; color: var(--text-primary); flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Notification settings card: drop the global .option-label font-weight:400
       override so the labels (and any <strong>/<b> inside them) render at the
       default cascaded weight rather than being forced to 400. */
    .qa-chat-host .action-card[data-context="notification_settings"] .option-label, .qa-chat-host .action-card[data-context="notification_settings"] .option-label strong, .qa-chat-host .action-card[data-context="notification_settings"] .option-label b {
      font-weight: revert;
    }
    .qa-chat-host .option-meta { font-size: 16px; color: var(--text-muted); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* multi-select confirm button */
    .qa-chat-host .multi-confirm {
      padding: 10px 14px;
      border-top: 1px solid var(--border);
    }

    /* Confirm action */
    .qa-chat-host .confirm-body { padding: 12px 14px; }
    .qa-chat-host .confirm-message { font-size: 16px; color: var(--text-primary); margin-bottom: 12px;}
    .qa-chat-host .confirm-btns { display: flex; gap: 8px; }

    /* Input action */
    .qa-chat-host .input-body { padding: 12px 14px; }
    .qa-chat-host .input-body input, .qa-chat-host .input-body textarea {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 9px 12px;
      font-size: 16px;
      font-family: var(--font);
      color: var(--text-primary);
      outline: none;
      resize: none;
      transition: border-color .2s;
    }
    .qa-chat-host .input-body input:focus, .qa-chat-host .input-body textarea:focus { border-color: var(--brand); }
    .qa-chat-host .input-body .input-submit { margin-top: 8px; }

    /* Date range */
    .qa-chat-host .date-range-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
    .qa-chat-host .date-field { display: flex; flex-direction: column; gap: 4px; }
    .qa-chat-host .date-field label { font-size: 16px; color: var(--text-muted); }
    .qa-chat-host .date-field input {
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 8px 10px;
      font-size: 16px;
      font-family: var(--font);
      color: var(--text-primary);
      outline: none;
    }
    .qa-chat-host .date-field input:focus { border-color: var(--brand); }
    .qa-chat-host .date-range-body .input-submit { margin-top: 4px; }

    /* Notification toggle — exact copy from MaisonEnergy login-security page */
    .qa-chat-host .notif-toggle-label {
      display:inline-block; align-items:center; font-weight:unset; margin-bottom:unset;
      max-width:unset; -webkit-touch-callout:none; -webkit-user-select:none;
      -moz-user-select:none; -ms-user-select:none; user-select:none;
    }
    .qa-chat-host .notif-toggle-label input { display:none; opacity:0; }
    .qa-chat-host .notif-toggle {
      display:flex; align-items:center; width:67px; height:31px; position:relative;
      cursor:pointer; background:#f5f6fb; border-radius:2em; border:1px solid #c8d0dd;
      transition:all 0.2s; flex-shrink:0;
    }
    .qa-chat-host .notif-toggle-off {
      position:absolute; right:15%; height:13px; font-size:12px; font-weight:200;
      color:#000000; font-family:arial;
    }
    .qa-chat-host .notif-toggle-on {
      position:absolute; left:15%; height:13px; font-size:12px; font-weight:200;
      color:#02754c; font-family:arial;
    }
    .qa-chat-host .notif-toggle-label input:not(:checked) ~ .notif-toggle .notif-toggle-on {
      display:none; visibility:hidden; opacity:0; transition:visibility 0s 0.1s, opacity 0.1s linear;
    }
    .qa-chat-host .notif-toggle-label input:checked ~ .notif-toggle .notif-toggle-off {
      display:none; visibility:hidden; opacity:0; transition:visibility 0s 0.1s, opacity 0.1s linear;
    }
    .qa-chat-host .notif-toggle::after {
      content:""; display:flex; position:absolute; width:19px; height:19px; left:6px; top:5px;
      border-radius:50px; background:#fff; transition:all 0.2s; border:solid 1px #c8d0dd;
    }
    .qa-chat-host .notif-toggle-label input:checked ~ .notif-toggle {
      background:#eff8f4; border:solid 1px #51aa75;
    }
    .qa-chat-host .notif-toggle-label input:checked ~ .notif-toggle::after {
      left:40px; background:#fff; border:solid 1px #51aa75;
    }
    .qa-chat-host .notif-toggle-label input:disabled ~ .notif-toggle {
      opacity:1; cursor:default;
    }

    /* Display (data card) */
    .qa-chat-host .display-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; min-width: 0; }
    .qa-chat-host .display-body.display-grid { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; padding-top: 2px; padding-bottom: 2px; }
    .qa-chat-host .display-body.display-grid .display-row { display: contents; }
    .qa-chat-host .display-body.display-grid .display-row + .display-row::before {
      content: '';
      grid-column: 1 / -1;
      border-top: 1px solid var(--border);
      margin: 0 -14px;
    }
    .qa-chat-host .display-body.display-grid .display-key { white-space: nowrap; text-align: left; overflow: visible; text-overflow: unset; min-width: unset; flex-shrink: 0; padding: 8px 0; }
    .qa-chat-host .display-body.display-grid .display-val { text-align: left; white-space: normal; word-break: break-all; flex-direction: column !important; align-items: flex-start !important; padding: 8px 0; }
    .qa-chat-host .display-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; overflow: hidden; max-width: 100%; }
    /* Two-row variant: rows get their own padding so the divider can touch the card edges */
    .qa-chat-host .display-body.display-two-row { padding: 0; gap: 0; }
    .qa-chat-host .display-body.display-two-row .display-row { padding: 10px 14px; border-bottom: 1px solid var(--border); }
    .qa-chat-host .display-body.display-two-row .display-row:last-child { border-bottom: none; }
    .qa-chat-host .display-key { font-size: 16px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex-shrink: 1; }
    .qa-chat-host .display-val { font-size: 16px; color: var(--text-primary); font-weight: 400; text-align: right; white-space: nowrap; flex-shrink: 0; }
    .qa-chat-host .masked-digits { display: inline-flex; align-items: center; gap: 0px; }
    .qa-chat-host .masked-digits .asterisk-icon {
      display: inline-block; width: 10px; height: 10px;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23000000' points='286.903 256 416 177.877 416 141.115 415.717 140.646 272 227.617 272 72 240 72 240 227.617 96.283 140.646 96 141.115 96 177.877 225.097 256 96 334.123 96 370.885 96.283 371.354 240 284.383 240 440 272 440 272 284.383 415.717 371.354 416 370.885 416 334.123 286.903 256'/%3E%3C/svg%3E");
      background-size: contain; background-repeat: no-repeat; background-position: center;
    }
    .qa-chat-host .option-label .masked-digits, .qa-chat-host .option-meta .masked-digits { display: inline-flex; }
    .qa-chat-host .msg-group.user .bubble .asterisk-icon {
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23ffffff' points='286.903 256 416 177.877 416 141.115 415.717 140.646 272 227.617 272 72 240 72 240 227.617 96.283 140.646 96 141.115 96 177.877 225.097 256 96 334.123 96 370.885 96.283 371.354 240 284.383 240 440 272 440 272 284.383 415.717 371.354 416 370.885 416 334.123 286.903 256'/%3E%3C/svg%3E");
    }

    /* Link */
    .qa-chat-host .link-body { padding: 10px 14px; }

    /* ── Shared Buttons ───────────────────────────────────────────────────── */
    .qa-chat-host .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 15px 9px 15px;
      box-sizing: border-box;
      border-radius: 50px;
      font-size: 16px;
      font-weight: 400;
      font-family: var(--font);
      cursor: pointer;
      border: none;
      transition: all .2s;
      text-decoration: none;
    }
    .qa-chat-host .btn-primary {
      background: var(--brand);
      color: #fff;
    }
    @media (hover: hover) { .qa-chat-host .btn-primary:hover { background: #000000; } }
    .qa-chat-host .btn-primary:active { background: #000000; }
    .qa-chat-host .btn-danger {
      background: #000000;
      color: #FFFFFF;
    }
    @media (hover: hover) { .qa-chat-host .btn-danger:hover { background: #000000; } }
    .qa-chat-host .btn-danger:active { background: #000000; }
    .qa-chat-host .btn-ghost {
      background: var(--surface);
      color: var(--text-primary);
      outline: 1px solid var(--border) !important;
      border-radius: 50px;
      transition: all .2s;
    }
    .qa-chat-host .btn-ghost:focus {
      outline: 1px solid var(--border) !important;
    }
    @media (hover: hover) { .qa-chat-host .btn-ghost:hover { background: var(--brand); color: #fff; outline-color: var(--brand) !important; } }
    .qa-chat-host .btn-ghost:active { background: var(--brand); color: #fff; outline-color: var(--brand) !important; }
    .qa-chat-host .btn-processing {
      pointer-events: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .qa-chat-host .btn-processing .btn-spinner {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.35);
      border-right-color: #fff;
      animation: spin-payment 0.75s infinite linear;
      flex-shrink: 0;
    }
    @keyframes spin-payment {
      to { transform: rotate(360deg); }
    }
    .qa-chat-host .btn-link {
      background: linear-gradient(135deg, var(--brand-accent), var(--brand-gold));
      color: #fff;
      text-decoration: none;
    }
    .qa-chat-host .btn-link:hover { }
    /* Disabled buttons keep the default pointer cursor — non-clickability is enforced by
       pointer-events: none in JS, never by the browser's cursor-not-allowed default. */
    .qa-chat-host .btn-sm { padding: 7px 12px; font-size: 12px; }
    .qa-chat-host .btn-full { width: 100%; }

    /* ── Scroll-to-bottom ─────────────────────────────────────────────────── */
    .qa-chat-host .scroll-btn {
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--brand);
      color: #fff;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 10px rgba(0,0,0,.2);
      transition: all .2s;
      opacity: 0;
      pointer-events: none;
      z-index: 10;
    }
    .qa-chat-host .scroll-btn.visible { opacity: 1; pointer-events: all; }
    @media (hover: hover) { .qa-chat-host .scroll-btn:hover { transform: translateX(-50%) translateY(-2px); } }
    .qa-chat-host .scroll-btn:active { transform: translateX(-50%) translateY(-2px); }

    /* ── Input Bar ────────────────────────────────────────────────────────── */
    .qa-chat-host .input-bar {
      padding: 8px 10px;
      border: 1px solid var(--border);
      background: var(--surface);
      flex-shrink: 0;
      margin: 0px 15px 15px 15px;
      border-radius: 28px;
      position: relative;
      z-index: 1;
    }

    .qa-chat-host .input-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0px 0px 0px 0px;
    }

    .qa-chat-host .input-field {
      flex: 1;
      border: none;
      background: transparent;
      font-size: 16px;
      font-family: var(--font);
      color: var(--text-primary);
      outline: none;
      resize: none;
      overflow: hidden;
      padding: 0px 0px 0px 5px;
    }
    .qa-chat-host .input-field::placeholder { color: var(--text-muted); }

    .qa-chat-host .input-actions { display: flex; align-items: center; gap: 7px; align-self: flex-end; }
    .qa-chat-host .input-icon-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s;
    }
    @media (hover: hover) { .qa-chat-host .input-icon-btn:hover { background: var(--border); color: var(--text-primary); } }
    .qa-chat-host .input-icon-btn:active { background: var(--border); color: var(--text-primary); }

    .qa-chat-host #suggestBtn { background: none; border: none; cursor: pointer; width: 37px; height: 37px; display: flex; align-items: center; justify-content: center; border-radius: 50%; opacity: 1; }
    @media (hover: hover) { .qa-chat-host #suggestBtn:hover { background: var(--bg); opacity: 1; } }
    .qa-chat-host #suggestBtn:active { background: var(--bg); opacity: 1; }
    .qa-chat-host .send-btn {
      width: 37px;
      height: 37px;
      border-radius: 50%;
      border: none;
      background: var(--brand);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all .2s;
    }
    @media (hover: hover) { .qa-chat-host .send-btn:hover:not(:disabled) { background: #000000; transform: scale(1.05); } }
    .qa-chat-host .send-btn:active:not(:disabled) { background: #000000; transform: scale(1.05); }
    .qa-chat-host .send-btn:disabled { cursor: pointer; transform: none; }
    /* Processing mode (LLM streaming, stop-square shown). Light background +
       black icon so the square reads as a clearly distinct "stop" affordance
       — overrides the normal brand-background / white-icon state. */
    .qa-chat-host .send-btn.processing { background: #F6F7FB; color: #000000; }
    @media (hover: hover) { .qa-chat-host .send-btn.processing:hover:not(:disabled) { background: #F6F7FB; } }
    .qa-chat-host .send-btn.processing:active:not(:disabled) { background: #F6F7FB; }
    /* Rotating 1px spinner ring on the circle's inner perimeter while streaming.
       inset:0 + border-box draws the band just inside the edge; only the top arc
       is colored so the rotation reads as a moving segment. */
    .qa-chat-host .send-btn.processing::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid transparent;
      border-top-color: #dde3e6;
      animation: sendBtnRingSpin 0.8s linear infinite;
      pointer-events: none;
    }
    @keyframes sendBtnRingSpin { to { transform: rotate(360deg); } }
    .qa-chat-host .send-btn-wrap {
      position: relative;
      width: 37px;
      height: 37px;
      flex-shrink: 0;
    }
    .qa-chat-host .send-btn-wrap .send-btn { position: absolute; inset: 0; }
    .qa-chat-host .char-ring {
      position: absolute;
      width: 47px;
      height: 47px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 1;
    }

    .qa-chat-host .input-hint {
      display: none;
      text-align: center;
      font-size: 11px;
      margin-top: 0px;
      margin-bottom: 10px;
    }

    /* ── Welcome Screen ───────────────────────────────────────────────────── */
    .qa-chat-host .welcome-screen {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 24px;
      gap: 16px;
      flex: 1;
      text-align: center;
    }
    .qa-chat-host .welcome-logo {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--bubble-ai);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .qa-chat-host .welcome-title {
      font-size: 22px;
      font-weight: 200;
      color: var(--text-primary);
    }
    .qa-chat-host .welcome-sub {
      font-size: 16px;
      color: var(--text-muted);
      max-width: 280px;
    }
    .qa-chat-host .suggestion-row {
      display: flex;
      flex-direction: row;
      gap: 6px;
      padding: 10px 15px;
      overflow-x: auto;
      scrollbar-width: none;
      cursor: default;
      position: absolute;
      bottom: 100%;
      left: 0;
      right: 0px;
      z-index: 5;
      transition: opacity 200ms ease;
      /*background: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 1) 90%
      );*/
      background-size: calc(100% - 4px) 100%;
      background-repeat: no-repeat;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .qa-chat-host .suggestion-row::-webkit-scrollbar { display: none; }
    .qa-chat-host .suggestion-row.fade-out { opacity: 0; pointer-events: none; }
    /* Entering state for newly-added chips: collapse max-width/padding/border
       to zero so the chip occupies no horizontal space, then JS removes the
       class on the next frame and the existing `transition: all .2s` on
       .suggestion-chip expands it open in place. */
    .qa-chat-host .suggestion-chip.entering {
      max-width: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      border-left-width: 0 !important;
      border-right-width: 0 !important;
      opacity: 0;
    }
    .qa-chat-host .suggestion-chip {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 50px;
      padding: 8px 16px;
      font-size: 16px;
      color: var(--text-primary);
      font-weight: 400;
      cursor: pointer;
      transition: max-width 260ms ease, padding 260ms ease, border-width 260ms ease, opacity 200ms ease;
      white-space: nowrap;
      flex-shrink: 0;
      max-width: 400px; /* upper bound so max-width can transition from 0 → natural */
      overflow: hidden;
      box-sizing: border-box;
    }
    @media (hover: hover) { .qa-chat-host .suggestion-chip:hover { background: var(--brand); color: #fff; border-color: var(--brand); } }
    .qa-chat-host .suggestion-chip:active { background: var(--brand); color: #fff; border-color: var(--brand); }

    .qa-chat-host .download-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 50px;
      padding: 8px 15px;
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      color: var(--text-primary);
      font-weight: 400;
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
      margin-top: 0px;
      margin-left: 0px;
      width: fit-content;
    }
    @media (hover: hover) {
      .qa-chat-host .download-chip:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
      .qa-chat-host .download-chip:hover svg polygon { fill: #fff; }
    }
    .qa-chat-host .download-chip:active { background: var(--brand); color: #fff; border-color: var(--brand); }
    .qa-chat-host .download-chip:active svg polygon { fill: #fff; }
    /* Renewal-offer per-plan EFL chip — solid black, no icon, no hover-flip.
       Keeps the standard download-chip size (padding 8px 15px, font 16px). */
    .qa-chat-host .option-efl-link.download-chip {
      background: #000;
      color: #fff;
      border-color: #000;
    }
    @media (hover: hover) {
      .qa-chat-host .option-efl-link.download-chip:hover {
        background: #000;
        color: #fff;
        border-color: #000;
      }
    }
    .qa-chat-host .option-efl-link.download-chip:active {
      background: #000;
      color: #fff;
      border-color: #000;
    }
    .qa-chat-host .download-chip svg { width: 10px; height: 13px; fill: var(--text-primary); transition: fill .2s; }
    .qa-chat-host .download-chip.downloading { pointer-events: none; }
    .qa-chat-host .download-chip.btn-processing { background: #000000; color: #ffffff; border-color: #000000; }

    /* ── Error toast ──────────────────────────────────────────────────────── */
    .qa-chat-host .error-toast {
      background: #f6f7fb;
      color: #000000;
      border-radius: var(--radius-md);
      padding: 10px 15px;
      font-size: 16px;
      text-align: center;
      margin: 15px 15px;
      flex-shrink: 0;
    }

    /* ── Markdown Table ──────────────────────────────────────────────────── */
    .qa-chat-host .md-table-wrap {
      margin: 0px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface);
      overflow: hidden;
    }
    .qa-chat-host .md-table-grid {
      display: grid;
      font-size: 16px;
      width: 100%;
    }
    .qa-chat-host .md-table-cell {
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      color: var(--text-primary);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }
    .qa-chat-host .md-table-cell.md-th {
      background: var(--surface);
      color: var(--text-muted);
      font-weight: 400;
    }
    .qa-chat-host .md-table-row-last .md-table-cell { border-bottom: none; }

    /* Stacked card layout for wide tables (>3 columns) */
    .qa-chat-host .md-table-stacked {
      display: flex;
      flex-direction: column;
    }
    .qa-chat-host .md-table-card {
      padding: 10px 14px;
    }
    .qa-chat-host .md-table-card + .md-table-card {
      border-top: 1px solid var(--border);
    }
    .qa-chat-host .md-table-card-header {
      font-weight: 400;
      font-size: 16px;
      color: var(--text-primary);
      padding: 0px 0px 3px;
    }
    .qa-chat-host .md-table-card-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding: 0px;
      font-size: 16px;
    }
    .qa-chat-host .md-table-card-key {
      color: var(--text-muted);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .qa-chat-host .md-table-card-val {
      color: var(--text-primary);
      text-align: right;
      flex-shrink: 0;
    }

    /* ── Utility ──────────────────────────────────────────────────────────── */
    .qa-chat-host .hidden { display: none !important; }
    .qa-chat-host .mt-4 { margin-top: 4px; }
    .qa-chat-host .mt-8 { margin-top: 8px; }

    /* Spinner */
    .qa-chat-host .spinner {
      width: 14px;
      height: 14px;
      border: 2px solid rgba(255,255,255,.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin .7s linear infinite;
      display: inline-block;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* SVG icons inline */
    .qa-chat-host svg { display: block; }

    /* ── Sign-in button below auth-required bubble ──────────────────────── */
    .qa-chat-host .signin-btn-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }
    .qa-chat-host .signin-btn-row .btn {
      background: var(--brand);
      color: #fff;
    }
    @media (hover: hover) { .qa-chat-host .signin-btn-row .btn:hover { background: #000; } }
    .qa-chat-host .signin-btn-row .btn:active { background: #000; }

    /* ── Sign-in overlay (login form shown in middle of chat area) ──────── */
    .qa-chat-host .signin-overlay {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--surface);
      padding: 20px;
      min-height: 0;
      z-index: 11;
    }
    .qa-chat-host .signin-overlay.hidden { display: none; }
    .qa-chat-host .signin-card {
      width: 90%;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .qa-chat-host .signin-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
      padding: 0px 0px 10px;
    }
    .qa-chat-host .signin-lock {
      display: flex;
      justify-content: center;
    }
    .qa-chat-host .signin-lock-circle {
      width: 75px;
      height: 75px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .qa-chat-host .signin-lock svg {
      width: 55px;
      height: auto;
    }
    .qa-chat-host .signin-title {
      font-size: 22px;
      font-weight: 200;
      color: var(--text-primary);
      text-align: center;
    }
    .qa-chat-host .signin-subtitle {
      font-size: 16px;
      color: var(--text-muted);
      text-align: center;
    }
    .qa-chat-host .signin-field input[type="email"], .qa-chat-host .signin-field input[type="password"] {
      width: 100%;
      box-sizing: border-box;
      height: 50px;
      padding: 10px 15px;
      border: 1px solid #d6dbe8;
      border-radius: 7px;
      font-size: 16px;
      font-family: var(--font);
      outline: none;
      transition: border-color .15s;
    }
    .qa-chat-host .signin-field input[type="email"]:focus, .qa-chat-host .signin-field input[type="password"]:focus {
      /*border-color: var(--brand);*/
    }
    .qa-chat-host .signin-field input[type="email"]::placeholder, .qa-chat-host .signin-field input[type="password"]::placeholder {
      color: #000;
      opacity: 1;
    }
    /* Strip the browser's autofill recoloring (Chrome's yellow-ish, Safari's blue-ish)
       so a password manager / saved-credential prefill doesn't visually rewrite the
       input. The 1000px inset box-shadow paints over the autofill bg with our own
       surface color; -webkit-text-fill-color forces the text color back to black;
       the 9999s transition is a known hack that delays the autofill bg repaint until
       effectively never. Same treatment for hover/focus/active so the override holds
       through every interaction state. */
    .qa-chat-host .signin-field input[type="email"]:-webkit-autofill, .qa-chat-host .signin-field input[type="email"]:-webkit-autofill:hover, .qa-chat-host .signin-field input[type="email"]:-webkit-autofill:focus, .qa-chat-host .signin-field input[type="email"]:-webkit-autofill:active, .qa-chat-host .signin-field input[type="password"]:-webkit-autofill, .qa-chat-host .signin-field input[type="password"]:-webkit-autofill:hover, .qa-chat-host .signin-field input[type="password"]:-webkit-autofill:focus, .qa-chat-host .signin-field input[type="password"]:-webkit-autofill:active {
      -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
      box-shadow: 0 0 0 1000px var(--surface) inset !important;
      -webkit-text-fill-color: #000 !important;
      caret-color: #000 !important;
      transition: background-color 9999s ease-in-out 0s !important;
    }
    .qa-chat-host .signin-remember {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--text-primary);
      cursor: pointer;
      user-select: none;
    }
    .qa-chat-host .signin-remember input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      width: 21px;
      height: 21px;
      border: 1px solid #d6dbe8;
      border-radius: 5px;
      background: #fff;
      cursor: pointer;
      position: relative;
      margin: 0;
      flex-shrink: 0;
    }
    .qa-chat-host .signin-remember input[type="checkbox"]:checked::after {
      position: absolute;
      margin-top: 3px;
      margin-left: 7px;
      display: block;
      height: 10px;
      width: 5px;
      transform: rotate(45deg);
      border-width: 1px;
      border-left-width: 0px;
      border-top-width: 0px;
      border-style: solid;
      border-color: #000000;
      z-index: 1;
      background-color: transparent;
      content: '';
    }
    .qa-chat-host .signin-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 10px;
    }
    .qa-chat-host .signin-cancel {
      background: none;
      border: none;
      color: #000;
      font-size: 16px;
      cursor: pointer;
      padding: 6px;
      font-family: var(--font);
    }
    @media (hover: hover) { .qa-chat-host .signin-cancel:hover { color: #000; } }
    .qa-chat-host .signin-cancel:active { color: #000; }
    /* Invalid state — mirrors the pattern from MaisonEnergy/login.js:
       button flips from filled to outlined and shows an uppercase error. */
    .qa-chat-host .signin-actions .btn-primary.invalid {
      background: #fff !important;
      color: var(--brand) !important;
      outline: 1px solid var(--brand) !important;
    }
    @media (hover: hover) { .qa-chat-host .signin-actions .btn-primary.invalid:hover { background: #fff !important;outline: 1px solid var(--brand) } }
    .qa-chat-host .signin-actions .btn-primary.invalid:active { background: #fff !important;outline: 1px solid var(--brand) }
    /* 2FA section — shown when Maison's /Auth/Login flags requiresMfa with TwoFactor.
       The six-digit code grid follows the .maison-energy-code-input pattern from the
       desktop portal (45×50 boxes, auto-advance) but recolored for this chat's
       monochrome palette — populated boxes paint with --bubble-ai (the same soft gray
       used elsewhere in the UI), not the desktop portal's brand green. The two blocks
       are flex columns with gap:10px so they preserve the spacing rhythm the original
       email/password fields had as direct children of .signin-card. */
    .qa-chat-host #signinCredentialsBlock, .qa-chat-host #signinTwoFactorBlock, .qa-chat-host #signinTwoFactorActive, .qa-chat-host #signinTwoFactorExpired {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    /* When the card is showing the 2FA step, the lock graphic is suppressed —
       the title/subtitle copy carries the message ("Phone verification" /
       "Code expired") and the lock would just be visual noise. */
    .qa-chat-host .signin-card.tfa .signin-lock { display: none; }
    .qa-chat-host .signin-code-inputs {
      display: flex;
      justify-content: center;
      gap: 8px;
    }
    .qa-chat-host .signin-code-input {
      width: 45px;
      height: 50px;
      box-sizing: border-box;
      text-align: center;
      font-size: 22px;
      font-family: var(--font);
      border: 1px solid #d6dbe8;
      border-radius: 7px;
      background: var(--surface);
      outline: none;
      color: #000;
      transition: border-color .15s, background-color .15s;
    }
    .qa-chat-host .signin-code-input:focus { border-color: var(--brand); }
    .qa-chat-host .signin-code-input.populated {
      border-color: var(--brand);
      background: var(--bubble-ai);
    }
    .qa-chat-host .signin-2fa-status {
      text-align: center;
      font-size: 16px;
      color: var(--text-muted);
      min-height: 22px;
      padding-top: 10px;
    }
    .qa-chat-host #signinCountdown { font-weight: 400; }
    .qa-chat-host .signin-resend-btn {
      background: none;
      border: none;
      color: var(--brand);
      font: 400 16px var(--font);
      cursor: pointer;
      padding: 4px 6px;
      text-decoration: underline;
    }
    /* During the resend round-trip the button is disabled and shows "Resending…";
       drop the underline in that state so it reads as inert status text rather
       than an active link. */
    .qa-chat-host .signin-resend-btn:disabled {
      text-decoration: none;
      cursor: default;
    }
    .qa-chat-host .signin-2fa-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 10px;
    }
    .qa-chat-host .signin-2fa-actions .btn-primary.invalid {
      background: #fff !important;
      color: var(--brand) !important;
      outline: 1px solid var(--brand) !important;
    }
    @media (hover: hover) { .qa-chat-host .signin-2fa-actions .btn-primary.invalid:hover { background: #fff !important; outline: 1px solid var(--brand); } }
    .qa-chat-host .signin-2fa-actions .btn-primary.invalid:active { background: #fff !important; outline: 1px solid var(--brand); }

    /* ── Mobile shell ────────────────────────────────────────────────────────
       MUST live at the bottom of this <style> block. Media-query rules carry
       the same specificity as the base rules they override; placement decides
       the cascade. If this block is moved above the base `.input-area-floating`
       rule (line ~250), `position: fixed` loses to `position: absolute` and
       the docked input bar scrolls away with the page.

       Architectural shift on mobile: the BODY scrolls, not the inner widget.
       The messages-area's internal overflow:auto is disabled so the browser's
       native scrollbar drives scrolling. .input-area-floating is fixed to the
       viewport bottom so input + ribbon stay docked. Body padding-bottom is
       intentionally NOT set — messages scroll behind the docked region by
       design (see updateSuggestionPadding mobile branch, which clears any
       inline padding).
       overscroll-behavior-y:contain stops the page from rubber-banding into
       browser pull-to-refresh when the user scrolls past the top. */
    @media (max-width: 600px) {
      .qa-chat-host, .qa-chat-host {
        overscroll-behavior-y: contain;
      }
      .qa-chat-host {
        padding: 0px;
      }
      .qa-chat-host .chat-widget {
        max-width: 100%;
        width: 100%;
        height: auto;
        min-height: 100dvh;
        max-height: none;
        overflow: visible;
        border: none;
        border-radius: 0;
      }
      .qa-chat-host .messages-area-wrapper {
        overflow: visible;
        flex: initial;
        height: auto;
      }
      .qa-chat-host .messages-area {
        flex: initial;
        overflow-y: visible;
        height: auto;
        max-height: none;
        /* Reserves space below the last message so it clears the
           position:fixed input bar + chip ribbon docked at viewport bottom. */
        margin-bottom: 160px;
        padding-bottom: 0;
      }
      /* Drop the 160 px bottom reserve while the welcome screen is shown —
         there are no messages to clear yet, and the welcome screen is
         already vertically centered against the viewport minus the docked
         region (see min-height calc on .welcome-screen below). The extra
         margin would push the welcome content visibly above center.
         :has() supported in Safari 15.4+ / Chrome 105+ / Firefox 121+; on
         older browsers the margin stays at 160 px (harmless fallback). */
      .qa-chat-host .messages-area:has(.welcome-screen:not(.hidden)) {
        margin-bottom: 0;
      }
      .qa-chat-host .input-area-floating {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /*background: var(--surface);*/
        /* Respect iPhone home-indicator / safe area so the input bar isn't
           overlapped by system UI. env() returns 0 on browsers that don't
           support it. */
        padding-bottom: env(safe-area-inset-bottom, 0);
      }
      /* The scroll-to-bottom button is position:absolute against the messages-
         area-wrapper on desktop. On mobile the wrapper has overflow:visible
         and grows past the viewport, so absolute positioning would float the
         button off-screen with the content. Switch to position:fixed so it
         sticks just above the docked input bar + chip ribbon. */
      .qa-chat-host .scroll-btn {
        position: fixed;
        bottom: 100px;
      }

      /* Style the browser-native body scrollbar (which is the active scroller
         on mobile) to match the desktop .messages-area scrollbar — same 5 px
         width, transparent track, bubble-ai-colored thumb, no end buttons.
         Mostly visible in desktop responsive emulators; real iOS/Android use
         transient native indicators. */
      .qa-chat-host {
        /* Standard CSS scrollbar properties (Firefox + Chromium 121+) — these
           are the cross-browser way to recolor the scrollbar thumb so non-
           WebKit browsers also pick up the bubble-ai color, not just Chrome /
           Safari (which read the webkit pseudo-elements below). */
        scrollbar-color: var(--bubble-ai) transparent;
        scrollbar-width: thin;
      }
      .qa-chat-host::-webkit-scrollbar { width: 5px; height: 5px; }
      .qa-chat-host::-webkit-scrollbar-track { background: transparent; }
      .qa-chat-host::-webkit-scrollbar-thumb { background: var(--bubble-ai); border-radius: 0px; }
      .qa-chat-host::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
      }

      /* Center the welcome screen vertically on mobile. The base rule uses
         flex:1 which depends on the parent having a constrained height — that
         no longer holds since messages-area is height:auto here. Give it an
         explicit min-height equal to the viewport minus the docked region
         (160 px messages-area margin-bottom + 20 px messages-area top padding)
         so the inherited justify-content:center actually has room to center
         its children. */
      .qa-chat-host .welcome-screen {
        min-height: calc(100dvh - 180px);
      }
    }