/* HOUSBE Deal Room — compact chat (2026-11-11)
   Rows rendered by js/hb-compact-chat.js. Spec: HOUSBE_Compact_Chat_Developer_Specification
   ("selected design 1"). New class names (hbc-*) so none of the old glass-card
   rules in assets/css/deal-room-shell.css (.msg-row / .bubble / .sender-line)
   reach these rows. Where a row reuses an old hook class for its handler
   (.msg-viewer-summary, .editMsgVisibility, .askConcierge) the old styling is
   overridden here with a more specific selector. */

#deal-chat-view {
    --hbc-text: #eef2fb;
    --hbc-meta: #9aa7bd;
    --hbc-line: rgba(255, 255, 255, 0.07);
    --hbc-gold: #e5c158;
    --hbc-gold-2: #f1c453;
    --hbc-surface: rgba(255, 255, 255, 0.04);
}

/* ── list ─────────────────────────────────────────────────────────────── */
#deal-chat-view .chat-messages-area.hbc-list {
    gap: 0 !important;
    padding: 4px 0 12px !important;
    background: #0b1120 !important;
    scroll-padding-bottom: 12px;
    overscroll-behavior: contain;
}

.hbc-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* ── row ──────────────────────────────────────────────────────────────── */
#deal-chat-view .hbc-row {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    column-gap: 12px;
    align-items: start;
    padding: 11px 6px 11px 18px;
    margin: 0;
    color: var(--hbc-text);
    --hbc-rowbg: #0e1526;
    background: var(--hbc-rowbg);
    border-top: 1px solid var(--hbc-line);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex: 0 0 auto;
}
#deal-chat-view .hbc-list > .hbc-row:first-child,
#deal-chat-view .hbc-day + .hbc-row,
#deal-chat-view .hbc-start + .hbc-row,
#deal-chat-view .hbc-older + .hbc-row {
    border-top-color: transparent;
}
/* subtle sender accent: a thin rail on the left edge */
#deal-chat-view .hbc-row::before {
    content: "";
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 4px;
    border-radius: 4px;
    background: var(--hbc-ac, #3b82f6);
}
@media (hover: hover) {
    #deal-chat-view .hbc-row:not(.is-open):hover { --hbc-rowbg: #121a2d; }
}
/* only the expanded row is highlighted */
#deal-chat-view .hbc-row.is-open {
    --hbc-rowbg: color-mix(in srgb, var(--hbc-gold) 7%, #0e1526);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hbc-gold) 75%, transparent);
    border-radius: 14px;
    border-top-color: transparent;
    margin: 4px 6px;
    padding-left: 14px;
}
#deal-chat-view .hbc-row.is-open + .hbc-row { border-top-color: transparent; }
#deal-chat-view .hbc-row.is-open::before { left: -1px; top: 12px; bottom: 12px; }

/* avatar */
#deal-chat-view .hbc-av {
    grid-column: 1;
    position: relative;
    width: 40px; height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    margin-top: 2px;
    flex-shrink: 0;
}
#deal-chat-view .hbc-av b {
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1;
}
#deal-chat-view .hbc-av img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
#deal-chat-view .hbc-av.is-locked {
    background: #1e293b;
    color: #8a94a6;
    font-size: 13px;
}
#deal-chat-view .hbc-row.is-self .hbc-av { color: #1a1205; }

/* main column */
/* head on line 1 beside the eye count; the text runs underneath it, up to
   the arrow column (approved design) */
#deal-chat-view .hbc-main { display: contents; }
#deal-chat-view .hbc-head { grid-column: 2; grid-row: 1; }
#deal-chat-view .hbc-content { grid-column: 2 / 4; grid-row: 2; min-width: 0; }
#deal-chat-view .hbc-av { grid-row: 1 / span 2; align-self: start; }
#deal-chat-view .hbc-details { grid-row: 3; }
#deal-chat-view .hbc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 7px;
    row-gap: 2px;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--hbc-meta);
}
#deal-chat-view .hbc-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--hbc-ac, #7cb4ff);
    min-width: 0;
    overflow-wrap: anywhere;
}
#deal-chat-view .hbc-row.is-self .hbc-name { color: var(--hbc-gold-2); }
#deal-chat-view .hbc-row.is-restricted .hbc-name { color: #8a94a6; font-weight: 600; }
#deal-chat-view .hbc-you { font-weight: 600; opacity: .9; }
#deal-chat-view .hbc-time { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
#deal-chat-view .hbc-t-short { display: none; }
@media (max-width: 480px) {
    #deal-chat-view .hbc-t-long { display: none; }
    #deal-chat-view .hbc-t-short { display: inline; }
}
#deal-chat-view .hbc-time::before { content: "\2022"; margin-right: 6px; opacity: .6; }
#deal-chat-view .hbc-edited { font-style: italic; white-space: nowrap; }
#deal-chat-view .hbc-flags {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 2px 8px;
    margin-top: 1px;
    line-height: 1.35;
    white-space: nowrap;
}
#deal-chat-view .hbc-aud,
#deal-chat-view .hbc-lock,
#deal-chat-view .hbc-sent {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
}
#deal-chat-view .hbc-aud i,
#deal-chat-view .hbc-lock i,
#deal-chat-view .hbc-sent i { font-size: 14px; }
/* the lock in front of a restricted message's text */
#deal-chat-view .hbc-lock-in { margin-right: 7px; vertical-align: -1px; }
#deal-chat-view .hbc-lock { color: var(--hbc-gold); }
#deal-chat-view .hbc-sent { color: var(--hbc-gold); }
#deal-chat-view .hbc-dtag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--hbc-gold);
    border: 1px solid color-mix(in srgb, var(--hbc-gold) 45%, transparent);
    border-radius: 999px;
    padding: 0 6px;
    line-height: 16px;
}

/* body: text as text, line breaks kept, selectable */
#deal-chat-view .hbc-body {
    margin: 2px 0 0;
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.38;
    color: var(--hbc-text);
    text-shadow: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
}
#deal-chat-view .hbc-body.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
#deal-chat-view .hbc-body.is-muted {
    color: #8a94a6;
    font-style: italic;
    cursor: inherit;
}
#deal-chat-view .hbc-more,
#deal-chat-view .hbc-linkbtn {
    background: none;
    border: 0;
    padding: 4px 0;
    margin: 0;
    min-height: 32px;
    color: var(--hbc-gold) !important;
    font-size: 14px !important;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#deal-chat-view .hbc-more[hidden] { display: none; }
#deal-chat-view .hbc-bwrap { position: relative; }
/* clamped: "…Read more" sits at the end of the second line, over a fade
   in the row's own colour */
#deal-chat-view .hbc-bwrap:not(.is-full) .hbc-more {
    position: absolute;
    right: 0;
    bottom: 0;
    min-height: 0;
    padding: 0 0 0 36px;
    line-height: 1.38;
    font-size: 15px !important;
    text-decoration: none;
    background: linear-gradient(to right, transparent 0, var(--hbc-rowbg) 30px);
}
#deal-chat-view .hbc-bwrap:not(.is-full) .hbc-more:hover { text-decoration: underline; }

/* attachment */
#deal-chat-view .hbc-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 6px 6px 6px 8px;
    border-radius: 10px;
    background: var(--hbc-surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: auto;
    max-width: 520px;
}
#deal-chat-view .hbc-file-ic {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--hbc-ac, #3b82f6) 18%, transparent);
    color: var(--hbc-ac, #7cb4ff);
    flex-shrink: 0;
}
#deal-chat-view .hbc-file-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 96px;
}
#deal-chat-view .hbc-file-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--hbc-text);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
#deal-chat-view .hbc-file-kind { font-size: 12.5px; color: var(--hbc-meta); }
#deal-chat-view .hbc-file-acts { display: flex; gap: 4px; flex-shrink: 0; margin-left: auto; }
#deal-chat-view .hbc-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0 !important;
    font-size: 13.5px !important;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
#deal-chat-view .hbc-file-btn:hover { border-color: color-mix(in srgb, var(--hbc-gold) 50%, transparent); }
#deal-chat-view .hbc-main .hb-tl-chip { margin-top: 6px; }

/* The expand control, as in the approved design: a large, light arrow on
   the right (down = closed, up = open), with a 44 x 44 tap area. */
#deal-chat-view .hbc-tog {
    grid-column: 4;
    grid-row: 1;
    align-self: start;
    width: 44px;
    height: 44px;
    margin: -10px -2px -10px 4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
#deal-chat-view .hbc-tog-in { display: inline-flex; align-items: center; justify-content: center; color: #d6dde8 !important; }
#deal-chat-view .hbc-tog-t { display: none; }
#deal-chat-view .hbc-tog-in i { font-size: 19px; color: inherit !important; }
#deal-chat-view .hbc-tog:hover { background: rgba(255, 255, 255, 0.07); }
#deal-chat-view .hbc-tog:hover .hbc-tog-in { color: #ffffff !important; }
#deal-chat-view .hbc-row.is-open .hbc-tog-in { color: #ffffff !important; }
#deal-chat-view .hbc-tog:focus-visible { outline: 2px solid var(--hbc-gold) !important; outline-offset: 0; }

/* ── details area ─────────────────────────────────────────────────────── */
#deal-chat-view .hbc-details {
    grid-column: 1 / -1;
    margin: 10px 4px 2px 0;
    cursor: auto;
    animation: hbcReveal .18s ease-out both;
}
#deal-chat-view .hbc-details[hidden] { display: none; }
@keyframes hbcReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
#deal-chat-view .hbc-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin: 8px 2px 0;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--hbc-meta);
}
#deal-chat-view .hbc-meta-line b { font-weight: 400; opacity: .6; }
#deal-chat-view .hbc-meta-line i { font-size: 11px; color: var(--hbc-gold); }

#deal-chat-view .hbc-xinfo {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--hbc-surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
#deal-chat-view .hbc-xinfo-h {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
    font-size: 12.5px; font-weight: 700; color: var(--hbc-gold);
}
#deal-chat-view .hbc-xinfo-h span { font-weight: 500; color: var(--hbc-meta); }
#deal-chat-view .hbc-xinfo-b {
    margin: 4px 0 0;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--hbc-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-user-select: text; user-select: text;
}

/* actions: ONE rounded bar with thin dividers, as in the approved design */
#deal-chat-view .hbc-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    overflow: hidden;
}
#deal-chat-view .hbc-acts .hbc-act,
#deal-chat-view .hbc-acts .hbc-act.msg-viewer-summary,
#deal-chat-view .hbc-acts .hbc-act.editMsgVisibility,
#deal-chat-view .hbc-acts .hbc-act.askConcierge {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #eef2f8 !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: left;
    cursor: pointer;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    flex: 1 1 auto !important;
}
/* the old card layout pins .msg-viewer-summary to the card corner on phones
   (left/bottom offsets in deal-room-shell.css); cancel them in the bar */
#deal-chat-view .hbc-acts .hbc-act.msg-viewer-summary {
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
}
/* thin vertical divider between items (not before the first) */
#deal-chat-view .hbc-acts .hbc-act + .hbc-act::before {
    content: "";
    position: absolute;
    left: 0; top: 11px; bottom: 11px;
    width: 1px;
    background: rgba(255, 255, 255, 0.16);
}
#deal-chat-view .hbc-acts .hbc-act i { font-size: 14px; color: inherit !important; }
#deal-chat-view .hbc-acts .hbc-act:hover { background: rgba(255, 255, 255, 0.06) !important; }
#deal-chat-view .hbc-acts .hbc-act.askConcierge,
#deal-chat-view .hbc-acts .hbc-act.editMsgVisibility { color: var(--hbc-gold) !important; }
#deal-chat-view .hbc-acts .hbc-act.msg-viewer-summary { color: #c9d3e3 !important; }
#deal-chat-view .hbc-acts .hbc-s { display: none; }

/* editors */
#deal-chat-view .hbc-editor {
    margin: 6px 0 8px;
    cursor: auto;
}
#deal-chat-view .hbc-details .hbc-editor { margin-left: 0; }
/* the label is for screen readers; the open row already says what it is */
#deal-chat-view .hbc-ed-label {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
/* editing the text: the message body steps aside and the editor takes the
   row's full width, between the name line and the action bar */
#deal-chat-view .hbc-row.is-editing .hbc-content { display: none; }
#deal-chat-view .hbc-details > .hbc-editor[data-kind="text"] { margin: 0 0 10px; }
#deal-chat-view .hbc-ta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 64px;
    max-height: 150px;
    overflow-y: auto;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--hbc-gold) 45%, transparent);
    background: #0b1420;
    color: #fff;
    font: inherit;
    font-size: 16px !important;     /* 16px: iOS does not zoom the page on focus */
    line-height: 1.4 !important;
    resize: vertical;
}
#deal-chat-view .hbc-ta:focus { outline: 2px solid var(--hbc-gold); outline-offset: 1px; }
#deal-chat-view .hbc-ed-hint { font-size: 12.5px; color: var(--hbc-meta); margin-top: 4px; }
#deal-chat-view .hbc-ed-msg { min-height: 0; font-size: 13px; color: var(--hbc-meta); margin-top: 4px; }
#deal-chat-view .hbc-ed-msg:empty { display: none; }
#deal-chat-view .hbc-ed-msg.is-err { color: #fca5a5; }
#deal-chat-view .hbc-ed-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}
#deal-chat-view .hbc-btn {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #1e293b;
    color: #e2e8f0 !important;
    font-size: 14px !important;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
#deal-chat-view .hbc-btn-gold {
    background: linear-gradient(135deg, #f3e2b3 0%, #e5c158 55%, #caa63f 100%);
    border-color: transparent;
    color: #1a1205 !important;
}
#deal-chat-view .hbc-btn-gold i { color: #1a1205 !important; }
#deal-chat-view .hbc-btn[disabled] { opacity: .55; cursor: not-allowed; }
#deal-chat-view .hbc-btn-danger { border-color: rgba(248, 113, 113, 0.5); color: #fecaca !important; }
#deal-chat-view .hbc-ed-conflict {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.08);
    font-size: 13.5px;
    color: #fde68a;
}
#deal-chat-view .hbc-ed-conflict[hidden] { display: none; }
#deal-chat-view .hbc-ed-conflict p { margin: 0 0 6px; }
#deal-chat-view .hbc-ed-conflict blockquote {
    margin: 0;
    padding: 6px 8px;
    border-left: 3px solid rgba(251, 191, 36, 0.6);
    color: var(--hbc-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 140px;
    overflow: auto;
}
#deal-chat-view .hbc-guard {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(248, 113, 113, 0.4);
    background: rgba(248, 113, 113, 0.08);
    font-size: 13.5px;
    color: #fecaca;
}
#deal-chat-view .hbc-guard-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── list furniture ───────────────────────────────────────────────────── */
#deal-chat-view .hbc-day {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--hbc-meta);
    flex: 0 0 auto;
}
#deal-chat-view .hbc-day::before,
#deal-chat-view .hbc-day::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--hbc-line);
}
#deal-chat-view .hbc-start,
#deal-chat-view .hbc-older {
    text-align: center;
    font-size: 12.5px;
    color: var(--hbc-meta);
    padding: 10px 16px 2px;
    flex: 0 0 auto;
}
#deal-chat-view .hbc-newpill {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(135deg, #f3e2b3 0%, #e5c158 55%, #caa63f 100%);
    color: #1a1205 !important;
    font-size: 14px !important;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}
#deal-chat-view .hbc-newpill i { color: #1a1205 !important; }
#deal-chat-view .hbc-newpill[hidden] { display: none; }

/* focus that can be seen */
#deal-chat-view .hbc-row button:focus-visible,
#deal-chat-view .hbc-row a:focus-visible,
#deal-chat-view .hbc-newpill:focus-visible {
    outline: 2px solid var(--hbc-gold) !important;
    outline-offset: 2px;
}

/* ── phones ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    #deal-chat-view .hbc-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; padding: 10px 2px 10px 14px; column-gap: 8px; }
    #deal-chat-view .hbc-flags { gap: 2px 6px; }
    #deal-chat-view .hbc-row.is-open { margin: 4px 4px; padding-left: 10px; }
    #deal-chat-view .hbc-av { width: 36px; height: 36px; }
    #deal-chat-view .hbc-av b { font-size: 13.5px; }
    #deal-chat-view .hbc-name { font-size: 15.5px; }
    #deal-chat-view .hbc-body { font-size: 15px; }
    #deal-chat-view .hbc-guard,
    #deal-chat-view .hbc-details .hbc-editor { margin-left: 0; }
    #deal-chat-view .hbc-details { margin-right: 6px; }
    /* one bar, like the approved design: equal sections, icon over a short label */
    #deal-chat-view .hbc-acts { flex-wrap: nowrap; }
    #deal-chat-view .hbc-acts .hbc-act,
    #deal-chat-view .hbc-acts .hbc-act.msg-viewer-summary,
    #deal-chat-view .hbc-acts .hbc-act.editMsgVisibility,
    #deal-chat-view .hbc-acts .hbc-act.askConcierge {
        flex: 1 1 0 !important;
        min-width: 0;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        min-height: 56px;
        padding: 6px 2px !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
        text-align: center;
    }
    #deal-chat-view .hbc-acts .hbc-act i { font-size: 15px; }
    #deal-chat-view .hbc-acts .hbc-act + .hbc-act::before { top: 12px; bottom: 12px; }
    #deal-chat-view .hbc-acts .hbc-l { display: none; }
    #deal-chat-view .hbc-acts .hbc-s { display: inline; overflow-wrap: anywhere; }
    #deal-chat-view .hbc-btn { min-height: 44px; }
}
@media (max-width: 299px) {
    /* 200% zoom on a phone: let the sections wrap rather than squeeze */
    #deal-chat-view .hbc-acts { flex-wrap: wrap; }
    #deal-chat-view .hbc-acts .hbc-act,
    #deal-chat-view .hbc-acts .hbc-act.msg-viewer-summary,
    #deal-chat-view .hbc-acts .hbc-act.editMsgVisibility,
    #deal-chat-view .hbc-acts .hbc-act.askConcierge { flex: 1 1 33% !important; }
}
@media (pointer: coarse) {
    #deal-chat-view .hbc-acts .hbc-act,
    #deal-chat-view .hbc-acts .hbc-act.msg-viewer-summary,
    #deal-chat-view .hbc-acts .hbc-act.editMsgVisibility,
    #deal-chat-view .hbc-acts .hbc-act.askConcierge,
    #deal-chat-view .hbc-btn { min-height: 44px; }
    #deal-chat-view .hbc-file-btn { width: 44px; height: 44px; }
    #deal-chat-view .hbc-more { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    #deal-chat-view .hbc-details { animation: none; }
    #deal-chat-view .hbc-tog i { transition: none; }
}

/* ── surrounding controls: compact spacing on phones ─────────────────── */
@media (max-width: 600px) {
    /* Participants strip: "Invite Participants" becomes "Invite" */
    #tempChatPartsBar .tcp-inv-more { display: none; }
    #tempChatPartsBar .add-temp-participant {
        min-height: 40px;
        padding: 0 16px !important;
    }
    /* privacy prompt: the switch itself shows the state; the ON / OFF
       legend is dropped so the composer keeps room for the text field */
    #deal-chat-view .msg-visibility-toggle .msg-visibility-lbl,
    #deal-chat-view .msg-visibility-toggle .msg-visibility-switch { display: none !important; }
    #deal-chat-view .chat-input-box .msg-visibility-toggle {
        width: 44px;
        padding: 0 !important;
        justify-content: center;
        position: relative;
    }
    #deal-chat-view .chat-input-box .msg-visibility-ic { width: 30px; height: 30px; background: transparent; border: 0; }
    /* privacy prompt ON: green ring plus a dot, so it is not colour alone */
    #deal-chat-view .chat-input-box .msg-visibility-toggle[data-active="true"]::after {
        content: "";
        position: absolute;
        top: 6px; right: 6px;
        width: 8px; height: 8px;
        border-radius: 50%;
        background: #3ee98c;
        box-shadow: 0 0 0 2px #0b1120;
    }
    /* a thin divider between the buttons and the text, as in the mockup */
    #deal-chat-view .chat-input-box input#chatMessage {
        border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
        padding-left: 12px !important;
        margin-left: 2px;
    }
    /* the short label leaves room for the icon again on the smallest phones */
    #tempChatPartsBar > div > .add-temp-participant > i { display: inline-block !important; }
}
/* composer: 44 x 44 touch targets for the paperclip and Send on phones and
   touch screens (the artwork stays small) */
@media (max-width: 600px), (pointer: coarse) {
    #deal-chat-view .chat-input-box .chat-action-btn {
        width: 44px !important;
        height: 44px !important;
    }
    #deal-chat-view .chat-input-box .btn-send {
        height: 44px !important;
        min-width: 44px;
    }
    #deal-chat-view .chat-input-box {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}

/* ── editing a message with the phone keyboard up ─────────────────────────
   The keyboard leaves ~half the screen; the room's header (MENU, My Deal
   Rooms, AI balance), the deal banner, the property card and its close X,
   the Participants strip and the composer would take all of it. While a message editor has the focus
   (html.hbc-editing, js/hb-compact-chat.js) and the keyboard is up
   (html.dr-kb-open, js/footer/13-tallest-visible-height-seen-with.js) they
   step aside so the message being edited and its Save / Cancel stay visible.
   They return the moment the field loses focus. */
@media (max-width: 1024px), (pointer: coarse) {
    html.dr-kb-open.hbc-editing #chatInterface .deal-global-header,
    html.dr-kb-open.hbc-editing #chatInterface #dcoBanner,
    html.dr-kb-open.hbc-editing #chatInterface #tempChatPartsBar,
    html.dr-kb-open.hbc-editing #chatInterface .chat-input-area,
    html.dr-kb-open.hbc-editing #chatInterface .deal-top-dashboard-header,
    html.dr-kb-open.hbc-editing .hb-standalone-close,
    html.dr-kb-open.hbc-editing .hb-tabbar {
        display: none !important;
    }
}