/* Deal room — safe areas and installed-app chrome.
 * ---------------------------------------------------------------------------
 * Loaded last, from the tail of deal-room.php, so it can correct rules set
 * earlier without !important escalation wars.
 *
 * WHY THIS EXISTS
 * inc/header.php now sets viewport-fit=cover. That was required — without it
 * every env(safe-area-inset-*) rule in the project is inert, including the four
 * already written for the deal room's bottom edge. But it also hands the page
 * the whole screen, notch and home indicator included, and .chat-interface is
 * `position:fixed; top:0; height:100vh` with no inset allowance anywhere
 * (css/chat-ui.css had zero safe-area rules). So the overlay's own header ended
 * up underneath the status bar.
 *
 * The fix is padding, not offset, and that distinction matters: the dark
 * background SHOULD bleed behind the status bar and home indicator — that is
 * what makes an installed app look native instead of letterboxed — while the
 * content inside it must not. box-sizing:border-box is already global (Tailwind
 * Preflight), so padding comes out of the 100vh rather than adding to it.
 *
 * env() resolves to 0px on hardware without insets, so every rule here is inert
 * on a desktop or a non-notched phone. Nothing is gated behind a device check.
 */

/* ── The overlay itself ─────────────────────────────────────────────────── */

/* inc/footer.php:4281 sets `top: var(--dr-vv-top, 0px) !important` from the
   visualViewport, which tracks the keyboard. That is an offset and is left
   alone; this only reserves room inside the box. */
#chatInterface,
.chat-interface {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* The loader paints over everything at z-index 99999999 and is the FIRST thing
   an installed launch shows, so it has to know about the notch too or the app's
   opening frame is the one that looks wrong. Full-bleed background, inset
   content. */
#dealRoomLoader {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Installed-app chrome ───────────────────────────────────────────────── */

@media (display-mode: standalone), (display-mode: minimal-ui) {
    /* No rubber-band or pull-to-refresh inside the app. In a browser this is
       useful; in a chrome-less window it just makes the whole UI feel loose,
       and pull-to-refresh on a deal room would discard unsent chat input. */
    html, body {
        overscroll-behavior: none;
    }

    /* Anything that only makes sense with browser chrome around it. The
       "HOUSBE SOFTWARE" download card is handled in JS instead, because it is
       hidden by install STATE rather than by display mode — a browser tab on a
       device that already has the app installed should not offer it either. */
    .deal-nav-sw-card small {
        /* keeps the wording from wrapping oddly in the narrower app window */
        text-wrap: balance;
    }
}

/* ── The escape hatch ───────────────────────────────────────────────────── */

/* Injected into <body> by js/deal-room-standalone.js, never into
   #chatInterface: that element declares container-type:inline-size, and
   inc/footer.php:40140 records its layout containment silently clipping
   descendants — the documented cause of "the buttons do nothing". Styled here
   rather than inline so it is themeable and so this file documents why it is
   positioned the way it is.
 *
 * Only shown when the overlay is open AND the app's own close controls are
 * unreachable, which is the state that produced the force-quit reports: on the
 * no-deal-active welcome screen under 768px every one of them is gated out, and
 * the backdrop sits at z-index 999 beneath the overlay's 1000 so it cannot be
 * tapped either. */
.hb-standalone-close {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: calc(env(safe-area-inset-right, 0px) + 12px);
    /* Above the overlay (1000) but below the loader (99999999), so it cannot
       cover the launch screen. */
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(235, 216, 176, 0.32);
    border-radius: 999px;
    background: rgba(6, 11, 19, 0.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #ebd8b0;
    font: 700 15px/1 "Nunito", "Segoe UI", system-ui, sans-serif;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    transition: background 0.18s ease, transform 0.18s ease;
}
.hb-standalone-close.is-visible {
    display: flex;
}
.hb-standalone-close:hover {
    background: rgba(20, 32, 48, 0.92);
}
.hb-standalone-close:active {
    transform: scale(0.94);
}
.hb-standalone-close:focus-visible {
    outline: 2px solid #ebd8b0;
    outline-offset: 3px;
}
/* Wider than a tap target looks: 40px is the visual size, this pushes the
   hittable area to 48px without moving anything. */
.hb-standalone-close::before {
    content: "";
    position: absolute;
    inset: -4px;
}

@media (prefers-reduced-motion: reduce) {
    .hb-standalone-close {
        transition: none;
    }
    .hb-standalone-close:active {
        transform: none;
    }
}

/* ── Bottom tab bar ─────────────────────────────────────────────────────── */

/* Built by js/deal-room-tabbar.js from the nav items the app actually rendered.
   It exists because entering a deal below 1024px adds `locked-to-deal`, and
   inc/footer.php:11168 hides .deal-sidebar-left outright — so the act of opening
   a room removes the only way to move between its views.

   On <body>, not inside #chatInterface: that element's
   container-type:inline-size clips descendants (inc/footer.php:40140). */
.hb-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Above the overlay (1000), below the file viewer (100002) and the loader. */
    z-index: 100000;
    display: none;
    align-items: stretch;
    background: rgba(9, 16, 26, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid #1d2c3f;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
}
.hb-tabbar.is-on {
    display: flex;
}
/* Exactly the 56px (+ home-indicator inset) the room reserves for it in
   inc/footer.php's mobile chat sizing. It used to come out at 60px, which
   slid the bottom of the chat composer under the bar. */
.hb-tabbar {
    box-sizing: border-box;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
}
.hb-tabbar .hb-tab {
    box-sizing: border-box;
    min-height: 0 !important;
    height: 55px;
    padding: 6px 2px !important;
}

.hb-tabbar .hb-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* An explicit minimum, not a height implied by the contents: the icon is a
       Font Awesome glyph, and if that third-party stylesheet is slow or blocked
       the <i> collapses to zero and the whole row shrinks to ~37px — below any
       reasonable tap target, on the one control the phone layout depends on. */
    min-height: 52px;
    padding: 9px 4px 8px;
    border: 0;
    background: transparent;
    color: #7c8ea6;
    /* longhands: `font: 700 10.5px/1.2 inherit` is invalid (inherit cannot be a
       family inside the shorthand), so the whole line was dropped and the
       labels came out at the inherited 14px */
    font-family: inherit;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    cursor: pointer;
    /* The label is the first thing to lose room on a narrow phone; truncate it
       rather than let the row reflow. */
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
}
.hb-tabbar .hb-tab i {
    font-size: 17px;
    line-height: 1;
}
.hb-tabbar .hb-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hb-tabbar .hb-tab.is-active {
    color: #e5c158;
}
/* The label size again, on a selector that does not name the bar. The text-
   size control keeps #hbTabBar at its authored size by re-declaring each rule
   as "#hbTabBar <selector>", and ".hb-tabbar .hb-tab" can never match inside
   the bar (the bar IS .hb-tabbar), so at 140% the labels grew and were cut. */
.hb-tab[data-view] {
    font-size: 11px;
}
/* The active marker is a top rule rather than a filled pill: the bar sits under
   a dense dark UI and a filled state competes with the room's own gold accents. */
.hb-tabbar .hb-tab.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    width: 34px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: #e5c158;
}
.hb-tabbar .hb-tab {
    position: relative;
}
.hb-tabbar .hb-tab:focus-visible {
    outline: 2px solid #ebd8b0;
    outline-offset: -3px;
}

/* ── Colourful tabs (2026-10-13) ───────────────────────────────────────────
   Each section has a colour of its own, so the bar reads at a glance: the
   icons always wear it, softly; the open tab wears it in full, with a glowing
   pill behind its icon, its label in the colour and a lit rule on top.
   --tc is the colour, --tcr the same colour as "r, g, b" for the tints.
   !important on the icon colour: site-wide rules paint Font Awesome glyphs
   white, which is what left every icon here the same flat white. */
.hb-tabbar .hb-tab                              { --tc: #e5c158; --tcr: 229, 193, 88; }
.hb-tabbar .hb-tab[data-view="timeline"]        { --tc: #38bdf8; --tcr: 56, 189, 248; }
.hb-tabbar .hb-tab[data-view="chat"]            { --tc: #a78bfa; --tcr: 167, 139, 250; }
.hb-tabbar .hb-tab[data-view="finance"]         { --tc: #34d399; --tcr: 52, 211, 153; }
.hb-tabbar .hb-tab[data-view="concierge"]       { --tc: #fbbf24; --tcr: 251, 191, 36; }
.hb-tabbar .hb-tab[data-view="participants"]    { --tc: #f472b6; --tcr: 244, 114, 182; }
.hb-tabbar .hb-tab[data-view="documents"]       { --tc: #60a5fa; --tcr: 96, 165, 250; }
.hb-tabbar .hb-tab[data-view="map"]             { --tc: #fb923c; --tcr: 251, 146, 60; }
.hb-tabbar .hb-tab[data-view="summary"]         { --tc: #2dd4bf; --tcr: 45, 212, 191; }
.hb-tabbar .hb-tab[data-view="tasks"]           { --tc: #facc15; --tcr: 250, 204, 21; }
.hb-tabbar .hb-tab[data-view="ai"]              { --tc: #22d3ee; --tcr: 34, 211, 238; }
.hb-tabbar .hb-tab[data-view="certificate"]     { --tc: #f59e0b; --tcr: 245, 158, 11; }

.hb-tabbar .hb-tab {
    gap: 3px;
    color: #8394ad;
    transition: color 0.2s ease;
}
.hb-tabbar .hb-tab i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 28px;
    border-radius: 14px;
    font-size: 17px;
    color: rgba(var(--tcr), 0.82) !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.hb-tabbar .hb-tab:hover i {
    color: var(--tc) !important;
    background: rgba(var(--tcr), 0.08);
}

/* the open tab */
.hb-tabbar .hb-tab.is-active {
    color: var(--tc);
}
.hb-tabbar .hb-tab.is-active i {
    color: var(--tc) !important;
    background: rgba(var(--tcr), 0.18);
    box-shadow: inset 0 0 0 1px rgba(var(--tcr), 0.45), 0 0 16px rgba(var(--tcr), 0.35);
    transform: translateY(-1px);
}
.hb-tabbar .hb-tab.is-active span {
    color: var(--tc);
    text-shadow: 0 0 10px rgba(var(--tcr), 0.45);
}
.hb-tabbar .hb-tab.is-active::before {
    width: 30px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--tc);
    box-shadow: 0 0 10px rgba(var(--tcr), 0.85);
}

/* Five tabs on a 320px phone are 64px each: the pill narrows with them. */
@media (max-width: 359px) {
    .hb-tabbar .hb-tab i { width: 40px; height: 26px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .hb-tabbar .hb-tab i { transition: none; }
    .hb-tabbar .hb-tab.is-active i { transform: none; }
}

/* Five tabs on a 320px phone leaves 64px each. The one-word labels
   (js/deal-room-tabbar.js) fit at 10px, so they stay: a bar of bare icons
   was the one place the labels the redesign asks for disappeared. */
@media (max-width: 359px) {
    .hb-tab[data-view] {
        font-size: 10px;
        letter-spacing: 0;
    }
}

/* Keep the room's own content clear of the bar. Applied to the overlay rather
   than to body so the page underneath is unaffected. */
body.hb-has-tabbar #chatInterface,
body.hb-has-tabbar .chat-interface {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 56px);
}

/* The stage overlay's floating "Back to Timeline" pill (#tempDFloatBack in
   inc/footer.php) sat under the bar, and lifted above it, it covered page
   content and dialog footers. With the bar up it is not needed: the Timeline
   tab closes an open stage (js/deal-room-tabbar.js), the page has its back
   arrow at the top and "Back to Timeline" at the end. */
body.hb-has-tabbar #tempDFloatBack {
    display: none !important;
}
body.hb-has-tabbar #tempTimelineEmptyState .detailOv .dscroll {
    padding-bottom: 16px !important;
}

/* Deal Concierge steps on a phone: three equal columns whose labels wrap,
   instead of one nowrap line running off the right edge. */
@media (max-width: 600px) {
    #chatInterface #deal-concierge-view .dcx-stepper { gap: 6px !important; }
    #chatInterface #deal-concierge-view .dcx-step {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        white-space: normal !important;
        gap: 6px !important;
        align-items: flex-start !important;
    }
    #chatInterface #deal-concierge-view .dcx-step .lb b {
        font-size: 12.5px !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere;
    }
    #chatInterface #deal-concierge-view .dcx-step-sep { flex: 0 0 8px !important; min-width: 8px !important; margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .hb-tabbar .hb-tab {
        transition: none;
    }
}

/* ── AI Balance label ───────────────────────────────────────────────────
   The header chip is the room's AI wallet, not loan money; it says so. */
.aiw-chip .aiw-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #9fb0c6;
    white-space: nowrap;
}

/* ── Compact phone header (with the bottom tab bar) ─────────────────────
   Two rows instead of three: Menu · HOUSBE · deal number · bell, then
   My Deal Rooms · AI Balance · text size. The Timeline and Deal Concierge
   buttons go only when the bar carries those destinations (hb-tabv-*
   classes from js/deal-room-tabbar.js). The action group is flattened with
   display:contents so its children can sit on either row; #chatInterface
   in every selector outranks the !important mobile rules in inc/footer.php. */
@media (max-width: 1024px) {
    body.hb-has-tabbar #chatInterface .deal-global-header {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px 6px !important;
        padding: 10px 12px !important;
    }
    body.hb-has-tabbar #chatInterface .deal-global-header::after {
        content: "";
        order: 4;
        flex: 0 0 100%;
        height: 0;
    }
    body.hb-has-tabbar #chatInterface .deal-global-header .brand-title {
        order: 1;
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
        gap: 6px !important;
    }
    body.hb-has-tabbar #chatInterface .deal-global-header .brand-title > .sidebar-collapse-trigger {
        padding-right: 8px !important;
    }
    body.hb-has-tabbar #chatInterface .deal-global-header .brand-title .vall {
        overflow: visible !important;
        text-overflow: clip !important;
        cursor: copy;
    }
    body.hb-has-tabbar #chatInterface .deal-global-header .brand-title button[title="Copy Deal ID"] {
        display: none !important;
    }
    body.hb-has-tabbar #chatInterface .deal-global-header .header-actions-right {
        display: contents !important;
    }
    body.hb-has-tabbar #chatInterface .deal-global-header #hbNotifyBtn { order: 2; }
    body.hb-has-tabbar #chatInterface .deal-global-header #btnMyDealRooms { order: 5; flex: 1 1 auto !important; }
    body.hb-has-tabbar #chatInterface .deal-global-header #aiWalletChip { order: 6; flex: 0 0 auto !important; }
    body.hb-has-tabbar #chatInterface .deal-global-header .hb-fs-ctl { order: 7; flex: 0 0 auto !important; margin: 0 !important; }
    body.hb-has-tabbar #chatInterface .deal-global-header .header-actions-right > :not(#hbNotifyBtn):not(#btnMyDealRooms):not(#aiWalletChip):not(.hb-fs-ctl) { order: 8; }
    body.hb-has-tabbar.hb-tabv-timeline #chatInterface .deal-global-header .btn-goto-timeline,
    body.hb-has-tabbar.hb-tabv-concierge #chatInterface .deal-global-header .btn-deal-concierge {
        display: none !important;
    }
    /* the fixed close button (.hb-standalone-close) sits over the right end
       of the first row; keep the bell clear of it */
    body.hb-has-tabbar:has(.hb-standalone-close.is-visible) #chatInterface .deal-global-header .brand-title {
        margin-right: 0 !important;
    }
    body.hb-has-tabbar:has(.hb-standalone-close.is-visible) #chatInterface .deal-global-header::before {
        content: "";
        order: 3;
        flex: 0 0 38px;
        height: 1px;
    }
    /* AI Balance: label over the amount, wallet beside both, so the chip
       stays about 100px wide and row two holds all three controls */
    body.hb-has-tabbar #chatInterface .deal-global-header #aiWalletChip {
        display: grid !important;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        align-content: center;
        column-gap: 6px !important;
        row-gap: 0 !important;
        padding: 0 4px 0 12px !important;
    }
    body.hb-has-tabbar #chatInterface .deal-global-header #aiWalletChip[style*="display: none"],
    body.hb-has-tabbar #chatInterface .deal-global-header #aiWalletChip[style*="display:none"] { display: none !important; }
    body.hb-has-tabbar #chatInterface .deal-global-header .aiw-chip .aiw-lbl { grid-column: 1; grid-row: 1; font-size: 10px; line-height: 1.1; }
    body.hb-has-tabbar #chatInterface .deal-global-header .aiw-chip .aiw-amount { grid-column: 1; grid-row: 2; line-height: 1.1; }
    body.hb-has-tabbar #chatInterface .deal-global-header .aiw-chip .aiw-add { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    body.hb-has-tabbar #chatInterface .deal-global-header .brand-title > .sidebar-collapse-trigger {
        border-right: 0 !important;
        padding-right: 0 !important;
    }
    /* larger text sizes: the deal number drops under HOUSBE instead of being cut */
    html.hb-fs-on body.hb-has-tabbar #chatInterface .deal-global-header .brand-title { flex-wrap: wrap !important; row-gap: 2px !important; }
}
@media (max-width: 430px) {
    body.hb-has-tabbar #chatInterface .deal-global-header .brand-title { font-size: 15px !important; }
    body.hb-has-tabbar #chatInterface .deal-global-header .brand-title > div:has(> .fa-house) { gap: 5px !important; }
    body.hb-has-tabbar #chatInterface .deal-global-header #btnMyDealRooms { padding: 0 10px !important; font-size: 12.5px !important; gap: 5px !important; }
}
/* the narrowest phones: the house mark stands in for the HOUSBE word, and
   My Deal Rooms drops its folder icon, so nothing is cut off */
@media (max-width: 360px) {
    body.hb-has-tabbar #chatInterface .deal-global-header .brand-title > div:has(> .fa-house) { font-size: 0 !important; gap: 0 !important; }
    body.hb-has-tabbar #chatInterface .deal-global-header .brand-title > div:has(> .fa-house) > i { font-size: 16px !important; }
    body.hb-has-tabbar #chatInterface .deal-global-header #btnMyDealRooms > i { display: none !important; }
    body.hb-has-tabbar #chatInterface .deal-global-header #btnMyDealRooms { padding: 0 8px !important; font-size: 12px !important; }
}
@media (max-width: 400px) {
    body.hb-has-tabbar #chatInterface .deal-global-header .brand-title { font-size: 14px !important; }
}
/* narrow phones: the text-size pill keeps − and +, its % readout goes */
@media (max-width: 400px) {
    body.hb-has-tabbar #chatInterface .deal-global-header .hb-fs-ctl .hb-fs-val { display: none !important; }
}

/* ── Dialogs over the room ──────────────────────────────────────────────
   While a dialog is open (body.hb-modal-open, set by js/deal-room-tabbar.js)
   the tab bar and the room's own close button get out of its way; the
   dialog has its own close. */
body.hb-modal-open .hb-tabbar,
body.hb-modal-open .hb-standalone-close,
body.hb-modal-open #tempDFloatBack {
    display: none !important;
}
body.hb-modal-open.hb-has-tabbar #chatInterface,
body.hb-modal-open.hb-has-tabbar .chat-interface {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* The chat document preview on a phone: the whole visible screen, header
   under the notch, actions above the home indicator, the preview taking
   whatever is left between them. It was a centred card at the same
   z-index as the tab bar, which covered its buttons. */
#hbdocOverlay { z-index: 100003 !important; }
@media (max-width: 600px) {
    #hbdocOverlay.open {
        align-items: stretch !important;
        top: var(--dr-vv-top, 0px) !important;
        bottom: auto !important;
        height: var(--dr-vv-h, 100dvh) !important;
    }
    #hbdocOverlay .hbdoc-sheet {
        height: 100% !important;
        max-height: none !important;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    #hbdocOverlay .hbdoc-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: auto !important;
    }
    #hbdocOverlay .hbdoc-body iframe {
        height: 100% !important;
        min-height: 50vh;
    }
    #hbdocOverlay .hbdoc-x {
        width: 44px !important;
        height: 44px !important;
    }
    #hbdocOverlay .hbdoc-foot .hbdoc-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── Timeline stage cards on a phone ────────────────────────────────────
   A card is as wide as the column it sits in, never wider: its buttons and
   its "Last updated" date wrap instead of pushing the card past the screen
   edge (the Participants card cut off "Chat with Participants"). */
@media (max-width: 600px) {
    #chatInterface #tempTimelineEmptyState .tl .row > .side { min-width: 0 !important; max-width: 100%; }
    #chatInterface #tempTimelineEmptyState .stcard { min-width: 0 !important; max-width: 100%; box-sizing: border-box; }
    #chatInterface #tempTimelineEmptyState .stcard .stts { white-space: normal !important; flex: 1 1 auto !important; }
    #chatInterface #tempTimelineEmptyState .stcard .strow-btns > * { max-width: 100%; white-space: normal !important; text-align: left; }
    #chatInterface #tempTimelineEmptyState .stcard .chip { white-space: normal !important; max-width: 100%; }

    /* the participants strip at the top of Chat */
    #chatInterface #tempChatPartsBar > div:first-child { padding: 8px 14px !important; gap: 8px !important; flex-wrap: wrap !important; }
    #chatInterface #tempChatPartsBar .add-temp-participant { flex: 0 1 auto !important; white-space: nowrap !important; }
}
@media (max-width: 360px) {
    #chatInterface #tempChatPartsBar .add-temp-participant { padding-left: 10px !important; padding-right: 10px !important; font-size: 13px !important; }
    #chatInterface #tempChatPartsBar .add-temp-participant > i { display: none !important; }
    #chatInterface #tempChatPartsToggle { font-size: 15px !important; gap: 6px !important; }
}

/* ── More phone fixes from the 2026-10-13 sweep ──────────────────────────
   The names under the Participants planet had an inline 128px width, which
   widened that one timeline row and pushed its card off the screen. */
@media (max-width: 600px) {
    #chatInterface #tempMemberNames { width: auto !important; max-width: 104px; }
    #chatInterface #tempMemberNames .mname { white-space: normal !important; overflow-wrap: anywhere; }
}
/* People: on a phone the three action buttons move under the name, which
   then has the card's full width instead of ~60px ("Crawl …", "hbtest+…"). */
@media (max-width: 480px) {
    #chatInterface #deal-participants-view .hbp-row .hbp-c-name { grid-column: 1 / -1 !important; }
    #chatInterface #deal-participants-view .hbp-row .hbp-c-act { grid-column: 1 / -1 !important; grid-row: auto !important; justify-content: flex-start !important; }
    #chatInterface #deal-participants-view .hbp-row .tpc-name,
    #chatInterface #deal-participants-view .hbp-row .hbp-mail {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
    }
}
/* stage page heading: wrap, never "Manage this stage and its prog…" */
@media (max-width: 600px) {
    #chatInterface #tempDOv #tempDHeadTitle,
    #chatInterface #tempDOv #tempDHeadSub { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
}

/* ── Stage pages on a phone (every stage, not only Financing) ────────────
   The planet + card summary at the top: below 420px the card goes under the
   planet instead of into a ~110px column beside it, where its heading, its
   date and "Next: …" line ran off the edge. Stage participant rows wrap
   their email and date (they were squeezed to a few pixels). */
@media (max-width: 420px) {
    #chatInterface #tempTimelineEmptyState #tempDGlance { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
    #chatInterface #tempTimelineEmptyState #tempDGlance > .orbcol { align-self: center; }
    #chatInterface #tempTimelineEmptyState #tempDGlance > .side { min-width: 0 !important; max-width: 100% !important; width: 100% !important; }
}
@media (max-width: 600px) {
    #chatInterface #tempTimelineEmptyState #tempDGlance .stts b { white-space: normal !important; }
    #chatInterface #tempTimelineEmptyState #tempDGlance .stcard,
    #chatInterface #tempTimelineEmptyState #tempDGlance .stcard * { overflow-wrap: anywhere; }
    #chatInterface #tempDParts .tpd-row { flex-wrap: wrap !important; align-items: flex-start !important; }
    #chatInterface #tempDParts .tpd-main { flex: 1 1 10em !important; min-width: 0 !important; }
    #chatInterface #tempDParts .tpd-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; white-space: normal !important; }
    #chatInterface #tempDParts .tpd-email { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }
    #chatInterface #tempDParts .tpd-right { flex: 0 0 auto; }
}
/* the help cards' decorative curves cross their text on a phone */
@media (max-width: 600px) {
    #chatInterface .tfa-flow,
    #chatInterface .tda-flow { display: none !important; }
}