/* GENERATED — do not edit.
 * Extracted from deal-room.php by scripts/extract-inline-css.php.
 * Edit the source template, then re-run the tool.
 * Blocks are concatenated in document order; that order is the cascade.
 */

/* ---- deal-room.php block 1, source line 84 ---- */

    .active-room {
        background: rgba(229, 193, 88, 0.08) !important;
        border: 1px solid #e5c158 !important;
        border-radius: 10px !important;
        padding: 10px !important;
        box-shadow: 0 0 15px rgba(229, 193, 88, 0.25), inset 0 0 8px rgba(229, 193, 88, 0.05) !important;
    }
    .trace-item {
        border: 1px solid transparent;
        border-radius: 10px;
        padding: 10px !important;
        transition: all 0.2s ease !important;
    }
    .trace-item:hover {
        background: rgba(255, 255, 255, 0.02) !important;
        border-color: rgba(255, 255, 255, 0.05) !important;
    }
    /* Keep the deal-room cards inside the sidebar horizontally (long title/price
       truncate via their own ellipsis) WITHOUT letting the flex column squash the
       card vertically — it must keep its natural height, not clip the title row. */
    .trace-item, .trace-item-temp {
        max-width: 100%;
        box-sizing: border-box;
        flex-shrink: 0;
    }
    .chat-loader{
        text-align:center;
        padding:20px;
        color:#94a3b8;
        font-size:15.5px;
    }
    .typing-indicator{
        color: #FFF;
    }
    #filePreviewBox{
        margin:10px 0;
        padding:0;
        background:transparent;
        display:block;
    }

    .remove-file{
        cursor:pointer;
        color:#94a3b8;
        background:rgba(255,255,255,0.06);
        border:1px solid rgba(255,255,255,0.1);
        border-radius:50%;
        width:28px;
        height:28px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:14px;
        transition:all 0.2s ease;
        flex-shrink:0;
        margin-left:12px;
    }
    .remove-file:hover{
        color:#ef4444;
        background:rgba(239,68,68,0.15);
        border-color:rgba(239,68,68,0.4);
        transform:scale(1.08);
    }
    
    #popup23 {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: linear-gradient(145deg, rgba(14, 30, 55, 0.95) 0%, rgba(6, 17, 33, 0.98) 100%) !important;
        backdrop-filter: blur(20px) !important;
        padding: 32px;
        z-index: 9999; 
        display: none;
        width: 440px;
        border-radius: 24px;
        border: 1px solid rgba(235, 216, 176, 0.4) !important;
        box-shadow:
            0 20px 50px rgba(0,0,0,0.6),
            0 0 40px rgba(235, 216, 176, 0.2),
            inset 0 0 40px rgba(235, 216, 176, 0.1),
            0 0 4px 1px rgba(235, 216, 176, 0.4) !important;
        overflow: visible !important;
    } 	

    /* A MODAL TALLER THAN THE PHONE HAD NOWHERE TO GO.
       #popup23 is fixed and centred with no height cap, so any modal whose
       content outgrew the viewport — the invite form on a phone is the worst of
       them — ran off the top and bottom of the screen with no way to reach
       either end. Nothing was frozen: the overlay covers the page behind it, and
       #popup23 is position:fixed, so scrolling the page could never have moved
       it regardless.

       The cap goes on the CONTENT, not the shell, and that is the whole trick:
         · #popup23 keeps overflow:visible, so its glow and its ::after inset
           border are untouched;
         · ::after frames the visible box instead of stretching to the scroll
           height, because the shell's own height is still content-driven — just
           now bounded;
         · #close23 is absolutely positioned against the shell, so the × stays
           pinned in the corner rather than scrolling out of reach.
       Native <select> popups render outside the layout, so the three dropdowns
       in the invite form are unaffected by the new clipping box. */
    #popupContent23 {
        /* dvh tracks the visible viewport as mobile browser chrome slides in and
           out; vh is the fallback and is merely conservative, never wrong. */
        max-height: calc(100vh - 96px);
        max-height: calc(100dvh - 96px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        /* Don't hand the scroll to the page once this hits an end — that is what
           makes an over-scroll on iOS drag the layer behind the modal. */
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(235, 216, 176, 0.35) transparent;
    }
    #popupContent23::-webkit-scrollbar { width: 8px; }
    #popupContent23::-webkit-scrollbar-track { background: transparent; }
    #popupContent23::-webkit-scrollbar-thumb {
        background: rgba(235, 216, 176, 0.28);
        border-radius: 8px;
    }
    #popupContent23::-webkit-scrollbar-thumb:hover { background: rgba(235, 216, 176, 0.45); }
    /* The dim layer must not rubber-band the page underneath it either. Keyed
       to the id, not .overlay: this block is inside deal-room.php, which
       inc/footer.php requires on EVERY page, and .overlay is a class other
       pages hang real scrollable popups off. */
    #overlay { overscroll-behavior: contain; touch-action: none; }

    /* ── "Add New Deal Room" modal ───────────────────────────────────────
       #popup23 is the shared modal shell — every other flow on this page
       reuses it. So the gold treatment hangs off :has(), keyed to this
       modal's own content wrapper: nothing to add when it opens and, more
       importantly, nothing to forget to strip when the next modal reuses
       the shell. */
    .temp-room-modal-title {
        margin: 0 0 10px;
        color: #f4c84a !important;
        font-size: 24px; font-weight: 800; letter-spacing: .2px;
        text-shadow: 0 0 18px rgba(244, 200, 74, .35);
    }
    #popup23:has(.temp-room-modal) {
        border: 1.5px solid rgba(244, 200, 74, .85) !important;
        box-shadow:
            0 20px 50px rgba(0, 0, 0, .65),
            0 0 46px rgba(244, 200, 74, .32),
            inset 0 0 40px rgba(244, 200, 74, .10),
            0 0 4px 1px rgba(244, 200, 74, .55) !important;
    }
    #popup23:has(.temp-room-modal)::after {
        border-color: rgba(244, 200, 74, .30) !important;
    }
    .temp-room-modal #newTempRoomLink::placeholder { color: #64748b; }
    .temp-room-modal #newTempRoomLink:focus {
        border-color: rgba(244, 200, 74, .85) !important;
        box-shadow: 0 0 0 3px rgba(244, 200, 74, .12);
        outline: none;
    }
    .temp-room-create-btn {
        border-radius: 50px !important;
        padding: 14px 18px !important;
        font-size: 15px !important;
        text-transform: uppercase;
        letter-spacing: .5px !important;
    }
    .temp-room-create-btn i { color: #061121 !important; font-size: 16px !important; }

    /* ── "Activate Your Dealroom" modal ────────────────────────────────── */
    #popup23:has(.activate-dealroom-modal) {
        width: min(530px, 94vw) !important;
        max-width: 530px !important;
        padding: 38px 32px 32px !important;
        border: 1.5px solid rgba(244, 200, 74, 0.75) !important;
        background: linear-gradient(155deg, rgba(14, 26, 48, 0.98) 0%, rgba(5, 12, 24, 0.99) 100%) !important;
        box-shadow:
            0 24px 60px rgba(0, 0, 0, 0.75),
            0 0 44px rgba(244, 200, 74, 0.28),
            inset 0 0 34px rgba(244, 200, 74, 0.08),
            0 0 4px 1px rgba(244, 200, 74, 0.5) !important;
    }
    #popup23:has(.activate-dealroom-modal)::after {
        border-color: rgba(244, 200, 74, 0.28) !important;
    }

    #popup23::after {
        content: '' !important;
        position: absolute !important;
        top: 6px !important;
        left: 6px !important;
        right: 6px !important;
        bottom: 6px !important;
        border: 1px solid rgba(235, 216, 176, 0.15) !important;
        border-radius: 18px !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    @media (max-width: 600px) {
        #popup23 {
            width: 92% !important;
            max-width: 400px !important;
            padding: 24px 16px !important;
            border-radius: 16px !important;
        }
        /* 24px of vertical padding here rather than 32px, so the content can
           have the 16px back — it is the tier where the height is scarcest. */
        #popupContent23 {
            max-height: calc(100vh - 80px);
            max-height: calc(100dvh - 80px);
        }
        .remove-modal-header-wrap {
            flex-direction: column !important;
            align-items: center !important;
            text-align: center !important;
            gap: 16px !important;
        }
        .remove-modal-header-wrap h3, 
        .remove-modal-header-wrap p {
            text-align: center !important;
        }
        .remove-modal-user-card {
            flex-direction: column !important;
            align-items: center !important;
            text-align: center !important;
            gap: 12px !important;
        }
        .remove-modal-user-card > div {
            text-align: center !important;
        }
        .remove-modal-user-card div div {
            text-align: center !important;
        }
        .remove-modal-footer {
            flex-direction: column-reverse !important;
            gap: 8px !important;
        }
        .remove-modal-footer button {
            width: 100% !important;
            justify-content: center !important;
        }
    }

    /* Windowed mode overrides for popup23 */
    .chat-interface.windowed #popup23 {
        width: 92% !important;
        max-width: 400px !important;
        padding: 24px 16px !important;
        border-radius: 16px !important;
    }
    .chat-interface.windowed #popupContent23 {
        max-height: calc(100vh - 80px);
        max-height: calc(100dvh - 80px);
    }
    .chat-interface.windowed .remove-modal-header-wrap {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
    }
    .chat-interface.windowed .remove-modal-header-wrap h3, 
    .chat-interface.windowed .remove-modal-header-wrap p {
        text-align: center !important;
    }
    .chat-interface.windowed .remove-modal-user-card {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }
    .chat-interface.windowed .remove-modal-user-card > div {
        text-align: center !important;
    }
    .chat-interface.windowed .remove-modal-user-card div div {
        text-align: center !important;
    }
    .chat-interface.windowed .remove-modal-footer {
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }
    .chat-interface.windowed .remove-modal-footer button {
        width: 100% !important;
        justify-content: center !important;
    }    
    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(8px);
        z-index: 9998;
    } 
    #close23{
        position: absolute;
        right: 18px;
        top: 18px;
        /* must stack ABOVE #popupContent23 — injected modal content is often
           position:relative and, being later in the DOM, paints over this ×
           and swallows its clicks without an explicit z-index */
        z-index: 10;
        color: #ebd8b0;
        font-size: 26px;
        font-weight: 300;
        cursor: pointer;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(235, 216, 176, 0.3);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
    }
    #close23:hover {
        background: rgba(235, 216, 176, 0.22);
        border-color: rgba(235, 216, 176, 0.7);
        color: #fff;
        transform: scale(1.1) rotate(90deg);
        box-shadow: 0 4px 14px rgba(235, 216, 176, 0.35);
    }
    /* chat bubble */
    :root {
        --bg-primary: #0f1523;
        --bg-secondary: #0f1523;
        --bg-chat: #0f1523;
        --bubble-other: #182030;
        --bubble-self: #241d0d;
        --bubble-self-accent: #2e2410;
        --text-primary: #f0dfa6;
        --text-secondary: #a68c52;
        --text-meta: #6b5a2e;
        --accent-agent: #d4af37;
        --accent-buyer: #ebd8b0;
        --accent-self: #c9a227;
        --accent-green: #d4af37;
        --border: #1a2336;
        --shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    }

    /* Date divider */
    .date-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 14px 0;
    }

    .date-divider span {
        font-size: 13px;
        font-weight: 500;
        color: var(--text-meta);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .date-divider::before,
    .date-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--border);
    }

    /* Message row */
    .msg-row {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        max-width: 100%;
        animation: fadeUp 0.25s ease both;
    }

    @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
    }

    /* Unread chat count — deliberately red + pulsing so it reads as urgent
       and doesn't blend into the accent-tinted badge styling in the Deal Room
       Menu (".deal-navigation-menu .nav-tx b .badge" paints it with the row's
       accent using !important, hence the ID selector + dedicated class here
       rather than an inline override — an ID still outranks it). */
    #chat-tab-count.unread-badge {
        background: #ef4444 !important;
        color: #fff !important;
        box-shadow: 0 0 0 rgba(239, 68, 68, 0.55) !important;
        animation: unreadPulse 1.6s ease-in-out infinite;
        min-width: 16px !important;
        padding: 1px 5px !important;
        border-radius: 999px !important;
    }

    @keyframes unreadPulse {
        0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
        70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
        100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    }

    /* New-message toast — solid green (success/attention color) with a soft
       pulsing glow so it visually demands attention over the rest of the UI,
       distinct from the lower-key confirmation toasts (#toast) used
       elsewhere. */
    .new-msg-toast {
        animation: newMsgToastGlow 1.8s ease-in-out infinite;
    }

    @keyframes newMsgToastGlow {
        0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 rgba(31,157,85,0); }
        50% { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 20px rgba(31,157,85,0.6); }
    }

    .msg-row.self {
        flex-direction: row-reverse;
    }

    /* Avatar */
    .avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14.5px;
        font-weight: 600;
        letter-spacing: -0.01em;
        margin-bottom: 2px;
    }

    .avatar.agent {
        background: #3a2f12;
        color: #d4af37;
    }
    .avatar.buyer {
        background: #362c16;
        color: #ebd8b0;
    }
    .avatar.self {
        background: #2e2410;
        color: #c9a227;
    }

    .avatar-placeholder {
        width: 34px;
        flex-shrink: 0;
    }

    /* Bubble container */
    .bubble-wrap {
        display: flex;
        flex-direction: column;
        gap: 2px;
        max-width: 82% !important;
    }

    .msg-row.self .bubble-wrap {
        align-items: flex-end;
    }

    /* Sender name + role — now lives INSIDE the bubble */
    .sender-line {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
        margin-bottom: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid rgba(235,216,176, 0.06);
        max-width: 100%;
    }

    .msg-row.self .sender-line {
        flex-direction: row-reverse;
        justify-content: flex-start;
        border-bottom-color: rgba(235,216,176, 0.08);
    }

    .sender-name,
    .role-badge,
    .you-tag,
    .editMsgVisibility,
    .editMsgText {
        white-space: nowrap !important;
        word-break: keep-all !important;
        flex-shrink: 0;
    }

    .sender-name {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.01em;
    }

    .sender-name.agent {
        color: var(--accent-agent);
    }
    .sender-name.buyer {
        color: #ebd8b0;
    }
    .sender-name.self {
        color: #c9a227;
    }

    .role-badge {
        font-size: 12px;
        font-weight: 500;
        padding: 1px 7px;
        border-radius: 20px;
        letter-spacing: 0.02em;
    }

    .role-badge.agent {
        background: rgba(212,175,55, 0.15);
        color: #d4af37;
    }
    .role-badge.buyer {
        background: rgba(235,216,176, 0.15);
        color: #ebd8b0;
    }

    .role-badge.lender {
        background: rgb(201 162 39 / 15%);
        color: #c9a227;
    }

    .role-badge.self {
        background: rgba(201,162,39, 0.15);
        color: #c9a227;
    }
    .role-badge.guest {
      background: rgba(212,175,55, 0.15);
      color: #d4af37;
    }
    .role-badge.roleGuest {
      background: rgba(138,107,35, 0.15);
      color: #8a6b23;
    }

    .you-tag {
        font-size: 12px;
        color: #f0dfa6;
        font-weight: 400;
    }

    @media (max-width: 768px) {
        .chat-messages-area {
            padding: 12px 10px !important;
        }
        .msg-row {
            margin-bottom: 12px !important;
            gap: 8px !important;
        }
        .bubble-wrap {
            max-width: 90% !important;
        }
        .bubble {
            padding: 10px 12px !important;
            font-size: 15px !important;
        }
        .avatar {
            width: 32px !important;
            height: 32px !important;
            min-width: 32px !important;
            flex-shrink: 0 !important;
        }
    }


    /* Bubble */
    .bubble {
        padding: 10px 14px;
        border-radius: 16px;
        font-size: 15px;
        line-height: 1.55;
        color: var(--text-primary);
        position: relative;
        word-break: break-word;
        max-width: 100%;
        width: fit-content;
    }

    .bubble.other {
        background: var(--bubble-other);
        border-bottom-left-radius: 4px;
        border: 1px solid rgba(235,216,176, 0.04);
    }

    .bubble.self-bubble {
        background: linear-gradient(
          135deg,
          var(--bubble-self),
          var(--bubble-self-accent)
        );
        border-bottom-right-radius: 4px;
        border: 1px solid rgba(201,162,39, 0.15);
        box-shadow: 0 2px 12px rgba(201,162,39, 0.35);
    }

    /* The message text itself -- bigger and warmer than the 13.5px the bubble
       gives everything by default (sender name, role badges, viewer summary
       all keep their own smaller sizes; only this span is affected), plus a
       soft gold glow matching the site's existing amber accent rather than
       introducing a new colour. */
    .msg-text-content {
        display: inline-block;
        font-size: 16.5px;
        font-weight: 500;
        color: #f8e9c2;
        text-shadow: 0 0 10px rgba(240, 223, 166, 0.40);
    }

    /* File attachment bubble */
    .bubble.file-bubble {
        background: var(--bubble-other);
        border: 1px solid rgba(212,175,55, 0.2);
        display: flex;
        /* flex-start, not center: the tile is now three rows tall (title, filename,
           action buttons), and centring left the icon floating at mid-height with
           nothing beside it. Top-aligned, it reads as the title's icon. */
        align-items: flex-start;
        gap: 10px;
        padding: 10px 14px;
        cursor: pointer;
        transition: background 0.15s;
        border-bottom-left-radius: 4px;
    }

    .bubble.file-bubble:hover {
        background: #2c2410;
    }

    .file-icon {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: rgba(212,175,55, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .file-icon svg {
        width: 18px;
        height: 18px;
    }

    .file-info {
        flex: 1;
    }

    .file-name {
        font-size: 14.5px;
        font-weight: 500;
        color: #d4af37;
        text-decoration: none;
    }

    .file-meta {
        font-size: 13px;
        color: var(--text-meta);
        margin-top: 1px;
    }

    /* Timestamp */
    .msg-time {
        font-size: 12.5px;
        color: var(--text-meta);
        padding: 0 4px;
        margin-top: 2px;
    }

    .msg-row.self .msg-time {
        text-align: right;
    }

    /* Read receipt */
    .read-check {
        display: inline-flex;
        gap: 1px;
        margin-left: 3px;
    }

    .read-check span {
        width: 4px;
        height: 8px;
        border-right: 1.5px solid #c9a227;
        border-bottom: 1.5px solid #c9a227;
        transform: rotate(45deg);
        display: inline-block;
    }

    /* Gap between different senders */
    .gap {
        margin-top: 10px;
    }

    /* file preview box */
    #filePreviewBox{
        position:relative;
        z-index:10000;
        overflow:visible !important;
    }

    .file-preview-wrap{
        position:relative;
        z-index:10001;
        overflow:visible !important;
        background: linear-gradient(145deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%);
        border: 1px solid rgba(229, 193, 88, 0.35);
        border-radius: 14px;
        padding: 14px 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(229, 193, 88, 0.1);
        backdrop-filter: blur(16px);
        margin-bottom: 10px;
        transition: all 0.3s ease;
    }

    .file-top{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .file-top-info{
        display:flex;
        align-items:center;
        gap:12px;
        min-width:0;
        flex:1;
    }

    .file-type-icon{
        width:36px;
        height:36px;
        border-radius:10px;
        background:rgba(229, 193, 88, 0.12);
        border:1px solid rgba(229, 193, 88, 0.3);
        color:#eec85e;
        display:grid;
        place-items:center;
        font-size:16px;
        flex-shrink:0;
    }

    .file-name-block{
        display:flex;
        flex-direction:column;
        min-width:0;
    }

    .file-name{
        color:#f8fafc;
        font-size:15px;
        font-weight:600;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .file-size{
        color:#8b96ac;
        font-size:13px;
        margin-top:1px;
    }

    .file-visibility{
        margin-top:12px;
        display:flex;
        flex-direction:column;
        gap:6px;
    }

    .vis-select-label{
        font-size:13.5px;
        font-weight:700;
        color:#eec85e;
        letter-spacing:0.5px;
        text-transform:uppercase;
        display:flex;
        align-items:center;
        gap:6px;
    }

    /* Custom Premium Dropdown Styles */
    .custom-vis-dropdown{
        position:relative;
        width:100%;
        margin-top:4px;
    }

    .custom-vis-trigger{
        display:flex;
        align-items:center;
        justify-content:space-between;
        height:48px;
        padding:0 16px;
        background:linear-gradient(135deg, rgba(14, 23, 46, 0.98), rgba(20, 32, 60, 0.98));
        border:1.5px solid rgba(229, 193, 88, 0.45);
        border-radius:14px;
        color:#f8fafc;
        font-size:15.5px;
        font-weight:600;
        cursor:pointer;
        transition:all 0.2s ease;
        box-shadow:0 4px 14px rgba(0, 0, 0, 0.4);
        user-select:none;
    }

    .custom-vis-trigger:hover{
        border-color:#eec85e;
        box-shadow:0 0 18px rgba(229, 193, 88, 0.25);
    }

    .custom-vis-selected-content{
        display:flex;
        align-items:center;
        gap:12px;
    }

    .vis-trigger-text{
        font-size:15.5px;
        font-weight:600;
        color:#f8fafc;
    }

    .custom-vis-arrow{
        color:#eec85e;
        font-size:14px;
        transition:transform 0.25s ease;
    }

    .custom-vis-arrow.open{
        transform:rotate(180deg);
    }

    /* Menu opens UPWARDS above the trigger box with solid opaque background */
    .custom-vis-menu{
        position:absolute;
        bottom:calc(100% + 8px);
        left:0;
        right:0;
        background:#090e1a !important; /* 100% Solid Opaque Dark Theme - No Transparency */
        border:1.5px solid rgba(229, 193, 88, 0.6) !important;
        border-radius:16px;
        padding:8px;
        box-shadow:0 -15px 50px rgba(0, 0, 0, 0.98), 0 0 30px rgba(229, 193, 88, 0.25);
        z-index:999999 !important;
        display:flex;
        flex-direction:column;
        gap:6px;
    }

    .custom-vis-option{
        background:#090e1a; /* Solid item background */
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:11px 14px;
        border-radius:12px;
        cursor:pointer;
        transition:all 0.15s ease;
        user-select:none;
        border:1px solid transparent;
    }

    .custom-vis-option:hover{
        background:rgba(229, 193, 88, 0.12);
        border-color:rgba(229, 193, 88, 0.3);
    }

    .custom-vis-option.selected{
        background:rgba(229, 193, 88, 0.18);
        border-color:rgba(229, 193, 88, 0.45);
    }

    .vis-option-left{
        display:flex;
        align-items:center;
        gap:12px;
    }

    .vis-option-text{
        display:flex;
        flex-direction:column;
    }

    .vis-option-title{
        color:#f8fafc;
        font-size:15.5px;
        font-weight:600;
    }

    .custom-vis-option.selected .vis-option-title{
        color:#fef08a;
    }

    .vis-option-sub{
        color:#94a3b8;
        font-size:14px;
        margin-top:2px;
    }

    .vis-option-check{
        color:#eec85e;
        font-size:15.5px;
        opacity:0;
        transition:opacity 0.15s ease;
    }

    .custom-vis-option.selected .vis-option-check{
        opacity:1;
    }

    /* Premium Icon Badges */
    .vis-badge{
        width:34px;
        height:34px;
        border-radius:10px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:15.5px;
        flex-shrink:0;
        transition:all 0.2s ease;
    }

    .vis-badge-everyone{
        background:rgba(34, 197, 94, 0.15);
        border:1px solid rgba(34, 197, 94, 0.4);
        color:#4ade80;
        box-shadow:0 0 10px rgba(34, 197, 94, 0.2);
    }

    .vis-badge-participants{
        background:rgba(59, 130, 246, 0.15);
        border:1px solid rgba(59, 130, 246, 0.4);
        color:#60a5fa;
        box-shadow:0 0 10px rgba(59, 130, 246, 0.2);
    }

    .vis-badge-roles{
        background:rgba(249, 115, 22, 0.15);
        border:1px solid rgba(249, 115, 22, 0.4);
        color:#fb923c;
        box-shadow:0 0 10px rgba(249, 115, 22, 0.2);
    }

    /* Custom Interactive Tooltip System for Composer Buttons */
    .relative-tooltip-wrap{
        position:relative;
        display:inline-flex;
        align-items:center;
    }

    .custom-tooltip{
        position:absolute;
        bottom:calc(100% + 12px);
        width:230px;
        background:#090e1a !important;
        border:1.5px solid rgba(229, 193, 88, 0.55) !important;
        border-radius:12px;
        padding:10px 12px;
        box-shadow:0 12px 35px rgba(0, 0, 0, 0.95), 0 0 18px rgba(229, 193, 88, 0.2);
        z-index:999999 !important;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    }

    /* Downward Tooltip Pointer Arrow Base */
    .custom-tooltip::after{
        content:'';
        position:absolute;
        top:100%;
        border-width:6px 6px 0 6px;
        border-style:solid;
        border-color:#090e1a transparent transparent transparent;
        z-index:1000000;
    }

    .custom-tooltip::before{
        content:'';
        position:absolute;
        top:100%;
        border-width:7.5px 7.5px 0 7.5px;
        border-style:solid;
        border-color:rgba(229, 193, 88, 0.55) transparent transparent transparent;
        z-index:999999;
    }

    /* Specific Alignments for Paperclip & Lock Buttons to Prevent Left Edge Bleed */
    .file-tooltip{
        left:-6px !important;
        transform:translateY(4px) !important;
    }
    .file-tooltip::after,
    .file-tooltip::before{
        left:22px !important;
    }

    .lock-tooltip{
        left:-40px !important;
        transform:translateY(4px) !important;
    }
    .lock-tooltip::after,
    .lock-tooltip::before{
        left:56px !important;
    }

    /* Show Tooltip on Hover */
    .relative-tooltip-wrap:hover .custom-tooltip{
        opacity:1;
        visibility:visible;
        transform:translateY(0) !important;
    }
    .tooltip-header{
        display:flex;
        align-items:center;
        gap:7px;
        font-size:14px;
        font-weight:700;
        color:#eec85e;
        padding-bottom:5px;
        border-bottom:1px solid rgba(255, 255, 255, 0.08);
    }

    .tooltip-body{
        font-size:13.5px;
        color:#cbd5e1;
        line-height:1.45;
        margin-top:5px;
    }

    .tooltip-footer{
        display:flex;
        align-items:flex-start;
        gap:7px;
        font-size:12.5px;
        font-weight:600;
        color:#8b96ac;
        margin-top:6px;
        padding-top:4px;
        border-top:1px dashed rgba(255, 255, 255, 0.08);
    }
    /* the icon is its own fixed column and the sentence wraps beside it, so a
       two-line footer lines up under itself instead of centring on the icon */
    .tooltip-footer i{
        flex:0 0 14px;
        width:14px;
        margin-top:2px;
        text-align:center;
        font-size:11.5px;
    }
    .tooltip-footer span{
        flex:1 1 auto;
        min-width:0;
        line-height:1.4;
    }

    /* the e-signature line of the paperclip tooltip: its own gold-edged note so the option is noticed */
    .tooltip-sign{
        display:flex;
        align-items:flex-start;
        gap:8px;
        margin-top:8px;
        padding:7px 9px;
        border-radius:8px;
        border:1px solid rgba(238, 200, 94, 0.32);
        background:rgba(238, 200, 94, 0.09);
        font-size:12.5px;
        line-height:1.4;
        color:#e6dcc0;
    }
    .tooltip-sign i{
        flex:0 0 14px;
        width:14px;
        margin-top:2px;
        text-align:center;
        font-size:13px;
        color:#eec85e;
    }
    .tooltip-sign span{
        flex:1 1 auto;
        min-width:0;
    }
    .tooltip-sign b{
        color:#eec85e;
        font-weight:700;
    }

    .text-gold{
        color:#eec85e !important;
    }

    .vis-picker-container{
        margin-top:12px;
        padding:12px;
        background:rgba(11, 19, 41, 0.7);
        border:1px solid rgba(255, 255, 255, 0.08);
        border-radius:10px;
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        max-height:180px;
        overflow-y:auto;
    }

    /* Custom Participant & Role Chips */
    .vis-chip{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:6px 13px;
        background:rgba(30, 41, 59, 0.8);
        border:1px solid rgba(255, 255, 255, 0.12);
        border-radius:30px;
        color:#cbd5e1;
        font-size:14px;
        font-weight:500;
        cursor:pointer;
        transition:all 0.2s ease;
        user-select:none;
        margin:0;
    }

    .vis-chip:hover{
        background:rgba(51, 65, 85, 0.9);
        border-color:rgba(229, 193, 88, 0.4);
        color:#fff;
    }

    .vis-chip input[type="checkbox"]{
        position:absolute;
        opacity:0;
        width:0;
        height:0;
        pointer-events:none;
    }

    .vis-chip-box{
        width:17px;
        height:17px;
        border-radius:50%;
        border:1.5px solid #64748b;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:11px;
        color:transparent;
        transition:all 0.2s ease;
        flex-shrink:0;
        background:rgba(0,0,0,0.3);
    }

    .vis-chip input[type="checkbox"]:checked ~ .vis-chip-box{
        background:#eec85e;
        border-color:#eec85e;
        color:#1a1205;
    }

    .vis-chip:has(input[type="checkbox"]:checked){
        background:rgba(229, 193, 88, 0.12);
        border-color:rgba(229, 193, 88, 0.5);
        color:#fbf0cb;
        font-weight:600;
        box-shadow:0 2px 8px rgba(229, 193, 88, 0.15);
    }

    .vis-chip-name{
        white-space:nowrap;
    }

    .vis-chip-badge{
        font-size:12.5px;
        font-weight:700;
        padding:2px 7px;
        border-radius:12px;
        background:rgba(255, 255, 255, 0.08);
        color:#94a3b8;
        text-transform:capitalize;
    }

    .vis-chip:has(input[type="checkbox"]:checked) .vis-chip-badge{
        background:rgba(229, 193, 88, 0.2);
        color:#eec85e;
    }

    .disabled-file{
        color:#a68c52;
        cursor:not-allowed;
        text-decoration:none;
    }

    /* Add Task Modal Styles */
    .modal-field {
        margin-bottom: 20px;
    }
    .modal-label {
        display: block;
        color: #94a3b8;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .modal-input, .modal-select, .modal-textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 12px 16px;
        color: #f8fafc;
        font-size: 16px;
        transition: all 0.3s ease;
        outline: none;
    }
    .modal-input:focus, .modal-select:focus, .modal-textarea:focus {
        border-color: #6d28d9;
        background: #11232f;
        box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.1);
    }
    .modal-textarea {
        height: 100px;
        resize: none;
    }
    .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 24px;
    }
    .btn-modal-cancel {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #94a3b8;
        padding: 10px 20px;
        border-radius: 10px;
        font-size: 15.5px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .btn-modal-cancel:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #f8fafc;
    }
    .btn-modal-submit {
        background: linear-gradient(135deg, #ebd8b0 0%, #d3bf98 100%);
        border: 1px solid rgba(235, 216, 176, 0.4);
        color: #061121;
        padding: 10px 24px;
        border-radius: 10px;
        font-size: 15.5px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(235, 216, 176, 0.3);
        transition: all 0.3s ease;
    }
    .btn-modal-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(235, 216, 176, 0.4);
    }

    /* ══ TRANSFER OWNERSHIP ═══════════════════════════════════════════════════
       This modal hands the room away, cannot be undone from this side, and used
       to look like every other confirm: a bare heading, two paragraphs, and a red
       submit. The three things it now says structurally rather than in prose:

         · WHAT KIND of action this is - a crimson mark in the header, not the
           gold every other dialog wears. Gold here read as routine;
         · WHO ENDS UP WITH WHAT - .tpdx-swap states both sides' before and
           after, so the swap is legible without parsing a sentence;
         · WHAT YOU CANNOT TAKE BACK - the warning is a bordered callout, the
           same shape this app uses for a real alert, instead of red body text
           that scans as more description.

       Scoped under .tpdx so the shared .btn-modal-* / .modal-footer styling other
       dialogs rely on is untouched. */
    .tpdx { color: #fff; position: relative; }
    .tpdx-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; }
    .tpdx-mark {
        flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
        display: grid; place-items: center; font-size: 17px; color: #ffb3b3;
        background: linear-gradient(180deg, rgba(255,82,82,.18), rgba(255,82,82,.07));
        border: 1px solid rgba(255,82,82,.42);
        box-shadow: 0 0 18px -6px rgba(255,82,82,.5), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .tpdx-htx { min-width: 0; }
    .tpdx-htx h3 {
        margin: 0; font-size: 20px; font-weight: 800; color: #f8fafc; letter-spacing: .2px;
    }
    .tpdx-htx p { margin: 4px 0 0; color: #94a3b8; font-size: 14.5px; line-height: 1.55; }

    /* the hand-over, as two states rather than a sentence */
    .tpdx-swap {
        display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap;
        padding: 14px; border-radius: 13px;
        background: linear-gradient(180deg, rgba(18,26,44,.72), rgba(9,14,26,.72));
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    .tpdx-side { flex: 1 1 190px; min-width: 0; display: flex; align-items: center; gap: 11px; }
    .tpdx-av {
        flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
        display: grid; place-items: center;
        font-size: 13px; font-weight: 800; letter-spacing: .5px;
        color: #9aa6bd; background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.14);
    }
    .tpdx-side.to .tpdx-av {
        color: #f0dfa6; background: rgba(235,216,176,.12);
        border-color: rgba(235,216,176,.5);
        box-shadow: 0 0 14px -5px rgba(235,216,176,.6);
    }
    .tpdx-who { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .tpdx-who b {
        color: #f8fafc; font-size: 15px; font-weight: 700; line-height: 1.25;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* the arrow between the two roles is the whole point of the line, so it is
       coloured while the roles either side stay quiet */
    .tpdx-who em {
        font-style: normal; color: #7d8798; font-size: 12.5px; line-height: 1.3;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .tpdx-who em i { color: #ffb3b3; font-size: 9px; margin: 0 5px; }
    .tpdx-who em .now { color: #cbd5e1; font-weight: 600; }
    .tpdx-arrow {
        flex: 0 0 auto; align-self: center; color: #6f7889; font-size: 13px;
    }

    /* the part that cannot be undone, as an alert and not as more prose */
    .tpdx-warn {
        display: flex; align-items: flex-start; gap: 10px;
        margin-top: 14px; padding: 12px 14px; border-radius: 12px;
        background: rgba(255,82,82,.07);
        border: 1px solid rgba(255,82,82,.4);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
        color: #ffc9c9; font-size: 14px; line-height: 1.55;
    }
    .tpdx-warn > i { flex: 0 0 auto; color: #ff8f8f; font-size: 14px; margin-top: 2px; }
    .tpdx-warn b { color: #fff; font-weight: 800; }
    .tpdx-err {
        display: none; margin-top: 12px; padding: 11px 13px; border-radius: 11px;
        background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.45);
        color: #ffd0d0; font-size: 14px; line-height: 1.5;
    }

    /* the destructive confirm: crimson, and lit like the primary it is - the flat
       #8a2b2b it used to carry read as a disabled button next to the gold Cancel */
    .tpdx .btn-modal-danger {
        background: linear-gradient(135deg, #d64545 0%, #a32020 100%);
        border: 1px solid rgba(255,120,120,.55);
        color: #fff;
        box-shadow: 0 4px 14px rgba(214,69,69,.4), inset 0 1px 0 rgba(255,255,255,.18);
        display: inline-flex; align-items: center; gap: 8px;
    }
    .tpdx .btn-modal-danger i { color: #ffe1e1 !important; font-size: 14px; }
    .tpdx .btn-modal-danger:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 20px rgba(214,69,69,.55), inset 0 1px 0 rgba(255,255,255,.22);
    }
    .tpdx .btn-modal-danger:disabled { transform: none; filter: saturate(.7); cursor: default; }
    /* ══ PARTICIPANT DETAILS ══════════════════════════════════════════════════
       Same shell as Transfer Ownership, opposite job: this one only reports. It
       was a single bordered card holding a name, an email and a chip, with the
       rest of the dialog empty - which read as a dialog that had failed to load
       rather than one with little to say.
       Two blocks instead: an identity hero, then one row per fact the kebab
       actually carried. The row list is built in JS and skips anything absent, so
       the dialog is short when the record is thin instead of padded with dashes. */
    .tpdv-hero {
        display: flex; align-items: center; gap: 15px;
        padding: 17px; border-radius: 14px;
        background:
            radial-gradient(90% 140% at 0% 50%, rgba(235,216,176,.1) 0%, transparent 62%),
            linear-gradient(180deg, rgba(18,26,44,.75), rgba(9,14,26,.75));
        border: 1px solid rgba(235,216,176,.24);
        box-shadow: 0 14px 34px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.055);
    }
    .tpdv-av {
        flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%;
        display: grid; place-items: center;
        font-size: 17px; font-weight: 800; letter-spacing: .5px; color: #f0dfa6;
        background: radial-gradient(circle at 32% 28%, rgba(235,216,176,.22), rgba(0,0,0,.5));
        border: 1px solid rgba(235,216,176,.55);
        box-shadow: 0 0 20px -6px rgba(235,216,176,.6), inset 0 1px 0 rgba(255,255,255,.2);
    }
    .tpdv.is-pending .tpdv-av {
        color: #f6ce7c; border-color: rgba(246,184,63,.55);
        box-shadow: 0 0 20px -6px rgba(246,184,63,.55), inset 0 1px 0 rgba(255,255,255,.18);
    }
    .tpdv-id { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
    .tpdv-id > b {
        color: #fff; font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: .2px;
    }
    .tpdv-state {
        display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
        padding: 4px 12px; border-radius: 50px;
        font-size: 13px; font-weight: 700; white-space: nowrap;
        color: #7bf0a8; background: rgba(62,233,140,.1); border: 1px solid rgba(62,233,140,.45);
    }
    .tpdv-state i { font-size: 7px; filter: drop-shadow(0 0 4px #3ee98c); }
    .tpdv.is-pending .tpdv-state {
        color: #f6ce7c; background: rgba(246,184,63,.1); border-color: rgba(246,184,63,.5);
    }
    .tpdv.is-pending .tpdv-state i { font-size: 11px; filter: none; }

    /* fact rows: icon, label, value. A three-column grid rather than flex so every
       value starts on the same x however long the labels are. */
    .tpdv-facts {
        margin-top: 13px; border-radius: 13px; overflow: hidden;
        background: linear-gradient(180deg, rgba(18,26,44,.55), rgba(9,14,26,.55));
        border: 1px solid rgba(255,255,255,.075);
    }
    .tpdv-fact {
        display: grid; grid-template-columns: 30px 78px minmax(0, 1fr);
        align-items: center; gap: 10px;
        padding: 12px 15px;
        border-bottom: 1px solid rgba(255,255,255,.05);
    }
    .tpdv-fact:last-child { border-bottom: 0; }
    .tpdv-fi {
        width: 30px; height: 30px; border-radius: 9px;
        display: grid; place-items: center;
        color: #9aa4b5; background: rgba(255,255,255,.045);
        border: 1px solid rgba(255,255,255,.09);
    }
    .tpdv-fi i { font-size: 12px; }
    .tpdv-fk {
        color: #75808f; font-size: 11.5px; font-weight: 800;
        letter-spacing: .08em; text-transform: uppercase;
    }
    .tpdv-fv {
        min-width: 0; color: #e6edf8; font-size: 14.5px; line-height: 1.45;
        overflow-wrap: anywhere;
    }
    .tpdv-fv a { color: #9ccaff; text-decoration: none; }
    .tpdv-fv a:hover { text-decoration: underline; }
    @media (max-width: 520px) {
        /* the label column cannot hold "ACCESS" and a value on one line here */
        .tpdv-fact { grid-template-columns: 30px minmax(0, 1fr); row-gap: 4px; }
        .tpdv-fk { grid-column: 2; }
        .tpdv-fv { grid-column: 2; }
    }

    @media (max-width: 520px) {
        .tpdx-arrow { display: none; }
        .tpdx-side { flex: 1 1 100%; }
        .tpdx .modal-footer { flex-direction: column-reverse; }
        .tpdx .modal-footer button { width: 100%; justify-content: center; }
    }
    #closeExecute{
        position: absolute;
        right: 10px;
        border: none;
        outline: none;
        font-size: 22px;
    }

    /* timeline role access */
    .stage-disabled{
       filter: grayscale(90%);
    }

    .stage-allowed{
        box-shadow:0 0 15px rgba(59,130,246,.4);
        border-radius:12px;
    }
    /* timeline role access */

    .add-exist-participant{
        font-size: 16px;
        font-weight: 300;
        color: #51c174;
    }
    .add-exist-participant:hover{
        color: #51c174;
    }

    .invite-part{
        margin-top: 20px;
        margin-bottom: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        text-align: center;
    }

    .invite-part button {
        width: 100% !important;
        box-sizing: border-box !important;
        justify-content: center !important;
    }

    /* Enhanced Premium Golden Button with Deep Navy 3D Border & Timeline Golden Glow */
    .btn-ai-assistant-top,
    .invite-part-top,
    button.add-participant,
    button.add-temp-participant,
    .invite-part button,
    .btn-goto-timeline,
    .btn-deal-concierge,
    a.btn-deal-concierge,
    #btnMyDealRooms {
        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;
        font-weight: 800 !important;
        letter-spacing: 0.3px !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;
    }
    .btn-ai-assistant-top:hover,
    .invite-part-top:hover,
    button.add-participant:hover,
    button.add-temp-participant:hover,
    .invite-part button:hover,
    .btn-goto-timeline:hover,
    .btn-deal-concierge:hover,
    a.btn-deal-concierge:hover,
    #btnMyDealRooms:hover {
        transform: translateY(-2px) scale(1.02) !important;
        box-shadow: 
            0 10px 25px rgba(0, 0, 0, 0.55),
            0 0 24px rgba(246, 184, 63, 0.65),
            inset 0 2px 2px rgba(255, 255, 255, 0.9),
            inset 0 -2.5px 4px rgba(160, 120, 35, 0.55) !important;
    }

    /* Golden button icon color enforcement — ensures icons stay dark #061121 and NEVER turn white */
    .editMsgText i,
    .add-temp-participant i,
    .add-participant i,
    .invite-part-top i,
    .btn-send i,
    #deal-chat-view .btn-send i,
    button.add-temp-participant i,
    button.add-participant i,
    button.invite-part-top i,
    .btn-goto-timeline i,
    .btn-deal-concierge i,
    a.btn-deal-concierge i,
    #btnMyDealRooms i {
        color: #061121 !important;
        fill: #061121 !important;
    }

/* ---- deal-room.php block 2, source line 11061 ---- */

/* Preview is the primary action in the bubble now; Download steps back to an
   outline so the pair reads as "look at it" then "keep a copy". Scoped to
   .file-actions so the gold .btn-doc-download defined in inc/footer.php is
   only demoted inside a chat file tile, never anywhere else. */
.file-actions .btn-doc-preview{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    height:28px; padding:0 12px; box-sizing:border-box; border-radius:8px;
    font-size:13px; font-weight:700; letter-spacing:.2px; line-height:1;
    white-space:nowrap; cursor:pointer; text-decoration:none;
    background:linear-gradient(135deg,#f3e2b3 0%,#e5c158 55%,#caa63f 100%);
    border:1px solid rgba(255,255,255,.25); color:#1a1205;
    box-shadow:0 3px 10px rgba(0,0,0,.35),0 0 14px rgba(229,193,88,.28),
               inset 0 1px 0 rgba(255,255,255,.55);
    transition:all .2s cubic-bezier(.4,0,.2,1);
}
.file-actions .btn-doc-preview i{ font-size:12.5px; line-height:1; color:#1a1205; }
.file-actions .btn-doc-preview:hover{ transform:translateY(-1px); }
.file-actions .btn-doc-preview:active{ transform:translateY(0); filter:brightness(.96); }
.file-actions .btn-doc-download{
    background:rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.38);
    color:#e8cf82 !important; box-shadow:none;
}
.file-actions .btn-doc-download i{ color:#e8cf82 !important; }
.file-actions .btn-doc-download:hover{
    background:rgba(212,175,55,.2); border-color:#d4af37; color:#ffe9b8 !important;
}
@media (max-width:560px){ .file-actions > .btn-doc-preview{ flex:1 1 130px; } }

/* ---- the timeline chip that lives on the chat bubble ------------------
   The answer to "where did my document go?" belongs in the chat, next to the
   document, not only in a modal the user dismissed. It is rendered from
   msg.timeline_link, so it survives a reload and every other participant
   sees it too. */
.hb-tl-chip{
    display:inline-flex; align-items:center; gap:7px; margin-top:8px;
    padding:5px 10px; border-radius:8px; font-size:13px; font-weight:700;
    line-height:1.3; max-width:100%; box-sizing:border-box;
    background:rgba(62,233,140,.1); border:1px solid rgba(62,233,140,.3);
    color:#5ee39c; cursor:pointer;
}
.hb-tl-chip i{ font-size:12px; flex:0 0 auto; }
.hb-tl-chip span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hb-tl-chip:hover{ background:rgba(62,233,140,.18); border-color:rgba(62,233,140,.5); }
.hb-tl-chip.pend{
    background:rgba(229,193,88,.1); border-color:rgba(229,193,88,.32); color:#e8cf82;
}
.hb-tl-chip.pend:hover{ background:rgba(229,193,88,.18); }
.hb-tl-chip.work{
    background:rgba(148,163,184,.12); border-color:rgba(148,163,184,.28);
    color:#cbd5e1; cursor:default;
}
.hb-tl-chip .dots{ display:inline-block; width:12px; text-align:left; }
@keyframes hbDots{ 0%{content:"."} 33%{content:".."} 66%{content:"..."} }
.hb-tl-chip.work .dots::after{ content:"."; animation:hbDots 1.2s steps(1,end) infinite; }
@media (prefers-reduced-motion: reduce){ .hb-tl-chip.work .dots::after{ animation:none; content:"..."; } }

/* ---- the overlay ------------------------------------------------------ */
.hbdoc-ov{
    position:fixed; inset:0; z-index:100000; display:none;
    align-items:center; justify-content:center; padding:24px;
    background:rgba(6,9,16,.82); backdrop-filter:blur(6px);
}
.hbdoc-ov.open{ display:flex; }
.hbdoc-sheet{
    width:min(920px,100%); max-height:calc(100vh - 48px);
    display:flex; flex-direction:column; overflow:hidden;
    background:linear-gradient(180deg,#111826 0%,#0c111b 100%);
    border:1px solid rgba(212,175,55,.28); border-radius:16px;
    box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.hbdoc-head{
    display:flex; align-items:center; gap:12px; padding:14px 18px;
    border-bottom:1px solid rgba(255,255,255,.08); flex:0 0 auto;
}
.hbdoc-head .ic{
    width:34px; height:34px; border-radius:9px; flex:0 0 auto;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(212,175,55,.14); color:#e8cf82; font-size:15.5px;
}
.hbdoc-head .tt{ flex:1 1 auto; min-width:0; }
.hbdoc-head .tt b{
    display:block; color:#f4f7ff; font-size:16px; font-weight:800;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hbdoc-head .tt span{ display:block; color:#8b96a8; font-size:13.5px; margin-top:2px; }
/* Solid red, per the design — a filled tile rather than the faint red-tinted
   outline it was, so the close target is unmistakable at the panel's corner. */
.hbdoc-x{
    flex:0 0 auto; width:32px; height:32px; border-radius:8px; cursor:pointer;
    background:linear-gradient(135deg,#e8183a 0%,#d4122f 60%,#a80f26 100%);
    border:1px solid rgba(255,255,255,.26);
    color:#ffffff; font-size:15.5px;
    box-shadow:0 2px 8px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.3);
}
.hbdoc-x:hover{ filter:brightness(1.1); border-color:rgba(255,255,255,.45); }
.hbdoc-body{ flex:1 1 auto; min-height:0; overflow:auto; background:#0a0e16; }
.hbdoc-body iframe{ width:100%; height:min(62vh,620px); border:0; display:block; background:#fff; }
.hbdoc-body img{ display:block; max-width:100%; margin:0 auto; }
.hbdoc-nopreview{
    padding:46px 24px; text-align:center; color:#94a3b8; font-size:15px;
}
/* extracted-text preview (.docx/.xlsx/.txt) — styled for the dark sheet
   rather than dropped into a white iframe */
.hbdoc-txtwrap{ padding:18px 20px; }
.hbdoc-txtload{ padding:40px 0; text-align:center; color:#94a3b8; font-size:14.5px; }
.hbdoc-txt{
    margin:0; padding:16px 18px; border-radius:10px;
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
    color:#dbe3f0; font-size:14px; line-height:1.65;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    white-space:pre-wrap; overflow-wrap:break-word; word-break:break-word;
    max-height:min(56vh,560px); overflow:auto;
}
.hbdoc-txtmore{ margin-top:10px; color:#8b96a8; font-size:13.5px; text-align:center; }
.hbdoc-nopreview i{ font-size:34px; color:#5b6478; display:block; margin-bottom:12px; }
.hbdoc-foot{
    display:flex; flex-wrap:wrap; gap:10px; padding:14px 18px; flex:0 0 auto;
    border-top:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02);
}
.hbdoc-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:40px; padding:0 16px; border-radius:10px; cursor:pointer;
    font-size:14px; font-weight:800; letter-spacing:.2px; white-space:nowrap;
    border:1px solid transparent; transition:all .2s cubic-bezier(.4,0,.2,1);
    text-decoration:none;
}
/* ── Action colours ──────────────────────────────────────────────────────
   Three solid, clearly separate faces rather than two shades of one colour:

     RED   "Send to Timeline"        — the primary, and the loudest thing here
     GOLD  "Send to Timeline & Save" — the same action plus a filed copy
     NAVY  "Download"                — the quiet third option, still a real
                                       button and not the rgba(255,255,255,.05)
                                       ghost it used to be

   Note red is the PRIMARY here, not a destructive signal. To keep that from
   reading as danger, nothing else in this modal is red-on-red: the dismissing
   actions below are neutral outlines, so red in the footer means exactly one
   thing — the main way forward. */
.hbdoc-btn.pri{
    flex:1 1 220px;
    /* The lightest stop is capped at #e8183a rather than the #ff4a5c this
       started on: white on #ff4a5c measures 3.29:1, and the label is 12.5px
       bold — too small to qualify for the 3:1 large-text allowance. At
       #e8183a every stop clears 4.5:1 and the face still reads as the bright
       red of the design, not a maroon. */
    background:linear-gradient(135deg,#e8183a 0%,#d4122f 55%,#a80f26 100%);
    color:#ffffff; border-color:rgba(255,255,255,.28);
    box-shadow:0 4px 14px rgba(0,0,0,.45),
               0 0 20px rgba(255,45,67,.45),
               0 0 40px rgba(255,45,67,.2),
               inset 0 1.5px 1px rgba(255,255,255,.34);
    text-shadow:0 1px 2px rgba(90,0,10,.5);
}
.hbdoc-btn.pri i{ color:#ffffff !important; }
/* Gold takes DARK ink, not white. White on a gold this bright measures about
   3.4:1 — under the 4.5:1 a 12.5px label needs — and the fix of darkening the
   gold until white passes lands on a dull bronze that no longer reads as gold
   at all. Dark ink keeps the bright gold face of the design and clears 4.5:1
   comfortably; it is also what every other gold button in this product does. */
.hbdoc-btn.sec{
    flex:1 1 190px;
    background:linear-gradient(135deg,#f7c657 0%,#e2a01c 55%,#c07c10 100%);
    color:#2a1800; border-color:rgba(255,255,255,.28);
    box-shadow:0 4px 14px rgba(0,0,0,.45),
               0 0 18px rgba(226,160,28,.4),
               inset 0 1.5px 1px rgba(255,255,255,.45);
}
.hbdoc-btn.sec i{ color:#2a1800 !important; }
/* Download: deep navy, the panel's own family — present without competing
   with the two send actions beside it. */
.hbdoc-btn.ghost{
    flex:0 0 auto;
    background:linear-gradient(135deg,#25314f 0%,#1a2440 100%);
    border-color:rgba(140,170,235,.4); color:#e8eefc;
    box-shadow:0 3px 12px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.1);
}
.hbdoc-btn.ghost i{ color:#e8eefc !important; }
.hbdoc-btn.ghost:hover{
    background:linear-gradient(135deg,#2e3c5f 0%,#212d4e 100%);
    border-color:rgba(160,190,255,.62);
}
/* Dismissals stay neutral now that red carries the primary. A red outline
   here would put two different meanings on the same colour in one footer. */
.hbdoc-btn.ghost[data-hbdoc-close]{
    background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.28);
    color:#c3cbdb; box-shadow:none;
}
.hbdoc-btn.ghost[data-hbdoc-close]:hover{
    background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.45); color:#eaf0fb;
}
.hbdoc-btn.ghost[data-hbdoc-close] i{ color:#c3cbdb !important; }
.hbdoc-btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.hbdoc-btn:active{ transform:translateY(0); }
.hbdoc-btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; filter:none; }

/* ---- result / stage-picker panel -------------------------------------- */
.hbdoc-pad{ padding:22px; }
.hbdoc-hero{ text-align:center; padding:8px 0 18px; }
.hbdoc-hero .tick{
    width:56px; height:56px; border-radius:50%; margin:0 auto 14px;
    display:flex; align-items:center; justify-content:center; font-size:24px;
    background:rgba(62,233,140,.12); color:#3ee98c; border:1px solid rgba(62,233,140,.35);
}
.hbdoc-hero .tick.warn{
    background:rgba(229,193,88,.12); color:#e5c158; border-color:rgba(229,193,88,.4);
}
.hbdoc-hero h4{ margin:0 0 6px; color:#f4f7ff; font-size:17px; font-weight:800; }
.hbdoc-hero p{ margin:0; color:#94a3b8; font-size:14.5px; line-height:1.5; }
.hbdoc-rows{
    border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden;
    background:rgba(255,255,255,.02);
}
.hbdoc-row{
    display:flex; align-items:center; gap:12px; padding:12px 14px;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.hbdoc-row:last-child{ border-bottom:0; }
.hbdoc-row .k{
    flex:0 0 128px; color:#8b96a8; font-size:13.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em;
}
.hbdoc-row .v{ flex:1 1 auto; min-width:0; color:#e8edf7; font-size:15px; font-weight:600; }
.hbdoc-pill{
    display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
    border-radius:999px; font-size:13.5px; font-weight:800;
    background:rgba(212,175,55,.14); color:#e8cf82; border:1px solid rgba(212,175,55,.3);
}
.hbdoc-pill.ok{ background:rgba(62,233,140,.12); color:#3ee98c; border-color:rgba(62,233,140,.32); }
.hbdoc-conf{
    height:6px; border-radius:999px; background:rgba(255,255,255,.08);
    overflow:hidden; margin-top:7px;
}
.hbdoc-conf i{ display:block; height:100%; border-radius:999px;
    background:linear-gradient(90deg,#caa63f,#e5c158); }
.hbdoc-note{
    margin-top:14px; padding:11px 13px; border-radius:10px; font-size:14px;
    line-height:1.55; color:#b9c4d4; background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.07);
}
.hbdoc-stages{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.hbdoc-stage{
    display:flex; align-items:center; gap:11px; padding:12px 14px; cursor:pointer;
    border-radius:10px; border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.03); color:#e8edf7; font-size:15px; font-weight:600;
    transition:all .16s ease;
}
.hbdoc-stage:hover{ border-color:rgba(212,175,55,.45); background:rgba(212,175,55,.08); }
.hbdoc-stage.sel{ border-color:#d4af37; background:rgba(212,175,55,.14); color:#ffe9b8; }
.hbdoc-stage .dot{
    width:16px; height:16px; border-radius:50%; flex:0 0 auto;
    border:2px solid rgba(255,255,255,.28);
}
.hbdoc-stage.sel .dot{ border-color:#e5c158; background:#e5c158; box-shadow:0 0 0 3px rgba(229,193,88,.2) inset; }
.hbdoc-spin{ display:inline-block; width:14px; height:14px; border-radius:50%;
    border:2px solid rgba(26,18,5,.35); border-top-color:#1a1205;
    animation:hbdocSpin .7s linear infinite; }
@keyframes hbdocSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
    .hbdoc-btn, .hbdoc-stage{ transition:none; }
    .hbdoc-btn:hover{ transform:none; }
    .hbdoc-spin{ animation-duration:2s; }
}
@media (max-width:600px){
    .hbdoc-ov{ padding:0; }
    .hbdoc-sheet{ width:100%; max-height:100vh; border-radius:0; border-left:0; border-right:0; }
    .hbdoc-body iframe{ height:52vh; }
    .hbdoc-row{ flex-direction:column; align-items:flex-start; gap:4px; }
    .hbdoc-row .k{ flex:0 0 auto; }
}

    /* ══ THE GLASS PASS — every dialog in the room, one material ═══════════════
       The Open House sheet (inc/open_house_panel.php) set the house style: a
       deep blue field lit from the top right, surfaces built from CSS layers
       rather than flat fills, and gold reserved for what you press.

       This block brings the SHARED SHELL over to it, which is the only way to
       reach all of them: #popup23 is one box that ~20 features inject their
       own markup into — invite, remove a participant, change a role, transfer
       ownership, the notices, the offer sheet — and most of those write their
       content with inline styles that no stylesheet can touch. Re-skin the box
       and they all arrive dressed correctly; re-skin them one at a time and
       the list is never finished.

       Placed at the end of the file on purpose: the base shell wears
       !important on its background, border and shadow, so this has to match it
       and win on source order.

       The old shell was navy with a cream-gold rim and a gold glow bleeding
       out of every edge. The rim goes cool and quiet, the glow goes, and the
       gold is spent where it means something.
       ────────────────────────────────────────────────────────────────────── */
    #popup23 {
        background:
            radial-gradient(70% 38% at 88% 2%, rgba(35, 112, 183, .30), transparent 72%),
            radial-gradient(58% 42% at 0% 66%, rgba(14, 91, 151, .18), transparent 75%),
            linear-gradient(180deg, #0A203A 0%, #071A31 52%, #061426 100%) !important;
        border: 1px solid rgba(98, 183, 242, .30) !important;
        box-shadow:
            inset 0 1px 0 rgba(191, 229, 255, .18),
            0 30px 70px rgba(0, 0, 0, .60) !important;
        backdrop-filter: blur(20px) !important;
    }
    /* the 6px inset hairline, in the same cool light */
    #popup23::after {
        border-color: rgba(98, 183, 242, .16) !important;
        border-radius: 18px !important;
    }
    /* The dim layer behind it, matched to the Open House veil. */
    #overlay {
        background-color: rgba(3, 8, 16, .82) !important;
        backdrop-filter: blur(5px) !important;
    }
    /* The scroller keeps scrolling and loses its bar: the room's is a gold
       rail down the edge of a dialog whose own accent is now gold, and two
       golds a few pixels apart read as a mistake. Content clipped mid-row is
       what says there is more. */
    #popupContent23 {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #popupContent23::-webkit-scrollbar { width: 0; height: 0; display: none; }

    /* the shared × as a glass control */
    #close23 {
        width: 40px;
        height: 40px;
        color: #cbd5e1;
        background: linear-gradient(180deg,
            rgba(21, 61, 103, .46) 0%,
            rgba(11, 39, 70, .72) 38%,
            rgba(5, 24, 45, .90) 100%);
        border: 1px solid rgba(98, 183, 242, .34);
        box-shadow:
            inset 0 1px 0 rgba(191, 229, 255, .28),
            0 6px 14px rgba(0, 8, 24, .28);
    }
    #close23:hover {
        background: linear-gradient(180deg,
            rgba(28, 76, 124, .55) 0%,
            rgba(5, 24, 45, .90) 100%);
        border-color: rgba(98, 183, 242, .55);
        color: #fff;
        /* the 90-degree spin belonged to the old chrome; a glass control
           lights up, it does not perform */
        transform: none;
        box-shadow:
            inset 0 1px 0 rgba(191, 229, 255, .34),
            0 8px 18px rgba(0, 8, 24, .34);
    }

    /* ---- the shared confirm rail ---- */
    .btn-modal-cancel {
        background: linear-gradient(180deg,
            rgba(21, 61, 103, .46) 0%, rgba(5, 24, 45, .90) 100%);
        border: 1px solid rgba(98, 183, 242, .34);
        color: #cbd5e1;
        border-radius: 50px;
        box-shadow: inset 0 1px 0 rgba(191, 229, 255, .24);
    }
    .btn-modal-cancel:hover {
        background: linear-gradient(180deg,
            rgba(28, 76, 124, .55) 0%, rgba(5, 24, 45, .90) 100%);
        border-color: rgba(98, 183, 242, .55);
        color: #fff;
    }
    .btn-modal-submit {
        background: linear-gradient(145deg, #F8E4AB 0%, #F4D995 42%, #DDB760 100%);
        border: 1px solid rgba(255, 235, 184, .78);
        color: #071A2E;
        border-radius: 50px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .72),
            0 8px 22px rgba(238, 196, 101, .25);
    }
    .btn-modal-submit:hover {
        transform: translateY(-2px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .72),
            0 10px 26px rgba(238, 196, 101, .32);
    }
    .btn-modal-cancel:focus-visible,
    .btn-modal-submit:focus-visible,
    #close23:focus-visible {
        outline: 2px solid #8BCBFF;
        outline-offset: 3px;
    }

    /* The two flows that wear a warmer rim — creating a room, and activating
       one — keep that identity, on the same field as everything else. Their
       old neon halo is what the production note asked to come down. */
    #popup23:has(.temp-room-modal),
    #popup23:has(.activate-dealroom-modal) {
        background:
            radial-gradient(70% 38% at 88% 2%, rgba(35, 112, 183, .30), transparent 72%),
            radial-gradient(58% 42% at 0% 66%, rgba(14, 91, 151, .18), transparent 75%),
            linear-gradient(180deg, #0A203A 0%, #071A31 52%, #061426 100%) !important;
        border: 1px solid rgba(244, 217, 149, .55) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 240, 205, .22),
            0 30px 70px rgba(0, 0, 0, .62),
            0 0 26px rgba(238, 196, 101, .14) !important;
    }
    #popup23:has(.temp-room-modal)::after,
    #popup23:has(.activate-dealroom-modal)::after {
        border-color: rgba(244, 217, 149, .20) !important;
    }
    .temp-room-modal-title {
        color: #F4D995 !important;
        text-shadow: none;
    }