.deal-room-container {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.deal-room-container * {
box-sizing: border-box;
}
.deal-room-container {
display: none; /* Initially hidden per existing logic */
width: 100%;
height: 100vh !important;
max-height: 100vh !important;
display: flex;
flex-direction: row;
color: #cbd5e1;
background: #0f1523; /* Very dark blue matching screenshot */
container-type: inline-size;
}
/* Hide scrollbars for a cleaner UI */
.deal-room-container ::-webkit-scrollbar {
display: none !important;
width: 0 !important;
}
.deal-sidebar-left,
.deal-sidebar-right,
.chat-messages-area,
.deal-middle-area,
#deal-chat-view,
#deal-timeline-view,
[style*="overflow-y:auto"] {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.deal-room-container.sidebar-collapsed .deal-sidebar-left {
display: none !important;
}
.deal-sidebar-left {
width: 320px; /* was 280px — widened so the ACTIVE/CLOSED deal room cards don't shrink */
background: #070b13;
border-right: 1px solid rgba(255,255,255,0.05);
display: flex;
flex-direction: column;
padding: 20px 16px;
z-index: 10;
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.deal-sidebar-left::-webkit-scrollbar {
display: none !important; /* Chrome/Safari/Opera */
}
.sidebar-ai-card {
/* pinned to the TOP of the sidebar (under the search), not pushed down */
margin-top: 0 !important;
flex: none !important;
height: auto !important;
min-height: 0 !important;
}
/* Shared Layout Components */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* Timeline / Deal Map Base Styles */
.deal-dashboard-split { display: flex; gap: 20px; width: 100%; }
.deal-timeline-left { flex: 1.8; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.deal-timeline-right { flex: 1.2; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.dashboard-cards-row { display: flex; gap: 20px; }
/* Tasks View Base Styles */
.deal-tasks-layout { display: flex; flex-direction: row; height: 100%; width: 100%; }
.deal-tasks-left { flex: 1; padding: 32px; overflow-y: auto; min-width: 0; display: flex; flex-direction: column; max-height: 100%; }
.deal-tasks-right { width: 340px; background: #0f172a; border-left: 1px solid #1e293b; display: flex; flex-direction: column; padding: 24px; overflow-y: auto; flex-shrink: 0; max-height: 100%; }
.deal-dashboard-card { display: flex; flex-direction: row; background: #0f172a; border: 1px solid #1e293b; border-radius: 12px; padding: 24px; margin-bottom: 24px; position: relative; }
.deal-dashboard-col { border-right: 1px solid #1e293b; padding: 0 24px; }
.deal-dashboard-col:first-child { padding-left: 0; }
.deal-dashboard-col:last-child { border-right: none; padding-right: 0; padding-left: 24px; }
.deal-tasks-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.deal-tasks-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.task-view-toggle { display: flex; background: rgba(255,255,255,0.05); padding: 4px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); margin-right: 12px; }
.task-toggle-btn { padding: 6px 16px; border-radius: 8px; font-size: 14.5px; font-weight: 600; cursor: pointer; border: none; transition: all 0.3s; background: transparent; color: #94a3b8; }
.task-toggle-btn.active { background: linear-gradient(135deg, #ebd8b0 0%, #d3bf98 100%); color: #061121; box-shadow: 0 4px 12px rgba(229,193,88,0.3); }
/* Deal Map Base Styles */
.deal-map-layout,
#deal-map-view .deal-map-layout {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
background: #0b1120;
}
.deal-map-left,
#deal-map-view .deal-map-left {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
position: relative;
overflow: hidden;
background-image: radial-gradient(circle, #1e293b 1px, transparent 1px);
background-size: 24px 24px;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: 0 !important;
}
.deal-map-right,
#deal-map-view .deal-map-right {
width: 380px !important;
min-width: 380px !important;
max-width: 380px !important;
flex: 0 0 380px !important;
flex-shrink: 0 !important;
align-self: stretch !important;
background: #0f172a !important;
border-left: 1px solid #1e293b !important;
display: flex !important;
flex-direction: column !important;
overflow-y: auto !important;
overflow-x: hidden !important;
z-index: 20 !important;
height: 100% !important;
min-height: 0 !important;
}
@media (max-width: 767px) {
#deal-map-view .deal-map-layout {
flex-direction: column !important;
overflow-y: auto !important;
}
#deal-map-view .deal-map-left {
flex: none !important;
width: 100% !important;
height: 50vh !important;
min-height: 400px !important;
}
#deal-map-view .deal-map-right {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
flex: none !important;
height: auto !important;
border-left: none !important;
border-top: 1px solid rgba(255,255,255,0.1) !important;
}
}
.deal-sidebar-left .brand-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
cursor: pointer;
}
/* The drawer's HOUSBE mark. Sized HERE and not inline: the sizing used
to be an inline height:30px, and an inline declaration beats every
stylesheet rule including one in a media query — so the phone was
stuck with the desktop's size and the logo was unreadable on a
handset. Same trap the .top-bar margin-bottom comment further down
this file documents. */
.deal-sidebar-left .brand-header .drm-brand-logo {
height: 44px;
max-width: 100%;
object-fit: contain;
filter: drop-shadow(0 0 8px rgba(229, 193, 88, 0.25));
}
/* A phone has the width to spare — the header's other two controls are
28px circles pinned right — and it is the case where 30px was
illegible, so it gets the largest mark rather than the smallest. */
@media (max-width: 767px) {
.deal-sidebar-left .brand-header .drm-brand-logo { height: 56px; }
}
.deal-sidebar-left .brand-header .icon {
width: 32px;
height: 32px;
background: rgba(16, 185, 129, 0.15);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #10b981;
font-size: 16px;
}
.deal-sidebar-left .brand-header h2 {
font-size: 18px;
font-weight: 700;
color: #f8fafc;
margin: 0;
letter-spacing: 0.5px;
}
.deal-sidebar-left .brand-header span {
color: #cbd5e1;
font-weight: 400;
font-size: 18px;
}
.deal-sidebar-left .top-div-area {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 20px !important;
transition: all 0.2s !important;
}
.deal-sidebar-left .top-div-area:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.3) !important;
}
/* Active Deal Room tab — premium champagne-gold pill with deep navy 3D border & timeline golden glow */
.deal-sidebar-left .top-div-area.deal-room-active-tab {
background: linear-gradient(135deg, #f3e2b3 0%, #e5c158 55%, #caa63f 100%) !important;
border: 2px solid #061121 !important;
outline: 1px solid rgba(246, 184, 63, 0.7) !important;
color: #061121 !important;
border-radius: 14px !important;
box-shadow:
0 6px 18px rgba(0, 0, 0, 0.45),
0 0 16px rgba(246, 184, 63, 0.45),
inset 0 1.5px 1px rgba(255, 255, 255, 0.8),
inset 0 -2.5px 4px rgba(160, 120, 35, 0.45) !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.deal-sidebar-left .top-div-area.deal-room-active-tab:hover {
transform: translateY(-2px) !important;
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.55),
0 0 20px rgba(235, 216, 176, 0.5),
inset 0 2px 2px rgba(255, 255, 255, 0.85),
inset 0 -2.5px 4px rgba(120, 90, 40, 0.5) !important;
}
.deal-sidebar-left .top-div-area.deal-room-active-tab * {
background: transparent !important;
color: #061121 !important;
}
.deal-sidebar-left .top-div-area.deal-room-active-tab p {
color: #061121 !important;
}
/* ── DEAL ROOM MENU call-to-action (top of the deal room drawer) ─────────
Neon-red entry card: icon disc, title, "Click to open", chevron. Sits on
.top-div-area because swapBox() indexes that class, so it inherits two
rules that have to be beaten explicitly:
· ".top-div-area:hover" forces background:rgba(255,255,255,.15) and a
white border, both !important — it would wash the whole card out on
hover, so the hover state below re-declares them at higher specificity
· ".top-div-area.highlight" forces a BLUE background, also !important;
harmless today (swapBox highlights a different element in #topBar) but
folded into the same selector list so it can never bleed through
The double glow is two box-shadow rings — a tight one for the tube and a
wide soft one for the bloom — which is what reads as neon rather than as a
plain coloured border. */
.deal-sidebar-left .top-div-area.deal-room-menu-cta,
.deal-sidebar-left .top-div-area.deal-room-menu-cta:hover,
.deal-sidebar-left .top-div-area.deal-room-menu-cta.highlight {
gap: 12px !important;
padding: 14px 13px !important;
border-radius: 18px !important;
cursor: pointer;
justify-content: flex-start !important;
/* the .top-div-area base sets overflow:hidden and this card is taller than a
plain tab — without these the subtitle was being clipped by the card edge */
overflow: visible !important;
height: auto !important;
min-height: 0 !important;
/* RED interior. This was a near-black gradient with only the border and
outer glow carrying colour, which read as a black card in a red frame.
Two layers: a saturated crimson base, plus a bloom sitting behind the
icon so the fill is brighter where the light source is and falls off
toward the chevron — that gradient is what stops a flat red panel from
looking like a solid swatch. */
background:
radial-gradient(125% 150% at 20% 24%, rgba(255, 72, 92, 0.30) 0%, rgba(255, 45, 67, 0.08) 46%, transparent 68%),
linear-gradient(150deg, #55101d 0%, #3d0b14 52%, #2a070d 100%) !important;
border: 2px solid #ff2d43 !important;
outline: none !important;
box-shadow:
0 0 0 1px rgba(255, 45, 67, 0.35),
0 0 18px rgba(255, 45, 67, 0.50),
0 0 44px rgba(255, 45, 67, 0.22),
inset 0 0 26px rgba(255, 70, 90, 0.22),
inset 0 1px 0 rgba(255, 190, 200, 0.16) !important;
transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1), border-color .25s ease !important;
}
.deal-sidebar-left .top-div-area.deal-room-menu-cta:hover {
transform: translateY(-2px);
border-color: #ff4a5d !important;
box-shadow:
0 0 0 1px rgba(255, 45, 67, 0.55),
0 0 26px rgba(255, 45, 67, 0.72),
0 0 62px rgba(255, 45, 67, 0.30),
inset 0 0 30px rgba(255, 70, 90, 0.30),
inset 0 1px 0 rgba(255, 190, 200, 0.22) !important;
}
.deal-sidebar-left .top-div-area.deal-room-menu-cta:active { transform: translateY(0); }
.deal-sidebar-left .top-div-area.deal-room-menu-cta:focus-visible {
outline: 2px solid #ff8f9c !important;
outline-offset: 3px;
}
/* ::after on .top-div-area.highlight draws an underline bar — not wanted here */
.deal-sidebar-left .top-div-area.deal-room-menu-cta::after { content: none !important; display: none !important; }
.deal-sidebar-left .deal-room-menu-cta .drm-cta-ic {
flex: 0 0 auto;
width: 40px; height: 40px;
border-radius: 50%;
display: grid; place-items: center;
/* Deeper and more saturated than the card behind it, with a light rim —
against a red fill a bright pink disc lost its edge and merged into the
background, so contrast now comes from depth rather than hue. */
background: linear-gradient(155deg, #b31228 0%, #8c0c1e 58%, #6d0817 100%);
border: 1.5px solid rgba(255, 138, 152, 0.55);
box-shadow: 0 4px 14px rgba(0,0,0,.55),
0 0 18px rgba(255,45,67,.40),
inset 0 1.5px 1px rgba(255,255,255,.28);
}
.deal-sidebar-left .deal-room-menu-cta .drm-cta-ic i {
font-size: 17px;
color: #fff0f2 !important;
filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.deal-sidebar-left .deal-room-menu-cta .drm-cta-tx {
display: flex; flex-direction: column; gap: 3px;
min-width: 0; flex: 1 1 auto; text-align: left; line-height: 1.2;
}
.deal-sidebar-left .deal-room-menu-cta .drm-cta-tx b {
font-size: 15.5px; font-weight: 900; letter-spacing: .2px;
color: #ffffff !important;
text-shadow: 0 0 12px rgba(255,45,67,.45);
/* wrap, never ellipsise: "DEAL ROOM ..." is worse than two short lines,
and the sidebar is a fixed 320px where the full label only just fits */
white-space: normal;
overflow-wrap: break-word;
line-height: 1.15;
}
.deal-sidebar-left .deal-room-menu-cta .drm-cta-tx small {
font-size: 14px; font-weight: 600;
color: #c3ccd9 !important;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deal-sidebar-left .deal-room-menu-cta .drm-cta-go {
flex: 0 0 auto;
width: 30px; height: 30px;
border-radius: 50%;
display: grid; place-items: center;
border: 1.5px solid rgba(255, 180, 190, .45);
background: rgba(0, 0, 0, .22);
transition: all .2s ease;
}
.deal-sidebar-left .deal-room-menu-cta .drm-cta-go i {
font-size: 14px; color: #ffffff !important;
transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.deal-sidebar-left .deal-room-menu-cta:hover .drm-cta-go {
border-color: #ff6072;
background: rgba(255,45,67,.16);
transform: translateX(2px);
}
/* ── Open state (.is-open, set by hbSyncDealRoomMenuCta) ─────────────
The card both opens AND collapses the menu now, so the chevron has to
announce where the NEXT tap goes: pointing right = "will open",
pointing up = "will collapse". The base glyph is fa-chevron-right, so
that's -90deg (counter-clockwise) — +90 would aim it DOWN, which on a
card sitting above the menu reads as "more below", i.e. the opposite. */
.deal-sidebar-left .deal-room-menu-cta.is-open .drm-cta-go i {
transform: rotate(-90deg);
}
.deal-sidebar-left .deal-room-menu-cta.is-open .drm-cta-go {
border-color: #ff6072;
background: rgba(255,45,67,.18);
}
/* the hover nudge is a "go this way" cue — meaningless once the arrow is up */
.deal-sidebar-left .deal-room-menu-cta.is-open:hover .drm-cta-go { transform: none; }
@media (max-width: 400px) {
.deal-sidebar-left .top-div-area.deal-room-menu-cta { gap: 9px !important; padding: 11px 10px !important; }
.deal-sidebar-left .deal-room-menu-cta .drm-cta-ic { width: 34px; height: 34px; }
.deal-sidebar-left .deal-room-menu-cta .drm-cta-ic i { font-size: 16px; }
.deal-sidebar-left .deal-room-menu-cta .drm-cta-tx b { font-size: 14.5px; letter-spacing: 0; }
.deal-sidebar-left .deal-room-menu-cta .drm-cta-tx small { font-size: 13.5px; }
.deal-sidebar-left .deal-room-menu-cta .drm-cta-go { width: 26px; height: 26px; }
.deal-sidebar-left .deal-room-menu-cta .drm-cta-go i { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
.deal-sidebar-left .top-div-area.deal-room-menu-cta:hover { transform: none; }
.deal-sidebar-left .deal-room-menu-cta:hover .drm-cta-go { transform: none; }
/* the rotation still has to happen — it's state, not decoration — it
just arrives instantly instead of sweeping */
.deal-sidebar-left .deal-room-menu-cta .drm-cta-go i { transition: none !important; }
}
.deal-sidebar-box {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 16px;
margin-bottom: 24px;
flex-shrink: 0;
}
.deal-sidebar-nav-box {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 16px;
overflow: hidden;
margin-bottom: 24px;
flex-shrink: 0;
}
.deal-details-box {
margin-bottom: 24px;
}
.deal-details-row {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
font-size: 15.5px;
}
.deal-details-row .label {
color: #94a3b8;
font-weight: 500;
}
.deal-details-row .val {
color: #f8fafc;
font-weight: 600;
}
.deal-details-row.deal-id-highlight .val {
color: #f8fafc;
font-size: 16px;
font-weight: 700;
}
.deal-participant-avatars {
display: flex;
gap: 13.5px;
flex-wrap: nowrap;
margin: 20px 0;
padding: 0 10px;
}
.participant-avatar-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.participant-avatar-col img {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid #070b13;
object-fit: cover;
}
.participant-avatar-col span {
font-size: 13px;
color: #94a3b8;
font-weight: 500;
text-align: center;
line-height: 1.2;
}
.btn-invite-dealroom {
background: linear-gradient(180deg, #0d9488, #0f766e);
color: #fff;
border: none;
border-radius: 24px;
padding: 12px 0;
font-size: 15.5px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 64px !important;
min-height: 48px;
margin-bottom: 10px;
box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
transition: all 0.2s;
}
.btn-invite-dealroom:hover {
box-shadow: 0 6px 16px rgba(13, 148, 136, 0.4);
transform: translateY(-1px);
}
.left-nav-menu {
display: flex;
flex-direction: column;
width: 100%;
}
@keyframes left-nav-gold-sweep {
0% {
background-position: 200% center;
}
100% {
background-position: -200% center;
}
}
.left-nav-item {
display: flex;
align-items: center;
padding: 14px 16px;
cursor: pointer;
color: #94a3b8;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.left-nav-item:hover {
background: rgba(255, 255, 255, 0.03);
color: #f8fafc;
}
.left-nav-item.active {
background: rgba(229, 193, 88, 0.06) !important;
color: #ebd8b0 !important;
}
.left-nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: #e5c158 !important;
box-shadow: 0 0 15px rgba(229, 193, 88, 0.6) !important;
}
.left-nav-separator {
height: 1px;
background: rgba(255,255,255,0.05);
margin: 4px 0;
}
.left-nav-item i {
width: 24px;
font-size: 16px;
color: #94a3b8;
margin-right: 12px;
text-align: center;
transition: all 0.25s ease;
}
.left-nav-item.active i,
.left-nav-item:hover i {
color: #ebd8b0 !important;
filter: drop-shadow(0 0 4px rgba(247, 216, 106, 0.75)) !important;
}
.left-nav-item.active span,
.left-nav-item:hover span {
background: linear-gradient(90deg, #ebd8b0 0%, #fff7d6 25%, #f7d86a 50%, #fff7d6 75%, #ebd8b0 100%) !important;
background-size: 200% auto !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
animation: left-nav-gold-sweep 3s linear infinite !important;
filter: drop-shadow(0 0 2px rgba(247, 216, 106, 0.5));
font-weight: 700 !important;
}
.left-nav-item .badge {
background: #e5c158 !important;
color: #061121 !important;
font-size: 12px;
font-weight: 700;
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 16px;
box-shadow: 0 0 8px rgba(229, 193, 88, 0.4);
}
.sidebar-collapse-trigger:hover i,
.sidebar-toggle-btn:hover i {
color: #ebd8b0 !important;
filter: drop-shadow(0 0 5px rgba(247, 216, 106, 0.8)) !important;
opacity: 1 !important;
}
.left-ai-assistant {
color: #f8fafc;
}
.left-nav-item i.circle-icon {
background: #10b981;
color: white;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
margin-right: 12px;
}
/* ── Mobile MENU pill (neon red) ─────────────────────────────────────
NAMING: the class and the element are still the "go back" / sidebar
collapse trigger — that is what it DOES (on mobile it leaves the open
deal and returns to the rooms screen). Only the label reads MENU, to
match the approved design. Renaming the hooks would have touched the
trigger's own handler for no behavioural gain, so the class stayed.
It was the same gold treatment as the invite / logout buttons, which
left the one control that exits a deal looking like the ones that act
inside it. Red is already this product's "menu / way out" colour (the
DEAL ROOM MENU card in the sidebar), so the two now read as one
family. The two-ring glow is what makes it read as neon rather than
as a red border: a tight ring for the tube, a wide soft one for the
bloom.
The look lives here rather than inline because .show-mobile-flex
drives visibility with `display:flex !important` — the element keeps
its inline `display:none`, so nothing here can fight that. */
.go-back-neon {
align-items: center;
gap: 11px;
padding: 8px 22px 9px 16px;
border-radius: 50px;
white-space: nowrap;
cursor: pointer;
color: #fff;
/* Top-lit: a bright crimson crown fading to a deep base, which is what
gives the pill its domed look instead of a flat swatch. The inset
highlight on the first row of pixels is the lit rim. */
background: linear-gradient(180deg, #ef2743 0%, #d4132d 42%, #a90d22 100%);
border: 2px solid #ff4257;
outline: none;
box-shadow:
0 0 0 1px rgba(255,45,67,.35),
0 0 20px rgba(255,45,67,.58),
0 0 48px rgba(255,45,67,.30),
inset 0 1.5px 1px rgba(255,205,212,.55),
inset 0 -3px 6px rgba(110,5,18,.5);
position: relative;
overflow: hidden; /* clips the shimmer sweep to the pill */
transition: box-shadow .25s ease, transform .2s ease;
}
/* Bare icon, no disc — the reference keeps the left glyph sitting directly
on the red so the pill reads as one piece. */
.go-back-neon .gb-ic { flex: 0 0 auto; display: flex; align-items: center; }
.go-back-neon .gb-ic i {
font-size: 16px; color: #fff !important;
filter: drop-shadow(0 1px 2px rgba(90,0,10,.6));
}
.go-back-neon .gb-tx {
display: flex; flex-direction: column; gap: 1px;
text-align: left; line-height: 1.2; min-width: 0;
}
.go-back-neon .gb-tx b {
font-size: 15px; font-weight: 800; letter-spacing: .6px; color: #fff;
text-shadow: 0 1px 2px rgba(90,0,10,.55);
}
.go-back-neon .gb-tx small {
font-size: 12.5px; font-weight: 600; letter-spacing: .1px;
color: rgba(255,255,255,.88);
}
.go-back-neon:active { transform: translateY(1px); }
.go-back-neon:focus-visible { outline: 2px solid #ff8f9c; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.go-back-neon { transition: none; }
.go-back-neon.go-back-shimmer::before { animation: none; }
}
/* GO BACK BUTTON SHIMMER */
.go-back-shimmer::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.35) 50%,
rgba(255, 255, 255, 0) 100%);
transform: rotate(45deg);
animation: buttonShimmer 4s infinite;
}
@keyframes buttonShimmer {
0% {
transform: rotate(45deg) translateY(100%);
}
100% {
transform: rotate(45deg) translateY(-100%);
}
}
/* MIDDLE CHAT AREA */
.deal-middle-area {
flex: 1;
display: flex;
flex-direction: column;
background: #0f1523;
min-width: 0;
}
.deal-top-bar {
height: 64px;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255,255,255,0.05);
background: rgba(15, 21, 35, 0.8);
backdrop-filter: blur(10px);
z-index: 10;
}
.deal-search-box {
display: flex;
align-items: center;
color: #94a3b8;
font-size: 15.5px;
gap: 8px;
}
.deal-room-mobile-back {
display: none;
background: transparent;
border: none;
color: #94a3b8;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 15.5px;
padding: 0 12px 0 0;
transition: color 0.2s;
white-space: nowrap;
}
.deal-room-mobile-back:hover {
color: #fff;
}
@media (max-width: 992px) {
.deal-room-mobile-back {
display: flex;
}
}
.deal-search-box i {
font-size: 16px;
color: #f8fafc;
}
.deal-top-stages {
display: flex;
align-items: center;
gap: 8px;
background: rgba(15, 21, 35, 0.4);
border-radius: 24px;
padding: 6px 14px;
border: 1px solid rgba(255,255,255,0.06);
backdrop-filter: blur(8px);
}
.deal-stage-item {
font-size: 14.5px;
color: #94a3b8;
font-weight: 600;
cursor: pointer;
padding: 6px 16px;
border-radius: 18px;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border: 1px solid transparent;
overflow: hidden;
min-width: fit-content;
}
.stage-hover-info {
position: absolute;
white-space: nowrap;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
font-size: 13px;
color: #fff;
font-weight: 700;
}
.deal-stage-item:hover .stage-name {
opacity: 0;
transform: translateY(-20px);
}
.deal-stage-item:hover .stage-hover-info {
opacity: 1;
transform: translateY(0);
}
.deal-stage-item i {
font-size: 12px;
transition: transform 0.3s ease;
}
.deal-stage-item.completed {
background: linear-gradient(135deg, #10b981, #059669);
color: #fff;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3), inset 0 0 10px rgba(255,255,255,0.1);
border-color: rgba(16, 185, 129, 0.4);
}
.deal-stage-item.active {
background: #0f172a;
color: #fff;
border-color: #10b981;
box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
animation: stagePulseHeader 2s infinite;
}
@keyframes stagePulseHeader {
0% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
border-color: rgba(16, 185, 129, 1);
}
70% {
box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
border-color: rgba(16, 185, 129, 0.5);
}
100% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
border-color: rgba(16, 185, 129, 0.8);
}
}
.deal-stage-item.active::before {
content: '';
width: 6px;
height: 6px;
background: #10b981;
border-radius: 50%;
display: inline-block;
margin-right: -2px;
box-shadow: 0 0 12px #10b981;
animation: pulseSimple 1s infinite alternate;
}
@keyframes pulseSimple {
from { opacity: 0.5; transform: scale(0.8); }
to { opacity: 1; transform: scale(1.2); }
}
.deal-stage-item.upcoming {
opacity: 0.35;
filter: grayscale(1);
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.05);
}
.deal-stage-item:hover:not(.completed):not(.active) {
background: rgba(255,255,255,0.05);
color: #fff;
}
.btn-open-deal {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
color: #fff !important;
border: 1px solid rgba(16, 185, 129, 0.5) !important;
padding: 8px 16px;
border-radius: 50px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 0 15px rgba(16, 185, 129, 0.3), inset 0 0 10px rgba(16, 185, 129, 0.2);
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 1;
gap: 8px;
min-width: 90px;
white-space: nowrap;
flex-shrink: 0;
}
.btn-open-deal::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0) 100%);
transform: rotate(45deg);
animation: buttonShimmer 4s infinite;
}
.btn-open-deal:hover {
transform: translateY(-2px);
box-shadow: 0 0 25px rgba(16, 185, 129, 0.5), inset 0 0 15px rgba(16, 185, 129, 0.3);
border-color: rgba(16, 185, 129, 0.8) !important;
}
.deal-top-actions {
display: flex;
align-items: center;
gap: 8px;
}
.btn-ai-assistant-top {
background: linear-gradient(135deg, #091428 0%, #050a15 100%) !important;
color: #fff !important;
border: 1px solid rgba(235, 216, 176, 0.5) !important;
padding: 8px 16px;
border-radius: 50px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 0 15px rgba(235, 216, 176, 0.55), inset 0 0 10px rgba(235, 216, 176, 0.35);
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 90px;
white-space: nowrap;
flex-shrink: 0;
}
.btn-ai-assistant-top::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%);
transform: rotate(45deg);
animation: buttonShimmer 3s infinite;
}
.btn-ai-assistant-top:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 0 25px rgba(235, 216, 176, 0.75), inset 0 0 20px rgba(235, 216, 176, 0.5);
border-color: rgba(235, 216, 176, 0.8) !important;
}
/* The endless spin belongs to the AI Assistant's robot and nothing else.
.btn-ai-assistant-top started as that one button but is now the generic
gold/dark button class across the deal room — Invite Participants, Copy
Invite, Create Room, Download Certificate, Got It — so an unscoped
`i` selector had a user-plus, a link and a checkmark all rotating 360°
every 4 seconds forever. Anchored to .fa-robot, which only the real
trigger carries. */
.btn-ai-assistant-top i.fa-robot {
animation: rotateAssistant 4s linear infinite;
}
.btn-summarize-top {
width: 32px;
height: 32px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #f8fafc;
cursor: pointer;
transition: all 0.3s;
}
.btn-summarize-top:hover {
background: rgba(255,255,255,0.15);
border-color: #10b981;
color: #10b981;
transform: scale(1.1);
}
.chat-sub-header {
padding: 16px 24px;
display: flex;
align-items: center;
gap: 24px;
}
.btn-summarize {
background: rgba(255,255,255,0.05);
color: #f8fafc;
border: 1px solid rgba(255,255,255,0.1);
padding: 8px 16px;
border-radius: 8px;
font-size: 14.5px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.chat-tabs {
display: flex;
gap: 24px;
}
.chat-tab {
font-size: 16px;
font-weight: 600;
color: #94a3b8;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
.chat-tab.active {
color: #f8fafc;
}
/* The Chat Body */
.chat-body-wrapper {
flex: 1;
display: flex;
overflow: hidden;
min-height: 0; /* Critical: allow flex shrinking so chat doesn't overflow parent */
}
.chat-gutter {
width: 60px;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
gap: 30px;
border-right: 1px solid rgba(255,255,255,0.03);
position: relative;
}
.chat-gutter::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
background: rgba(255,255,255,0.05);
z-index: 0;
}
.gutter-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: #1e293b;
color: #94a3b8;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
z-index: 1;
position: relative;
cursor: pointer;
}
.gutter-icon.red {
background: #ef4444;
color: white;
font-weight: bold;
}
.chat-messages-area {
flex: 1;
padding: 20px 24px;
overflow-y: auto;
position: relative;
min-height: 0; /* Allow flex shrinking */
}
/* Timeline Event */
.timeline-event {
display: flex;
gap: 16px;
margin-bottom: 24px;
position: relative;
}
.timeline-event::before {
content: '';
position: absolute;
left: 14px;
top: 28px;
bottom: -30px;
width: 2px;
background: rgba(16, 185, 129, 0.3); /* Teal line */
}
.timeline-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: #10b981;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
z-index: 1;
}
.timeline-content {
background: rgba(16, 185, 129, 0.05);
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: 8px;
padding: 12px 16px;
flex: 1;
max-width: 400px;
}
.timeline-title {
color: #f8fafc;
font-size: 15.5px;
font-weight: 500;
margin-bottom: 4px;
}
.timeline-subtitle {
color: #94a3b8;
font-size: 14px;
}
/* Chat Message */
.chat-msg {
display: flex;
gap: 16px;
margin-bottom: 30px;
}
.chat-msg .avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
.chat-msg .avatar.initials {
background: #065f46;
color: #34d399;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 15.5px;
}
.chat-msg-content {
flex: 1;
}
.chat-msg-header {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 6px;
}
.chat-msg-name {
color: #10b981;
font-weight: 600;
font-size: 15.5px;
}
.chat-msg-name.buyer {
color: #f8fafc;
}
.chat-msg-role {
color: #94a3b8;
font-size: 14px;
}
.chat-msg-time {
color: #64748b;
font-size: 13px;
margin-left: auto;
}
.chat-msg-body {
color: #e2e8f0;
font-size: 15.5px;
line-height: 1.5;
}
/* Floating Cards embedded in chat area for visual fidelity */
.embedded-card {
background: rgba(30, 41, 59, 0.5);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
padding: 12px;
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
width: fit-content;
}
.embedded-card .icon {
width: 32px;
height: 32px;
background: rgba(16, 185, 129, 0.1);
color: #10b981;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.embedded-card.blue .icon {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}
.embedded-card-text {
color: #f8fafc;
font-size: 14.5px;
font-weight: 500;
}
.embedded-card-sub {
color: #94a3b8;
font-size: 13px;
margin-top: 2px;
}
/* Chat Input Footer */
.chat-input-area {
padding: 20px 24px;
border-top: 1px solid rgba(255,255,255,0.05);
flex-shrink: 0; /* Never collapse the input area */
padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)); /* iOS safe area */
}
/* ── CHAT FIXED-INPUT LAYOUT ──
When chat tab is active, the entire flex chain from deal-middle-area
down to chat-input-area must be height-constrained so the input stays
pinned at the bottom while messages scroll independently.
*/
/* ── CHAT FIXED-INPUT LAYOUT ──
When chat tab is active or chat is visible, the entire flex chain from deal-middle-area
down to chat-input-area must be height-constrained so the input stays
pinned at the bottom while messages scroll independently.
*/
.deal-screens-wrapper.chat-active,
.deal-screens-wrapper:has(#deal-chat-view:not([style*="display: none"])) {
overflow: hidden !important;
padding-bottom: 0 !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: 0 !important;
flex: 1 1 0% !important;
}
#deal-chat-view {
display: none; /* default hidden */
flex-direction: column;
min-height: 0; /* critical for nested flex shrink */
width: 100%;
height: 100%;
flex: 1 1 0%;
overflow: hidden;
}
#deal-chat-view[style*="display: flex"],
#deal-chat-view[style*="display:flex"] {
display: flex !important;
flex-direction: column !important;
flex: 1 1 0% !important;
min-height: 0 !important;
height: 100% !important;
overflow: hidden !important;
}
/* ── Mobile Chat Layout Overrides ── */
@media (max-width: 1024px) {
/* Force the main container to be exactly the viewport height and non-scrollable */
.deal-room-container.locked-to-deal.chat-tab-active,
.deal-room-container.locked-to-deal:has(#deal-chat-view:not([style*="display: none"])) {
height: 100vh !important;
height: 100dvh !important;
height: var(--dr-vv-h, 100dvh) !important;
max-height: var(--dr-vv-h, 100dvh) !important;
overflow: hidden !important;
position: fixed !important;
inset: 0 !important;
z-index: 9999 !important;
overscroll-behavior: none !important;
}
body.hb-has-tabbar .deal-room-container.locked-to-deal.chat-tab-active,
body.hb-has-tabbar .deal-room-container.locked-to-deal:has(#deal-chat-view:not([style*="display: none"])),
body.hb-has-tabbar .deal-room-container.locked-to-deal,
body.hb-has-tabbar .deal-room-container {
inset: 0 0 calc(56px + env(safe-area-inset-bottom, 0px)) 0 !important;
height: calc(100vh - 56px - env(safe-area-inset-bottom, 0px)) !important;
height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px)) !important;
height: calc(var(--dr-vv-h, 100dvh) - 56px - env(safe-area-inset-bottom, 0px)) !important;
max-height: calc(var(--dr-vv-h, 100dvh) - 56px - env(safe-area-inset-bottom, 0px)) !important;
}
.deal-room-container.chat-tab-active .deal-middle-area,
.deal-room-container:has(#deal-chat-view:not([style*="display: none"])) .deal-middle-area {
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
flex: 1 1 0% !important;
overflow: hidden !important;
background: #0f1523 !important;
}
.deal-room-container.chat-tab-active .deal-screens-wrapper,
.deal-room-container:has(#deal-chat-view:not([style*="display: none"])) .deal-screens-wrapper {
flex: 1 1 0% !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
min-height: 0 !important;
height: 100% !important;
padding-bottom: 0 !important;
}
.deal-room-container.chat-tab-active #deal-chat-view,
.deal-room-container #deal-chat-view {
flex: 1 1 0% !important;
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
height: 100% !important;
overflow: hidden !important;
}
.deal-room-container.chat-tab-active .chat-body-wrapper,
.deal-room-container #deal-chat-view .chat-body-wrapper {
flex: 1 1 0% !important;
min-height: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
}
.deal-room-container.chat-tab-active .chat-messages-area,
.deal-room-container #deal-chat-view .chat-messages-area {
flex: 1 1 0% !important;
min-height: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding-bottom: 16px !important;
overscroll-behavior: contain !important;
display: flex !important;
flex-direction: column !important;
}
/* Pinned input for mobile */
.deal-room-container.chat-tab-active .chat-input-area,
.deal-room-container #deal-chat-view .chat-input-area {
flex-shrink: 0 !important;
background: #0b1322 !important;
border-top: 1px solid rgba(229, 193, 88, 0.18) !important;
position: relative !important;
bottom: 0 !important;
z-index: 100 !important;
width: 100% !important;
margin-top: auto !important;
padding: 10px 14px !important;
padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
}
body.hb-has-tabbar .deal-room-container #deal-chat-view .chat-input-area,
body.hb-has-tabbar .deal-room-container.chat-tab-active .chat-input-area {
padding-bottom: 10px !important;
}
/* Hide elements that take up too much vertical space on mobile chat */
.chat-gutter,
#deal-chat-view .chat-gutter,
.deal-room-container .chat-gutter,
.deal-room-container.chat-tab-active .chat-gutter,
.deal-room-container:has(#deal-chat-view:not([style*="display: none"])) .chat-gutter,
.deal-room-container.chat-tab-active .deal-top-bar,
.deal-room-container:has(#deal-chat-view:not([style*="display: none"])) .deal-top-bar {
display: none !important;
}
/* Ensure the input box looks good on mobile */
.deal-room-container.chat-tab-active .chat-input-box,
.deal-room-container #deal-chat-view .chat-input-box {
margin: 0 !important;
width: 100% !important;
}
}
/* Container query version for windowed mode */
@container (max-width: 1050px) {
.deal-room-container.chat-tab-active .deal-middle-area {
height: 100% !important;
min-height: 100% !important;
overflow: hidden !important;
flex: 1 1 0% !important;
}
.deal-room-container.chat-tab-active .deal-screens-wrapper {
flex: 1 !important;
overflow: hidden !important;
min-height: 0 !important;
padding-bottom: 0 !important;
}
.deal-room-container.chat-tab-active .chat-gutter {
display: none !important;
}
}
.chat-input-box {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 30px;
padding: 8px 16px;
display: flex;
align-items: center;
gap: 8px;
}
.chat-input-box i {
color: #94a3b8;
font-size: 20px;
cursor: pointer;
}
.chat-input-box i:hover {
color: #fff;
}
.chat-input-box input {
flex: 1;
background: transparent;
border: none;
color: #f8fafc;
font-size: 16px;
outline: none;
padding: 8px 0;
}
.chat-input-box input::placeholder {
color: #64748b;
}
.btn-send {
background: #00cc99;
color: #fff;
border: none;
border-radius: 12px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
transition: all 0.2s;
}
.btn-send:hover {
background: #00b386;
}
/* ── Deal chat composer — premium aurora theme ──
Scoped to #deal-chat-view so the generic .chat-input-box/.btn-send
rules above keep serving any other chat surfaces untouched. */
#deal-chat-view .chat-input-area {
padding: 16px 24px 12px;
border-top: 1px solid rgba(229, 193, 88, 0.16);
background: linear-gradient(180deg, rgba(13, 20, 36, 0.4), rgba(8, 13, 24, 0.95));
padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
position: relative;
}
/* floating glowing particles around the composer */
#deal-chat-view .composer-fx {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
#deal-chat-view .composer-fx i {
position: absolute;
bottom: -6px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--fx, #ffd98a);
box-shadow: 0 0 10px var(--fx, #ffd98a), 0 0 20px var(--fx, #ffd98a);
opacity: 0;
animation: cfxFloat var(--d, 7s) ease-in-out infinite;
animation-delay: var(--dl, 0s);
}
@keyframes cfxFloat {
0% { transform: translateY(0) scale(.6); opacity: 0; }
12% { opacity: .9; }
55% { opacity: .55; }
100% { transform: translateY(-92px) translateX(var(--dx, 8px)) scale(1.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
#deal-chat-view .composer-fx { display: none; }
}
#deal-chat-view .chat-input-box {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 10px 9px 12px;
background: linear-gradient(180deg, #141e35, #0e1628);
border: none;
border-radius: 999px; /* fully rounded pill */
position: relative;
z-index: 1;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* crisp gold border ring — steady, no color cycling */
#deal-chat-view .chat-input-box::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.6px;
background: linear-gradient(135deg, rgba(243, 226, 179, 0.9), rgba(229, 193, 88, 0.55) 45%, rgba(202, 166, 63, 0.75));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
opacity: .6;
transition: opacity .2s;
}
/* soft steady gold halo behind the ring */
#deal-chat-view .chat-input-box::before {
content: "";
position: absolute;
inset: -5px;
border-radius: inherit;
background: rgba(229, 193, 88, 0.45);
filter: blur(18px);
opacity: .18;
z-index: -1;
pointer-events: none;
transition: opacity .25s;
}
#deal-chat-view .chat-input-box:focus-within::after { opacity: 1; }
#deal-chat-view .chat-input-box:focus-within::before { opacity: .4; }
#deal-chat-view .chat-action-btn {
width: 44px;
height: 44px;
border-radius: 50%;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.09);
color: #9aa6bb;
cursor: pointer;
transition: all 0.2s;
margin: 0;
}
#deal-chat-view .chat-action-btn i {
font-size: 16px;
color: inherit;
}
#deal-chat-view .chat-action-btn:hover {
color: #ffe9bd;
border-color: rgba(229, 193, 88, 0.5);
background: rgba(229, 193, 88, 0.10);
box-shadow: 0 0 12px rgba(229, 193, 88, 0.18);
}
/* Privacy-prompt toggle — shield icon + an actual on/off switch
(track + sliding knob), not just a highlighted button, so its
state reads unambiguously at a glance. */
/* ── message-privacy toggle ────────────────────────────────────────────
Icon disc + "ON" | track | "OFF". The labels are a fixed legend, and the
one matching the current state is the one that lights up — so the state
is legible without decoding which end the knob is sitting at. */
#deal-chat-view .msg-visibility-toggle {
display: flex;
align-items: center;
gap: 7px;
height: 44px;
padding: 0 10px;
border-radius: 999px;
flex: 0 0 auto;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.09);
color: #9aa6bb;
cursor: pointer;
transition: all 0.2s;
}
/* the shield sits in its own darker disc, so it reads as the control's
badge rather than as a third thing in the row */
#deal-chat-view .msg-visibility-ic {
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(0, 0, 0, 0.34);
border: 1px solid rgba(255, 255, 255, 0.10);
transition: all 0.2s;
}
#deal-chat-view .msg-visibility-toggle i {
font-size: 14.5px;
color: inherit;
line-height: 1;
}
#deal-chat-view .msg-visibility-lbl {
flex: 0 0 auto;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.6px;
line-height: 1;
color: rgba(255, 255, 255, 0.28);
transition: color 0.2s, text-shadow 0.2s;
}
#deal-chat-view .msg-visibility-toggle:hover {
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.07);
}
#deal-chat-view .msg-visibility-switch {
width: 32px;
height: 18px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.16);
position: relative;
flex: 0 0 auto;
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
#deal-chat-view .msg-visibility-switch-knob {
position: absolute;
top: 1px;
left: 1px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #cbd5e1;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
transition: transform 0.2s, background 0.2s;
}
/* OFF is the resting state — dim the "ON" legend and mark "OFF" as current */
#deal-chat-view .msg-visibility-toggle[data-active="false"] .mv-off {
color: #ff8f6b;
}
/* ON — green, matching the reference. Track fills, knob travels right, and
the "ON" legend takes the accent while "OFF" drops back to neutral. */
#deal-chat-view .msg-visibility-toggle[data-active="true"] {
color: #d6ffe8;
border-color: rgba(62, 233, 140, 0.45);
background: rgba(62, 233, 140, 0.09);
}
#deal-chat-view .msg-visibility-toggle[data-active="true"] .msg-visibility-ic {
background: rgba(62, 233, 140, 0.16);
border-color: rgba(62, 233, 140, 0.5);
color: #3ee98c;
}
#deal-chat-view .msg-visibility-toggle[data-active="true"] .mv-on {
color: #3ee98c;
text-shadow: 0 0 8px rgba(62, 233, 140, 0.55);
}
#deal-chat-view .msg-visibility-toggle[data-active="true"] .msg-visibility-switch {
background: linear-gradient(135deg, #5df3a5, #22c55e);
border-color: #22c55e;
box-shadow: 0 0 10px rgba(62, 233, 140, 0.45);
}
#deal-chat-view .msg-visibility-toggle[data-active="true"] .msg-visibility-switch-knob {
background: #ffffff;
transform: translateX(14px);
}
/* Very narrow composers: drop the legend rather than let the control squeeze
the message field. The disc + track still carry the state. */
@media (max-width: 420px) {
#deal-chat-view .msg-visibility-lbl { display: none; }
#deal-chat-view .msg-visibility-toggle { gap: 6px; padding: 0 9px; }
}
#deal-chat-view .chat-input-box input#chatMessage {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
color: #f8fafc;
font-size: 16.5px;
padding: 10px 2px;
}
#deal-chat-view .chat-input-box input#chatMessage::placeholder {
color: #6f7d92;
}
#deal-chat-view .btn-send {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: auto;
height: 44px;
padding: 0 24px;
border: none;
border-radius: 999px;
background: linear-gradient(135deg, #f3e2b3 0%, #e5c158 55%, #caa63f 100%);
color: #1a1205;
font-size: 15.5px;
font-weight: 800;
letter-spacing: 0.3px;
cursor: pointer;
flex: 0 0 auto;
box-shadow: 0 6px 18px rgba(229, 193, 88, 0.30);
transition: transform 0.15s, box-shadow 0.2s;
}
#deal-chat-view .btn-send i, .btn-send i {
font-size: 15.5px;
color: #1a1205 !important;
fill: #1a1205 !important;
}
#deal-chat-view .btn-send:hover {
background: linear-gradient(135deg, #f7e9c2 0%, #eac967 55%, #d4af47 100%);
transform: translateY(-1px);
box-shadow: 0 10px 26px rgba(229, 193, 88, 0.45);
}
#deal-chat-view .btn-send:active {
transform: translateY(0) scale(0.98);
}
#deal-chat-view .btn-send:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
#deal-chat-view .chat-input-hint {
margin-top: 8px;
text-align: center;
font-size: 13.5px;
color: #5f6c82;
letter-spacing: 0.2px;
}
#deal-chat-view .chat-input-hint b {
color: #a7b2c5;
font-weight: 700;
}
@media (max-width: 640px) {
#deal-chat-view .btn-send {
padding: 0 16px;
}
#deal-chat-view .btn-send .btn-send-label {
display: none;
}
#deal-chat-view .chat-input-hint {
display: none;
}
}
/* ── Deal chat messages — premium polish (overrides the base bubble
styles from deal-room.php via the #deal-chat-view scope) ── */
/* Galaxy backdrop: deep-space base on the wrapper, star layer behind,
gutter + messages above it. Matches the timeline's cosmic design. */
#deal-chat-view .chat-body-wrapper {
position: relative;
flex: 1 1 0% !important;
min-height: 0 !important;
display: flex !important;
/* row, not column. The gutter is a LEFT RAIL beside the message
list, not a block above it. It is 60px wide with five stacked
icons, so as a column flex item it claimed its ~260px intrinsic
height across the top of the chat — a band of empty starfield
with the icon strip down its left edge — and squeezed the
conversation into whatever was left. That is the chat "breaking
in half". Row restores the original rail-beside-messages layout.
The ≤1024px block above keeps column for mobile via
`.deal-room-container #deal-chat-view .chat-body-wrapper`, which
outranks this rule; there the gutter is display:none, so the
direction only decides how the lone message list stretches. */
flex-direction: row !important;
overflow: hidden !important;
background:
radial-gradient(1100px 620px at 18% -8%, #0b1226 0%, transparent 60%),
radial-gradient(850px 540px at 92% 108%, #120b22 0%, transparent 55%),
#05080f;
}
#deal-chat-view .chat-stars {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
#deal-chat-view .chat-stars i {
position: absolute;
background: #cfe2ff;
border-radius: 50%;
opacity: .7;
animation: chatTwk var(--d, 4s) ease-in-out infinite;
}
@keyframes chatTwk {
0%, 100% { opacity: .10; }
50% { opacity: .85; }
}
#deal-chat-view .chat-stars .neb {
position: absolute;
border-radius: 50%;
filter: blur(70px);
opacity: .07;
}
/* Narrow layouts: the nebula discs span most of the chat and read as
strange translucent circles — keep the starfield, drop the discs. */
@media (max-width: 1024px) {
#deal-chat-view .chat-stars .neb { display: none !important; }
}
.chat-interface.windowed #deal-chat-view .chat-stars .neb { display: none !important; }
@container (max-width: 1050px) {
#deal-chat-view .chat-stars .neb { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
#deal-chat-view .chat-stars i { animation: none; opacity: .35; }
}
#deal-chat-view .chat-gutter,
#deal-chat-view .chat-messages-area {
position: relative;
z-index: 1;
}
/* ── Deal chat — glowing liquid glass ─────────────────────────────
Shared look for every breakpoint: heavily frosted glass tinted by
the sender, a specular sheen raked across the top-left, a lit
inner rim, a glowing accent rail and a colored bloom underneath.
Every accent is driven by --hb-pc, which resolves to the sender's
own color (--pc, set inline on .msg-row by appendMessage) and
falls back to the house gold for the viewer's own messages.
LAYOUT is per breakpoint and lives in the two blocks further
down: desktop keeps the classic left/right bubble conversation,
phones get the full-bleed stacked cards from the design spec. */
#deal-chat-view .chat-messages-area {
display: flex;
flex-direction: column;
flex: 1 1 0% !important;
min-height: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
gap: 14px;
padding: 20px 24px 24px;
background: linear-gradient(180deg,
rgba(16, 20, 31, 0.95) 0%,
rgba(8, 10, 18, 0.95) 100%);
}
#deal-chat-view .msg-row {
position: relative;
max-width: 100%;
margin: 0;
--hb-pc: var(--pc, #f1c453);
animation: hbGlassIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hbGlassIn {
from { opacity: 0; transform: translateY(10px) scale(0.985); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
#deal-chat-view .msg-row { animation: none; }
}
/* base .gap adds a stray top margin — the flex gutter handles spacing */
#deal-chat-view .msg-row.gap {
margin-top: 0;
}
/* a message the viewer isn't cleared to read has no sender color —
keep it slate so it never reads as one of the viewer's own cards */
#deal-chat-view .msg-row.msg-restricted {
--hb-pc: #64748b;
}
/* avatar — glowing ring in the sender's color. Direct child only:
appendMessage also puts class="avatar" on the ![]()
inside. */
#deal-chat-view .msg-row > .avatar {
margin: 0;
border-radius: 50%;
overflow: hidden;
background: color-mix(in srgb, var(--hb-pc) 16%, #10141f);
border: 1.5px solid color-mix(in srgb, var(--hb-pc) 72%, transparent);
box-shadow:
0 0 14px color-mix(in srgb, var(--hb-pc) 45%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
#deal-chat-view .msg-row > .avatar img,
#deal-chat-view .msg-row > .avatar .avatar-initials {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
border: 0;
}
/* the glass surface — direct child only, so the nested .file-bubble
attachment tile keeps its own compact styling */
#deal-chat-view .bubble-wrap {
position: relative;
gap: 0;
}
#deal-chat-view .msg-row .bubble-wrap > .bubble {
position: relative;
font-size: 16px;
line-height: 1.6;
color: #eaf0fb;
overflow: hidden;
background:
/* raked specular highlight */
linear-gradient(158deg,
rgba(255, 255, 255, 0.11) 0%,
rgba(255, 255, 255, 0.02) 26%,
transparent 52%),
/* sender tint, corner to corner */
linear-gradient(135deg,
color-mix(in srgb, var(--hb-pc) 20%, transparent) 0%,
color-mix(in srgb, var(--hb-pc) 6%, transparent) 48%,
color-mix(in srgb, var(--hb-pc) 13%, transparent) 100%),
/* frosted body */
rgba(18, 23, 36, 0.62);
border: 1px solid color-mix(in srgb, var(--hb-pc) 34%, rgba(255, 255, 255, 0.10));
box-shadow:
0 0 0 1px color-mix(in srgb, var(--hb-pc) 8%, transparent),
0 0 34px -4px color-mix(in srgb, var(--hb-pc) 34%, transparent),
0 14px 34px -10px rgba(0, 0, 0, 0.72),
0 2px 8px rgba(0, 0, 0, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.20),
inset 0 -1px 0 rgba(0, 0, 0, 0.28),
inset 0 0 22px -8px color-mix(in srgb, var(--hb-pc) 45%, transparent);
backdrop-filter: blur(26px) saturate(1.9) brightness(1.06);
-webkit-backdrop-filter: blur(26px) saturate(1.9) brightness(1.06);
transition:
box-shadow 0.28s ease,
border-color 0.28s ease,
transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
#deal-chat-view .msg-row .bubble-wrap > .bubble:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--hb-pc) 55%, transparent);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--hb-pc) 14%, transparent),
0 0 46px -2px color-mix(in srgb, var(--hb-pc) 48%, transparent),
0 20px 44px -12px rgba(0, 0, 0, 0.80),
inset 0 1px 0 rgba(255, 255, 255, 0.28),
inset 0 -1px 0 rgba(0, 0, 0, 0.30),
inset 0 0 28px -8px color-mix(in srgb, var(--hb-pc) 55%, transparent);
}
/* glowing accent rail — also neutralises the generic blurred
.bubble::before halo inherited from the site-wide chat styles.
Which edge it hugs is set per breakpoint below. */
#deal-chat-view .msg-row .bubble-wrap > .bubble::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
z-index: 3;
border-radius: 0;
filter: none;
opacity: 1;
background: linear-gradient(180deg,
color-mix(in srgb, var(--hb-pc) 30%, #fff) 0%,
var(--hb-pc) 42%,
color-mix(in srgb, var(--hb-pc) 30%, transparent) 100%);
box-shadow:
0 0 10px color-mix(in srgb, var(--hb-pc) 90%, transparent),
0 0 22px color-mix(in srgb, var(--hb-pc) 55%, transparent);
}
/* wet-glass overlay: top-left gloss, a diagonal refraction streak
and a colored bounce light off the bottom-right corner */
#deal-chat-view .msg-row .bubble-wrap > .bubble::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(140% 62% at 16% -12%, rgba(255, 255, 255, 0.16), transparent 56%),
linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, 0.07) 44%, transparent 56%),
radial-gradient(100% 48% at 88% 114%, color-mix(in srgb, var(--hb-pc) 22%, transparent), transparent 62%);
}
#deal-chat-view .msg-row .bubble-wrap > .bubble > * {
position: relative;
z-index: 1;
}
/* header row — reading direction is set per breakpoint below */
#deal-chat-view .sender-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid color-mix(in srgb, var(--hb-pc) 16%, rgba(255, 255, 255, 0.05));
}
#deal-chat-view .sender-name {
font-size: 14px;
font-weight: 700;
color: var(--hb-pc);
text-shadow: 0 0 12px color-mix(in srgb, var(--hb-pc) 45%, transparent);
}
#deal-chat-view .role-badge {
font-size: 12.5px;
font-weight: 700;
padding: 2px 9px;
border-radius: 999px;
color: color-mix(in srgb, var(--hb-pc) 80%, #fff);
background: color-mix(in srgb, var(--hb-pc) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--hb-pc) 34%, transparent);
}
/* the guest-role badge renders empty for non-guest senders — hide the
dash-looking empty pill entirely */
#deal-chat-view .role-badge:empty {
display: none;
}
#deal-chat-view .you-tag {
font-size: 12.5px;
font-weight: 700;
color: color-mix(in srgb, var(--hb-pc) 75%, #fff);
}
/* the Access / Edit Text / Ask Concierge chips carry inline styles
from appendMessage — !important is the only way to size them into
the same pill rhythm as the role badges */
#deal-chat-view .editMsgVisibility,
#deal-chat-view .editMsgText,
#deal-chat-view .askConcierge {
margin-left: 0 !important;
padding: 3px 10px !important;
border-radius: 999px !important;
font-size: 12.5px !important;
line-height: 1.35 !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
#deal-chat-view .editMsgVisibility:hover,
#deal-chat-view .askConcierge:hover {
box-shadow: 0 0 12px rgba(229, 193, 88, 0.35);
}
#deal-chat-view .editMsgText:hover {
box-shadow: 0 0 14px rgba(235, 216, 176, 0.45);
}
#deal-chat-view .msg-text-content {
font-size: 16px;
font-weight: 500;
color: #eef2fb;
text-shadow: 0 0 14px color-mix(in srgb, var(--hb-pc) 30%, transparent);
}
/* attachment tile nested inside a card — same glass, half the scale */
#deal-chat-view .bubble .bubble.file-bubble {
width: 100%;
max-width: 100%;
min-height: 0;
margin-top: 8px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(12, 16, 26, 0.55);
border: 1px solid color-mix(in srgb, var(--hb-pc) 28%, rgba(255, 255, 255, 0.08));
backdrop-filter: blur(10px) saturate(1.2);
-webkit-backdrop-filter: blur(10px) saturate(1.2);
}
#deal-chat-view .bubble .bubble.file-bubble::before,
#deal-chat-view .bubble .bubble.file-bubble::after {
display: none;
}
#deal-chat-view .bubble .file-icon {
background: color-mix(in srgb, var(--hb-pc) 18%, transparent);
color: var(--hb-pc);
}
/* viewers + timestamp — placement is per breakpoint below */
#deal-chat-view .msg-time {
display: flex;
align-items: center;
gap: 5px;
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.2px;
color: #93a1b8; /* readable on the dark backdrop */
}
#deal-chat-view .read-check span {
border-right-color: var(--hb-pc);
border-bottom-color: var(--hb-pc);
}
/* ── DESKTOP layout — the classic conversation: bubbles hug their
own side, avatar alongside, timestamp beneath. Only the glass
treatment above is new. ── */
@media (min-width: 769px) {
#deal-chat-view .msg-row {
display: flex;
gap: 12px;
align-items: flex-start;
}
#deal-chat-view .msg-row.self {
flex-direction: row-reverse;
}
#deal-chat-view .msg-row > .avatar {
width: 38px;
height: 38px;
flex-shrink: 0;
}
#deal-chat-view .msg-row > .avatar .avatar-initials {
font-size: 15.5px !important;
}
#deal-chat-view .bubble-wrap {
max-width: 78% !important;
}
#deal-chat-view .msg-row.self .bubble-wrap {
align-items: flex-end !important;
}
#deal-chat-view .msg-row .bubble-wrap > .bubble {
width: fit-content;
max-width: 100%;
padding: 13px 17px;
border-radius: 20px;
border-bottom-left-radius: 7px;
}
#deal-chat-view .msg-row.self .bubble-wrap > .bubble {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 7px;
}
/* the viewer's own messages sit on the right — flip the rail to
the inner edge so it always points at the conversation */
#deal-chat-view .msg-row.self .bubble-wrap > .bubble::before {
inset: 0 0 0 auto;
}
/* name first for other people, name nearest the avatar for you */
#deal-chat-view .msg-row.self .sender-line {
flex-direction: row-reverse;
justify-content: flex-start;
}
#deal-chat-view .msg-viewer-summary {
margin-top: 8px !important;
}
#deal-chat-view .msg-row.self .msg-viewer-summary {
flex-direction: row-reverse;
}
#deal-chat-view .msg-time {
margin-top: 6px;
padding: 0 4px;
}
}
/* ── PHONE layout — the design-spec cards: full-bleed glass, badge
row + 32px avatar across the top, viewers/timestamp pinned to a
reserved strip along the bottom. ── */
@media (max-width: 768px) {
#deal-chat-view .msg-row,
#deal-chat-view .msg-row.self {
display: block;
width: 100%;
}
#deal-chat-view .msg-row > .avatar {
position: absolute;
top: 12px;
right: 16px;
z-index: 3;
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
}
#deal-chat-view .msg-row > .avatar .avatar-initials {
font-size: 14px !important;
}
#deal-chat-view .bubble-wrap {
width: 100%;
max-width: 100% !important;
align-items: stretch !important;
}
#deal-chat-view .msg-row .bubble-wrap > .bubble {
width: 100%;
max-width: 100%;
min-height: 72px;
padding: 12px 16px 34px !important;
border-radius: 16px !important;
font-size: 15.5px !important;
}
/* row-reverse + flex-end reproduces the spec's reading direction:
each line stays flush left, but runs Access → (You) → role →
sender name, so the name lands beside its avatar */
#deal-chat-view .sender-line,
#deal-chat-view .msg-row.self .sender-line {
flex-direction: row-reverse !important;
justify-content: flex-end !important;
min-height: 32px;
padding: 0 44px 8px 0;
}
#deal-chat-view .msg-viewer-summary {
position: absolute !important;
left: 16px;
bottom: 11px;
margin-top: 0 !important;
z-index: 2;
}
#deal-chat-view .msg-row .msg-time,
#deal-chat-view .msg-row.self .msg-time {
position: absolute;
right: 16px;
bottom: 11px;
z-index: 4;
margin: 0;
padding: 0;
}
}
#deal-chat-view .no-chat,
#deal-chat-view .chat-loader {
text-align: center;
color: #6f7d92;
font-size: 15.5px;
padding: 32px 0;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
margin: auto 0;
}
@media (max-width: 768px) {
#deal-chat-view .chat-messages-area {
padding: 12px 12px 18px !important;
gap: 12px;
}
#deal-chat-view .msg-row {
margin-bottom: 0 !important;
}
#deal-chat-view .sender-line {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
}
#deal-chat-view .sender-name,
#deal-chat-view .role-badge,
#deal-chat-view .you-tag,
#deal-chat-view .editMsgVisibility,
#deal-chat-view .editMsgText {
white-space: nowrap !important;
word-break: keep-all !important;
flex-shrink: 0 !important;
}
/* nested attachment tile stays compact inside the card */
#deal-chat-view .bubble .bubble.file-bubble {
padding: 10px 12px !important;
min-height: 0 !important;
}
#tempChatPartsBar > div {
padding: 8px 12px !important;
}
#tempChatPartsToggle {
font-size: 15px !important;
gap: 7px !important;
}
/* "Participants (2) ^" and the gold Invite button on one row at
phone width. The button is the full-size gold pill from
css/deal-room.css (15px, 2px border + outline), so together they
came to ~430px and the button ran off the right edge of a 375px
screen. The label now gives way (shrinks, then ellipsis) and the
button is a compact pill that never shrinks below its text. */
#tempChatPartsBar > div {
flex-wrap: nowrap !important;
gap: 10px !important;
}
#tempChatPartsToggle {
flex: 1 1 auto !important;
min-width: 0 !important;
white-space: nowrap !important;
}
#tempChatPartsToggle > span:first-of-type {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
#tempChatPartsToggle > i,
#tempChatPartsCount {
flex: 0 0 auto;
}
#tempChatPartsBar .add-temp-participant {
flex: 0 0 auto !important;
max-width: 100% !important;
padding: 7px 14px !important;
font-size: 13.5px !important;
gap: 6px !important;
box-sizing: border-box !important;
}
#tempChatPartsBar .add-temp-participant > i {
font-size: 13px !important;
}
#tempChatPartsPanel {
padding: 0 12px 12px !important;
max-height: 220px !important;
}
#tempChatPartsPanel > div {
padding: 8px 10px !important;
gap: 8px !important;
}
#deal-chat-view .chat-input-area {
padding: 10px 12px !important;
}
#deal-chat-view .chat-input-box {
gap: 6px !important;
padding: 6px 8px 6px 10px !important;
}
#deal-chat-view .chat-action-btn {
width: 36px !important;
height: 36px !important;
}
#deal-chat-view .chat-action-btn i {
font-size: 15.5px !important;
}
#deal-chat-view .chat-input-box input#chatMessage {
font-size: 15.5px !important;
padding: 4px 2px !important;
}
#deal-chat-view .btn-send {
height: 36px !important;
padding: 0 14px !important;
font-size: 14px !important;
}
}
/* iPhone SE and smaller: drop the button's icon and tighten the label,
so "Invite Participants" still reads in full. */
@media (max-width: 400px) {
#tempChatPartsBar > div { gap: 8px !important; padding: 8px 10px !important; }
#tempChatPartsToggle { font-size: 14px !important; gap: 6px !important; }
#tempChatPartsToggle > i.fa-users { font-size: 14px !important; }
#tempChatPartsBar .add-temp-participant { padding: 7px 12px !important; font-size: 13px !important; }
#tempChatPartsBar .add-temp-participant > i { display: none !important; }
}
/* ── Participants (external deal room) — liquid-glass cards,
one glowing accent per person (--pc set by loadTempParticipants,
matching that person's chat bubble color) ── */
.temp-participant-card {
position: relative;
display: flex;
/* flex-start, not center: these cards hold one to three text rows, and
centring floated the avatar to the middle of a tall block instead of
sitting with the name. Top-aligned, every avatar in the row lines up. */
align-items: flex-start;
gap: 14px;
/* right padding reserves the corner the × / revoke control is absolutely
positioned into, so a long name never runs underneath it */
padding: 16px 38px 15px 16px;
/* floor the height so a one-line card (owner) doesn't look starved next to
a three-line one; the grid's align-items:stretch then squares off each row */
min-height: 104px;
box-sizing: border-box;
border-radius: 16px;
/* Neutral card, accent only where it identifies the person.
It used to wash the whole card in --pc plus an outer glow, so eight
cards side by side read as eight coloured panels competing for
attention. The reference keeps the surface calm and lets the avatar
ring and the role line carry the colour — which is what makes a
roster scannable. */
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
transition: border-color .18s ease, background .18s ease;
overflow: hidden;
}
.temp-participant-card:hover {
background: rgba(255, 255, 255, 0.045);
border-color: color-mix(in srgb, var(--pc, #e5c158) 38%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
.temp-participant-card:hover { border-color: rgba(255, 255, 255, 0.2); }
}
.tpc-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 800;
letter-spacing: 0.5px;
color: var(--pc, #e5c158);
background: color-mix(in srgb, var(--pc, #e5c158) 16%, transparent);
border: 1.5px solid color-mix(in srgb, var(--pc, #e5c158) 55%, transparent);
box-shadow: 0 0 12px color-mix(in srgb, var(--pc, #e5c158) 30%, transparent);
}
/* Text column. min-width:0 is what actually lets the name ellipsis work —
without it the flex item refuses to shrink below its content and the
card overflows instead of truncating. */
.temp-participant-card .tpc-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.temp-participant-card .tpc-name {
color: #ffffff;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Role + optional job title, on exactly one line.
This was a two-line clamp, which let "Escrow Coordinator · FirstEscrow
Nationwide" take a second row — and because the grid sizes each row to its
tallest card, one long title made a whole row taller than its neighbours
and the roster came out stepped. One line each means every card is the
same three rows of text and the grid squares off cleanly; the full string
stays reachable through the title attribute the renderer sets. nowrap on
the row itself keeps the Co-Owner pill and the edit pencil welded to the
role rather than dropping below it — the text ellipsis absorbs the
pressure instead. */
.temp-participant-card .tpc-role {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 6px;
min-width: 0;
}
.temp-participant-card .tpc-role > .tpc-role-tx {
color: var(--pc, #e5c158);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.temp-participant-card .tpc-role > .tpc-role-tx .t {
color: #8a94a6;
font-weight: 500;
}
/* Status line: keep the dot/hourglass welded to its label. Wrapping split
"Invited — awaiting join" and left the icon stranded on its own row. */
/* Status and the resend action share one wrapping row. Stacking the button
below the status made the pending card a row taller than every other card,
and since the grid squares off each row that surplus became dead space in
the short cards beside it. Side by side they fit on one line whenever the
column is wide enough, and wrap only when it truly isn't. */
.temp-participant-card .tpc-foot {
margin-top: 4px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
row-gap: 7px;
min-width: 0;
}
/* Message button — right-aligned, self-centred so it sits with the name
rather than dropping to the bottom of a tall card. */
.temp-participant-card .tpc-msg {
flex: 0 0 auto;
align-self: center;
display: inline-flex;
align-items: center;
gap: 7px;
margin-left: 4px;
padding: 8px 13px;
border-radius: 9px;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 700;
color: #cbd5e1;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
transition: background .18s ease, border-color .18s ease, color .18s ease;
white-space: nowrap;
}
.temp-participant-card .tpc-msg i { font-size: 13px; color: inherit !important; }
.temp-participant-card .tpc-msg:hover {
background: color-mix(in srgb, var(--pc, #e5c158) 16%, transparent);
border-color: color-mix(in srgb, var(--pc, #e5c158) 50%, transparent);
color: #ffffff;
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
.temp-participant-card .tpc-msg:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.3);
}
}
/* the card reserves room for the × control on the right; with the Message
button there too the reserve is no longer needed on that edge */
.temp-participant-card { padding-right: 16px; }
/* ── Participants toolbar + footer ─────────────────────────────────── */
/* == PARTICIPANTS TAB - THE GROUND IT ALL SITS ON =====================
The roster used to inherit the chat shell's mid-navy, which left every
panel in here floating on the same value as itself: a table at 2.5%
white over a mid-navy has almost nothing to be lighter THAN, so nothing
read as lifted and the whole tab went flat.
So the tab paints its own ground, and paints it far deeper than the
panels standing on it: near-black at the centre, with two low-amplitude
blooms (the roster's own gold top-left, a cool blue opposite) and a
vignette closing the corners. Those blooms sit at 5-7% - enough that a
large dark area does not read as dead space, nowhere near enough to
compete with a row's accent, which is what should carry colour here.
background-attachment stays at the default `scroll`, stated explicitly
because it is the one that matters here: this element IS the scroll
container, and `local` would drag the vignette down the page with the
rows - on a long roster its centre would end up somewhere below the
fold. The ground stays put and the content moves over it. */
#deal-participants-view {
background-color: #04060c;
background-image:
radial-gradient(72% 46% at 8% -4%, rgba(235,216,176,.07) 0%, transparent 62%),
radial-gradient(64% 44% at 100% 104%, rgba(74,169,255,.055) 0%, transparent 66%),
radial-gradient(120% 90% at 50% 40%, #070b16 0%, #05070e 54%, #03050a 100%);
background-repeat: no-repeat;
background-attachment: scroll;
}
.hbp-tools {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 18px;
}
.hbp-search {
position: relative; flex: 1 1 240px; min-width: 0;
}
.hbp-search i {
position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
color: #7d8798; font-size: 14px; pointer-events: none;
}
.hbp-search input {
width: 100%; box-sizing: border-box;
background: linear-gradient(180deg, #0c1424 0%, #080e1b 100%);
border: 1px solid rgba(255,255,255,.11);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.4);
border-radius: 10px; padding: 11px 12px 11px 36px;
color: #e6edf8; font-family: inherit; font-size: 14.5px; outline: none;
transition: border-color .18s ease;
}
.hbp-search input:focus { border-color: rgba(229,193,88,.6); }
.hbp-search input::placeholder { color: #7d8798; }
.hbp-roles {
flex: 0 0 auto; color-scheme: dark;
background: linear-gradient(180deg, #0c1424 0%, #080e1b 100%);
border: 1px solid rgba(255,255,255,.11);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.4);
border-radius: 10px; padding: 11px 12px;
color: #e6edf8; font-family: inherit; font-size: 14.5px; outline: none;
min-width: 140px; cursor: pointer;
}
.hbp-roles option { background: #111a2b; color: #eef2fa; }
.hbp-foot {
display: flex; align-items: center; justify-content: center;
gap: 14px; flex-wrap: wrap; margin-top: 20px;
}
.hbp-count { color: #8a94a6; font-size: 14px; font-weight: 600; }
.hbp-more {
display: inline-flex; align-items: center; gap: 7px;
background: none; border: 0; cursor: pointer; padding: 6px 4px;
color: #e5c158; font-family: inherit; font-size: 14px; font-weight: 800;
}
.hbp-more:hover { color: #ffe08a; text-decoration: underline; }
.hbp-empty {
grid-column: 1 / -1; padding: 30px 10px; text-align: center;
color: #8a94a6; font-size: 14.5px;
}
/* ── Participants roster header ─────────────────────────────────────── */
.hbp-head {
display: flex; align-items: flex-start; justify-content: space-between;
flex-wrap: wrap; gap: 14px; margin-bottom: 20px;
}
.hbp-head-l { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.hbp-head-tx { min-width: 0; }
.hbp-title {
margin: 0; color: #f0dfa6; font-size: 19px; font-weight: 700;
line-height: 1.3; letter-spacing: .1px;
}
/* the room reference only earns its space once a room is loaded — the
renderers set the text, and an empty span collapses to nothing */
#hbpRoomRef { color: #ebd8b0; }
/* Cyan, not the gold of Invite: this is the verification family, and it
should read as related to the ticks in the roster below rather than as
a second primary action. */
.hbp-verify {
display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
padding:8px 17px; border-radius:30px; font-size:14px; font-weight:700;
border:1px solid rgba(63,223,232,.5); background:rgba(63,223,232,.12);
color:#3fdfe8 !important; text-decoration:none !important; cursor:pointer;
}
.hbp-verify:hover { background:rgba(63,223,232,.22); border-color:#3fdfe8; }
/* ---- "Verified by HOUSBE" announcement: toast + congratulations ---- */
#hbvToasts {
position: fixed; right: 18px; bottom: 18px; z-index: 2147483002;
display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.hbv-toast {
pointer-events: auto; display: flex; align-items: flex-start; gap: 11px;
width: min(360px, calc(100vw - 36px)); padding: 13px 14px; border-radius: 13px;
border: 1px solid rgba(63,223,232,.45);
background: linear-gradient(180deg, #10283a 0%, #0b1c29 100%);
box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 22px rgba(63,223,232,.16);
opacity: 0; transform: translateY(10px);
transition: opacity .24s ease, transform .24s ease;
}
.hbv-toast.in { opacity: 1; transform: none; }
.hbv-toast i { color: inherit !important; }
.hbv-toast-ic { flex: 0 0 auto; font-size: 17px; color: #3fdfe8;
filter: drop-shadow(0 0 6px rgba(63,223,232,.55)); line-height: 1.2; }
.hbv-toast-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hbv-toast-tx b { font-size: 13.5px; font-weight: 700; color: #eaf6fb; }
.hbv-toast-tx em { font-style: normal; font-size: 11.5px; color: #8ea3b3; line-height: 1.45; }
.hbv-toast-x { flex: 0 0 auto; background: none; border: 0; cursor: pointer;
font-size: 17px; line-height: 1; color: #6f8595; padding: 0 2px; }
.hbv-toast-x:hover { color: #eaf6fb; }
@media (max-width: 560px) { #hbvToasts { right: 12px; left: 12px; bottom: 12px; } }
/* The congratulations panel, rendered into the shared #popup23 shell. */
.hbv-grats { text-align: center; padding: 4px 2px 2px; }
.hbv-grats i { color: inherit !important; }
.hbv-grats-burst {
width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 50%;
display: grid; place-items: center; font-size: 30px; color: #3fdfe8;
border: 1px solid rgba(63,223,232,.45); background: rgba(63,223,232,.10);
box-shadow: 0 0 0 8px rgba(63,223,232,.06), 0 0 26px rgba(63,223,232,.28);
}
.hbv-grats h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #eaf6fb; }
.hbv-grats-lead { margin: 0 0 16px; font-size: 13.5px; line-height: 1.65; color: #c2d4e0; }
.hbv-grats-lead b { color: #3fdfe8; }
.hbv-grats-list { list-style: none; margin: 0 0 14px; padding: 0;
display: flex; flex-direction: column; gap: 8px; text-align: left; }
.hbv-grats-list li { display: flex; align-items: center; gap: 11px; padding: 11px 13px;
border-radius: 11px; border: 1px solid rgba(53,211,138,.32); background: rgba(53,211,138,.07); }
.hbv-grats-list li > i { flex: 0 0 auto; font-size: 14px; color: #35d38a; }
.hbv-grats-list span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hbv-grats-list b { font-size: 13.5px; font-weight: 700; color: #eaf6fb; }
.hbv-grats-list em { font-style: normal; font-size: 11.5px; color: #8ea3b3; }
.hbv-grats-ok { flex: 0 0 auto !important; font-size: 10.5px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: #35d38a; }
.hbv-grats-fine { margin: 0 0 16px; font-size: 11px; line-height: 1.6; color: #7f95a6; text-align: left; }
.hbv-grats-fine b { color: #c2d4e0; }
.hbv-grats-btn { width: 100%; padding: 12px 18px; border-radius: 12px; cursor: pointer;
font-size: 13.5px; font-weight: 700; border: 1px solid #3fdfe8;
background: linear-gradient(180deg, rgba(63,223,232,.24) 0%, rgba(63,223,232,.13) 100%);
color: #3fdfe8; }
.hbv-grats-btn:hover { background: rgba(63,223,232,.3); }
/* ---- Verify Participants panel, inside the Participants tab ----
Everything the owner needs — fee, participant picker, uploads, status —
renders here rather than on another page, so verifying somebody never
takes them out of the room. */
.hbpv {
margin: 0 0 18px; padding: 18px 20px; border-radius: 16px;
border: 1px solid rgba(63,223,232,.28);
background: linear-gradient(180deg, rgba(18,35,51,.95) 0%, rgba(13,26,38,.95) 100%);
}
.hbpv[hidden] { display: none; }
/* css/styles.css forces i{color:...!important} site-wide. */
.hbpv i { color: inherit !important; }
.hbpv-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.hbpv-head h4 { margin:0; font-size:16px; font-weight:700; color:#eaf6fb; display:flex; align-items:center; gap:9px; }
.hbpv-head h4 i { color:#3fdfe8 !important; }
.hbpv-close { margin-left:auto; background:none; border:0; cursor:pointer; font-size:18px; color:#8298a8; }
.hbpv-close:hover { color:#eaf6fb; }
.hbpv-sub { margin:0 0 14px; font-size:12.5px; line-height:1.65; color:#8298a8; }
.hbpv-sub b { color:#eaf6fb; }
.hbpv-msg { padding:11px 14px; border-radius:10px; margin-bottom:14px; font-size:12.5px; line-height:1.6; }
.hbpv-msg.ok { border:1px solid rgba(53,211,138,.42); background:rgba(53,211,138,.10); color:#a9efcb; }
.hbpv-msg.bad { border:1px solid rgba(255,107,115,.45); background:rgba(255,107,115,.10); color:#ffb9bd; }
.hbpv-fee { display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start;
padding:16px; border-radius:12px; border:1px solid #1e3644; background:rgba(10,20,32,.6); }
.hbpv-fee-main { flex:1 1 300px; min-width:0; font-size:12.5px; line-height:1.65; color:#c2d4e0; }
.hbpv-fee-main b { color:#eaf6fb; }
.hbpv-fee-main ul { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.hbpv-fee-main li { display:flex; gap:9px; font-size:12px; }
.hbpv-fee-main li i { flex:0 0 15px; margin-top:2px; color:#3fdfe8 !important; font-size:11px; }
.hbpv-fee-amt { flex:0 0 160px; text-align:center; padding:14px; border-radius:12px;
border:1px solid rgba(63,223,232,.3); background:rgba(63,223,232,.07); }
.hbpv-fee-amt em { display:block; font-style:normal; font-size:10.5px; font-weight:700;
letter-spacing:.1em; text-transform:uppercase; color:#3fdfe8; }
.hbpv-fee-amt b { display:block; font-size:30px; font-weight:700; color:#eaf6fb; line-height:1.15; }
.hbpv-fee-amt span { font-size:10.5px; color:#8298a8; }
#hbpvPaypal { max-width:400px; margin-top:14px; }
.hbpv-tally { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.hbpv-tally span { padding:6px 12px; border-radius:11px; font-size:11.5px;
border:1px solid #1e3644; background:rgba(10,20,32,.6); color:#8298a8; }
.hbpv-tally b { color:#eaf6fb; margin-right:5px; }
.hbpv-tally .ok b { color:#35d38a; }
.hbpv-tally .wait b { color:#f0b429; }
.hbpv-tally .bad b { color:#ff6b73; }
/* The participant picker. Chosen BEFORE any file is attached, so whose
document is being uploaded is never ambiguous. */
.hbpv-pick { margin-bottom:14px; }
.hbpv-pick label { display:block; margin-bottom:6px; font-size:10.5px; font-weight:700;
letter-spacing:.09em; text-transform:uppercase; color:#3fdfe8; }
.hbpv-pick select { width:100%; max-width:460px; height:44px; padding:0 13px; border-radius:11px;
border:1px solid rgba(63,223,232,.4); background:rgba(10,20,32,.9); color:#eaf6fb;
font-size:14px; font-weight:600; }
.hbpv-pick small { display:block; margin-top:6px; font-size:11px; color:#8298a8; }
.hbpv-who { display:flex; align-items:center; gap:11px; flex-wrap:wrap; padding:11px 14px;
border-radius:11px; margin-bottom:12px; border:1px solid #1e3644; background:rgba(10,20,32,.55); }
.hbpv-who b { font-size:14px; color:#eaf6fb; display:flex; align-items:center; }
.hbpv-who em { font-style:normal; font-size:11.5px; color:#8298a8; }
.hbpv-chip { margin-left:auto; padding:4px 11px; border-radius:13px; font-size:10.5px;
font-weight:700; border:1px solid #1e3644; color:#8298a8; }
.hbpv-chip.ok { border-color:rgba(53,211,138,.45); background:rgba(53,211,138,.10); color:#a9efcb; }
.hbpv-chip.wait { border-color:rgba(240,180,41,.42); background:rgba(240,180,41,.10); color:#ffdd9b; }
.hbpv-chip.bad { border-color:rgba(255,107,115,.45); background:rgba(255,107,115,.10); color:#ffb9bd; }
.hbpv-slot { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 14px;
margin-bottom:8px; border:1px solid #1e3644; border-radius:12px; background:rgba(10,20,32,.5); }
.hbpv-slot.has { border-color:rgba(53,211,138,.32); }
.hbpv-slot-main { flex:1 1 260px; min-width:0; }
.hbpv-slot-main label { display:block; margin:0 0 3px; font-size:12.5px; font-weight:600; color:#eaf6fb; }
.hbpv-slot-main label em { font-style:normal; font-weight:500; font-size:11px; color:#8298a8; margin-left:5px; }
.hbpv-slot-main label i.req { font-style:normal; color:#ff6b73; margin-left:3px; }
.hbpv-slot-main p { margin:0; font-size:11px; line-height:1.5; color:#8298a8; }
.hbpv-have { display:inline-flex; align-items:center; gap:7px; margin-top:7px; font-size:11px; color:#8298a8; }
.hbpv-have i { color:#35d38a !important; }
.hbpv-have a { color:#c2d4e0 !important; text-decoration:none !important; }
.hbpv-have a:hover { color:#3fdfe8 !important; }
.hbpv-drop { flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; min-height:38px;
padding:0 14px; cursor:pointer; max-width:210px; font-size:12px; color:#c2d4e0;
border:1px dashed rgba(63,223,232,.34); border-radius:11px; background:rgba(10,20,32,.7); }
.hbpv-drop:hover { border-color:#3fdfe8; background:rgba(63,223,232,.08); }
.hbpv-drop i { color:#3fdfe8 !important; }
.hbpv-drop span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hbpv-drop.set { border-style:solid; border-color:rgba(53,211,138,.55); }
.hbpv-drop.set i { color:#35d38a !important; }
.hbpv-note { display:flex; gap:9px; padding:11px 13px; border-radius:11px; margin-bottom:12px;
font-size:12px; line-height:1.6; color:#c2d4e0;
border:1px solid rgba(255,107,115,.4); background:rgba(255,107,115,.07); }
.hbpv-note i { color:#ff6b73 !important; margin-top:2px; }
.hbpv-note b { color:#eaf6fb; }
.hbpv-done { display:flex; gap:9px; padding:11px 13px; border-radius:11px; margin-bottom:12px;
font-size:12px; line-height:1.6; color:#c2d4e0;
border:1px solid rgba(53,211,138,.34); background:rgba(53,211,138,.06); }
.hbpv-done i { color:#35d38a !important; margin-top:2px; }
.hbpv-act { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px;
padding-top:12px; border-top:1px solid #1e3644; }
.hbpv-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:11px;
cursor:pointer; font-size:12.5px; font-weight:700; border:1px solid #3fdfe8;
background:rgba(63,223,232,.16); color:#3fdfe8; }
.hbpv-btn:hover { background:rgba(63,223,232,.26); }
.hbpv-btn.ghost { border-color:#1e3644; background:transparent; color:#8298a8; }
.hbpv-btn.ghost:hover { border-color:#3fdfe8; color:#3fdfe8; }
/* Busy state uses pointer-events, never `disabled` — a disabled submit
button is dropped from the form data along with the action it names. */
.hbpv.busy .hbpv-act { pointer-events:none; opacity:.55; }
.hbpv-hint { font-size:11px; color:#f0b429; }
.hbpv-hint.ok { color:#35d38a; }
/* ---- Verify Participants: the states where there is nothing to do ----
Both of these used to be one bare red bar with a sentence in it. Red
says something broke; "this is arranged by the room's owner" is not a
breakage, it is an answer — and an answer that left the reader with no
idea what verification is, who can start it or who to ask. The two are
separated here because they call for different things: one explains
and points at a person, the other apologises and offers a retry. */
.hbpv-gate { text-align:center; padding:6px 4px 2px; }
.hbpv-gate-ic { width:62px; height:62px; margin:0 auto 15px; border-radius:19px;
display:grid; place-items:center;
background:radial-gradient(circle at 50% 32%, rgba(63,223,232,.22), rgba(63,223,232,.05));
border:1px solid rgba(63,223,232,.34);
box-shadow:0 10px 30px rgba(63,223,232,.10), inset 0 1px 0 rgba(255,255,255,.06); }
.hbpv-gate-ic i { font-size:24px; color:#3fdfe8 !important; }
.hbpv-gate.is-error .hbpv-gate-ic {
background:radial-gradient(circle at 50% 32%, rgba(255,107,115,.20), rgba(255,107,115,.05));
border-color:rgba(255,107,115,.38); box-shadow:0 10px 30px rgba(255,107,115,.10); }
.hbpv-gate.is-error .hbpv-gate-ic i { color:#ff8f8f !important; }
.hbpv-gate h5 { margin:0 0 8px; font-size:16px; font-weight:700; color:#eaf6fb; line-height:1.4; }
.hbpv-gate > p { margin:0 auto 15px; max-width:440px; font-size:12.7px; line-height:1.7; color:#8298a8; }
.hbpv-gate > p b { color:#c2d4e0; font-weight:600; }
.hbpv-gate-pts { list-style:none; margin:0 auto 15px; padding:0; max-width:440px;
display:flex; flex-direction:column; gap:9px; text-align:left; }
.hbpv-gate-pts li { display:flex; gap:10px; font-size:12.3px; line-height:1.6; color:#8298a8; }
.hbpv-gate-pts li i { flex:0 0 14px; margin-top:3px; font-size:11px; color:#3fdfe8 !important; }
.hbpv-gate-pts li b { color:#c2d4e0; font-weight:600; }
/* Who to ask. The whole point of naming them: "ask the owner" is useless
if the reader has to go and work out which of these people that is. */
.hbpv-who { display:flex; align-items:center; gap:12px; text-align:left;
max-width:440px; margin:0 auto 15px; padding:11px 13px; border-radius:12px;
border:1px solid #1e3644; background:rgba(10,20,32,.62); }
.hbpv-who-av { flex:0 0 38px; height:38px; border-radius:11px; display:grid; place-items:center;
font-size:12.5px; font-weight:800; letter-spacing:.02em; color:#0b1622;
background:linear-gradient(135deg,#f3e2b3,#e5c158); }
.hbpv-who-t { flex:1; min-width:0; }
.hbpv-who-n { display:block; font-size:13.4px; font-weight:700; color:#eaf6fb;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbpv-who-r { display:block; font-size:11.4px; color:#8298a8; margin-top:2px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbpv-who .hbpv-btn { flex:0 0 auto; padding:8px 14px; font-size:11.8px; }
.hbpv-gate-fine { max-width:440px; margin:0 auto !important; padding-top:13px;
border-top:1px solid #172b38; font-size:11.4px !important; line-height:1.65;
color:#66798a !important; }
.hbpv-gate .hbpv-act { justify-content:center; border-top:0; padding-top:0; margin-top:15px; }
@media (max-width:560px) {
.hbpv-who { flex-wrap:wrap; }
.hbpv-who .hbpv-btn { width:100%; justify-content:center; }
}
.hbpv-consent { display:flex; gap:9px; margin-top:14px; padding:11px 13px; border-radius:11px;
font-size:11px; line-height:1.6; color:#c2d4e0;
border:1px solid rgba(240,180,41,.32); background:rgba(240,180,41,.06); }
.hbpv-consent i { color:#f0b429 !important; margin-top:2px; }
.hbpv-consent b { color:#eaf6fb; }
@media (max-width:640px){
.hbpv-drop { max-width:none; flex:1 1 100%; justify-content:center; }
.hbpv-fee-amt { flex:1 1 100%; }
}
/* ---- Property ownership: the in-tab panel and the entrance modal ----
Same shell as .hbpv so the two verification panels in this tab read as
one family. The accent differs on purpose: identity checks are cyan,
and a CONTESTED property is amber, because it is the one state in this
room that is about a dispute rather than about paperwork. */
.hbpo {
margin: 0 0 18px; padding: 18px 20px; border-radius: 16px;
border: 1px solid rgba(63,223,232,.28);
background: linear-gradient(180deg, rgba(18,35,51,.95) 0%, rgba(13,26,38,.95) 100%);
}
.hbpo[hidden] { display: none; }
/* css/styles.css:238 already sets this for *, so this is a no-op in the
product. It is stated here so the panel does not depend on a reset
defined in another file: without border-box the full-width Choose file
control below 560px adds its padding outside its width and pushes
18px past the card edge. */
.hbpo, .hbpo *, .hboc, .hboc * { box-sizing: border-box; }
/* css/styles.css forces i{color:#f2f2f2!important} site-wide. */
.hbpo i, .hboc i { color: inherit !important; }
.hbpo.is-contested { border-color: rgba(240,180,41,.45); }
.hbpo.is-owned { border-color: rgba(53,211,138,.42); }
.hbpo.is-taken { border-color: rgba(255,107,115,.36); }
.hbpo-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
/* flex:1 with min-width:0 keeps the close button on the heading row. Without
it a long headline wraps the X onto a line of its own, which at 390px
reads as a stray control belonging to nothing. */
.hbpo-head h4 { margin:0; font-size:16px; font-weight:700; color:#eaf6fb;
flex:1 1 auto; min-width:0;
display:flex; align-items:flex-start; gap:9px; }
.hbpo-head h4 i { flex:0 0 auto; margin-top:2px; }
.hbpo-head h4 i { color:#3fdfe8 !important; }
.hbpo.is-contested .hbpo-head h4 i { color:#f0b429 !important; }
.hbpo.is-owned .hbpo-head h4 i { color:#35d38a !important; }
.hbpo.is-taken .hbpo-head h4 i { color:#ff6b73 !important; }
.hbpo-close { margin-left:auto; background:none; border:0; cursor:pointer; font-size:18px; color:#8298a8; }
.hbpo-close:hover { color:#eaf6fb; }
.hbpo-sub { margin:0 0 14px; font-size:12.5px; line-height:1.7; color:#8298a8; }
.hbpo-sub b { color:#eaf6fb; }
.hbpo-addr { display:flex; align-items:center; gap:9px; margin-bottom:14px; padding:10px 13px;
border-radius:10px; border:1px solid rgba(255,255,255,.09); background:rgba(8,16,26,.6);
font-size:11.5px; color:#8298a8; }
.hbpo-addr i { flex:0 0 auto; color:#3fdfe8 !important; }
.hbpo-addr b { color:#c2d4e0; font-weight:600; word-break:break-all; }
.hbpo-msg { padding:11px 14px; border-radius:10px; margin-bottom:14px; font-size:12.5px; line-height:1.6; }
.hbpo-msg.ok { border:1px solid rgba(53,211,138,.42); background:rgba(53,211,138,.10); color:#a9efcb; }
.hbpo-msg.bad { border:1px solid rgba(255,107,115,.45); background:rgba(255,107,115,.10); color:#ffb9bd; }
/* Status of this person's own claim. */
.hbpo-state { display:flex; gap:11px; padding:12px 14px; border-radius:12px; margin-bottom:14px;
font-size:12.5px; line-height:1.6; border:1px solid rgba(255,255,255,.1);
background:rgba(8,16,26,.55); color:#c2d4e0; }
.hbpo-state > i { flex:0 0 auto; margin-top:2px; font-size:14px; }
.hbpo-state b { color:#eaf6fb; }
.hbpo-state em { font-style:normal; display:block; margin-top:3px; font-size:11.5px; color:#8298a8; }
.hbpo-state.wait { border-color:rgba(240,180,41,.4); background:rgba(240,180,41,.07); }
.hbpo-state.wait > i { color:#f0b429 !important; }
.hbpo-state.ok { border-color:rgba(53,211,138,.42); background:rgba(53,211,138,.07); }
.hbpo-state.ok > i { color:#35d38a !important; }
.hbpo-state.bad { border-color:rgba(255,107,115,.42); background:rgba(255,107,115,.07); }
.hbpo-state.bad > i { color:#ff6b73 !important; }
/* Document slots. */
.hbpo-docs { list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:9px; }
.hbpo-doc { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
border:1px solid rgba(255,255,255,.1); background:rgba(8,16,26,.55); }
.hbpo-doc.has { border-color:rgba(53,211,138,.34); background:rgba(53,211,138,.05); }
.hbpo-doc > i { flex:0 0 18px; text-align:center; font-size:14px; color:#8298a8 !important; }
.hbpo-doc.has > i { color:#35d38a !important; }
.hbpo-doc-t { flex:1 1 auto; min-width:0; }
.hbpo-doc-t b { display:block; font-size:13px; font-weight:600; color:#eaf6fb; }
.hbpo-doc-t em { font-style:normal; display:block; margin-top:2px; font-size:11px;
line-height:1.55; color:#8298a8; word-break:break-word; }
.hbpo-doc-t .req { color:#f0b429; font-weight:700; }
.hbpo-doc-t .opt { color:#7f8899; }
.hbpo-pick { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
padding:8px 15px; border-radius:20px; font-size:11.5px; font-weight:700;
border:1px solid rgba(63,223,232,.4); background:rgba(63,223,232,.1); color:#3fdfe8; }
.hbpo-pick:hover { background:rgba(63,223,232,.2); }
.hbpo-pick input { display:none; }
.hbpo-doc-open { flex:0 0 auto; padding:8px 14px; border-radius:20px; font-size:11.5px; font-weight:700;
border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
color:#c2d4e0 !important; text-decoration:none !important; }
.hbpo-doc-open:hover { border-color:rgba(63,223,232,.4); color:#3fdfe8 !important; }
.hbpo-acts { display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding-top:14px;
border-top:1px solid rgba(255,255,255,.08); }
.hbpo-btn { height:44px; padding:0 20px; border-radius:12px; font-size:13px; font-weight:700;
cursor:pointer; display:inline-flex; align-items:center; gap:9px;
border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#c2d4e0; }
.hbpo-btn:hover { border-color:rgba(63,223,232,.4); color:#eaf6fb; }
.hbpo-btn.go { border-color:#3fdfe8;
background:linear-gradient(180deg, rgba(63,223,232,.26) 0%, rgba(63,223,232,.14) 100%); color:#3fdfe8; }
.hbpo-btn.go:hover { background:rgba(63,223,232,.32); }
.hbpo-btn.busy { opacity:.55; pointer-events:none; }
.hbpo-acts small { flex:1 1 160px; font-size:11px; line-height:1.55; color:#7f8899; }
.hbpo-fine { margin:14px 0 0; padding-top:13px; border-top:1px solid rgba(255,255,255,.08);
font-size:11px; line-height:1.7; color:#7f8899; }
.hbpo-fine b { color:#c2d4e0; }
/* ---- The entrance modal --------------------------------------------
Portalled to at open time. #hbpVerifyPanel taught this the hard
way: an ancestor with overflow:hidden clips it, and a transformed
ancestor breaks position:fixed outright, so neither absolute nor fixed
positioning is safe anywhere inside the room's own DOM. */
.hboc-back {
position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center;
justify-content:center; padding:20px; background:rgba(4,9,16,.78);
-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
opacity:0; transition:opacity .2s ease;
}
.hboc-back.in { opacity:1; }
.hboc {
width:min(560px, 100%); max-height:calc(100vh - 40px); overflow:auto;
border-radius:18px; padding:26px 26px 22px;
border:1px solid rgba(240,180,41,.45);
background:linear-gradient(180deg, #122333 0%, #0b1520 100%);
box-shadow:0 26px 70px rgba(0,0,0,.62), 0 0 30px rgba(240,180,41,.1);
transform:translateY(12px) scale(.985); transition:transform .22s ease;
}
.hboc-back.in .hboc { transform:none; }
.hboc.taken { border-color:rgba(255,107,115,.45); box-shadow:0 26px 70px rgba(0,0,0,.62), 0 0 30px rgba(255,107,115,.1); }
.hboc.owned { border-color:rgba(53,211,138,.45); box-shadow:0 26px 70px rgba(0,0,0,.62), 0 0 30px rgba(53,211,138,.1); }
.hboc-ic { width:60px; height:60px; margin:0 auto 16px; border-radius:50%; display:grid;
place-items:center; font-size:26px; color:#f0b429;
border:1px solid rgba(240,180,41,.45); background:rgba(240,180,41,.1);
box-shadow:0 0 0 8px rgba(240,180,41,.05); }
.hboc.taken .hboc-ic { color:#ff6b73; border-color:rgba(255,107,115,.45);
background:rgba(255,107,115,.1); box-shadow:0 0 0 8px rgba(255,107,115,.05); }
.hboc.owned .hboc-ic { color:#35d38a; border-color:rgba(53,211,138,.45);
background:rgba(53,211,138,.1); box-shadow:0 0 0 8px rgba(53,211,138,.05); }
.hboc h3 { margin:0 0 10px; font-size:20px; font-weight:700; color:#eaf6fb; text-align:center; }
.hboc-lead { margin:0 0 16px; font-size:13.5px; line-height:1.7; color:#c2d4e0; text-align:center; }
.hboc-lead b { color:#eaf6fb; }
.hboc-addr { display:flex; align-items:center; gap:9px; margin-bottom:16px; padding:10px 13px;
border-radius:10px; border:1px solid rgba(255,255,255,.09); background:rgba(8,16,26,.6);
font-size:11.5px; color:#8298a8; }
.hboc-addr i { flex:0 0 auto; color:#3fdfe8 !important; }
.hboc-addr b { color:#c2d4e0; font-weight:600; word-break:break-all; }
.hboc-list { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:9px; }
.hboc-list li { display:flex; align-items:flex-start; gap:11px; padding:11px 13px; border-radius:11px;
border:1px solid rgba(255,255,255,.1); background:rgba(8,16,26,.5); font-size:12.5px;
line-height:1.6; color:#c2d4e0; }
.hboc-list li > i { flex:0 0 auto; margin-top:2px; font-size:12px; color:#3fdfe8 !important; }
.hboc-list b { color:#eaf6fb; }
.hboc-acts { display:flex; gap:10px; flex-wrap:wrap; }
.hboc-acts .hbpo-btn { flex:1 1 150px; justify-content:center; }
.hboc-fine { margin:14px 0 0; font-size:11px; line-height:1.65; color:#7f8899; text-align:center; }
@media (max-width:560px){
.hboc { padding:22px 18px 18px; }
.hbpo-doc { flex-wrap:wrap; }
.hbpo-pick, .hbpo-doc-open { width:100%; justify-content:center; }
}
.hbp-verify i { color:#3fdfe8 !important; font-size:14px; }
@media (max-width: 560px){ .hbp-verify { width:100%; justify-content:center; } }
#hbpRoomRef:empty { display: none; }
/* The header used to carry an icon tile and a "Manage people, roles,
and permissions in your deal" line. Both are gone so the roster opens
straight on its title; the real-room-only invite link survives on its
own line (guest rooms already hide it, see the :has() rule below). */
.hbp-addlink {
display: inline-block; margin: 5px 0 0;
color: #51c174; font-weight: 600; font-size: 14.5px; white-space: nowrap;
}
.hbp-invite {
flex: 0 0 auto;
background: linear-gradient(135deg, #ebd8b0 0%, #d3bf98 100%);
color: #061121; border: 1px solid rgba(235,216,176,.5);
border-radius: 50px; padding: 10px 22px;
font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
box-shadow: 0 4px 16px rgba(235,216,176,.35);
transition: transform .18s ease, box-shadow .18s ease;
}
.hbp-invite i { font-size: 15.5px; color: #061121 !important; }
.hbp-invite:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(235,216,176,.45); }
/* ── Participants roster ────────────────────────────────────────────────
ONE FRAME OR MANY, NOT BOTH. This was a single bordered panel with the
rows divided inside it by hairlines, which put two competing containers
around every person: the panel's edge, and the row's own accent — the
only thing in here that actually identifies whose row it is. The panel
won, because a 16px rounded border at 7.5% white beats a hairline, and
the roster read as a spreadsheet with coloured light leaking across it.
So the frame goes and the rows become the objects: each participant is
a card that carries their accent on its own border, and the ground this
tab already paints (see #deal-participants-view) is what they stand on.
That also gives every row an edge to CLIP against, which is what the
wave behind it needed — see .hbp-wave. */
.hbp-table {
background: none;
border: 0;
border-radius: 0;
overflow: visible;
box-shadow: none;
}
/* the cards stack with air between them, so each one's border reads as
that person's edge rather than as a divider shared with a neighbour */
.participants-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
/* One scroll container for head + body: scrolling them separately would
let the labels drift out of line with the cells they name. */
.hbp-tw { overflow-x: auto; }
.hbp-thead,
.hbp-row {
display: grid;
/* Name gets the slack; Actions is fixed so the button + kebab never
get squeezed into two lines. */
/* Four columns, per the reference: Name / Role / Status /
Communication. Last Activity is gone — one renderer had no
timestamp to put in it at all and filled it with an em dash, and the
other's line now sits under the status, which is where "Active" and
"seen 20 minutes ago" belong together. Name still gets the slack;
Communication is fixed so its button and the kebab never wrap. */
grid-template-columns:
minmax(210px, 2.3fr) minmax(180px, 1.5fr)
minmax(120px, 1fr) 214px;
align-items: center;
gap: 14px;
min-width: 820px;
padding: 0 20px;
}
/* Labels, not a table head. With the panel gone there is no strip for a
filled bar to belong to, and a bar drawn across open ground would read
as a fourth container. The padding carries the cards' 1px border so the
labels stay over the columns they name. */
.hbp-thead {
height: 34px;
background: none;
border-bottom: 0;
padding: 0 21px;
color: #7f8899; font-size: 12px; font-weight: 800;
letter-spacing: .1em; text-transform: uppercase;
}
.hbp-th-act { text-align: right; }
/* THE CARD. Its border is the row's accent at low strength over a white
floor, so a person's colour is on the edge of their own row and not
only in a badge halfway across it — and every card still has a visible
edge in a palette entry that happens to be dark.
overflow:hidden is load-bearing, not tidiness: the wave behind the
cells is drawn with two drop-shadows, and a 10px outer wash on an
element inset 4px from a row with no edge of its own was spilling
colour into the rows above and below. Now each card ends where it
ends. */
.hbp-row {
position: relative;
padding: 15px 20px;
border: 1px solid color-mix(in srgb, var(--pc, #e5c158) 28%, rgba(255,255,255,.085));
border-radius: 14px;
overflow: hidden;
background: linear-gradient(180deg, rgba(17,25,42,.78) 0%, rgba(8,13,24,.82) 100%);
box-shadow:
0 12px 28px -18px rgba(0,0,0,.92),
inset 0 1px 0 rgba(255,255,255,.045);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
.hbp-row { border-color: rgba(255,255,255,.11); }
}
/* every cell rides above the wave; the wave itself is the one child that
does not (and, being absolutely positioned, claims no grid track) */
.hbp-row > *:not(.hbp-wave) { position: relative; z-index: 1; }
/* ── THE ROW'S OWN LIGHT ──────────────────────────────────
Fine strands in the row's accent, drawn behind the cells and clipped
by the card. The mask keeps them decoration rather than noise: they
fade in and out rather than terminating anywhere, so no strand ever
ends against a glyph.
WHY THEY MOVED AND DIMMED AT THE SAME TIME.
The band was pinned to 57%-4% on the theory that this was the one
stretch of a row with nothing legible in it. It is not: the grid puts
Role at roughly 39%-63% and Status at 64%-80%, so 57% starts under the
access line and the strands then ran the full width of the status
column — "Active" and "21 hours ago" sat directly on moving light. And
because the strands were pinned 4% off the right edge, they also ran
under the Communication button, which was translucent and let them
through; that is why a Message button rendered as a solid gold slab
instead of the bordered pill it is.
Two things fix that, and it needed both. The button is opaque now (see
.hbp-msg-go) so nothing shines through it. And the strands are quiet
enough to be a ground rather than a subject — the previous stroke and
glow were tuned to survive being confined to an empty sliver, and at
that strength no text-shadow was going to rescue 12.5px of grey.
Now they cross the card the way the reference does — from just past the
avatar to the inner edge of the button — masked to fade in and out so
they never terminate against anything, and clipped by the card itself
rather than washing into its neighbours. */
.hbp-wave {
position: absolute; z-index: 0; pointer-events: none;
left: 25%; right: 3%; top: 2px; bottom: 2px;
width: auto; height: auto; overflow: visible;
-webkit-mask: linear-gradient(90deg, transparent 0, #000 17%, #000 87%, transparent 100%);
mask: linear-gradient(90deg, transparent 0, #000 17%, #000 87%, transparent 100%);
}
/* Two-stage bloom per strand is what separates EMITTED light from a
coloured line: a tight halo keeps the filament reading as a hard bright
core, a wider wash merges the strands into one field of light around
them. One radius cannot do both — a single wide blur loses the core, a
single tight one never leaves the stroke. Same construction as the stage
view's light stream, deliberately: these are the same idea at two scales
and should not be two techniques.
Both radii and both mixes came down from 3px/10px at 90%/55%, because
the strands now cross copy instead of hiding beside it. The wide wash is
the half that reaches text, so it is the half that had to give. */
.hbp-wave path {
fill: none; stroke: var(--pc, #e5c158);
vector-effect: non-scaling-stroke; stroke-linecap: round;
filter:
drop-shadow(0 0 2px color-mix(in srgb, var(--pc, #e5c158) 70%, transparent))
drop-shadow(0 0 7px color-mix(in srgb, var(--pc, #e5c158) 32%, transparent));
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
.hbp-wave path {
filter: drop-shadow(0 0 2px var(--pc, #e5c158))
drop-shadow(0 0 6px var(--pc, #e5c158));
}
}
/* Five strands, not three, and every one of them thinner than the old
thinnest. The reference reads as a ribbon because it is made of many
fine filaments at different phases; three heavy ones read as stripes,
and the fix for stripes is more of them, not brighter ones. */
.hbp-wave .w1 { stroke-width: 1.6; opacity: .56; }
.hbp-wave .w2 { stroke-width: 1.2; opacity: .44; }
.hbp-wave .w3 { stroke-width: 1; opacity: .34; }
.hbp-wave .w4 { stroke-width: .8; opacity: .26; }
.hbp-wave .w5 { stroke-width: .7; opacity: .2; }
/* Hover is the one moment the light may assert itself — the row is being
pointed at, so it is not being read yet. */
.hbp-row:hover .hbp-wave .w1 { opacity: .8; }
.hbp-row:hover .hbp-wave .w2 { opacity: .62; }
.hbp-row:hover .hbp-wave .w3 { opacity: .48; }
/* The card lifts and its own accent edge brightens. The old hover painted
an accent gradient across the row's background, which now fights the
strands crossing the same space for the same reason. */
.hbp-row:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--pc, #e5c158) 55%, transparent);
box-shadow:
0 16px 32px -18px rgba(0,0,0,.95),
inset 0 1px 0 rgba(255,255,255,.06),
0 0 22px -8px color-mix(in srgb, var(--pc, #e5c158) 40%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
.hbp-row:hover { border-color: rgba(255,255,255,.28); }
}
/* NAME — avatar + name over email */
.hbp-c-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hbp-c-name .tpc-avatar { width: 38px; height: 38px; font-size: 14.5px; }
/* the photo sits on top of the initials, so onerror="this.remove()" on a
broken path uncovers them rather than leaving an empty ring */
.tpc-avatar { position: relative; overflow: hidden; }
.tpc-avatar > img {
position: absolute; inset: 0;
width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
.hbp-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hbp-id .tpc-name {
color: #fff; font-size: 15.5px; font-weight: 700; line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hbp-mail {
color: #8a94a6; font-size: 13.5px; line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ROLE — badge (+ co-owner pill) over the access line */
.hbp-c-role { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.hbp-badges {
display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap;
min-width: 0; max-width: 100%;
}
.hbp-co {
flex: 0 0 auto; white-space: nowrap;
color: #d4af37 !important;
background: rgba(212,175,55,.1) !important;
border-color: rgba(212,175,55,.5) !important;
font-size: 12.5px; font-weight: 800; padding: 3px 9px;
}
.hbp-badge {
max-width: 100%; box-sizing: border-box;
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 11px; border-radius: 50px;
font-size: 13.5px; font-weight: 700; line-height: 1.5;
color: var(--pc, #e5c158);
background: color-mix(in srgb, var(--pc, #e5c158) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--pc, #e5c158) 45%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
.hbp-badge { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }
}
.hbp-badge > .tpc-role-tx {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hbp-badge .t { color: inherit; opacity: .78; font-weight: 600; }
/* Both of these sit directly over the lit strands. They are the dimmest
text in the row, so at this glow strength they need their own ground:
a tight dark shadow does it without a plate, which would box in copy
that is meant to read as a quiet second line. */
/* Both second lines were set at the old mid-navy's comfortable dim; on the
deep ground this tab paints now they had dropped to roughly 3:1 against
it. Lifted to a value that holds on its own, with the shadow kept as a
floor for wherever a strand's outer wash still reaches. */
.hbp-access {
color: #9aa4b5; font-size: 13px; font-weight: 600; letter-spacing: .01em;
text-shadow: 0 1px 4px rgba(3,5,10,.95), 0 0 8px rgba(3,5,10,.8);
}
/* ── SWITCH OWNERSHIP ─────────────────────────────────────────────────
A real switch, not an indicator: hbpRow only emits it where the viewer
can actually transfer the room, and flipping it hands the row's id to
the existing .transferTempOwnership confirmation. The owner's own reads
on and carries .is-locked — default cursor, no hover, aria-disabled —
because ownership cannot be handed to nobody. */
.hbp-own {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer;
font-size: 12.5px; font-weight: 700; color: #8a94a6;
transition: color .18s ease;
}
/* Label first, switch second — hbpRow emits them in that order now. A
control whose track sat to the LEFT of its own label read as belonging
to the badge before it, which is a different thing entirely: the badge
states a role, the switch changes who owns the room. */
.hbp-own em { font-style: normal; white-space: nowrap; }
.hbp-own > i {
position: relative; flex: 0 0 auto;
width: 36px; height: 19px; border-radius: 50px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.16);
transition: background .2s ease, border-color .2s ease;
}
.hbp-own > i::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 13px; height: 13px; border-radius: 50%;
background: #9aa6bd;
transition: transform .2s cubic-bezier(.3,.8,.3,1), background .2s ease;
}
.hbp-own:not(.is-locked):hover { color: #cbd5e1; }
.hbp-own:not(.is-locked):hover > i { border-color: color-mix(in srgb, var(--pc, #e5c158) 55%, transparent); }
/* On means FILLED, with the knob reading against it. The old on-state was
a 34%-accent track carrying an accent-coloured knob, so the two parts
that have to be told apart — the track and the thing sitting at one end
of it — were the same hue at similar value, and the switch read as a
tinted pill rather than as thrown. */
.hbp-own.is-on { color: color-mix(in srgb, var(--pc, #e5c158) 62%, #ffffff); }
.hbp-own.is-on > i {
background: linear-gradient(180deg,
color-mix(in srgb, var(--pc, #e5c158) 88%, #ffffff) 0%,
var(--pc, #e5c158) 100%);
border-color: color-mix(in srgb, var(--pc, #e5c158) 85%, transparent);
box-shadow: 0 0 10px -2px color-mix(in srgb, var(--pc, #e5c158) 65%, transparent);
}
.hbp-own.is-on > i::after {
transform: translateX(17px);
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.hbp-own.is-locked { cursor: default; }
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
.hbp-own.is-on { color: #ebd8b0; }
.hbp-own.is-on > i { background: #e5c158; border-color: #e5c158; }
.hbp-own.is-on > i::after { background: #fff; }
}
/* STATUS + LAST ACTIVITY */
/* The strands cross this column now, so the brightest line in it gets the
same dark floor .hbp-c-seen and .hbp-access already carry - enough that
the outer wash of a strand cannot reach the glyph edges. */
.hbp-c-status {
display: inline-flex; align-items: center; gap: 7px;
font-size: 14px; font-weight: 700; white-space: nowrap;
text-shadow: 0 1px 4px rgba(3,5,10,.95), 0 0 8px rgba(3,5,10,.85);
}
.hbp-c-status i { font-size: 7px; }
/* the status cell carries the dot line and, when a renderer has one, the
activity line the Last Activity column used to hold */
.hbp-c-stat {
min-width: 0; display: flex; flex-direction: column;
align-items: flex-start; gap: 3px;
}
.hbp-c-seen {
max-width: 100%;
color: #8e99a9; font-size: 12.5px; line-height: 1.35;
text-shadow: 0 1px 4px rgba(3,5,10,.95), 0 0 8px rgba(3,5,10,.8);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ACTIONS */
.hbp-c-act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* A PILL, AND AN OPAQUE ONE. Two separate faults met in this button.
It was an 8px rectangle where the reference has a fully rounded pill,
next to a badge and an invite button that are both 50px - the roster's
only square control. And its fill was `var(--pc) 13%` over TRANSPARENT,
which is fine over a flat panel and not fine over the lit strands that
used to run underneath it: 13% of an accent over a bright glow is that
accent at nearly full strength, which is why the button rendered as a
solid gold slab with dark text rather than as a bordered pill.
The fill is now a near-opaque dark base, so what the button looks like
no longer depends on what is behind it. */
.hbp-msg {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 16px; border-radius: 50px; cursor: pointer;
font-family: inherit; font-size: 14px; font-weight: 700;
color: #cbd5e1;
background: linear-gradient(180deg, rgba(12,19,33,.95) 0%, rgba(7,11,21,.96) 100%);
border: 1px solid rgba(255,255,255,.14);
white-space: nowrap;
transition: border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.hbp-msg i { font-size: 13px; color: inherit !important; }
.hbp-msg { text-decoration: none; }
/* the live channel wears the row's accent; the fallback one does not
pretend to be it — a mailto reaches someone who is not in the room, and
reading as a different channel is the point */
/* The accent arrives as border, text and a contained inner glow - all
three drawn ON the dark base rather than as a tint of whatever happens
to be behind it. inset keeps the glow inside the pill's own radius. */
.hbp-msg-go {
color: color-mix(in srgb, var(--pc, #e5c158) 62%, #ffffff);
border-color: color-mix(in srgb, var(--pc, #e5c158) 52%, transparent);
box-shadow: inset 0 0 16px -6px color-mix(in srgb, var(--pc, #e5c158) 55%, transparent);
}
/* the fallback channel does not wear the row's accent - a mailto reaches
someone who is not in the room, and reading as a different channel is
the point */
.hbp-msg-mail {
color: #ffb3b3;
border-color: rgba(255,82,82,.5);
box-shadow: inset 0 0 16px -6px rgba(255,82,82,.5);
}
.hbp-msg-mail:hover {
border-color: rgba(255,82,82,.85); color: #fff;
box-shadow: inset 0 0 18px -5px rgba(255,82,82,.6), 0 0 16px -6px rgba(255,82,82,.6);
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
.hbp-msg-go { color: #ebd8b0; border-color: rgba(229,193,88,.5); box-shadow: none; }
}
.hbp-msg-go:hover {
border-color: color-mix(in srgb, var(--pc, #e5c158) 78%, transparent);
color: #fff;
box-shadow:
inset 0 0 18px -5px color-mix(in srgb, var(--pc, #e5c158) 62%, transparent),
0 0 16px -6px color-mix(in srgb, var(--pc, #e5c158) 55%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
.hbp-msg-go:hover { border-color: rgba(229,193,88,.8); color: #fff; box-shadow: none; }
}
/* Same pill as .hbp-msg - it stands in the same cell for the same reason
(it is that row's one communication action), so it cannot be a
different shape. Opaque base for the same reason too. */
.hbp-resend {
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
background: linear-gradient(180deg, rgba(12,19,33,.95) 0%, rgba(7,11,21,.96) 100%);
border: 1px solid rgba(229,193,88,.5);
color: #ebd8b0; font-family: inherit; font-size: 14px; font-weight: 700;
padding: 8px 16px; border-radius: 50px; cursor: pointer;
box-shadow: inset 0 0 16px -6px rgba(229,193,88,.5);
transition: border-color .18s ease, box-shadow .18s ease;
}
.hbp-resend i { font-size: 12px; color: inherit !important; }
.hbp-resend:hover {
border-color: rgba(229,193,88,.85);
box-shadow: inset 0 0 18px -5px rgba(229,193,88,.6), 0 0 16px -6px rgba(229,193,88,.55);
}
/* VIEW PROFILE — the roster's identity action, same pill family as the
communication action next to it so the cell reads as one control group.
Quieter than .hbp-msg on purpose: it opens a page, it does not start a
conversation. */
.hbp-vp {
display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
padding: 8px 15px; border-radius: 50px;
font-family: inherit; font-size: 13.5px; font-weight: 700;
color: #cbd5e1; text-decoration: none !important;
background: linear-gradient(180deg, rgba(12,19,33,.95) 0%, rgba(7,11,21,.96) 100%);
border: 1px solid rgba(255,255,255,.14);
transition: border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.hbp-vp i { font-size: 12.5px; color: inherit !important; }
.hbp-vp:hover {
border-color: rgba(229,193,88,.7); color: #f0dfa6 !important;
box-shadow: inset 0 0 16px -6px rgba(229,193,88,.45);
}
/* "Real Estate Agent · Verified" on the role line. Account identity only. */
.hbp-vok {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; font-weight: 700; color: #6ee7a8;
}
.hbp-vok i { font-size: 11px; color: inherit !important; }
@media (max-width: 900px) {
.hbp-vp span { display: none; }
.hbp-vp { padding: 8px 12px; }
}
/* The ⋯ menu is the shared .tpd-kebab control (same markup, same handler,
so Transfer Ownership / Change Role / Remove behave identically here and
in the Stage Participants overlay). Its base styling is declared in the
overlay's own