/* ═══════════════════════════════════════════════════════════════════════════════ BARANTUM.CSS · TABLE OF CONTENTS Search "§XX" to jump to that section. ═══════════════════════════════════════════════════════════════════════════════ §01 BASE & VARIABLES ............................................ ~L. 1 §02 TOPBAR (shared across all pages) ........................... ~L. 51 §03 LISTING PAGE ................................................ ~L. 266 §03a Table ................................................. ~L. 590 §03b Pagination ............................................ ~L. 871 §03c Filter Dropdown ....................................... ~L. 919 §03d Modals (tag, upload, import) ......................... ~L. 1131 §03e Show Per Page ......................................... ~L. 1497 §03f Stats Strip ........................................... ~L. 1530 §03g Action Bar / Bulk ..................................... ~L. 1592 §03h Advanced Filter Sidebar .............................. ~L. 1987 §03i Help Modal ............................................ ~L. 3019 §03j Responsive Overrides .................................. ~L. 3069 §04 CHART VIEW .................................................. ~L. 3313 §05 WIDGET CARD / Report Dashboard ........................... ~L. 3467 §06 PIPELINE VIEW ............................................... ~L. 4127 §07 INLINE CELL EDITOR .......................................... ~L. 4704 §08 LEAD SLIDESHOW PANEL ........................................ ~L. 5024 §09 QUICK PREVIEW PANEL (CRM Standard) ........................ ~L. 5178 §10 LEAD DETAIL PAGE — Full CSS ................................ ~L. 6117 §10a Layout (Sidebar + Main) ............................... ~L. 6445 §10b Main Content & Tabs ................................... ~L. 7227 §10c Activity Cards ........................................ ~L. 7590 §10d Comments Tab .......................................... ~L. 8173 §10e Changelog Tab ......................................... ~L. 8332 §10f Activity Slideout Panel ............................... ~L. 8462 §10g Toast & Generic Modal ................................. ~L. 8649 §10h Side Drawers (Merge / Duplicate / Check-in) ......... ~L. 8808 §10i Convert Wizard ........................................ ~L. 9340 §10j Advanced Search (detail page) ........................ ~L. 9813 §10k Calendar View ......................................... ~L. 10331 §10l Description Cell ...................................... ~L. 10699 §10m Customise Module Layout (brtm-cml) .................. ~L. 10799 §10n Column Resize ......................................... ~L. 11274 §11 SHARED — Report View, Status Pills, Module Cards ........... ~L. 11315 §12 UTILITY CLASSES ............................................. ~L. 12628 §13 CHAT MODULE (Omnichannel) ................................. ~L. 12885 §13a Layout & Icon Sidebar ................................ ~L. 12909 §13b Chat Panel (chat list) .............................. ~L. 13023 §13c Conversation Header .................................. ~L. 13231 §13d Messages & Bubbles ................................... ~L. 13397 §13e Input Bar & Toolbar .................................. ~L. 13732 §13f Profile Panel ........................................ ~L. 14581 §13g Menus, Modals & Extras ............................... ~L. 14892 §14 SHARED COMPONENTS (used by 2+ pages) §14a Advanced Filter Drawer (chat, email, lead) §14b Gmail-Style Thread (chat, email) §14c Icon Sidebar (listing pages) ═══════════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ §01 BASE & VARIABLES ══════════════════════════════════════════════════════════════ */ :root { --primary: #1B6FBE; --primary-light: #E7F1FB; --primary-dark: #134E8E; --accent: #00B87A; --accent-light: #E3F9F2; --sidebar-bg: #0D1F3C; --topbar-bg: #1B6FBE; --surface: #F5F7FA; --card-bg: #FFFFFF; --border: #DDE3ED; --text-main: #18233A; --text-muted: #6B7A99; --text-light: #A3ADBE; --badge-success: #00B87A; --badge-warn: #F59E0B; --row-hover: #EEF4FC; --shadow-sm: 0 1px 4px rgba(27, 111, 190, 0.07); --shadow-md: 0 4px 20px rgba(27, 111, 190, 0.12); /* aliases for lead-detail page */ --text-1: #18233A; --text-2: #6B7A99; --text-3: #A3ADBE; --white: #FFFFFF; --radius: 8px; /* ── Phase 1: Typography & Color Tokens (Chat SAAS UX rev) ── */ --brtm-font-ui: 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif; --brtm-font-num: 'Inter', ui-monospace, 'SF Mono', 'Roboto Mono', monospace; /* Type scale (5 sizes) */ --fs-xs: 11px; /* meta: timestamps, chips, sub-labels */ --fs-sm: 12.5px; /* body in dense rows, secondary text */ --fs-base: 13.5px; /* default UI text, message bubbles */ --fs-md: 15px; /* names in conversation header, section titles */ --fs-lg: 17px; /* page titles, customer hero name */ /* Weights (3 stops) */ --fw-reg: 450; --fw-med: 550; --fw-bold: 650; /* Calmer surfaces */ --bg-app: #f7f8fa; --bg-card: #ffffff; --bg-hover: #f1f4f8; --bg-active: #e8f0fb; /* Borders */ --br-1: #eef1f5; --br-2: #dde3ec; --br-strong: #c5cdd9; /* Text */ --tx-1: #0f172a; --tx-2: #475569; --tx-3: #8a96aa; --tx-4: #b3bccd; /* Brand & semantic — used sparingly */ --brand: #2284C6; --brand-50: #eef6fc; --sev-crit: #dc2626; --sev-warn: #d97706; --sev-ok: #16a34a; --sev-info: #2284C6; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; } /* Tabular numerals for timestamps, counts, IDs — improves alignment */ .brtm-chat-time, .brtm-cv-bubble-meta, .brtm-unread-badge, .brtm-tab-count, [data-num] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "cv11" 1; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; } body { font-family: var(--brtm-font-ui); background: var(--surface); color: var(--text-main); height: 100vh; margin: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; } /* ── TOPBAR ── */ /* ══════════════════════════════════════════════════════════════ §02 TOPBAR (shared across all pages) ══════════════════════════════════════════════════════════════ */ .brtm-topbar { background: var(--topbar-bg); height: 56px; display: flex; align-items: center; padding: 0 24px; gap: 0px; position: sticky; top: 0; z-index: 1030; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); } .brtm-topbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .brtm-topbar-brand .brtm-logo-box { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .brtm-topbar-brand .brtm-logo-box img { width: 32px; height: 32px; object-fit: contain; } /* ── Topbar Nav Wrap (responsive overflow) ── */ .brtm-topbar-nav-wrap { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; gap: 4px; } .brtm-topbar-nav { display: flex; gap: 4px; min-width: 0; overflow: hidden; } .brtm-topbar-nav .brtm-nav-item { color: rgba(255, 255, 255, 0.65); font-size: 13.5px; font-weight: 500; padding: 6px 14px; border-radius: 6px; cursor: pointer; transition: color .18s, background .18s; text-decoration: none; position: relative; white-space: nowrap; } .brtm-topbar-nav .brtm-nav-item::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 1px; background: #fff; transform: scaleX(0); transform-origin: left center; transition: transform .25s ease; } .brtm-topbar-nav .brtm-nav-item:hover { color: #fff; background: rgba(255,255,255,.12); } .brtm-topbar-nav .brtm-nav-item:hover::after { display: none; } .brtm-topbar-nav .brtm-nav-item.brtm-active { color: #fff; background: rgba(255,255,255,.1); font-weight: 600; } .brtm-topbar-nav .brtm-nav-item.brtm-active::after { display: none; } .brtm-topbar-nav .brtm-nav-item.is-hidden { visibility: hidden; pointer-events: none; position: absolute; opacity: 0; } /* ── More overflow button ── */ .brtm-nav-more-wrap { position: relative; display: none; align-items: center; } .brtm-nav-more-wrap.visible { display: flex; } .brtm-nav-more { flex-shrink: 0; background: transparent; border: none; color: rgba(255,255,255,.65); cursor: pointer; padding: 6px 14px; border-radius: 6px; font-size: 13.5px; font-weight: 500; line-height: 1.4; display: inline-flex; align-items: center; gap: 6px; transition: color .18s, background .18s; font-family: inherit; } .brtm-nav-more:hover, .brtm-nav-more.open { color: #fff; background: rgba(255,255,255,.1); } .brtm-nav-more .bi { font-size: 11px; transition: transform .2s; } .brtm-nav-more.open .bi { transform: rotate(180deg); } .brtm-nav-more-panel { position: fixed; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 5px; min-width: 170px; box-shadow: 0 10px 28px rgba(0,0,0,.14); z-index: 2000; display: none; animation: brtm-dd-in .18s ease; } .brtm-nav-more-panel.open { display: block; } .brtm-nav-more-panel .brtm-nav-item { display: block; padding: 8px 12px; border-radius: 7px; color: #1a2234 !important; font-size: 13px; font-weight: 500; text-decoration: none; background: transparent !important; } .brtm-nav-more-panel .brtm-nav-item::after { display: none !important; } .brtm-nav-more-panel .brtm-nav-item:hover { background: #f1f5f9 !important; } .brtm-nav-more-panel .brtm-nav-item.brtm-active { background: #E7F1FB !important; color: #1B6FBE !important; font-weight: 600; } /* ── Locked nav panel ── */ .brtm-nav-locked-wrap { position: relative; display: inline-flex; } .brtm-nav-item-locked { opacity: .65; display: flex; align-items: center; gap: 5px; cursor: pointer; } .brtm-nav-item-locked:hover { opacity: 1; } .brtm-nav-locked-panel { position: fixed; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 0; width: 260px; box-shadow: 0 16px 40px rgba(0,0,0,.15); z-index: 2000; display: none; overflow: hidden; animation: brtm-dd-in .18s ease; } .brtm-nav-locked-panel.open { display: block; } .brtm-nav-locked-header { padding: 16px 16px 12px; background: linear-gradient(135deg,#3b8de0 0%,#1B6FBE 45%,#0f3d72 100%); position: relative; overflow: hidden; } .brtm-nav-locked-header::before { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.07); top: -40px; right: -30px; pointer-events: none; } .brtm-nav-locked-header::after { content: ''; position: absolute; width: 70px; height: 70px; border-radius: 50%; background: rgba(255,255,255,.06); bottom: -25px; left: 10px; pointer-events: none; } .brtm-nav-locked-badge { display: inline-flex; align-items: center; background: rgba(255,255,255,.2); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 20px; margin-bottom: 8px; } .brtm-nav-locked-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px; } .brtm-nav-locked-desc { font-size: 12px; color: rgba(255,255,255,.8); line-height: 1.5; } .brtm-nav-locked-actions { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; } .brtm-nav-locked-preview { padding: 12px 16px 4px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid #f1f5f9; } .brtm-nav-locked-step { display: flex; align-items: flex-start; gap: 10px; } .brtm-nav-locked-step-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; background: #f1f5f9; color: #64748b; } .brtm-nav-locked-step-title { font-size: 12.5px; font-weight: 600; color: #1a2234; line-height: 1.3; } .brtm-nav-locked-step-desc { font-size: 11.5px; color: #8a9ab0; margin-top: 2px; line-height: 1.4; } .brtm-nav-locked-btn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s, transform .1s; } .brtm-nav-locked-btn:hover { transform: scale(1.02); } .brtm-nav-locked-btn.primary { background: #1B6FBE; color: #fff; } .brtm-nav-locked-btn.primary:hover { background: #134e8e; } .brtm-nav-locked-btn.secondary { background: #f1f5f9; color: #1a2234; } .brtm-nav-locked-btn.secondary:hover { background: #e2e8f0; } /* ── Agent status (topbar) ── */ .brtm-agent-wrap { position: relative; flex-shrink: 0; } .brtm-agent-wrap .brtm-avatar-btn { cursor: pointer; position: relative; } .brtm-topbar-status-dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid #134e8e; transition: background .2s; pointer-events: none; } .brtm-topbar-status-dot.online { background: #22c55e; } .brtm-topbar-status-dot.busy { background: #f59e0b; } .brtm-topbar-status-dot.offline { background: #94a3b8; } .brtm-agent-status-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 6px; min-width: 160px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 400; display: none; animation: brtm-dd-in .15s ease; } .brtm-agent-status-dropdown.open { display: block; } .brtm-agent-dd-header { font-size: 11px; color: #8a9ab0; font-weight: 600; padding: 4px 10px 6px; text-transform: uppercase; letter-spacing: .05em; } .brtm-agent-dd-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: #1a2234; transition: background .12s; } .brtm-agent-dd-item:hover { background: #f1f5f9; } .brtm-agent-dd-item.active { font-weight: 600; color: #1B6FBE; } .brtm-agent-dd-item .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .brtm-agent-dd-item .dot.online { background: #22c55e; } .brtm-agent-dd-item .dot.busy { background: #f59e0b; } .brtm-agent-dd-item .dot.offline { background: #94a3b8; } @keyframes brtm-dd-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .brtm-topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .brtm-btn-help-support { background: #2a4a72; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 500; font-family: var(--brtm-font-ui); padding: 6px 14px; cursor: pointer; transition: background .18s; } .brtm-btn-help-support:hover { background: #1e3a5f; } .brtm-topbar-icon-btn { width: 34px; height: 34px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 8px; color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; transition: background .18s; position: relative; } .brtm-topbar-icon-btn:hover { background: rgba(255, 255, 255, 0.18); color: #fff; } .brtm-topbar-icon-btn.brtm-green { background: #00B87A; } .brtm-topbar-icon-btn.brtm-green:hover { background: #009963; } .brtm-topbar-icon-btn { position: relative; } .brtm-topbar-icon-btn::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); background: var(--text-main); color: #fff; font-size: 11.5px; font-weight: 500; white-space: nowrap; padding: 4px 9px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; z-index: 9999; } .brtm-topbar-icon-btn::before { content: ''; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%) translateY(-4px); border: 5px solid transparent; border-bottom-color: var(--text-main); pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; z-index: 9999; } .brtm-topbar-icon-btn:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } .brtm-topbar-icon-btn:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); } .brtm-notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #fff; font-size: 9px; font-weight: 700; border-radius: 20px; padding: 1px 5px; min-width: 17px; text-align: center; } .brtm-avatar-btn { width: 34px; height: 34px; background: var(--primary); border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.2); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; } .brtm-search-bar-top { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; color: #fff; font-size: 13px; padding: 5px 14px 5px 36px; width: 100px; outline: none; } .brtm-search-bar-top::placeholder { color: rgba(255, 255, 255, 0.45); } .brtm-search-wrap { position: relative; } .brtm-search-wrap .bi-search { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.5); font-size: 14px; } /* ── PAGE WRAPPER ── */ /* ══════════════════════════════════════════════════════════════ §03 LISTING PAGE ══════════════════════════════════════════════════════════════ */ .brtm-page-wrapper { padding: 28px 32px 16px; flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; } /* ── PAGE HEADER ── */ .brtm-page-header { display: flex; align-items: center; margin-bottom: 20px; } .brtm-page-title { font-size: 22px; font-weight: 500; color: var(--text-main); letter-spacing: -0.3px; } .brtm-page-title span { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-left: 10px; font-family: 'DM Mono', monospace; } .brtm-btn-add-lead { background: var(--primary); color: #fff; border: none; border-radius: 8px; font-size: 13.5px; font-weight: 600; padding: 8px 18px; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 8px rgba(28, 110, 242, 0.25); transition: background .18s, box-shadow .18s; cursor: pointer; } .brtm-btn-add-lead:hover { background: var(--primary-dark); box-shadow: 0 4px 14px rgba(28, 110, 242, 0.35); } /* ── FILTER BAR ── */ .brtm-filter-bar { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; box-shadow: var(--shadow-sm); overflow: visible; position: relative; } .brtm-filter-bar-left { display: flex; align-items: center; gap: 8px; } .brtm-filter-bar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .brtm-filter-select { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: inherit; color: var(--text-main); padding: 6px 12px; outline: none; cursor: pointer; } .brtm-filter-btn { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--text-muted); padding: 6px 12px; cursor: pointer; transition: all .15s; } .brtm-filter-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-filter-btn.brtm-active-filter { border-color: var(--primary); color: var(--primary); background: var(--primary-light); font-weight: 600; } .brtm-approval-count { display: inline-flex; align-items: center; justify-content: center; background: var(--badge-warn); color: #fff; font-size: 10px; font-weight: 700; border-radius: 20px; padding: 1px 6px; min-width: 18px; margin-left: 4px; } .brtm-filter-btn.brtm-approval-active { border-color: var(--badge-warn); color: var(--badge-warn); background: #FEF3C7; font-weight: 600; } .brtm-needs-approval-badge { display: inline-flex; align-items: center; gap: 3px; background: #FEF3C7; color: #D97706; font-size: 10px; font-weight: 600; border-radius: 5px; padding: 2px 6px; margin-top: 2px; } .brtm-filter-divider { width: 1px; height: 24px; background: var(--border); margin: 0 4px; } .brtm-ms-auto-flex { margin-left: auto; } .brtm-view-toggle { display: flex; gap: 3px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 3px; } .brtm-view-sep { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; margin: 0 1px; } .brtm-view-btn { position: relative; } .brtm-view-btn::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--text-main); color: #fff; font-size: 11.5px; font-weight: 500; white-space: nowrap; padding: 4px 9px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; z-index: 9999; } .brtm-view-btn::before { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%) translateY(4px); border: 5px solid transparent; border-top-color: var(--text-main); pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; z-index: 9999; } .brtm-view-btn:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } .brtm-view-btn:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); } .brtm-view-btn { width: 30px; height: 28px; border-radius: 6px; border: none; background: transparent; color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: all .15s; } .brtm-view-btn.brtm-active { background: #fff; color: var(--primary); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); } .brtm-view-btn:hover:not(.brtm-active) { background: rgba(27, 111, 190, .08); color: var(--primary); } .brtm-col-settings-btn { position: relative; width: 32px; height: 32px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: all .15s; } .brtm-col-settings-btn::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--text-main); color: #fff; font-size: 11.5px; font-weight: 500; white-space: nowrap; padding: 4px 9px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; z-index: 9999; } .brtm-col-settings-btn::before { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%) translateY(4px); border: 5px solid transparent; border-top-color: var(--text-main); pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; z-index: 9999; } .brtm-col-settings-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-col-settings-btn:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } .brtm-col-settings-btn:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── TABLE CARD ── */ /* ─── §03a · Table ─── */ #viewCalendar { flex: 1; display: flex; flex-direction: column; min-height: 0; } #viewList { flex: 1; display: flex; flex-direction: column; min-height: 0; } .brtm-table-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); flex: 1; display: flex; flex-direction: column; min-height: 0; } .brtm-table-responsive { overflow-x: auto; overflow-y: auto; flex: 1; min-height: 0; } table.brtm-leads-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.brtm-leads-table thead tr { background: #DBEEFF; border-bottom: 1px solid var(--border); } table.brtm-leads-table thead th { padding: 12px 16px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); white-space: nowrap; border-right: 1px solid var(--border); vertical-align: middle; position: sticky; top: 0; z-index: 2; background: #DBEEFF; } table.brtm-leads-table thead th:last-child { border-right: none; } table.brtm-leads-table thead th.brtm-sortable { cursor: pointer; user-select: none; } table.brtm-leads-table thead th.brtm-sortable:hover { color: var(--primary); } .brtm-sort-icon { margin-left: 4px; font-size: 11px; color: var(--primary); } /* filter row */ .brtm-filter-row th { padding: 8px 12px !important; background: #FAFBFD !important; border-bottom: 1px solid var(--border) !important; } .brtm-col-filter { width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; font-size: 12.5px; font-family: inherit; color: var(--text-main); outline: none; transition: border-color .15s; } .brtm-col-filter:focus { border-color: var(--primary); } table.brtm-leads-table tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; } table.brtm-leads-table tbody tr:last-child { border-bottom: none; } table.brtm-leads-table tbody tr:hover { background: var(--row-hover); } table.brtm-leads-table tbody td { padding: 13px 16px; vertical-align: middle; color: var(--text-main); } /* check col */ .brtm-check-col { width: 44px; text-align: center; } .form-check-input { cursor: pointer; } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } /* name col */ .brtm-lead-name { font-weight: var(--fw-med); color: var(--primary); font-size: var(--fs-base); text-decoration: none; } .brtm-lead-name:hover { text-decoration: underline; color: var(--primary-dark); } .brtm-row-actions { display: flex; gap: 4px; margin-top: 4px; } .brtm-row-action-btn { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: #fff; color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; transition: all .15s; } .brtm-row-action-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); } /* date col */ .brtm-date-main { font-weight: var(--fw-med); font-size: var(--fs-base); } .brtm-date-sub { font-size: var(--fs-xs); color: var(--text-muted); font-family: 'DM Mono', monospace; } /* activity col */ .brtm-activity-item { display: flex; align-items: flex-start; gap: 7px; } .brtm-activity-icon { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; margin-top: 1px; } .brtm-activity-icon.brtm-success { background: var(--accent-light); color: var(--accent); } .brtm-activity-icon.brtm-info { background: var(--primary-light); color: var(--primary); } .brtm-activity-label { font-weight: var(--fw-med); font-size: var(--fs-sm); color: var(--text-main); line-height: 1.2; } .brtm-activity-date { font-size: 11px; color: var(--text-muted); font-family: 'DM Mono', monospace; } /* contact cols */ .brtm-contact-email { font-size: 12.5px; color: var(--text-main); display: flex; align-items: center; gap: 6px; } .brtm-contact-email i { color: var(--text-muted); font-size: 13px; } .brtm-contact-phone { font-size: 12.5px; color: var(--text-main); display: flex; align-items: center; gap: 6px; font-family: 'DM Mono', monospace; } .brtm-wa-icon { width: 18px; height: 18px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .brtm-wa-icon i { color: #fff; font-size: 10px; } /* org badge */ .brtm-org-badge { display: inline-block; background: var(--primary-light); color: var(--primary-dark); font-size: 11.5px; font-weight: 600; border-radius: 20px; padding: 3px 10px; white-space: nowrap; } /* ── PAGINATION ── */ /* ─── §03b · Pagination ─── */ .brtm-pagination-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: #FAFBFD; border-top: 1px solid var(--border); } .brtm-pagination-info { font-size: 12.5px; color: var(--text-muted); } .brtm-pagination-controls { display: flex; gap: 4px; } .brtm-page-btn { height: 32px; min-width: 32px; border-radius: 7px; border: 1px solid var(--border); background: #fff; color: var(--text-main); font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; padding: 0 10px; cursor: pointer; transition: all .15s; font-family: inherit; } .brtm-page-btn:hover, .brtm-page-btn.brtm-active { background: var(--primary); color: #fff; border-color: var(--primary); } .brtm-page-btn:disabled { opacity: .4; pointer-events: none; } /* ── CUSTOM FILTER DROPDOWN ── */ /* ─── §03c · Filter Dropdown ─── */ .brtm-filter-dropdown { position: relative; } .brtm-filter-dropdown-btn { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: inherit; font-weight: 500; color: var(--text-main); padding: 6px 12px; cursor: pointer; transition: all .15s; white-space: nowrap; } .brtm-filter-dropdown-btn:hover { border-color: var(--primary); color: var(--primary); } .brtm-filter-dropdown-btn .brtm-chevron { font-size: 11px; color: var(--text-muted); margin-left: 2px; transition: transform .2s; } .brtm-filter-dropdown-btn.brtm-open .brtm-chevron { transform: rotate(180deg); } .brtm-filter-dropdown-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); z-index: 500; overflow: hidden; } .brtm-filter-dropdown-menu.brtm-show { display: block; } .brtm-fdd-search { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); } .brtm-fdd-search input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; font-family: inherit; padding: 6px 10px 6px 30px; outline: none; color: var(--text-main); } .brtm-fdd-search input:focus { border-color: var(--primary); } .brtm-fdd-search-wrap { position: relative; } .brtm-fdd-search-wrap .bi-search { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-muted); } .brtm-fdd-options { padding: 6px 0; max-height: 180px; overflow-y: auto; } .brtm-fdd-option { display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 13px; color: var(--text-main); cursor: pointer; transition: background .12s; justify-content: space-between; } .brtm-fdd-option:hover { background: var(--primary-light); color: var(--primary); } .brtm-fdd-option.brtm-active { font-weight: 600; color: var(--primary); } .brtm-fdd-option .brtm-fdd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; opacity: 0; } .brtm-fdd-option.brtm-active .brtm-fdd-dot { opacity: 1; } .brtm-fdd-option-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .brtm-fdd-option-actions { display: none; align-items: center; gap: 2px; flex-shrink: 0; } .brtm-fdd-option:hover .brtm-fdd-option-actions { display: flex; } .brtm-fdd-opt-btn { width: 22px; height: 22px; border-radius: 5px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; transition: background .12s, color .12s; color: var(--text-muted); padding: 0; } .brtm-fdd-opt-btn:hover { background: rgba(0, 0, 0, 0.07); } .brtm-fdd-opt-btn.brtm-edit:hover { color: var(--primary); } .brtm-fdd-opt-btn.brtm-delete:hover { color: #EF4444; background: #FEE2E2; } .brtm-fdd-actions { border-top: 1px solid var(--border); padding: 6px 0; } .brtm-fdd-action-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; font-size: 12.5px; font-weight: 500; color: var(--text-muted); background: none; border: none; cursor: pointer; font-family: inherit; transition: all .12s; text-align: left; } .brtm-fdd-action-btn:hover { background: var(--surface); color: var(--primary); } .brtm-fdd-action-btn i { font-size: 13px; } /* ── COLOR SWATCHES (tag modal) ── */ /* ─── §03d · Modals (tag colors, upload zone, import stepper) ─── */ .brtm-color-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .brtm-color-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .12s, box-shadow .12s; padding: 0; outline: none; } .brtm-color-swatch:hover { transform: scale(1.15); } .brtm-color-swatch.brtm-selected { border-color: #fff; box-shadow: 0 0 0 3px var(--primary); } /* ── UPLOAD ZONE ── */ .brtm-upload-zone { border: 2px dashed var(--border); border-radius: 10px; padding: 28px 20px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; margin-bottom: 14px; } .brtm-upload-zone:hover, .brtm-upload-zone.brtm-drag-active { border-color: var(--primary); background: var(--primary-light); } .brtm-upload-zone i { font-size: 28px; color: var(--primary); display: block; margin-bottom: 8px; } .brtm-upload-zone-title { font-size: 13.5px; font-weight: 600; color: var(--text-main); } .brtm-upload-zone-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .brtm-upload-zone input[type=file] { display: none; } .brtm-upload-file-info { display: none; align-items: center; gap: 10px; background: var(--primary-light); border: 1px solid var(--primary); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--primary); font-weight: 500; margin-bottom: 14px; } .brtm-upload-file-info.brtm-show { display: flex; } .brtm-upload-file-info .brtm-remove-file { margin-left: auto; cursor: pointer; color: var(--text-muted); font-size: 15px; background: none; border: none; padding: 0; } .brtm-upload-file-info .brtm-remove-file:hover { color: #EF4444; } /* ── IMPORT STEPPER ── */ .brtm-import-stepper { display: flex; align-items: center; gap: 0; padding: 16px 20px 0; flex-shrink: 0; } .brtm-import-step { display: flex; align-items: center; gap: 7px; flex: 1; } .brtm-import-step-circle { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); background: #fff; color: var(--text-muted); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; } .brtm-import-step.brtm-active .brtm-import-step-circle { border-color: var(--primary); background: var(--primary); color: #fff; } .brtm-import-step.brtm-done .brtm-import-step-circle { border-color: var(--accent); background: var(--accent); color: #fff; } .brtm-import-step-label { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .brtm-import-step.brtm-active .brtm-import-step-label { color: var(--primary); } .brtm-import-step.brtm-done .brtm-import-step-label { color: var(--accent); } .brtm-import-step-line { flex: 1; height: 2px; background: var(--border); margin: 0 6px; transition: background .2s; } .brtm-import-step-line.brtm-done { background: var(--accent); } /* ── MAPPING TABLE ── */ .brtm-mapping-table { width: 100%; border-collapse: collapse; } .brtm-mapping-table th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); padding: 0 0 8px; text-align: left; } .brtm-mapping-table th:last-child { text-align: right; } .brtm-mapping-table td { padding: 6px 0; border-top: 1px solid var(--border); font-size: 13px; vertical-align: middle; } .brtm-mapping-col-file { font-weight: 500; color: var(--text-main); width: 42%; } .brtm-mapping-arrow { width: 16%; text-align: center; color: var(--text-muted); font-size: 14px; } .brtm-mapping-col-system { width: 42%; } .brtm-mapping-col-system select { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; font-size: 12.5px; font-family: inherit; color: var(--text-main); padding: 6px 8px; outline: none; transition: border-color .15s; } .brtm-mapping-col-system select:focus { border-color: var(--primary); } .brtm-mapping-hint { font-size: 12px; color: var(--text-muted); margin-top: 12px; display: flex; align-items: flex-start; gap: 6px; } .brtm-mapping-hint i { flex-shrink: 0; color: var(--primary); margin-top: 1px; } .brtm-simple-dd { position: relative; } .brtm-simple-dd-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); z-index: 500; overflow: hidden; } .brtm-simple-dd-menu.brtm-right { left: auto; right: 0; } .brtm-simple-dd-menu.brtm-show { display: block; } .brtm-simple-dd-items-wrap { padding: 6px 0; } .brtm-simple-dd-item { display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 13px; color: var(--text-main); cursor: pointer; transition: background .12s; font-family: inherit; background: none; border: none; width: 100%; text-align: left; } .brtm-simple-dd-item:hover { background: var(--primary-light); color: var(--primary); } .brtm-simple-dd-item.brtm-active { font-weight: 600; color: var(--primary); background: var(--primary-light); } .brtm-simple-dd-item.brtm-active::after { content: '\F633'; font-family: 'bootstrap-icons'; margin-left: auto; font-size: 13px; } .brtm-simple-dd-item i { font-size: 13px; width: 16px; text-align: center; } .brtm-tag-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .brtm-simple-dd-action-wrap { border-top: 1px solid var(--border); padding: 6px 0; } .brtm-simple-dd-divider { height: 1px; background: var(--border); margin: 4px 0; } /* ── SPLIT ADD LEAD BUTTON ── */ .brtm-split-add-lead { display: flex; align-items: stretch; } .brtm-split-add-lead .brtm-btn-add-lead { border-radius: 8px; } .brtm-split-add-lead .brtm-btn-add-lead-arrow { background: var(--primary); color: #fff; border: none; border-radius: 0 8px 8px 0; padding: 0 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; box-shadow: 0 2px 8px rgba(28, 110, 242, 0.25); transition: background .18s; } .brtm-split-add-lead .brtm-btn-add-lead-arrow:hover { background: var(--primary-dark); } /* ── SHOW PER PAGE CUSTOM BTN ── */ /* ─── §03e · Show Per Page ─── */ .brtm-show-per-page-btn { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: inherit; font-weight: 500; color: var(--text-main); padding: 6px 10px; cursor: pointer; transition: all .15s; white-space: nowrap; } .brtm-show-per-page-btn:hover { border-color: var(--primary); color: var(--primary); } .brtm-show-per-page-btn .brtm-chevron { font-size: 11px; color: var(--text-muted); transition: transform .2s; } .brtm-show-per-page-btn.brtm-open .brtm-chevron { transform: rotate(180deg); } /* ─── §03f · Stats Strip ─── */ .brtm-stats-strip { display: flex; gap: 12px; margin-bottom: 20px; } .brtm-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 20px; flex: 1; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 14px; } .brtm-stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .brtm-stat-icon.brtm-blue { background: var(--primary-light); color: var(--primary); } .brtm-stat-icon.brtm-green { background: var(--accent-light); color: var(--accent); } .brtm-stat-icon.amber { background: #FEF3C7; color: #D97706; } .brtm-stat-icon.indigo { background: #EDE9FE; color: #7C3AED; } .brtm-stat-num { font-size: 22px; font-weight: 700; line-height: 1; } .brtm-stat-lbl { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-weight: 500; } /* ── ACTION BAR ── */ /* ─── §03g · Action Bar / Bulk Actions ─── */ .brtm-action-bar { display: none; align-items: center; gap: 10px; background: var(--primary); border-radius: 12px; padding: 10px 16px; margin-bottom: 16px; box-shadow: 0 4px 20px rgba(34, 132, 198, 0.3); animation: slideDown .2s ease; } .brtm-action-bar.brtm-show { display: flex; } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .brtm-action-counter { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; } .brtm-action-counter .brtm-counter-badge { background: rgba(255, 255, 255, 0.25); border-radius: 20px; padding: 2px 10px; font-size: 13px; } .brtm-action-divider-v { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.25); margin: 0 4px; } .brtm-action-btn { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 7px; color: #fff; font-size: 13px; font-weight: 500; padding: 6px 13px; cursor: pointer; font-family: inherit; transition: background .15s; white-space: nowrap; } .brtm-action-btn:hover { background: rgba(255, 255, 255, 0.28); } .brtm-action-btn.brtm-danger { background: rgba(239, 68, 68, 0.25); border-color: rgba(239, 68, 68, 0.4); } .brtm-action-btn.brtm-danger:hover { background: rgba(239, 68, 68, 0.45); } .brtm-action-btn.brtm-success { background: rgba(0, 196, 140, 0.2); border-color: rgba(0, 196, 140, 0.35); } .brtm-action-btn.brtm-success:hover { background: rgba(0, 196, 140, 0.4); } .brtm-action-bar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; } .brtm-action-close-btn { background: none; border: none; color: rgba(255, 255, 255, 0.7); font-size: 18px; cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: background .15s; } .brtm-action-close-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; } /* Select-all-data banner */ .brtm-select-all-banner { display: none; align-items: center; justify-content: center; gap: 10px; background: var(--primary-light); border: 1px solid var(--primary); border-radius: 8px; padding: 9px 16px; margin-bottom: 12px; font-size: 13px; color: var(--primary-dark); } .brtm-select-all-banner.brtm-show { display: flex; } .brtm-select-all-banner strong { font-weight: 700; } .brtm-banner-btn { background: var(--primary); color: #fff; border: none; border-radius: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 12px; cursor: pointer; font-family: inherit; } .brtm-banner-btn.brtm-outline { background: none; color: var(--primary); border: 1px solid var(--primary); } /* Export dropdown */ .brtm-export-wrap { position: relative; } .brtm-export-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); min-width: 160px; overflow: hidden; z-index: 200; } .brtm-export-menu.brtm-show { display: block; } .brtm-export-opt { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 13px; color: var(--text-main); cursor: pointer; transition: background .12s; border-bottom: 1px solid var(--border); } .brtm-export-opt:last-child { border-bottom: none; } .brtm-export-opt:hover { background: var(--primary-light); color: var(--primary); } /* Mass Update modal */ .brtm-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 2000; align-items: center; justify-content: center; } .brtm-modal-overlay.brtm-show { display: flex; } .brtm-modal-box { background: #fff; border-radius: 14px; padding: 28px; width: 420px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); animation: slideDown .2s ease; } .brtm-modal-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; } .brtm-modal-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; } .brtm-modal-field label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: 6px; } .brtm-modal-field select, .brtm-modal-field input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; font-family: inherit; color: var(--text-main); padding: 9px 12px; outline: none; margin-bottom: 14px; } .brtm-modal-field select:focus, .brtm-modal-field input:focus { border-color: var(--primary); } .brtm-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; } .brtm-modal-btn { padding: 8px 18px; border-radius: 8px; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; } .brtm-modal-btn.brtm-cancel { background: var(--surface); border: 1px solid var(--border); color: var(--text-main); } .brtm-modal-btn.brtm-apply { background: var(--primary); color: #fff; } .brtm-modal-btn.brtm-del { background: #EF4444; color: #fff; } /* WA button floating */ .brtm-wa-float { position: fixed; bottom: 24px; right: 24px; width: 52px; height: 52px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); cursor: pointer; transition: transform .2s; z-index: 1039; } .brtm-wa-float:hover { transform: scale(1.08); } .brtm-wa-float i { color: #fff; font-size: 26px; } /* ── OFFLINE INDICATOR ── */ .brtm-conn-indicator { display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; transition: background .3s, border-color .3s; cursor: default; } .brtm-conn-indicator.brtm-online { background: rgba(0, 184, 122, 0.2); border-color: rgba(0, 184, 122, 0.35); } .brtm-conn-indicator.brtm-offline { background: rgba(239, 68, 68, 0.22); border-color: rgba(239, 68, 68, 0.4); } .brtm-conn-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .brtm-conn-indicator.brtm-online .brtm-conn-dot { background: #00B87A; box-shadow: 0 0 0 2px rgba(0, 184, 122, 0.3); } .brtm-conn-indicator.brtm-offline .brtm-conn-dot { background: #EF4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3); animation: blink-dot 1.4s ease-in-out infinite; } @keyframes blink-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @media (max-width: 480px) { .brtm-conn-indicator .brtm-conn-label { display: none; } .brtm-conn-indicator { padding: 5px 7px; } } /* ── ADVANCED FILTER SIDEBAR ── */ /* -- ADVANCED SEARCH SLIDESHOW -- */ /* ─── §03h · Advanced Filter Sidebar ─── */ .brtm-advsearch-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 10000; } .brtm-advsearch-overlay.brtm-show { display: block; } .brtm-advsearch-panel { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; z-index: 10001; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; transform: translateY(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); max-height: 86vh; } .brtm-advsearch-panel.brtm-open { transform: translateY(0); } .brtm-advsearch-panel::before { content: ''; width: 40px; height: 4px; background: var(--border); border-radius: 4px; margin: 10px auto 0; flex-shrink: 0; display: block; } .brtm-advsearch-header { padding: 4px 20px 0; flex-shrink: 0; } .brtm-advsearch-title-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 10px; } .brtm-advsearch-title { font-size: 15px; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 8px; } .brtm-advsearch-title i { color: var(--primary); } .brtm-advsearch-badge { background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; border-radius: 20px; padding: 1px 7px; } .brtm-advsearch-close { width: 30px; height: 30px; border-radius: 7px; border: none; background: var(--surface); color: var(--text-muted); font-size: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .brtm-advsearch-close:hover { background: #FFE4E4; color: #EF4444; } .brtm-advsearch-tabs { display: flex; align-items: stretch; border-top: 1px solid var(--border); } .brtm-advsearch-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; font-size: 12.5px; font-weight: 600; font-family: inherit; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all .15s; white-space: nowrap; } .brtm-advsearch-tab i { font-size: 13px; } .brtm-advsearch-tab:hover { color: var(--primary); background: var(--primary-light); } .brtm-advsearch-tab.brtm-active { color: var(--primary); border-bottom-color: var(--primary); background: var(--primary-light); } .brtm-advsearch-tab-sep { width: 1px; background: var(--border); flex-shrink: 0; } /* Viewport + slides */ .brtm-advsearch-viewport { overflow: hidden; flex: 1; min-height: 0; } .brtm-advsearch-slides { display: flex; width: 400%; height: 100%; transition: transform .32s cubic-bezier(.4, 0, .2, 1); } .brtm-advsearch-slide { width: 25%; flex-shrink: 0; overflow-y: auto; padding: 20px 24px; box-sizing: border-box; } .brtm-advsearch-slide-header { margin-bottom: 18px; } .brtm-advsearch-slide-title { font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; } .brtm-advsearch-slide-desc { font-size: 12px; color: var(--text-muted); } /* Slide 0: Module grid */ .brtm-advsearch-module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .brtm-advsearch-module-card { cursor: pointer; user-select: none; } .brtm-advsearch-module-card input { display: none; } .brtm-advsearch-module-card-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px 12px; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text-muted); transition: all .15s; text-align: center; } .brtm-advsearch-module-card-body i { font-size: 26px; } .brtm-advsearch-module-card:hover .brtm-advsearch-module-card-body { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-advsearch-module-card input:checked~.brtm-advsearch-module-card-body { border-color: var(--primary); color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 3px rgba(0, 112, 205, 0.12); } /* Slide 1: Status grid */ .brtm-advsearch-status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .brtm-advsearch-status-chip { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 2px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; user-select: none; transition: all .15s; } .brtm-advsearch-status-chip input { display: none; } .brtm-advsearch-status-chip i { font-size: 15px; } .brtm-advsearch-status-chip:hover { border-color: var(--chip-color, var(--primary)); color: var(--chip-color, var(--primary)); } .brtm-advsearch-status-chip:has(input:checked) { border-color: var(--chip-color, var(--primary)); color: var(--chip-color, var(--primary)); background: color-mix(in srgb, var(--chip-color, var(--primary)) 10%, transparent); font-weight: 700; } /* Slide 2: Date */ .brtm-advsearch-date-body { display: flex; flex-direction: column; gap: 18px; } .brtm-advsearch-field {} .brtm-advsearch-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 8px; } .brtm-advsearch-select { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--text-main); padding: 8px 12px; outline: none; transition: border-color .15s; } .brtm-advsearch-select:focus { border-color: var(--primary); } .brtm-advsearch-preset-row { display: flex; flex-wrap: wrap; gap: 6px; } .brtm-advsearch-preset { padding: 6px 14px; border: 1.5px solid var(--border); border-radius: 20px; font-size: 12.5px; font-weight: 600; font-family: inherit; color: var(--text-muted); background: var(--surface); cursor: pointer; transition: all .15s; } .brtm-advsearch-preset:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-advsearch-preset.brtm-active { background: var(--primary); color: #fff; border-color: var(--primary); } .brtm-advsearch-input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--text-main); padding: 8px 12px; outline: none; transition: border-color .15s; min-width: 0; } .brtm-advsearch-input:focus { border-color: var(--primary); } .brtm-advsearch-date-row { display: flex; align-items: center; gap: 8px; } .brtm-advsearch-date-sep { color: var(--text-muted); font-size: 13px; flex-shrink: 0; } /* Slide 3: Owner */ .brtm-advsearch-owner-body { display: flex; flex-direction: column; gap: 12px; } .brtm-advsearch-owner-search-wrap { position: relative; } .brtm-advsearch-owner-search-wrap>i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-muted); pointer-events: none; } .brtm-advsearch-owner-search-wrap .brtm-advsearch-input { width: 100%; padding-left: 32px; box-sizing: border-box; } .brtm-advsearch-owner-list { display: flex; flex-direction: column; gap: 4px; } .brtm-advsearch-owner-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; cursor: pointer; transition: background .12s; user-select: none; border: 1.5px solid transparent; } .brtm-advsearch-owner-item input[type="radio"] { display: none; } .brtm-advsearch-owner-item:hover { background: var(--surface); } .brtm-advsearch-owner-item:has(input:checked) { background: var(--primary-light); border-color: var(--primary); } .brtm-advsearch-owner-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; } .brtm-advsearch-owner-avatar.brtm-all { background: var(--surface); color: var(--text-muted); border: 2px solid var(--border); font-size: 14px; } .brtm-advsearch-owner-avatar.brtm-unassigned { background: #F1F5F9; color: #A3ADBE; border: 2px solid var(--border); font-size: 16px; } .brtm-advsearch-owner-info { display: flex; flex-direction: column; } .brtm-advsearch-owner-name { font-size: 13px; font-weight: 600; color: var(--text-main); } .brtm-advsearch-owner-sub { font-size: 11px; color: var(--text-muted); } /* Footer */ .brtm-advsearch-footer { display: flex; align-items: center; padding: 12px 20px; border-top: 1px solid var(--border); gap: 12px; flex-shrink: 0; } .brtm-advsearch-btn-reset { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; font-weight: 600; font-family: inherit; color: var(--text-muted); background: var(--surface); cursor: pointer; transition: all .15s; white-space: nowrap; } .brtm-advsearch-btn-reset:hover { border-color: #EF4444; color: #EF4444; background: #FEF2F2; } .brtm-advsearch-nav { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: center; } .brtm-advsearch-nav-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; } .brtm-advsearch-nav-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-advsearch-nav-btn:disabled { opacity: .3; cursor: default; pointer-events: none; } .brtm-advsearch-dots { display: flex; gap: 6px; align-items: center; } .brtm-advsearch-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; transition: all .22s; } .brtm-advsearch-dot.brtm-active { background: var(--primary); width: 22px; border-radius: 4px; } .brtm-advsearch-btn-apply { display: flex; align-items: center; gap: 6px; padding: 8px 18px; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; font-family: inherit; color: #fff; background: var(--primary); cursor: pointer; transition: background .15s; white-space: nowrap; } .brtm-advsearch-btn-apply:hover { background: var(--primary-dark); } /* Search Leads button active state */ .brtm-filter-btn.brtm-afilter-on { border-color: var(--primary); color: var(--primary); background: var(--primary-light); font-weight: 600; } .brtm-col-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.25); z-index: 1040; } .brtm-col-drawer-overlay.brtm-show { display: block; } .brtm-col-drawer { position: fixed; top: 0; right: 0; width: 300px; height: 100vh; background: #fff; z-index: 1041; box-shadow: -6px 0 32px rgba(0, 0, 0, 0.14); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); } .brtm-col-drawer.brtm-open { transform: translateX(0); } .brtm-col-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .brtm-col-drawer-header.compact { padding: 10px 16px; } .brtm-col-drawer-title { font-size: 14.5px; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 8px; } .brtm-col-drawer-title i { color: var(--primary); font-size: 16px; } .brtm-col-drawer-close { width: 30px; height: 30px; border-radius: 7px; border: none; background: var(--surface); color: var(--text-muted); font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; } .brtm-col-drawer-close:hover { background: #FFE4E4; color: #EF4444; } .brtm-col-drawer-search { padding: 12px 16px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .brtm-col-drawer-search-wrap { position: relative; } .brtm-col-drawer-search-wrap input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: inherit; padding: 7px 10px 7px 32px; outline: none; color: var(--text-main); transition: border-color .15s; } .brtm-col-drawer-search-wrap input:focus { border-color: var(--primary); } .brtm-col-drawer-search-wrap i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-muted); pointer-events: none; } .brtm-col-drawer-body { flex: 1; overflow-y: auto; padding: 8px 0; } .brtm-col-drawer-section-label { padding: 10px 20px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-light); } .brtm-col-drawer-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 20px; cursor: default; transition: background .12s; user-select: none; } .brtm-col-drawer-item:hover { background: var(--surface); } .brtm-col-drawer-item-left { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-main); font-weight: 500; } .brtm-col-drawer-item-left i { font-size: 14px; color: var(--text-muted); width: 16px; text-align: center; } .brtm-col-drawer-item.brtm-locked .brtm-col-drawer-item-left { color: var(--text-muted); } .brtm-col-lock-icon { font-size: 12px; color: var(--text-light); } .brtm-col-drag-handle { font-size: 15px; color: var(--text-light); cursor: grab; flex-shrink: 0; padding: 0 2px; margin-right: 2px; touch-action: none; } .brtm-col-drag-handle:active { cursor: grabbing; } .brtm-col-drawer-item.brtm-dragging { opacity: 0.38; background: var(--surface); } .brtm-col-drawer-item.brtm-drag-over { background: var(--primary-light); outline: 2px dashed var(--primary); outline-offset: -2px; border-radius: 6px; } /* Toggle switch */ .brtm-col-toggle { position: relative; width: 34px; height: 18px; flex-shrink: 0; cursor: pointer; } .brtm-col-toggle input { display: none; } .brtm-col-toggle-track { position: absolute; inset: 0; border-radius: 20px; background: var(--border); transition: background .2s; } .brtm-col-toggle input:checked~.brtm-col-toggle-track { background: var(--primary); } .brtm-col-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); transition: left .2s; } .brtm-col-toggle input:checked~.brtm-col-toggle-thumb { left: 18px; } .brtm-col-drawer-footer { padding: 14px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-shrink: 0; } .brtm-col-drawer-btn { flex: 1; padding: 8px; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-main); display: flex; align-items: center; justify-content: center; gap: 6px; transition: all .15s; } .brtm-col-drawer-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-col-drawer-btn.brtm-primary { background: var(--primary); color: #fff; border-color: var(--primary); } .brtm-col-drawer-btn.brtm-primary:hover { background: var(--primary-dark); } /* ── TOPBAR PANELS (notif, avatar) ── */ .brtm-topbar-panel { display: none; position: absolute; top: calc(100% + 10px); right: 0; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); min-width: 280px; z-index: 2000; overflow: hidden; } .brtm-topbar-panel.brtm-show { display: block; } .brtm-tpanel-header { padding: 12px 16px; font-size: 13.5px; font-weight: 700; color: var(--text-main); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .brtm-tpanel-badge { font-size: 11px; font-weight: 600; background: var(--primary-light); color: var(--primary); border-radius: 20px; padding: 2px 8px; } .brtm-tpanel-items { padding: 6px 0; } .brtm-tpanel-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; cursor: pointer; transition: background .15s; } .brtm-tpanel-item:hover { background: var(--surface); } .brtm-tpanel-item.brtm-unread { background: var(--primary-light); } .brtm-tpanel-item.brtm-unread:hover { background: #dce9f8; } .brtm-tpi-icon { font-size: 18px; margin-top: 1px; flex-shrink: 0; } .brtm-tpi-icon.brtm-blue { color: var(--primary); } .brtm-tpi-icon.brtm-green { color: var(--accent); } .brtm-tpi-icon.brtm-orange { color: #F59E0B; } .brtm-tpi-icon.brtm-red { color: #EF4444; } .brtm-tpi-title { font-size: 13px; font-weight: 600; color: var(--text-main); } .brtm-tpi-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; } .brtm-tpanel-footer { padding: 10px 16px; border-top: 1px solid var(--border); text-align: center; font-size: 12.5px; font-weight: 600; color: var(--primary); cursor: pointer; } .brtm-tpanel-footer:hover { background: var(--primary-light); } .brtm-tpanel-action-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; background: none; border: none; font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-main); cursor: pointer; text-align: left; transition: background .15s; } .brtm-tpanel-action-item:hover { background: var(--surface); } /* ── TOAST ── */ #toastContainer { position: fixed; bottom: 84px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; } .brtm-toast-item { background: var(--text-main); color: #fff; font-size: 13px; font-weight: 500; padding: 10px 16px; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; pointer-events: none; } .brtm-toast-item.brtm-show { opacity: 1; transform: translateY(0); } /* ── HELP MODAL ── */ /* ─── §03i · Help Modal ─── */ #helpModal { display: none; } #helpModal.brtm-show { display: flex; } .brtm-help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; } .brtm-help-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border: 1px solid var(--border); border-radius: 10px; padding: 14px; cursor: pointer; transition: border-color .15s, background .15s; background: var(--surface); } .brtm-help-card:hover { border-color: var(--primary); background: var(--primary-light); } .brtm-help-card i { font-size: 20px; color: var(--primary); } .brtm-help-card span { font-size: 13px; font-weight: 600; color: var(--text-main); } .brtm-help-card small { font-size: 11.5px; color: var(--text-muted); } /* ─── §03j · Responsive Overrides ─── */ @media (max-width: 1200px) { .brtm-search-bar-top { width: 150px; } .brtm-stats-strip { flex-wrap: wrap; } .brtm-stat-card { flex: 1 1 calc(50% - 6px); } } /* ── Breakpoint: header starts wrapping ── */ @media (max-width: 1080px) { .brtm-page-wrapper { padding: 20px 20px 40px; } .brtm-page-header { flex-wrap: wrap; gap: 8px; align-items: center; } /* Title: shrink, stay left */ .brtm-page-header>div:nth-child(1) { flex: 0 0 auto; } /* Filter row: full width, row 2 */ .brtm-page-header>div:nth-child(2) { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 0 !important; } /* Show/view: row 3 */ .brtm-page-header>div:nth-child(3) { order: 4; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 0 !important; margin-right: 0 !important; } /* New Lead: stays right of title */ .brtm-page-header>.brtm-split-add-lead { order: 2; margin-left: auto !important; margin-right: 0 !important; flex-shrink: 0; } } @media (max-width: 768px) { /* ── TOPBAR ── */ .brtm-topbar { padding: 0 14px; gap: 8px; } .brtm-topbar-nav { display: none; } .brtm-search-bar-top { width: 120px; } .brtm-btn-help-support { display: none; } .brtm-topbar-icon-btn::after, .brtm-topbar-icon-btn::before { display: none; } /* ── PAGE ── */ .brtm-page-wrapper { padding: 14px 14px 32px; } /* ── PAGE HEADER ── */ .brtm-page-header { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; } .brtm-page-header>div:nth-child(1) { order: 1; flex: 0 0 auto; } .brtm-page-header>.brtm-split-add-lead { order: 2; margin-left: auto !important; margin-right: 0 !important; flex-shrink: 0; } .brtm-page-header>div:nth-child(2) { order: 3; width: 100%; display: flex; flex-wrap: wrap; align-items: center; margin-left: 0 !important; gap: 6px; } .brtm-page-header>div:nth-child(3) { order: 4; width: 100%; display: flex; flex-wrap: wrap; align-items: center; margin-left: 0 !important; margin-right: 0 !important; gap: 6px; } /* ── STATS ── */ .brtm-stats-strip { flex-wrap: wrap; gap: 10px; } .brtm-stat-card { flex: 1 1 calc(50% - 5px); } /* ── ACTION BAR ── */ .brtm-action-bar { flex-wrap: wrap; gap: 6px; padding: 10px 12px; } .brtm-action-bar-right { margin-left: auto; } .brtm-action-divider-v { display: none; } /* ── BANNER ── */ .brtm-select-all-banner { flex-wrap: wrap; gap: 8px; } /* ── TABLE ── */ .brtm-leads-table th, .brtm-leads-table td { font-size: 12px; padding: 8px 10px; } /* ── PAGINATION ── */ .brtm-pagination-bar { flex-direction: column; align-items: center; gap: 10px; } .brtm-page-btn { padding: 5px 10px; font-size: 12px; } } @media (max-width: 480px) { /* ── TOPBAR ── */ .brtm-search-wrap { display: none; } .brtm-topbar-icon-btn[data-tooltip="Chat"], .brtm-topbar-icon-btn[data-tooltip="Call"], .brtm-topbar-icon-btn[data-tooltip="Settings"] { display: none; } /* ── HEADER BUTTONS ── */ .brtm-filter-btn, .brtm-filter-dropdown-btn, .brtm-show-per-page-btn { font-size: 12px; padding: 5px 10px; } .brtm-approval-count { font-size: 10px; padding: 1px 5px; } /* ── VIEW TOGGLE ── */ .brtm-view-toggle { gap: 2px; padding: 2px; } .brtm-view-btn { width: 26px; height: 26px; font-size: 13px; } /* ── STATS: 1 kolom ── */ .brtm-stat-card { flex: 1 1 100%; } /* ── ACTION BAR: icon only ── */ .brtm-action-btn span, .brtm-action-btn>*:not(i) { display: none; } .brtm-action-btn { padding: 6px 10px; } /* ── PAGINATION ── */ .brtm-page-btn:not(.brtm-active):not(:first-child):not(:last-child) { display: none; } } /* ── CHART VIEW ── */ /* ══════════════════════════════════════════════════════════════ §04 CHART VIEW ══════════════════════════════════════════════════════════════ */ .brtm-chart-view-wrap { display: flex; flex-direction: column; gap: 16px; } .brtm-chart-summary-row { display: flex; gap: 12px; } .brtm-chart-summary-card { flex: 1; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; } .brtm-chart-summary-val { font-size: 26px; font-weight: 700; color: var(--text-main); line-height: 1; } .brtm-chart-summary-label { font-size: 12px; color: var(--text-muted); font-weight: 500; } .brtm-chart-summary-card.accent .brtm-chart-summary-val { color: #EF4444; } .brtm-chart-summary-card.brtm-warn .brtm-chart-summary-val { color: #F59E0B; } .brtm-chart-summary-card.brtm-success .brtm-chart-summary-val { color: #00B87A; } .brtm-chart-summary-card.brtm-muted .brtm-chart-summary-val { color: #A3ADBE; } .brtm-chart-panels-row { display: flex; gap: 12px; } .brtm-chart-panel { flex: 1; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; } .brtm-chart-panel-title { font-size: 13px; font-weight: 700; color: var(--text-main); margin-bottom: 16px; } .brtm-chart-bars { display: flex; flex-direction: column; gap: 10px; } .brtm-chart-bar-row { display: flex; align-items: center; gap: 10px; } .brtm-chart-bar-label { font-size: 12.5px; color: var(--text-muted); width: 88px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-chart-bar-track { flex: 1; background: var(--surface); border-radius: 20px; height: 10px; overflow: hidden; } .brtm-chart-bar-fill { height: 100%; border-radius: 20px; transition: width .4s ease; } .brtm-chart-bar-val { font-size: 12px; font-weight: 600; color: var(--text-main); width: 28px; text-align: right; flex-shrink: 0; } /* column chart */ .brtm-chart-col-wrap { display: flex; align-items: flex-end; gap: 12px; height: 140px; padding-bottom: 28px; position: relative; } .brtm-chart-col-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; } .brtm-chart-col-bar { width: 100%; border-radius: 6px 6px 0 0; transition: height .4s ease; } .brtm-chart-col-label { font-size: 11px; color: var(--text-muted); } .brtm-chart-col-val { font-size: 11.5px; font-weight: 600; color: var(--text-main); } /* ── WIDGET CARD ── */ /* ══════════════════════════════════════════════════════════════ §05 WIDGET CARD / Report Dashboard ══════════════════════════════════════════════════════════════ */ .brtm-widget-card { flex: 1; background: #fff; border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; min-width: 0; overflow: visible; } .brtm-widget-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .brtm-widget-title { font-size: 13px; font-weight: 700; color: var(--text-main); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* widget filter pill */ .brtm-widget-filter { position: relative; } .brtm-widget-filter-menu { display: none; position: absolute; top: calc(100% + 5px); right: 0; width: 268px; max-height: 420px; background: #fff; border: 1px solid var(--border); border-radius: 11px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13); z-index: 600; display: none; flex-direction: column; } .brtm-widget-filter-menu.brtm-show { display: flex; } /* filter panel body */ .brtm-wfm-body { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 13px; overflow-y: auto; flex: 1; min-height: 0; } .brtm-wfm-field { display: flex; flex-direction: column; gap: 6px; } .brtm-wfm-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); } .brtm-wfm-pills { display: flex; flex-wrap: wrap; gap: 5px; } .brtm-wfm-pill { padding: 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 500; border: 1px solid var(--border); background: var(--surface); color: var(--text-main); cursor: pointer; font-family: inherit; transition: all .12s; } .brtm-wfm-pill:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-wfm-pill.brtm-active { border-color: var(--primary); color: var(--primary); background: var(--primary-light); font-weight: 700; } .brtm-wfm-date-row { display: flex; gap: 6px; } .brtm-wfm-date-row input[type="date"] { flex: 1; padding: 6px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: 7px; color: var(--text-main); font-family: inherit; outline: none; background: var(--surface); } .brtm-wfm-date-row input[type="date"]:focus { border-color: var(--primary); } .brtm-wfm-checkgroup { display: flex; flex-direction: column; gap: 4px; max-height: 116px; overflow-y: auto; } .brtm-wfm-checkitem { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-main); cursor: pointer; padding: 2px 0; } .brtm-wfm-checkitem input[type="checkbox"] { accent-color: var(--primary); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; } .brtm-wfm-select { width: 100%; padding: 6px 8px; font-size: 12.5px; border: 1px solid var(--border); border-radius: 7px; color: var(--text-main); font-family: inherit; background: var(--surface); outline: none; cursor: pointer; } .brtm-wfm-select:focus { border-color: var(--primary); } /* filter panel footer */ .brtm-wfm-footer { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); flex-shrink: 0; background: #fff; border-radius: 0 0 11px 11px; } .brtm-wfm-reset-btn { font-size: 13px; font-weight: 500; color: var(--text-muted); background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; } .brtm-wfm-reset-btn:hover { color: var(--text-main); } .brtm-wfm-apply-btn { padding: 6px 16px; border-radius: 7px; background: var(--primary); color: #fff; border: none; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .12s; } .brtm-wfm-apply-btn:hover { background: #0047cc; } /* funnel badge dot */ .brtm-wfb-wrap { position: relative; display: inline-flex; } .brtm-wfb-badge { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #EF4444; border: 2px solid #fff; display: none; pointer-events: none; } .brtm-wfb-wrap.brtm-has-filter .brtm-wfb-badge { display: block; } /* active filter chip */ .brtm-wfm-chip-row { display: none; padding: 10px 16px 10px; flex-wrap: wrap; gap: 5px; } .brtm-wfm-chip-row.brtm-show { display: flex; } .brtm-wfm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 20px; background: var(--primary-light); border: 1px solid rgba(0, 90, 230, .25); color: var(--primary); font-size: 11.5px; font-weight: 600; max-width: 100%; } .brtm-wfm-chip>span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brtm-wfm-chip-x { width: 16px; height: 16px; border-radius: 50%; background: var(--primary); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; font-family: inherit; flex-shrink: 0; line-height: 1; transition: background .12s; } .brtm-wfm-chip-x:hover { background: #0047cc; } /* skeleton shimmer */ .brtm-widget-skeleton { display: none; flex-direction: column; gap: 9px; padding: 2px 0 4px; } .brtm-widget-body.brtm-loading .brtm-widget-skeleton { display: flex; } .brtm-widget-body.brtm-loading>.brtm-chart-bars, .brtm-widget-body.brtm-loading>.brtm-chart-col-wrap { visibility: hidden; } .brtm-skel-bar { height: 13px; border-radius: 7px; background: linear-gradient(90deg, #f0f0f0 25%, #e2e8f0 50%, #f0f0f0 75%); background-size: 300% 100%; animation: skelShimmer .95s infinite linear; } @keyframes skelShimmer { 0% { background-position: 150% 0 } 100% { background-position: -150% 0 } } /* widget action buttons */ .brtm-widget-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .brtm-widget-action-btn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text-main); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .brtm-widget-action-btn:hover { background: #fff; border-color: var(--primary); color: var(--primary); } .brtm-widget-state-card.brtm-expanded { grid-column: span 2; } .brtm-widget-action-btn.brtm-active { background: var(--primary); color: #fff; border-color: var(--primary); } .brtm-widget-action-btn.brtm-active:hover { background: #0047cc; border-color: #0047cc; color: #fff; } .brtm-widget-action-btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; } /* kebab menu */ .brtm-widget-export-wrap { position: relative; } .brtm-widget-export-menu { display: none; position: absolute; top: calc(100% + 5px); right: 0; min-width: 170px; background: #fff; border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.11); z-index: 600; overflow: hidden; } .brtm-widget-export-menu.brtm-show { display: block; } .brtm-widget-export-menu .brtm-wmenu-section-label { padding: 8px 14px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); } .brtm-widget-export-menu .brtm-wmenu-divider { height: 1px; background: var(--border); margin: 4px 0; } .brtm-widget-export-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; font-size: 12.5px; font-weight: 500; color: var(--text-main); background: none; border: none; font-family: inherit; cursor: pointer; transition: background .12s; text-align: left; } .brtm-widget-export-menu button:hover { background: var(--primary-light); color: var(--primary); } .brtm-widget-export-menu button.brtm-danger { color: #EF4444; } .brtm-widget-export-menu button.brtm-danger:hover { background: #FEE2E2; color: #EF4444; } .brtm-widget-export-menu button i { font-size: 13px; width: 14px; text-align: center; flex-shrink: 0; } /* widget sample states row */ .brtm-widget-states-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .brtm-widget-state-card { min-width: 0; background: #fff; border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; overflow: visible; } .brtm-ws-card-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .brtm-ws-card-title { flex: 1; font-size: 13px; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-ws-card-badge { font-size: 10px; font-weight: 700; letter-spacing: .5px; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; } .brtm-ws-badge-empty { background: #F1F5F9; color: #64748B; } .brtm-ws-badge-loading { background: #EFF6FF; color: #3B82F6; } .brtm-ws-badge-noresult { background: #FFF7ED; color: #F59E0B; } .brtm-ws-badge-new { background: #F0FDF4; color: #22C55E; } .brtm-ws-card-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; gap: 10px; text-align: center; } .brtm-ws-icon-wrap { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; } .brtm-ws-icon-empty { background: #F1F5F9; color: #94A3B8; } .brtm-ws-icon-loading { background: #EFF6FF; color: #3B82F6; } .brtm-ws-icon-noresult { background: #FFF7ED; color: #F59E0B; } .brtm-ws-icon-new { background: #F0FDF4; color: #22C55E; } .brtm-ws-card-body-title { font-size: 13px; font-weight: 700; color: var(--text-main); } .brtm-ws-card-body-sub { font-size: 12px; color: var(--text-muted); line-height: 1.5; max-width: 160px; } .brtm-ws-action-btn { margin-top: 4px; padding: 6px 16px; border-radius: 7px; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: background .12s; } .brtm-ws-btn-primary { background: var(--primary); color: #fff; } .brtm-ws-btn-primary:hover { background: #0047cc; } .brtm-ws-btn-ghost { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); } .brtm-ws-btn-ghost:hover { border-color: var(--primary); color: var(--primary); } /* loading pulse for sample */ .brtm-ws-skel-list { display: flex; flex-direction: column; gap: 7px; width: 100%; } .brtm-ws-skel-bar { height: 11px; border-radius: 6px; background: linear-gradient(90deg, #f0f0f0 25%, #e2e8f0 50%, #f0f0f0 75%); background-size: 300% 100%; animation: skelShimmer .95s infinite linear; } /* empty state */ .brtm-widget-empty { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; gap: 8px; color: var(--text-muted); text-align: center; } .brtm-widget-empty.brtm-show { display: flex; } .brtm-widget-empty i { font-size: 28px; opacity: .35; } .brtm-widget-empty-title { font-size: 13px; font-weight: 600; color: var(--text-muted); } .brtm-widget-empty-sub { font-size: 12px; } /* ── PIPELINE VIEW ── */ /* ══════════════════════════════════════════════════════════════ §06 PIPELINE VIEW ══════════════════════════════════════════════════════════════ */ .brtm-pipeline-view-outer { overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.18) transparent; cursor: grab; } .brtm-pipeline-view-outer.brtm-is-dragging-card { cursor: default !important; } .brtm-pipeline-view-outer.brtm-is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; } .brtm-pipeline-view-outer::-webkit-scrollbar { height: 5px; } .brtm-pipeline-view-outer::-webkit-scrollbar-track { background: transparent; } .brtm-pipeline-view-outer::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 99px; } .brtm-pipeline-view-outer::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.32); } .brtm-pipeline-board { display: flex; gap: 14px; align-items: stretch; min-width: max-content; padding: 2px 2px 12px; } .brtm-pipeline-col { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0; height: calc(100vh - 198px); } .brtm-pipeline-col-header { display: flex; align-items: center; gap: 8px; padding: 9px 11px 10px; border-radius: 9px 9px 8px 8px; border-top: 3px solid var(--primary); margin-bottom: 10px; box-shadow: 0 1px 0 rgba(0,0,0,.02); } .brtm-pipeline-col-title { font-size: 13px; font-weight: 700; color: var(--text-main); flex: 1; letter-spacing: 0.1px; } .brtm-pipeline-stage-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; } .brtm-pipeline-col-count { font-size: 11px; font-weight: 700; background: var(--surface); border-radius: 20px; padding: 2px 9px; color: var(--text-muted); } .brtm-pipeline-col-body { display: flex; flex-direction: column; gap: 10px; flex: 1; overflow-y: auto; min-height: 0; padding-right: 3px; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.15) transparent; } .brtm-pipeline-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px 14px 12px 17px; cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .12s; display: flex; flex-direction: column; gap: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; flex-shrink: 0; } .brtm-pipeline-card.brtm-is-dragging { opacity: 0.4; transform: scale(0.98); } .brtm-pipeline-col-body.brtm-drag-over { outline: 2px dashed var(--primary); outline-offset: -2px; border-radius: 8px; background: var(--primary-light); } .brtm-pipeline-card-ghost { height: 6px; border-radius: 4px; background: var(--primary); opacity: 0.5; flex-shrink: 0; pointer-events: none; } .brtm-pipeline-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 10px 0 0 10px; background: var(--pc-color, var(--border)); } .brtm-pipeline-card:hover { box-shadow: 0 5px 18px rgba(27, 111, 190, 0.12); border-color: #c6d8ef; transform: translateY(-1px); } .brtm-pipeline-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 3px; } .brtm-pipeline-card-name { font-size: 14px; font-weight: 700; color: var(--text-main); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-transform: capitalize; } .brtm-pipeline-card-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; flex-shrink: 0; margin-top: -1px; } .brtm-pipeline-card:hover .brtm-pipeline-card-actions { opacity: 1; } .brtm-pipeline-card-action { width: 24px; height: 24px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; transition: all .12s; } .brtm-pipeline-card-action:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); } .brtm-pipeline-card-org { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brtm-pipeline-card-org i { font-size: 10px; flex-shrink: 0; } .brtm-pipeline-card-info { border-top: 1px solid #f0f3f8; padding-top: 8px; margin-top: 2px; display: flex; flex-direction: column; gap: 5px; } .brtm-pipeline-card-row { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brtm-pipeline-card-row i { font-size: 12px; flex-shrink: 0; color: #9CAFC8; } .brtm-pipeline-card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; } .brtm-pipeline-card-date { font-size: 11.5px; color: var(--text-light); display: flex; align-items: center; gap: 3px; } .brtm-pipeline-approval-badge { display: inline-flex; align-items: center; gap: 3px; background: #FEF3C7; color: #D97706; font-size: 10px; font-weight: 600; border-radius: 5px; padding: 2px 6px; white-space: nowrap; margin-bottom: 6px; } .brtm-pipeline-add-card { width: 100%; border: 1.5px dashed #D1DBE8; border-radius: 9px; background: rgba(255, 255, 255, 0.55); color: var(--text-muted); font-size: 12px; font-weight: 500; font-family: inherit; padding: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all .15s; flex-shrink: 0; margin-top: 8px; } .brtm-pipeline-add-card:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } /* pipeline color picker */ .brtm-pipeline-color-btn { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; flex-shrink: 0; position: relative; } .brtm-pipeline-color-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-pipeline-color-pop { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); padding: 12px; z-index: 900; min-width: 192px; } .brtm-pipeline-color-pop.brtm-show { display: block; } .brtm-pipeline-color-pop-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 9px; } .brtm-pipeline-color-swatches { display: flex; flex-wrap: wrap; gap: 7px; } .brtm-pipeline-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid transparent; cursor: pointer; transition: transform .12s, box-shadow .12s; } .brtm-pipeline-swatch:hover { transform: scale(1.15); } .brtm-pipeline-swatch.brtm-active { border-color: #fff; box-shadow: 0 0 0 2.5px var(--primary); } /* pipeline filter bar */ .brtm-pipeline-header-group { display: none; align-items: center; gap: 8px; } /* new pipeline stage builder */ .brtm-np-stage-row { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; position: relative; transition: box-shadow .15s; } .brtm-np-stage-row:hover { box-shadow: 0 2px 10px rgba(27, 111, 190, 0.08); } .brtm-np-stage-row-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border-bottom: 1px solid var(--border); } .brtm-np-stage-row-sla { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 44px; } .brtm-np-sla-label { font-size: 11px; font-weight: 700; color: var(--text-muted); white-space: nowrap; text-transform: uppercase; letter-spacing: .4px; flex-shrink: 0; } .brtm-np-sla-input { width: 58px; background: #fff; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; color: var(--text-main); padding: 5px 8px; outline: none; text-align: center; transition: border-color .15s; } .brtm-np-sla-input:focus { border-color: var(--primary); } .brtm-np-sla-unit { background: #fff; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; font-family: inherit; color: var(--text-main); padding: 5px 8px; outline: none; cursor: pointer; transition: border-color .15s; } .brtm-np-sla-unit:focus { border-color: var(--primary); } .brtm-np-sla-none-toggle { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted); cursor: pointer; user-select: none; white-space: nowrap; margin-left: auto; } .brtm-np-sla-none-toggle input { accent-color: var(--primary); cursor: pointer; } .brtm-np-stage-color-dot { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; flex-shrink: 0; border: 2.5px solid rgba(0, 0, 0, 0.08); transition: transform .12s, box-shadow .12s; position: relative; } .brtm-np-stage-color-dot:hover { transform: scale(1.1); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.07); } .brtm-np-stage-name-input { flex: 1; background: transparent; border: none; font-size: 13px; font-weight: 600; font-family: inherit; color: var(--text-main); outline: none; padding: 0; } .brtm-np-stage-name-input::placeholder { color: var(--text-light); font-weight: 400; } .brtm-np-stage-delete-btn { width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent; color: var(--text-light); display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; transition: all .12s; flex-shrink: 0; } .brtm-np-stage-delete-btn:hover { background: #FEE2E2; color: #EF4444; } .brtm-np-color-pop { display: none; position: absolute; left: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13); padding: 10px; z-index: 1200; min-width: 180px; } .brtm-np-color-pop.brtm-show { display: block; } .brtm-np-color-pop-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 8px; } .brtm-np-color-swatches { display: flex; flex-wrap: wrap; gap: 6px; } .brtm-np-color-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid transparent; cursor: pointer; transition: transform .12s; } .brtm-np-color-swatch:hover { transform: scale(1.15); } .brtm-np-color-swatch.brtm-selected { border-color: #fff; box-shadow: 0 0 0 2.5px var(--primary); } /* ── INLINE CELL EDIT ── */ /* ══════════════════════════════════════════════════════════════ §07 INLINE CELL EDITOR ══════════════════════════════════════════════════════════════ */ td[data-col-id].brtm-editable-col:hover { cursor: text; background: rgba(27, 111, 190, 0.035); } td[data-col-id].brtm-editable-col { transition: background .1s; } td.brtm-cell-editing { padding: 4px 8px !important; background: #fff !important; } .brtm-cell-edit-wrap { position: relative; } .brtm-cell-edit-input { width: 100%; background: #fff; border: 2px solid var(--primary); border-radius: 7px; font-size: 13px; font-family: inherit; color: var(--text-main); padding: 6px 10px; outline: none; box-shadow: 0 0 0 3px rgba(27, 111, 190, 0.12); } .brtm-cell-edit-actions { position: absolute; top: calc(100% + 4px); right: 0; display: flex; gap: 3px; background: #fff; border: 1px solid var(--border); border-radius: 7px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.13); padding: 3px; z-index: 200; } .brtm-cell-edit-save, .brtm-cell-edit-cancel { width: 26px; height: 26px; border-radius: 5px; border: none; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; transition: all .12s; } .brtm-cell-edit-save { background: var(--primary); color: #fff; } .brtm-cell-edit-save:hover { background: var(--primary-dark); } .brtm-cell-edit-cancel { background: var(--surface); color: var(--text-muted); } .brtm-cell-edit-cancel:hover { background: #fee2e2; color: #ef4444; } /* ── CELL EDITOR — popup / radio / multiselect ── */ .brtm-ce-popup { position: absolute; top: calc(100% + 4px); left: 0; min-width: 160px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .13); padding: 6px; z-index: 300; } .brtm-ce-radio-item, .brtm-ce-ms-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; transition: background .1s; } .brtm-ce-radio-item:hover, .brtm-ce-ms-item:hover { background: var(--primary-light); } .brtm-ce-radio-item.brtm-selected { background: var(--primary-light); font-weight: 600; color: var(--primary); } .brtm-ce-ms-item input[type=checkbox] { accent-color: var(--primary); width: 15px; height: 15px; } .brtm-ce-checkbox-wrap { display: flex; align-items: center; gap: 10px; padding: 8px 4px; } .brtm-ce-toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; } .brtm-ce-toggle input { display: none; } .brtm-ce-toggle-track { position: absolute; inset: 0; background: #CBD5E1; border-radius: 99px; transition: background .15s; } .brtm-ce-toggle input:checked~.brtm-ce-toggle-track { background: var(--primary); } .brtm-ce-toggle-thumb { position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: transform .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); } .brtm-ce-toggle input:checked~.brtm-ce-toggle-thumb { transform: translateX(18px); } .brtm-ce-toggle-label { font-size: 13px; color: var(--text-main); } .brtm-ce-select { width: 100%; padding: 7px 10px; border: 1.5px solid var(--primary); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--text-main); background: #fff; outline: none; } .brtm-ce-upload-zone { border: 2px dashed var(--border); border-radius: 8px; padding: 16px; text-align: center; font-size: 12px; color: var(--text-muted); cursor: pointer; transition: border-color .15s; } .brtm-ce-upload-zone:hover, .brtm-ce-upload-zone.brtm-drag-active { border-color: var(--primary); color: var(--primary); } .brtm-ce-upload-file-info { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 6px 4px; } .brtm-ce-img-zone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 4px; } .brtm-ce-img-preview { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; border: 1.5px solid var(--border); } .brtm-ce-img-pick-btn { font-size: 12px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px; background: #fff; cursor: pointer; color: var(--text-main); } /* cell display helpers */ .brtm-ce-badge-radio { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; } .brtm-ce-badge-high { background: #FEE2E2; color: #DC2626; } .brtm-ce-badge-medium { background: #FEF9C3; color: #A16207; } .brtm-ce-badge-low { background: #DCFCE7; color: #15803D; } .brtm-ce-checkbox-cell { font-size: 16px; } .brtm-ce-checkbox-cell.on { color: #10B981; } .brtm-ce-checkbox-cell.off { color: #CBD5E1; } .brtm-ce-ms-chips { display: flex; flex-wrap: wrap; gap: 3px; } .brtm-ce-ms-chip { display: inline-block; padding: 2px 7px; background: var(--primary-light); color: var(--primary); border-radius: 99px; font-size: 11px; font-weight: 600; } .brtm-ce-file-cell { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-main); } .brtm-ce-file-cell i { color: var(--primary); } .brtm-ce-img-cell { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); } .brtm-ce-img-placeholder { width: 32px; height: 32px; border-radius: 6px; border: 1.5px dashed var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: 14px; } /* ── LEAD SLIDESHOW PANEL ── */ /* ══════════════════════════════════════════════════════════════ §08 LEAD SLIDESHOW PANEL ══════════════════════════════════════════════════════════════ */ .brtm-slide-name-banner { background: var(--primary-light); border-bottom: 1px solid var(--border); padding: 18px 20px; display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .brtm-slide-avatar { width: 46px; height: 46px; border-radius: 12px; background: var(--primary); color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-slide-name { font-size: 15px; font-weight: 700; color: var(--text-main); line-height: 1.3; } .brtm-slide-status-tag { display: inline-block; font-size: 11px; font-weight: 600; background: var(--primary); color: #fff; border-radius: 20px; padding: 2px 9px; margin-top: 4px; } .brtm-slide-nav-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--border); background: #fafbfd; flex-shrink: 0; } .brtm-slide-nav-btn { display: flex; align-items: center; gap: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; color: var(--text-main); font-size: 12.5px; font-weight: 500; font-family: inherit; padding: 5px 12px; cursor: pointer; transition: all .15s; } .brtm-slide-nav-btn:hover:not(:disabled) { background: var(--primary); color: #fff; border-color: var(--primary); } .brtm-slide-nav-btn:disabled { opacity: .35; cursor: not-allowed; } .brtm-slide-nav-pos { font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .brtm-slide-field-group { padding: 12px 20px; border-bottom: 1px solid var(--border); } .brtm-slide-field-group:last-child { border-bottom: none; } .brtm-slide-field-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; } .brtm-slide-field-label i { font-size: 12px; color: var(--primary); } .brtm-slide-field-value { font-size: 13.5px; color: var(--text-main); font-weight: 500; word-break: break-word; line-height: 1.5; } .brtm-slide-field-value.brtm-empty { color: var(--text-light); font-weight: 400; font-style: italic; } .brtm-slide-header-actions { display: flex; align-items: center; gap: 6px; } .brtm-slide-edit-toggle { display: flex; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--border); border-radius: 7px; color: var(--text-main); font-size: 12.5px; font-weight: 600; font-family: inherit; padding: 5px 12px; cursor: pointer; transition: all .15s; } .brtm-slide-edit-toggle:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } /* ══════════════════════════════════════ QUICK PREVIEW — CRM STANDARD PANEL ══════════════════════════════════════ */ /* ── Hero / identity ── */ /* ══════════════════════════════════════════════════════════════ §09 QUICK PREVIEW PANEL (CRM Standard) ══════════════════════════════════════════════════════════════ */ .brtm-qp-hero { padding: 16px 20px; border-bottom: 1px solid var(--border); background: #fff; flex-shrink: 0; } .brtm-qp-hero-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .brtm-qp-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -.5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-qp-name-block { flex: 1; min-width: 0; } .brtm-qp-name { font-size: 14.5px; font-weight: 700; color: var(--text-main); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-qp-org { font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-qp-status-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 4px; font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0; margin-top: 2px; } .brtm-qp-status-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .brtm-qp-status-badge.brtm-hot { background: #FEF2F2; color: #B91C1C; } .brtm-qp-status-badge.brtm-hot::before { background: #EF4444; } .brtm-qp-status-badge.follow { background: #FFFBEB; color: #92400E; } .brtm-qp-status-badge.follow::before { background: #F59E0B; } .brtm-qp-status-badge.brtm-new { background: #EFF6FF; color: #1E40AF; } .brtm-qp-status-badge.brtm-new::before { background: #3B82F6; } .brtm-qp-status-badge.qual { background: #F0FDF4; color: #166534; } .brtm-qp-status-badge.qual::before { background: #22C55E; } .brtm-qp-status-badge.unqual { background: #F8FAFC; color: #475569; } .brtm-qp-status-badge.unqual::before { background: #94A3B8; } /* contact rows: phone + email dengan inline icon action */ .brtm-qp-contact-rows { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; } .brtm-qp-contact-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); } .brtm-qp-contact-row:last-child { border-bottom: none; } .brtm-qp-contact-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; } .brtm-qp-contact-icon.brtm-phone { background: var(--accent-light); color: var(--accent); } .brtm-qp-contact-icon.brtm-email { background: var(--primary-light); color: var(--primary); } .brtm-qp-contact-icon.brtm-org { background: #F1F5F9; color: #64748B; } .brtm-qp-contact-row-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-light); white-space: nowrap; width: 44px; flex-shrink: 0; } .brtm-qp-contact-row-val { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-qp-contact-row-val.brtm-empty { color: var(--text-light); font-style: italic; } .brtm-qp-contact-action { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 12px; cursor: pointer; transition: all .15s; flex-shrink: 0; text-decoration: none; } .brtm-qp-contact-action:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } /* meta strip: dibuat pada + owner */ .brtm-qp-meta-strip { display: flex; gap: 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .brtm-qp-meta-item { display: flex; align-items: center; gap: 6px; min-width: 0; } .brtm-qp-meta-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-light); white-space: nowrap; } .brtm-qp-meta-value { font-size: 12px; font-weight: 600; color: var(--text-main); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-qp-meta-value i { font-size: 11px; color: var(--text-muted); flex-shrink: 0; } /* ── CTA bar ── */ .brtm-qp-cta-bar { display: flex; gap: 6px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; } .brtm-qp-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 6px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; border: 1px solid transparent; transition: all .15s; white-space: nowrap; flex-shrink: 0; } .brtm-qp-btn i { font-size: 11px; } .brtm-qp-btn-call { background: var(--accent); color: #fff; border-color: var(--accent); } .brtm-qp-btn-call:hover { background: #009963; border-color: #009963; } .brtm-qp-btn-convert { background: var(--primary); color: #fff; border-color: var(--primary); } .brtm-qp-btn-convert:hover { background: var(--primary-dark); border-color: var(--primary-dark); } .brtm-qp-btn-meeting { background: #fff; color: var(--text-main); border-color: var(--border); } .brtm-qp-btn-meeting:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } /* More dropdown */ .brtm-qp-more-wrap { position: relative; margin-left: auto; } .brtm-qp-btn-more { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; font-size: 14px; cursor: pointer; transition: all .15s; } .brtm-qp-btn-more:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-qp-more-menu { display: none; position: absolute; bottom: calc(100% + 5px); right: 0; background: #fff; border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 6px 20px rgba(0, 0, 0, .10); min-width: 164px; overflow: hidden; z-index: 600; } .brtm-qp-more-menu.brtm-show { display: block; } .brtm-qp-more-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--text-main); background: none; border: none; font-family: inherit; cursor: pointer; text-align: left; transition: background .12s; } .brtm-qp-more-item:hover { background: var(--primary-light); color: var(--primary); } .brtm-qp-more-item i { font-size: 13px; width: 14px; text-align: center; color: var(--text-muted); flex-shrink: 0; } .brtm-qp-more-item:hover i { color: var(--primary); } .brtm-qp-more-item.brtm-danger { color: #EF4444; } .brtm-qp-more-item.brtm-danger i { color: #EF4444; } .brtm-qp-more-item.brtm-danger:hover { background: #FEF2F2; color: #EF4444; } .brtm-qp-more-divider { height: 1px; background: var(--border); margin: 3px 0; } /* ── Tabs ── */ .brtm-qp-tabs-nav { display: flex; background: #fff; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; padding: 0 6px; } .brtm-qp-tabs-nav::-webkit-scrollbar { display: none; } .brtm-qp-tab-btn { padding: 9px 10px; font-size: 12px; font-weight: 600; font-family: inherit; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .15s, border-color .15s; white-space: nowrap; } .brtm-qp-tab-btn:hover { color: var(--text-main); } .brtm-qp-tab-btn.brtm-active { color: var(--primary); border-bottom-color: var(--primary); } /* Tab body */ .brtm-qp-tabs-body { flex: 1; min-height: 0; overflow: hidden; } .brtm-qp-tab-panel { display: none; height: 100%; overflow-y: auto; } .brtm-qp-tab-panel.brtm-active { display: block; } /* ── Detail tab: field rows (CRM row style) ── */ .brtm-qp-field-group { padding: 6px 0; } .brtm-qp-field-group-title { padding: 10px 20px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--text-light); } .brtm-qp-field-row { display: flex; align-items: flex-start; gap: 0; padding: 7px 20px; border-bottom: 1px solid var(--border); transition: background .12s; } .brtm-qp-field-row:first-of-type { border-top: 1px solid var(--border); } .brtm-qp-field-row:hover { background: var(--surface); } .brtm-qp-field-key { width: 130px; flex-shrink: 0; font-size: 12px; font-weight: 500; color: var(--text-muted); padding-top: 1px; line-height: 1.5; } .brtm-qp-field-val { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-main); word-break: break-word; line-height: 1.5; } .brtm-qp-field-val.brtm-empty { color: var(--text-light); font-style: italic; font-weight: 400; } /* ── Comments tab ── */ .brtm-qp-comment-form { padding: 12px 16px; border-bottom: 1px solid var(--border); } .brtm-qp-comment-input { width: 100%; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: inherit; color: var(--text-main); padding: 8px 12px; resize: none; outline: none; min-height: 60px; background: var(--surface); transition: border-color .15s; line-height: 1.5; } .brtm-qp-comment-input:focus { border-color: var(--primary); background: #fff; } .brtm-qp-comment-actions { display: flex; justify-content: flex-end; margin-top: 8px; } .brtm-qp-comment-submit { display: inline-flex; align-items: center; gap: 5px; background: var(--primary); color: #fff; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; font-family: inherit; height: 30px; padding: 0 14px; cursor: pointer; transition: background .15s; } .brtm-qp-comment-submit:hover { background: var(--primary-dark); } .brtm-qp-comment-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; } .brtm-qp-comment-item { display: flex; gap: 9px; } .brtm-qp-comment-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-qp-comment-bubble { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 2px 8px 8px 8px; padding: 8px 11px; } .brtm-qp-comment-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .brtm-qp-comment-author { font-size: 12px; font-weight: 700; color: var(--text-main); } .brtm-qp-comment-time { font-size: 11px; color: var(--text-light); margin-left: auto; white-space: nowrap; } .brtm-qp-comment-text { font-size: 12.5px; color: var(--text-main); line-height: 1.55; } /* ── Activity tab ── */ .brtm-qp-activity-list { padding: 12px 16px; display: flex; flex-direction: column; } .brtm-qp-act-row { display: flex; gap: 11px; position: relative; padding-bottom: 18px; } .brtm-qp-act-row:last-child { padding-bottom: 4px; } .brtm-qp-act-row::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 0; width: 1px; background: var(--border); } .brtm-qp-act-row:last-child::before { display: none; } .brtm-qp-act-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; position: relative; z-index: 1; border: 1px solid transparent; } .brtm-qp-act-icon.brtm-success { background: var(--accent-light); color: var(--accent); border-color: rgba(0, 184, 122, .2); } .brtm-qp-act-icon.brtm-info { background: var(--primary-light); color: var(--primary); border-color: rgba(27, 111, 190, .2); } .brtm-qp-act-icon.brtm-warn { background: #FEF3C7; color: #D97706; border-color: rgba(245, 158, 11, .2); } .brtm-qp-act-icon.brtm-muted { background: #F1F5F9; color: #94A3B8; border-color: #E2E8F0; } .brtm-qp-act-content { flex: 1; min-width: 0; padding-top: 4px; } .brtm-qp-act-title { font-size: 13px; font-weight: 600; color: var(--text-main); line-height: 1.3; } .brtm-qp-act-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .brtm-qp-act-desc { font-size: 12px; color: var(--text-muted); margin-top: 5px; padding: 5px 8px; background: var(--surface); border-radius: 5px; border-left: 2px solid var(--border); line-height: 1.4; } /* ── Attachment tab ── */ .brtm-qp-attachment-list { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; } .brtm-qp-att-item { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: 7px; padding: 8px 12px; transition: border-color .15s, box-shadow .15s; } .brtm-qp-att-item:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); } .brtm-qp-att-icon { font-size: 18px; flex-shrink: 0; } .brtm-qp-att-icon.brtm-pdf { color: #EF4444; } .brtm-qp-att-icon.doc { color: var(--primary); } .brtm-qp-att-icon.brtm-xls { color: var(--accent); } .brtm-qp-att-icon.img { color: #F59E0B; } .brtm-qp-att-info { flex: 1; min-width: 0; } .brtm-qp-att-name { font-size: 12.5px; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-qp-att-size { font-size: 11px; color: var(--text-light); margin-top: 1px; } .brtm-qp-att-dl { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 12px; cursor: pointer; transition: all .15s; flex-shrink: 0; } .brtm-qp-att-dl:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-qp-att-upload { display: flex; align-items: center; justify-content: center; gap: 7px; border: 1.5px dashed var(--border); border-radius: 7px; padding: 12px; font-size: 12.5px; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: border-color .15s, color .15s, background .15s; margin-top: 2px; } .brtm-qp-att-upload:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } /* ── Status History tab ── */ .brtm-qp-sh-list { padding: 12px 16px; display: flex; flex-direction: column; } .brtm-qp-sh-row { display: flex; gap: 12px; position: relative; padding-bottom: 20px; } .brtm-qp-sh-row:last-child { padding-bottom: 4px; } .brtm-qp-sh-row::before { content: ''; position: absolute; left: 9px; top: 22px; bottom: 0; width: 1px; background: var(--border); } .brtm-qp-sh-row:last-child::before { display: none; } .brtm-qp-sh-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); background: #fff; flex-shrink: 0; position: relative; z-index: 1; margin-top: 2px; } .brtm-qp-sh-dot.brtm-current { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27, 111, 190, .15); } .brtm-qp-sh-status-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; } .brtm-qp-sh-status-tag.brtm-current { color: var(--primary); } .brtm-qp-sh-date { font-size: 11.5px; color: var(--text-muted); } .brtm-qp-sh-by { font-size: 11px; color: var(--text-light); margin-top: 2px; } /* ══════════════════════════════════════════ LEAD DETAIL PAGE — FULL CSS ══════════════════════════════════════════ */ /* ── Topbar lead-detail aliases ── */ /* ══════════════════════════════════════════════════════════════ §10 LEAD DETAIL PAGE — Full CSS ══════════════════════════════════════════════════════════════ */ .brtm-tb-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; margin-right: 8px; } .brtm-tb-logo img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; } .brtm-tb-logo-name { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.3px; white-space: nowrap; } .brtm-tb-nav { display: flex; align-items: center; gap: 2px; flex: 1; } .brtm-tn-link { color: rgba(255, 255, 255, 0.65); font-size: 13.5px; font-weight: 500; padding: 6px 14px; border-radius: 6px; cursor: pointer; transition: all .18s; text-decoration: none; } .brtm-tn-link:hover, .brtm-tn-link.brtm-active { color: #fff; background: rgba(255, 255, 255, 0.1); } .brtm-tb-right { display: flex; align-items: center; gap: 6px; margin-left: auto; } .brtm-tb-icon { width: 34px; height: 34px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 8px; color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; transition: background .18s; flex-shrink: 0; } .brtm-tb-icon:hover { background: rgba(255, 255, 255, 0.18); color: #fff; } .brtm-tb-plus { background: var(--accent); } .brtm-tb-plus:hover { background: #009963; } .brtm-tb-notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #fff; font-size: 9px; font-weight: 700; border-radius: 20px; padding: 1px 5px; min-width: 17px; text-align: center; } .brtm-tb-help { background: #2a4a72; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 500; font-family: var(--brtm-font-ui); padding: 6px 14px; cursor: pointer; transition: background .18s; white-space: nowrap; } .brtm-tb-help:hover { background: #1e3a5f; } .brtm-tb-avatar { width: 34px; height: 34px; background: var(--primary); border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.2); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } /* ── Page Shell ── */ .brtm-page-shell { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; } /* ── Subheader (breadcrumb + actions) ── */ .brtm-subheader { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; border-bottom: 1px solid var(--border); background: var(--card-bg); flex-shrink: 0; gap: 12px; flex-wrap: wrap; } .brtm-breadcrumb { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-muted); flex-wrap: wrap; } .brtm-breadcrumb a { color: var(--primary); text-decoration: none; font-weight: 500; transition: color .15s; } .brtm-breadcrumb a:hover { color: var(--primary-dark); text-decoration: underline; } .brtm-sep { font-size: 10px; color: var(--text-light); } .brtm-bc-current { color: var(--text-main); font-weight: 600; } .brtm-subheader-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .brtm-sh-btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; font-family: var(--brtm-font-ui); cursor: pointer; border: 1px solid var(--border); transition: all .15s; white-space: nowrap; } .brtm-sh-btn-convert { background: var(--primary); color: #fff; border-color: var(--primary); } .brtm-sh-btn-convert:hover { background: var(--primary-dark); border-color: var(--primary-dark); } .brtm-sh-btn-checkin { background: var(--accent); color: #fff; border-color: var(--accent); } .brtm-sh-btn-checkin:hover { background: #009963; border-color: #009963; } .brtm-sh-btn-actions { background: var(--card-bg); color: var(--text-main); } .brtm-sh-btn-actions:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-arrow { transition: transform .2s; } .brtm-sh-btn-actions.brtm-open .brtm-arrow { transform: rotate(180deg); } .brtm-dd-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; font-size: 12.5px; font-family: var(--brtm-font-ui); border: none; background: none; cursor: pointer; color: var(--text-1); text-align: left; } .brtm-dd-item:hover { background: var(--surface); } .brtm-dd-item.brtm-danger { color: #DC2626; } .brtm-dd-item.brtm-danger:hover { background: #FEF2F2; } /* ══════════════════════════════════════════ MODAL / DIALOG BUTTONS ══════════════════════════════════════════ */ .brtm-modal-cancel { height: 34px; padding: 0 16px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 600; font-family: var(--brtm-font-ui); cursor: pointer; } .brtm-modal-cancel:hover { border-color: var(--primary); color: var(--primary); } .brtm-modal-confirm-danger { height: 34px; padding: 0 16px; border-radius: 7px; border: none; background: #DC2626; color: #fff; font-size: 12.5px; font-weight: 600; font-family: var(--brtm-font-ui); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .brtm-modal-confirm-danger:hover { background: #B91C1C; } /* Detail page inline buttons (save/cancel/edit in panels) */ .brtm-panel-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 14px; border-radius: 6px; font-size: 12.5px; font-weight: 600; font-family: var(--brtm-font-ui); cursor: pointer; transition: all .15s; } .brtm-panel-btn-cancel { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); } .brtm-panel-btn-cancel:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-panel-btn-save { border: none; background: var(--primary); color: #fff; } .brtm-panel-btn-save:hover { background: var(--primary-dark); } .brtm-panel-btn-secondary { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); } .brtm-panel-btn-secondary:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } /* Comment reply inline buttons (smaller) */ .brtm-comment-btn { height: 26px; padding: 0 10px; border-radius: 5px; font-size: 12px; font-family: var(--brtm-font-ui); cursor: pointer; } .brtm-comment-btn-cancel { background: var(--surface); color: var(--text-2); border: 1px solid var(--border); } .brtm-comment-btn-send { background: var(--primary); color: #fff; border: none; font-weight: 600; } /* Drawer widths */ .brtm-col-drawer-w480 { width: 480px; } .brtm-col-drawer-w500 { width: 500px; } /* Modal title danger variant */ .brtm-modal-title-danger { color: #EF4444; } /* ── Layout (sidebar + main) ── */ /* ─── §10a · Layout (Sidebar + Main) ─── */ .brtm-layout { flex: 1; display: flex; min-height: 0; overflow: hidden; } /* ── Left Sidebar ── */ .brtm-sidebar { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--card-bg); overflow: hidden; position: relative; } .brtm-sidebar-resize-handle { width: 4px; background: transparent; cursor: col-resize; flex-shrink: 0; transition: background .15s; position: relative; z-index: 10; } .brtm-sidebar-resize-handle:hover { background: var(--primary-light); } /* ── User Card ── */ .brtm-user-card { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--card-bg); } .brtm-user-avatar-wrap { position: relative; cursor: pointer; flex-shrink: 0; } .brtm-user-avatar { width: 48px; height: 48px; border-radius: 14px; background: var(--primary); color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .brtm-user-avatar-overlay { position: absolute; inset: 0; border-radius: 14px; background: rgba(0, 0, 0, 0.4); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0; transition: opacity .15s; } .brtm-user-avatar-wrap:hover .brtm-user-avatar-overlay { opacity: 1; } .brtm-user-name { font-size: 14px; font-weight: 700; color: var(--text-1); line-height: 1.3; } .brtm-sf-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; } .brtm-sf-pill.brtm-hot { background: #FEE2E2; color: #B91C1C; } .brtm-sf-pill.brtm-warm { background: #FEF3C7; color: #92400E; } .brtm-sf-pill.brtm-cold { background: #EFF6FF; color: #1E40AF; } .brtm-sf-pill.brtm-new { background: #F0FDF4; color: #166534; } /* ── Sidebar scroll area ── */ .brtm-sidebar-scroll { flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.12) transparent; } .brtm-sidebar-scroll::-webkit-scrollbar { width: 4px; } .brtm-sidebar-scroll::-webkit-scrollbar-track { background: transparent; } .brtm-sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 99px; } /* ── Accordion Sections ── */ .brtm-acc-section { border-bottom: 1px solid var(--border); } .brtm-acc-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; background: var(--surface); transition: background .15s; user-select: none; } .brtm-acc-header:hover { background: #eef3fb; } .brtm-acc-title { font-size: 12px; font-weight: 700; color: var(--text-1); text-transform: uppercase; letter-spacing: .4px; } .brtm-acc-arrow { font-size: 11px; color: var(--text-3); transition: transform .2s; } .brtm-acc-body { display: none; } .brtm-acc-section.brtm-open .brtm-acc-body { display: block; } .brtm-acc-section.brtm-open .brtm-acc-arrow { transform: rotate(180deg); } .brtm-sec-map-btn { width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 5px; background: var(--card-bg); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; transition: all .12s; } .brtm-sec-map-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); } /* ── Sidebar Field Rows ── */ .brtm-sf-row { display: flex; align-items: flex-start; gap: 0; padding: 7px 14px; border-bottom: 1px solid var(--border); transition: background .1s; position: relative; } .brtm-sf-row:hover { background: var(--row-hover); } .brtm-sf-row:hover .brtm-sf-pen { opacity: 1; } .brtm-sf-label { width: 110px; flex-shrink: 0; font-size: 11.5px; font-weight: 500; color: var(--text-2); padding-top: 2px; line-height: 1.5; word-break: break-word; overflow-wrap: anywhere; } .brtm-sf-val-wrap { flex: 1; min-width: 0; } .brtm-sf-display { font-size: 12.5px; color: var(--text-1); font-weight: 500; line-height: 1.5; word-break: break-word; display: block; } .brtm-sf-display.brtm-empty { color: var(--text-3); font-style: italic; } .brtm-sf-display.brtm-truncated .brtm-sf-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .brtm-sf-display.brtm-expanded .brtm-sf-text { -webkit-line-clamp: unset; } .brtm-sf-expand-btn { background: none; border: none; padding: 2px 0; font-size: 11.5px; color: var(--primary); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 3px; } .brtm-sf-expand-btn:hover { text-decoration: underline; } .brtm-sf-edit-wrap { display: none; align-items: center; gap: 5px; flex-wrap: wrap; } .brtm-sf-row.brtm-editing .brtm-sf-display { display: none; } .brtm-sf-row.brtm-editing .brtm-sf-edit-wrap { display: flex; } .brtm-sf-row.brtm-editing .brtm-sf-pen { display: none; } .brtm-sf-inline-input, .brtm-sf-inline-select { font-size: 12.5px; font-family: inherit; border: 1.5px solid var(--primary) !important; border-radius: 6px !important; outline: none !important; padding: 4px 8px !important; background: #fff; flex: 1; min-width: 0; } .brtm-sf-inline-textarea { font-size: 12.5px; font-family: inherit; border: 1.5px solid var(--primary) !important; border-radius: 6px !important; outline: none !important; padding: 6px 8px !important; background: #fff; min-height: 72px; resize: vertical; flex: 1; min-width: 0; } .brtm-sf-save-btn, .brtm-sf-cancel-btn { width: 26px; height: 26px; border-radius: 6px; border: none; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; transition: all .12s; flex-shrink: 0; } .brtm-sf-save-btn { background: var(--primary); color: #fff; } .brtm-sf-save-btn:hover { background: var(--primary-dark); } .brtm-sf-cancel-btn { background: var(--surface); color: var(--text-2); border: 1px solid var(--border); } .brtm-sf-cancel-btn:hover { background: #FEE2E2; color: #EF4444; } .brtm-sf-pen { width: 22px; height: 22px; flex-shrink: 0; border: none; background: transparent; color: var(--text-3); display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; opacity: 0; transition: opacity .15s, color .12s; border-radius: 5px; margin-top: 1px; } .brtm-sf-pen:hover { color: var(--primary); background: var(--primary-light); opacity: 1; } /* ── Tags Section ── */ .brtm-tags-section { padding: 10px 14px; border-bottom: 1px solid var(--border); } .brtm-tags-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .brtm-tags-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-2); } .brtm-tag-add-btn { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 11.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .12s; } .brtm-tag-add-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-tags-display { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; } .brtm-tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 99px; background: var(--primary-light); color: var(--primary); font-size: 11.5px; font-weight: 600; border: 1px solid rgba(27, 111, 190, .2); } .brtm-tag-chip-x { width: 14px; height: 14px; border-radius: 50%; background: var(--primary); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; transition: background .12s; } .brtm-tag-chip-x:hover { background: var(--primary-dark); } .brtm-tag-input-row { display: none; align-items: center; gap: 5px; margin-top: 6px; } .brtm-tag-input-row.brtm-visible { display: flex; } .brtm-tag-input-field { font-size: 12.5px; font-family: inherit; flex: 1; } /* ── Attachments Section ── */ .brtm-att-section { padding: 10px 14px; border-bottom: 1px solid var(--border); } .brtm-att-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .brtm-att-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-2); flex: 1; } .brtm-att-upload-btn { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 11.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .12s; } .brtm-att-upload-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-att-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-bg); margin-bottom: 7px; transition: border-color .15s, box-shadow .15s; position: relative; } .brtm-att-item:last-child { margin-bottom: 0; } .brtm-att-item:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); } .brtm-att-thumb { width: 52px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--surface); flex-shrink: 0; position: relative; border: 1px solid var(--border); } .brtm-att-thumb-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; opacity: 0; transition: opacity .15s; cursor: pointer; } .brtm-att-item:hover .brtm-att-thumb-overlay { opacity: 1; } .brtm-att-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .brtm-att-badge { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: .3px; background: var(--primary-light); color: var(--primary); text-transform: capitalize; align-self: flex-start; } .brtm-att-filename { font-size: 12px; font-weight: 600; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; display: block; } .brtm-att-filename:hover { text-decoration: underline; } .brtm-att-meta { font-size: 10.5px; color: var(--text-3); } .brtm-att-more { width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent; color: var(--text-3); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: all .12s; flex-shrink: 0; } .brtm-att-more:hover { background: var(--surface); color: var(--text-1); } .brtm-att-menu { display: none; position: absolute; right: 6px; top: calc(100% - 4px); background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); min-width: 140px; overflow: hidden; z-index: 200; } .brtm-att-menu.brtm-show { display: block; } .brtm-att-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; font-size: 12.5px; font-weight: 500; color: var(--text-1); background: none; border: none; font-family: inherit; cursor: pointer; transition: background .12s; } .brtm-att-menu-item:hover { background: var(--surface); } .brtm-att-menu-item.brtm-danger { color: #EF4444; } .brtm-att-menu-item.brtm-danger:hover { background: #FEF2F2; } .brtm-danger { color: #EF4444 !important; } /* ── Attachment list (notes-detail style, shared) ── */ .brtm-nd-att-item { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; margin: 0 0 6px; transition: border-color .15s; } .brtm-nd-att-item:hover { border-color: var(--primary); } .brtm-nd-att-icon { font-size: 17px; flex-shrink: 0; } .brtm-nd-att-info { flex: 1; min-width: 0; } .brtm-nd-att-name { font-size: 12px; font-weight: 600; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-nd-att-meta { font-size: 10.5px; color: var(--text-3); } .brtm-nd-att-dl { width: 26px; height: 26px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; } .brtm-nd-att-dl:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-nd-att-dl.brtm-danger:hover { border-color: #EF4444; color: #EF4444; background: #FEF2F2; } /* ── Attachment preview modal (shared) ── */ .brtm-att-preview-overlay { position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1200;display:flex;align-items:center;justify-content:center;padding:16px; } .brtm-att-preview-modal { background:#fff;border-radius:12px;box-shadow:0 8px 48px rgba(27,111,190,.18);width:100%;max-width:520px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden; } .brtm-att-preview-head { display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);gap:12px; } .brtm-att-preview-head-title { font-size:13px;font-weight:700;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0; } .brtm-att-preview-close { width:30px;height:30px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s; } .brtm-att-preview-close:hover { border-color:#EF4444;color:#EF4444;background:#FEF2F2; } .brtm-att-preview-body { flex:1;overflow:auto;padding:32px 24px;display:flex;flex-direction:column;align-items:center;gap:14px; } /* ── Sidebar Pagination ── */ .brtm-sidebar-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 10px 14px; border-top: 1px solid var(--border); flex-shrink: 0; background: var(--card-bg); } .brtm-pg-btn { height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 12px; font-family: inherit; cursor: pointer; transition: all .12s; } .brtm-pg-btn:hover, .brtm-pg-btn.brtm-active { background: var(--primary); color: #fff; border-color: var(--primary); } .brtm-pg-icon { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .12s; } .brtm-pg-icon:hover { background: var(--primary); color: #fff; border-color: var(--primary); } /* ── Main Content Area ── */ /* ─── §10b · Main Content & Tabs ─── */ .brtm-main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; background: var(--surface); } /* ── Tabs Bar ── */ .brtm-tabs-bar { display: flex; align-items: center; gap: 0; background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 0 20px; flex-shrink: 0; overflow-x: auto; scrollbar-width: none; } .brtm-tabs-bar::-webkit-scrollbar { display: none; } .brtm-tab-btn { padding: 10px 14px; font-size: 13px; font-weight: 600; font-family: inherit; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .15s, border-color .15s; white-space: nowrap; } .brtm-tab-btn:hover { color: var(--text-main); } .brtm-tab-btn.brtm-active { color: var(--primary); border-bottom-color: var(--primary); } .brtm-tab-panel { display: none; flex: 1; flex-direction: column; overflow-y: auto; min-height: 0; } .brtm-tab-panel.brtm-active { display: flex; } /* ── Activity Toolbar ── */ .brtm-act-toolbar { display: flex; align-items: center; gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--card-bg); flex-shrink: 0; } .brtm-act-add-btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 14px; background: var(--primary); color: #fff; border: none; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s; white-space: nowrap; } .brtm-act-add-btn:hover { background: var(--primary-dark); } .brtm-act-add-caret { display: inline-flex; align-items: center; justify-content: center; height: 32px; width: 28px; background: var(--primary); color: #fff; border: none; border-radius: 0 7px 7px 0; font-size: 11px; cursor: pointer; transition: background .15s; flex-shrink: 0; } .brtm-act-add-caret:hover { background: var(--primary-dark); } .brtm-act-generic-dropdown { position: absolute; top: calc(100% + 4px); left: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 6px 22px rgba(0, 0, 0, .12); min-width: 160px; overflow: hidden; z-index: 300; } .brtm-act-dd-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; font-size: 13px; font-weight: 500; color: var(--text-1); background: none; border: none; font-family: inherit; cursor: pointer; transition: background .12s; } .brtm-act-dd-item:hover, .brtm-act-dd-item.brtm-active { background: var(--primary-light); color: var(--primary); } .brtm-act-dd-sep { height: 1px; background: var(--border); margin: 3px 0; } .brtm-act-filter-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-1); font-size: 12.5px; font-family: inherit; cursor: pointer; transition: all .12s; white-space: nowrap; } .brtm-act-filter-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-act-filter-active-badge { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); display: inline-block; flex-shrink: 0; } .brtm-act-spacer { flex: 1; } .brtm-act-view-pill { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 12px; font-family: inherit; cursor: pointer; transition: all .12s; white-space: nowrap; } .brtm-act-view-pill:hover, .brtm-act-view-pill.brtm-active { background: var(--primary); color: #fff; border-color: var(--primary); } .brtm-act-export-btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 12px; font-family: inherit; cursor: pointer; transition: all .12s; white-space: nowrap; } .brtm-act-export-btn:hover { border-color: var(--primary); color: var(--primary); } .brtm-act-search-icon { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .12s; flex-shrink: 0; } .brtm-act-search-icon:hover { border-color: var(--primary); color: var(--primary); } /* ── Activity Content ── */ .brtm-act-content { padding: 20px 24px; overflow-y: auto; flex: 1; min-height: 0; } .brtm-act-heading { font-size: 13px; font-weight: 700; color: var(--text-1); margin-bottom: 14px; } .brtm-act-timeline-mode { padding: 20px 24px; overflow-y: auto; flex: 1; } .brtm-act-timeline-day { margin-bottom: 20px; } .brtm-act-timeline-day-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .brtm-act-timeline-group { display: flex; flex-direction: column; gap: 8px; padding-left: 0; } /* ── Empty States ── */ .brtm-act-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; gap: 10px; text-align: center; } .brtm-act-empty-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--text-light); } .brtm-act-empty-title { font-size: 14px; font-weight: 700; color: var(--text-1); } .brtm-act-empty-sub { font-size: 12.5px; color: var(--text-2); max-width: 300px; line-height: 1.6; } .brtm-act-empty-btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 16px; border-radius: 7px; background: var(--primary); color: #fff; border: none; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .12s; margin-top: 4px; } .brtm-act-empty-btn:hover { background: var(--primary-dark); } /* ── Activity Cards ── */ /* ─── §10c · Activity Cards ─── */ .brtm-activity-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; box-shadow: var(--shadow-sm); display: flex; transition: box-shadow .15s, border-color .15s; position: relative; } .brtm-activity-card:hover { box-shadow: 0 3px 14px rgba(27, 111, 190, .1); border-color: #c6d8ef; } .brtm-activity-card.brtm-pinned { border-color: #D97706; box-shadow: 0 0 0 1.5px rgba(217, 119, 6, .25), var(--shadow-sm); } .brtm-act-type-indicator { width: 5px; flex-shrink: 0; border-radius: 10px 0 0 10px; font-size: 0; } .brtm-act-type-indicator.brtm-notes { background: var(--primary); } .brtm-act-type-indicator.brtm-email { background: #EA580C; } .brtm-act-type-indicator.brtm-call { background: var(--accent); } .brtm-act-type-indicator.brtm-meeting { background: #7C3AED; } .brtm-act-type-indicator.brtm-task { background: #D97706; } .brtm-act-type-indicator.brtm-deal { background: #059669; } .brtm-act-type-indicator.brtm-project { background: #0284C7; } .brtm-act-type-indicator.brtm-ticket { background: #9333EA; } .brtm-act-type-indicator.brtm-survey { background: #EA580C; } .brtm-act-card-body { flex: 1; padding: 12px 14px; min-width: 0; } .brtm-act-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .brtm-act-card-title { font-size: 13px; font-weight: 700; color: var(--text-1); line-height: 1.3; } .brtm-act-type-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700; white-space: nowrap; flex-shrink: 0; border: 1px solid transparent; } .brtm-act-type-chip.brtm-notes { background: #EFF6FF; color: #1B6FBE; border-color: rgba(27, 111, 190, .2); } .brtm-act-type-chip.brtm-email { background: #FFF7ED; color: #C2410C; border-color: rgba(234, 88, 12, .2); } .brtm-act-type-chip.brtm-call { background: #ECFDF5; color: #065F46; border-color: rgba(5, 150, 105, .2); } .brtm-act-type-chip.brtm-meeting { background: #F5F3FF; color: #6D28D9; border-color: rgba(124, 58, 237, .2); } .brtm-act-type-chip.brtm-task { background: #FFFBEB; color: #B45309; border-color: rgba(217, 119, 6, .2); } .brtm-act-pin-badge { display: none; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 5px; font-size: 10px; font-weight: 700; background: #FFFBEB; color: #B45309; border: 1px solid rgba(217, 119, 6, .25); white-space: nowrap; flex-shrink: 0; } .brtm-activity-card.brtm-pinned .brtm-act-pin-badge { display: inline-flex; } .brtm-act-status-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 5px; font-size: 10.5px; font-weight: 700; white-space: nowrap; flex-shrink: 0; } .brtm-act-status-badge.brtm-planned { background: #EFF6FF; color: #1D4ED8; } .brtm-act-status-badge.brtm-held { background: #ECFDF5; color: #065F46; } .brtm-act-status-badge.brtm-not-held { background: #FEF2F2; color: #B91C1C; } .brtm-act-card-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .brtm-act-card-btn { width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; color: var(--text-3); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .12s; } .brtm-act-card-btn:hover { background: var(--surface); color: var(--text-1); } .brtm-act-card-menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); min-width: 160px; overflow: hidden; z-index: 200; } .brtm-act-card-menu.brtm-show { display: block; } .brtm-act-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; font-size: 12.5px; font-weight: 500; color: var(--text-1); background: none; border: none; font-family: inherit; cursor: pointer; transition: background .12s; } .brtm-act-menu-item:hover { background: var(--surface); } .brtm-act-menu-item.brtm-danger { color: #EF4444; } .brtm-act-menu-item.brtm-danger:hover { background: #FEF2F2; } .brtm-act-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-2); margin-bottom: 8px; } .brtm-act-meta-label { font-weight: 600; color: var(--text-3); } .brtm-act-meta-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 5px; background: var(--surface); color: var(--text-1); font-size: 11px; font-weight: 600; border: 1px solid var(--border); } .brtm-act-meta-badge.brtm-person { background: var(--primary-light); color: var(--primary); border-color: rgba(27, 111, 190, .2); } .brtm-act-card-note { font-size: 12.5px; color: var(--text-1); line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 6px; } .brtm-act-card-note.brtm-expanded { -webkit-line-clamp: unset; } .brtm-act-note-toggle { background: none; border: none; padding: 0; font-size: 11.5px; color: var(--primary); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 3px; margin-bottom: 8px; } .brtm-act-note-toggle:hover { text-decoration: underline; } .brtm-act-card-footer { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); } .brtm-act-preview-btn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 11.5px; font-family: inherit; cursor: pointer; transition: all .12s; } .brtm-act-preview-btn:hover { border-color: var(--primary); color: var(--primary); } .brtm-act-like-btn, .brtm-act-reply-btn { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 6px; border: none; background: transparent; color: var(--text-3); font-size: 13px; cursor: pointer; transition: all .12s; font-family: inherit; } .brtm-act-like-btn:hover, .brtm-act-reply-btn:hover { background: var(--primary-light); color: var(--primary); } .brtm-act-like-btn.brtm-liked { color: #EF4444; } .brtm-act-cmt-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--primary); color: #fff; font-size: 9px; font-weight: 700; margin-left: 2px; } /* ── Activity Comments Section ── */ .brtm-act-comments-section { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; } .brtm-act-comments-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .brtm-act-cmt-more-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--primary); background: none; border: none; cursor: pointer; padding: 2px 0 8px; font-family: inherit; transition: opacity .12s; } .brtm-act-cmt-more-btn:hover { opacity: .75; } .brtm-act-comment-form {} .brtm-cmt-avatar { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-cmt-avatar.brtm-sm { width: 22px; height: 22px; font-size: 9px; } .brtm-act-cmt-box { display: flex; flex-direction: column; gap: 4px; } .brtm-act-reply-input { font-size: 12.5px; font-family: inherit; resize: none; min-height: 48px; border-radius: 7px !important; border: 1.5px solid var(--border) !important; outline: none !important; transition: border-color .15s; } .brtm-act-reply-input:focus { border-color: var(--primary) !important; } .brtm-act-cmt-bottom-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; } .brtm-notify-btn { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 11.5px; font-family: inherit; cursor: pointer; transition: all .12s; } .brtm-notify-btn:hover { border-color: var(--primary); color: var(--primary); } .brtm-notify-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); z-index: 400; width: 230px; overflow: hidden; } .brtm-notify-dropdown.brtm-show { display: block; } .brtm-notify-tabs { display: flex; border-bottom: 1px solid var(--border); } .brtm-notify-tab { flex: 1; height: 32px; border: none; background: transparent; font-size: 12px; font-family: inherit; font-weight: 500; color: var(--text-3); cursor: pointer; transition: all .12s; } .brtm-notify-tab:hover { color: var(--primary); background: var(--primary-light); } .brtm-notify-tab.brtm-active { color: var(--primary); font-weight: 600; border-bottom: 2px solid var(--primary); background: transparent; } .brtm-notify-tab-panel {} .brtm-notify-search-wrap { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); } .brtm-notify-search-wrap .bi-search { font-size: 12px; color: var(--text-3); flex-shrink: 0; } .brtm-notify-search-input { font-size: 12.5px; font-family: inherit; border: none !important; outline: none !important; padding: 0 !important; background: transparent; } .brtm-notify-opts-list { max-height: 160px; overflow-y: auto; } .brtm-notify-opt { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12.5px; color: var(--text-1); cursor: pointer; transition: background .12s; } .brtm-notify-opt:hover { background: var(--primary-light); color: var(--primary); } /* ── Comments Tab ── */ /* ─── §10d · Comments Tab ─── */ .brtm-comment-item { margin-bottom: 16px; } .brtm-cmt-bubble { font-size: 12.5px; line-height: 1.6; color: var(--text-1); background: var(--surface); border: 1px solid var(--border); border-radius: 2px 8px 8px 8px; padding: 8px 12px; margin-bottom: 4px; word-break: break-word; } .brtm-cmt-edit-wrap { display: none; } .brtm-cmt-edit-wrap.brtm-visible { display: block; } .brtm-cmt-reply-form { display: none; } .brtm-cmt-reply-form.brtm-visible { display: block; } .brtm-cmt-edit-input { width: 100%; min-height: 60px; padding: 8px 10px; resize: vertical; border: 1.5px solid var(--primary); border-radius: 7px; outline: none; font-size: 12.5px; font-family: inherit; color: var(--text-1); box-sizing: border-box; } .brtm-cmt-action-bar { display: flex; align-items: center; gap: 4px; margin-top: 4px; } .brtm-cmt-action-btn { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 5px; border: none; background: transparent; color: var(--text-3); font-size: 11.5px; cursor: pointer; font-family: inherit; transition: all .12s; } .brtm-cmt-action-btn:hover { background: var(--surface); color: var(--text-1); } .brtm-cmt-like-count { font-size: 11px; } .brtm-cmt-resolved-badge { display: inline-flex; align-items: center; gap: 4px; background: #ECFDF5; color: #065F46; border-radius: 5px; padding: 1px 8px; font-size: 10.5px; font-weight: 700; } .brtm-cmt-edited-label { font-size: 10px; color: var(--text-3); font-style: italic; } .brtm-cmt-fmt-btn { width: 26px; height: 26px; border-radius: 5px; border: none; background: transparent; color: var(--text-2); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .12s; } .brtm-cmt-fmt-btn:hover { background: var(--surface); color: var(--primary); } .brtm-emoji-btn { width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; font-size: 16px; cursor: pointer; transition: background .1s; } .brtm-emoji-btn:hover { background: var(--surface); } .brtm-notify-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 99px; background: var(--primary-light); color: var(--primary); font-size: 11px; font-weight: 600; } .brtm-notify-chip-x { width: 14px; height: 14px; border-radius: 50%; background: var(--primary); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; } /* ── Changelog Tab ── */ /* ─── §10e · Changelog Tab ─── */ .brtm-cl-entry { display: flex; gap: 12px; position: relative; margin-bottom: 16px; } .brtm-cl-entry:last-child { margin-bottom: 4px; } .brtm-cl-entry::before { content: ''; position: absolute; left: 11px; top: 28px; bottom: -16px; width: 1px; background: var(--border); } .brtm-cl-entry:last-child::before { display: none; } .brtm-cl-dot { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; position: relative; z-index: 1; } .brtm-cl-card { flex: 1; background: var(--card-bg); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; margin-bottom: 16px; min-width: 0; } .brtm-cl-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .brtm-cl-time { font-size: 11px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; } .brtm-cl-badge { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; } .brtm-cl-badge-field { background: var(--primary-light); color: var(--primary); } .brtm-cl-badge-status { background: #FEF3C7; color: #92400E; } .brtm-cl-badge-system { background: #F1F5F9; color: #64748B; } .brtm-cl-badge-owner { background: var(--accent-light); color: #065F46; } .brtm-cl-diff-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; flex-wrap: wrap; margin: 4px 0; } .brtm-cl-field-label { font-weight: 600; color: var(--text-2); font-size: 11.5px; min-width: 90px; } .brtm-cl-diff-old { padding: 1px 8px; border-radius: 5px; font-size: 12px; font-weight: 500; background: #FEF2F2; color: #B91C1C; text-decoration: line-through; } .brtm-cl-diff-new { padding: 1px 8px; border-radius: 5px; font-size: 12px; font-weight: 600; background: #ECFDF5; color: #065F46; } .brtm-cl-meta { font-size: 11px; color: var(--text-3); margin-top: 4px; } /* ── Activity Slideout Panel ── */ /* ─── §10f · Activity Slideout Panel ─── */ .brtm-act-slideout-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 1040; } .brtm-act-slideout-overlay.brtm-show { display: block; } .brtm-act-slideout { position: fixed; right: -480px; top: 0; bottom: 0; width: 440px; max-width: 100vw; background: var(--card-bg); border-left: 1px solid var(--border); box-shadow: -4px 0 24px rgba(0, 0, 0, .12); display: flex; flex-direction: column; z-index: 1041; transition: right .3s cubic-bezier(.25, .46, .45, .94); } .brtm-act-slideout.brtm-open { right: 0; } .brtm-act-slideout-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .brtm-act-slideout-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .brtm-act-slideout-title { font-size: 14px; font-weight: 700; color: var(--text-1); flex: 1; } .brtm-act-slideout-close { width: 30px; height: 30px; border-radius: 6px; border: none; background: transparent; color: var(--text-3); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .12s; flex-shrink: 0; } .brtm-act-slideout-close:hover { background: var(--surface); color: var(--text-1); } .brtm-act-slideout-body { flex: 1; overflow-y: auto; padding: 18px 20px; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .12) transparent; } .brtm-act-slideout-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; } /* Activity Detail Right Panel */ .brtm-act-detail-panel { width: 0; flex-shrink: 0; background: var(--card-bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; position: relative; transition: width .25s cubic-bezier(.25, .46, .45, .94); } .brtm-act-detail-panel.brtm-open { width: 360px; } .brtm-adp-resize-handle { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; cursor: col-resize; z-index: 10; background: transparent; transition: background .15s; } .brtm-adp-resize-handle:hover, .brtm-adp-resize-handle:active { background: var(--primary-light); } .brtm-adp-header { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; min-width: 360px; } .brtm-adp-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .brtm-adp-title { font-size: 13px; font-weight: 700; color: var(--text-1); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-adp-close { width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; color: var(--text-3); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all .12s; } .brtm-adp-close:hover { background: var(--surface); color: var(--text-1); } .brtm-adp-body { flex: 1; overflow-y: auto; padding: 16px; min-height: 0; min-width: 360px; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .12) transparent; } .brtm-adp-body::-webkit-scrollbar { width: 4px; } .brtm-adp-body::-webkit-scrollbar-track { background: transparent; } .brtm-adp-body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 99px; } .brtm-adp-section { margin-bottom: 16px; } .brtm-adp-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; } .brtm-adp-row:last-child { border-bottom: none; } .brtm-adp-label { width: 90px; flex-shrink: 0; color: var(--text-3); font-weight: 500; padding-top: 1px; } .brtm-adp-val { flex: 1; color: var(--text-1); font-weight: 500; word-break: break-word; } .brtm-adp-divider { height: 1px; background: var(--border); margin: 4px 0 16px; } .brtm-adp-note-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); margin-bottom: 8px; } .brtm-adp-note-text { font-size: 13px; color: var(--text-1); line-height: 1.65; white-space: pre-line; } .brtm-activity-card.brtm-adp-active { background: var(--primary-light); border-color: var(--primary) !important; } /* ── Toast ── */ .brtm-toast-wrap { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; pointer-events: none; } .brtm-toast { display: flex; align-items: flex-start; gap: 10px; background: #1E293B; color: #fff; border-radius: 10px; padding: 12px 16px; min-width: 240px; max-width: 340px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); pointer-events: all; animation: toastIn .25s ease; } .brtm-toast.brtm-fade-out { animation: toastOut .25s ease forwards; } @keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes toastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } } .brtm-toast-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; } .brtm-toast-title { font-size: 13px; font-weight: 700; } .brtm-toast-msg { font-size: 12px; opacity: .75; } .brtm-toast.brtm-success .brtm-toast-icon { color: var(--accent); } .brtm-toast.brtm-error .brtm-toast-icon { color: #EF4444; } .brtm-toast.brtm-info .brtm-toast-icon { color: #60A5FA; } .brtm-toast.brtm-warn .brtm-toast-icon { color: #F59E0B; } /* ── Generic Modal ── */ /* ─── §10g · Toast & Generic Modal ─── */ .brtm-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1042; align-items: center; justify-content: center; } .brtm-modal-overlay.brtm-show { display: flex; } .brtm-modal-box { background: var(--card-bg); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .2); display: flex; flex-direction: column; width: 90vw; max-width: 860px; max-height: 90vh; overflow: hidden; } .brtm-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .brtm-modal-title { font-size: 14px; font-weight: 700; color: var(--text-1); } .brtm-modal-close { width: 30px; height: 30px; border-radius: 6px; border: none; background: transparent; color: var(--text-3); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .12s; } .brtm-modal-close:hover { background: var(--surface); color: var(--text-1); } .brtm-modal-body { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; background: #000; min-height: 200px; } .brtm-modal-body img { max-width: 100%; max-height: 70vh; display: block; } .brtm-modal-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--border); gap: 10px; flex-shrink: 0; flex-wrap: wrap; } .brtm-modal-footer-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; } .brtm-modal-footer-name { font-size: 12.5px; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-mf-rename-wrap { display: none; align-items: center; gap: 5px; flex: 1; } .brtm-mf-rename-wrap.brtm-visible { display: flex; } .brtm-mf-rename-input { flex: 1; padding: 5px 8px; border: 1.5px solid var(--primary); border-radius: 7px; font-size: 12.5px; font-family: inherit; outline: none; color: var(--text-1); } .brtm-mf-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-1); font-size: 12px; font-family: inherit; cursor: pointer; transition: all .12s; white-space: nowrap; } .brtm-mf-btn:hover { border-color: var(--primary); color: var(--primary); } .brtm-mf-btn.brtm-danger { color: #EF4444; border-color: #FECACA; } .brtm-mf-btn.brtm-danger:hover { background: #FEF2F2; } /* ── Side Drawers (Merge / Duplicate / Checkin) ── */ /* ─── §10h · Side Drawers (Merge / Duplicate / Check-in) ─── */ .brtm-side-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1042; align-items: stretch; justify-content: flex-end; } .brtm-side-drawer-overlay.brtm-show { display: flex; } .brtm-side-drawer { width: 480px; max-width: 95vw; background: var(--card-bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; box-shadow: -6px 0 28px rgba(0, 0, 0, .14); animation: drawerIn .28s ease; } @keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } } .brtm-sd-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .brtm-sd-header-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .brtm-sd-header-icon.brtm-merge { background: #EDE9FE; color: #7C3AED; } .brtm-sd-header-icon.brtm-dup { background: #E0F2FE; color: #0284C7; } .brtm-sd-header-icon.brtm-checkin { background: var(--accent-light); color: var(--accent); } .brtm-sd-header-texts { flex: 1; min-width: 0; } .brtm-sd-header-title { font-size: 14px; font-weight: 700; color: var(--text-1); } .brtm-sd-header-sub { font-size: 12px; color: var(--text-2); margin-top: 1px; } .brtm-sd-close { width: 30px; height: 30px; border-radius: 6px; border: none; background: transparent; color: var(--text-3); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .12s; flex-shrink: 0; } .brtm-sd-close:hover { background: var(--surface); color: var(--text-1); } .brtm-sd-body { flex: 1; overflow-y: auto; padding: 18px 20px; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .12) transparent; } .brtm-sd-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); flex-shrink: 0; } .brtm-sd-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-1); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .12s; white-space: nowrap; } .brtm-sd-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-sd-btn.brtm-primary { background: var(--primary); color: #fff; border-color: var(--primary); } .brtm-sd-btn.brtm-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); } .brtm-sd-btn.brtm-success { background: var(--accent); color: #fff; border-color: var(--accent); } .brtm-sd-btn.brtm-success:hover { background: #009963; border-color: #009963; } .brtm-sd-info-box { display: flex; align-items: flex-start; gap: 9px; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 12.5px; line-height: 1.6; } .brtm-sd-info-box.brtm-warning { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; } .brtm-sd-info-box.brtm-info { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; } .brtm-sd-section-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); margin: 14px 0 8px; } .brtm-sd-section-title:first-child { margin-top: 0; } .brtm-sd-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; } .brtm-sd-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-2); } .brtm-sd-input, .brtm-sd-select, .brtm-sd-textarea { font-size: 13px; font-family: inherit; color: var(--text-1); } /* merge custom select */ .brtm-msel { position: relative; } .brtm-msel-trigger { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; border: 1.5px solid var(--border); background: #fff; cursor: pointer; min-height: 40px; user-select: none; transition: border-color .15s, box-shadow .15s; } .brtm-msel-trigger:hover { border-color: var(--primary); } .brtm-msel-trigger.open { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); } .brtm-msel-ph { font-size: 13px; color: var(--text-3); flex: 1; } .brtm-msel-sel { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .brtm-msel-av { width: 28px; height: 28px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff; background: #9CA3AF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-msel-chev { font-size: 11px; color: var(--text-3); margin-left: auto; flex-shrink: 0; transition: transform .2s; } .brtm-msel-trigger.open .brtm-msel-chev { transform: rotate(180deg); } .brtm-msel-list { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1.5px solid var(--border); border-radius: 9px; box-shadow: 0 8px 24px rgba(0, 0, 0, .1); z-index: 300; overflow: hidden; } .brtm-msel-list.open { display: block; } .brtm-msel-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; transition: background .1s; } .brtm-msel-item+.brtm-msel-item { border-top: 1px solid var(--border); } .brtm-msel-item:hover { background: var(--surface); } .brtm-msel-item.active { background: #EFF6FF; } .brtm-sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .brtm-mlc-avatar { border-radius: 50%; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-mlc-info { flex: 1; min-width: 0; } .brtm-mlc-name { font-size: 13px; font-weight: 700; color: var(--text-1); } .brtm-mlc-meta { font-size: 11.5px; color: var(--text-2); } /* merge field mapping – card style */ .brtm-mfg { border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 10px; background: #fff; } .brtm-mfg-label { font-size: 10px; font-weight: 700; letter-spacing: .6px; color: var(--text-3); text-transform: uppercase; padding: 6px 12px 5px; border-bottom: 1px solid var(--border); background: var(--surface); } .brtm-mfg-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; transition: background .1s; } .brtm-mfg-row+.brtm-mfg-row { border-top: 1px solid var(--border); } .brtm-mfg-row:hover { background: var(--surface); } .brtm-mfg-badge { flex-shrink: 0; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px; border: 1.5px solid var(--border); color: var(--text-2); background: #fff; white-space: nowrap; } .brtm-mfg-val { flex: 1; font-size: 13px; color: var(--text-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brtm-mfg-radio { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #CBD5E1; background: #fff; transition: all .12s; } .brtm-mfg-row.brtm-selected .brtm-mfg-radio { background: var(--primary); border-color: var(--primary); box-shadow: inset 0 0 0 3px #fff; } /* ── Check-in Meeting Cards ── */ .brtm-ci-meeting-card { padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 9px; background: var(--card-bg); cursor: pointer; transition: all .15s; margin-bottom: 8px; } .brtm-ci-meeting-card:hover { border-color: var(--primary); background: var(--primary-light); } .brtm-ci-meeting-card.brtm-selected { border-color: var(--primary); background: #EFF6FF; } .brtm-ci-mc-top { display: flex; align-items: center; gap: 10px; } .brtm-ci-mc-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .brtm-ci-mc-title { font-size: 13px; font-weight: 600; color: var(--text-1); } .brtm-ci-mc-check { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; transition: all .15s; } .brtm-ci-meeting-card.brtm-selected .brtm-ci-mc-check { background: var(--primary); border-color: var(--primary); color: #fff; } .brtm-ci-mc-time { font-size: 11.5px; color: var(--text-2); display: flex; align-items: center; gap: 8px; } .brtm-ci-mc-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 600; background: #ECFDF5; color: #065F46; } /* ── Convert Wizard Slideout ── */ /* ─── §10i · Convert Wizard ─── */ .brtm-cvt-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1042; } .brtm-cvt-overlay.brtm-show { display: block; } .brtm-cvt-modal { position: fixed; right: -720px; top: 0; bottom: 0; height: 100vh; width: 680px; max-width: 100vw; z-index: 1043; background: var(--card-bg); border-radius: 0; border-left: 1px solid var(--border); box-shadow: -6px 0 32px rgba(0, 0, 0, .18); display: flex; flex-direction: column; overflow: hidden; transition: right .32s cubic-bezier(.25, .46, .45, .94); } .brtm-cvt-modal.brtm-open { right: 0; } .brtm-cvt-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .brtm-cvt-header-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .brtm-cvt-header-texts { flex: 1; min-width: 0; } .brtm-cvt-header-title { font-size: 15px; font-weight: 700; color: var(--text-1); } .brtm-cvt-header-sub { font-size: 12px; color: var(--text-2); margin-top: 1px; } .brtm-cvt-close { width: 30px; height: 30px; border-radius: 6px; border: none; background: transparent; color: var(--text-3); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .12s; } .brtm-cvt-close:hover { background: var(--surface); color: var(--text-1); } .brtm-cvt-steps { display: flex; align-items: center; padding: 12px 20px; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; } .brtm-cvt-step { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-3); flex-shrink: 0; } .brtm-cvt-step.brtm-active { color: var(--primary); } .brtm-cvt-step.brtm-done { color: var(--accent); } .brtm-cvt-step-num { width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .brtm-cvt-step.brtm-active .brtm-cvt-step-num, .brtm-cvt-step.brtm-done .brtm-cvt-step-num { background: currentColor; color: #fff; } .brtm-cvt-step-divider { flex: 1; height: 2px; background: var(--border); margin: 0 8px; } .brtm-cvt-body { flex: 1; overflow-y: auto; padding: 18px 20px; } .brtm-cvt-panel { display: none; } .brtm-cvt-panel.brtm-active { display: block; } .brtm-cvt-panel-title { font-size: 14px; font-weight: 700; color: var(--text-1); margin-bottom: 3px; display: flex; align-items: center; gap: 7px; } .brtm-contact-ic { color: var(--primary); } .brtm-org-ic { color: #7C3AED; } .brtm-deal-ic { color: var(--accent); } .brtm-cvt-panel-sub { font-size: 12.5px; color: var(--text-2); margin-bottom: 12px; } .brtm-cvt-mode-tabs { display: flex; gap: 4px; margin-bottom: 14px; background: var(--surface); border-radius: 8px; padding: 3px; } .brtm-cvt-mode-tab { flex: 1; height: 30px; border-radius: 6px; border: none; background: transparent; color: var(--text-2); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .12s; display: flex; align-items: center; justify-content: center; gap: 5px; } .brtm-cvt-mode-tab.brtm-active { background: var(--card-bg); color: var(--primary); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); } .brtm-cvt-mode-section { display: none; } .brtm-cvt-mode-section.brtm-active { display: block; } .brtm-cvt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .brtm-cvt-field { display: flex; flex-direction: column; gap: 4px; } .brtm-cvt-field label { font-size: 11.5px; font-weight: 600; color: var(--text-2); } .brtm-cvt-input { font-size: 13px; font-family: inherit; color: var(--text-1); } .brtm-req { color: #EF4444; } .brtm-span2 { grid-column: span 2; } .brtm-cvt-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--border); flex-shrink: 0; gap: 8px; } .brtm-cvt-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-1); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .12s; white-space: nowrap; } .brtm-cvt-btn:hover { border-color: var(--primary); color: var(--primary); } .brtm-cvt-btn.brtm-primary { background: var(--primary); color: #fff; border-color: var(--primary); } .brtm-cvt-btn.brtm-primary:hover { background: var(--primary-dark); } .brtm-cvt-btn.brtm-success { background: var(--accent); color: #fff; border-color: var(--accent); } .brtm-cvt-btn.brtm-success:hover { background: #009963; } /* existing search in convert wizard */ .brtm-cvt-search-input { width: 100%; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--text-1); outline: none; background: var(--surface); transition: border-color .15s; box-sizing: border-box; } .brtm-cvt-search-input:focus { border-color: var(--primary); background: #fff; } .brtm-cvt-result-list { margin-top: 8px; max-height: 200px; overflow-y: auto; } .brtm-cvt-result-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .12s; } .brtm-cvt-result-item:hover, .brtm-cvt-result-item.brtm-selected { background: var(--primary-light); } .brtm-cvt-result-av { width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-cvt-result-name { font-size: 13px; font-weight: 600; color: var(--text-1); } .brtm-cvt-result-sub { font-size: 11px; color: var(--text-2); } /* Activity slideout form fields */ .brtm-asf-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .brtm-asf-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-2); } /* ── Changelog filter buttons ── */ .brtm-cl-filter { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 6px; font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer; border: 1.5px solid var(--border); background: #fff; color: var(--text-2); transition: border-color .15s, color .15s, background .15s; } .brtm-cl-filter:hover { border-color: var(--primary); color: var(--primary); } .brtm-cl-filter.brtm-active { border-color: var(--primary); color: var(--primary); background: var(--primary-light); font-weight: 600; } .brtm-asf-input, .brtm-asf-select, .brtm-asf-textarea { font-size: 13px; font-family: inherit; color: var(--text-1); } .brtm-asf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* Activity preview (slideout in detail mode) */ .brtm-act-preview-body { padding: 0; display: flex; flex-direction: column; gap: 0; } .brtm-act-preview-section { padding: 12px 0; border-bottom: 1px solid var(--border); } .brtm-act-preview-section:last-child { border-bottom: none; } .brtm-act-preview-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); margin-bottom: 4px; } .brtm-act-preview-val { font-size: 13px; color: var(--text-1); font-weight: 500; line-height: 1.6; } /* Advanced Search modal */ /* -- ADVANCED SEARCH PANEL (detail page) -- */ /* ─── §10j · Advanced Search (detail page) ─── */ .brtm-advs-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1042; } .brtm-advs-overlay.brtm-show { display: block; } .brtm-advs-panel { position: fixed; top: 0; right: 0; width: 400px; height: 100vh; background: var(--card-bg, #fff); border-radius: 0; box-shadow: -6px 0 32px rgba(0, 0, 0, .14); z-index: 1043; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); } .brtm-advs-panel.brtm-open { transform: translateX(0); } .brtm-advs-handle { display: none; } .brtm-advs-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .brtm-advs-title { font-size: 14.5px; font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 8px; } .brtm-advs-title i { color: var(--primary); } .brtm-advs-close { width: 30px; height: 30px; border-radius: 7px; border: none; background: var(--surface); color: var(--text-3); font-size: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .brtm-advs-close:hover { background: #FFE4E4; color: #EF4444; } .brtm-advs-body { flex: 1; overflow-y: auto; padding: 0 20px 8px; } .brtm-advs-section { padding: 16px 0 14px; border-bottom: 1px solid var(--border); } .brtm-advs-section:last-child { border-bottom: none; } .brtm-advs-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); margin-bottom: 10px; } .brtm-advs-module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .brtm-advs-module-card { cursor: pointer; user-select: none; } .brtm-advs-module-card input { display: none; } .brtm-advs-module-card-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 6px; border: 2px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 12px; font-weight: 600; color: var(--text-3); transition: all .15s; text-align: center; } .brtm-advs-module-card-body i { font-size: 22px; } .brtm-advs-module-card:hover .brtm-advs-module-card-body, .brtm-advs-module-card input:checked~.brtm-advs-module-card-body { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-advs-chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .brtm-advs-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border: 1.5px solid var(--border); border-radius: 20px; font-size: 12.5px; font-weight: 600; color: var(--text-3); background: var(--surface); cursor: pointer; user-select: none; transition: all .15s; } .brtm-advs-chip input { display: none; } .brtm-advs-chip i { font-size: 12px; } .brtm-advs-chip:hover { border-color: var(--cc, var(--primary)); color: var(--cc, var(--primary)); } .brtm-advs-chip:has(input:checked) { border-color: var(--cc, var(--primary)); color: var(--cc, var(--primary)); background: color-mix(in srgb, var(--cc, var(--primary)) 10%, transparent); font-weight: 700; } .brtm-advs-preset { padding: 5px 12px; border: 1.5px solid var(--border); border-radius: 20px; font-size: 12px; font-weight: 600; font-family: inherit; color: var(--text-3); background: var(--surface); cursor: pointer; transition: all .15s; } .brtm-advs-preset:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-advs-preset.brtm-active { background: var(--primary); color: #fff; border-color: var(--primary); } .brtm-advs-date-row { display: flex; align-items: center; gap: 8px; } .brtm-advs-input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--text-1); padding: 8px 11px; outline: none; transition: border-color .15s; min-width: 0; } .brtm-advs-input:focus { border-color: var(--primary); } .brtm-advs-owner-list { display: flex; flex-direction: column; gap: 2px; } .brtm-advs-owner-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .12s; user-select: none; border: 1.5px solid transparent; } .brtm-advs-owner-item input { display: none; } .brtm-advs-owner-item:hover { background: var(--surface); } .brtm-advs-owner-item:has(input:checked) { background: var(--primary-light); border-color: var(--primary); } .brtm-advs-owner-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; color: #fff; flex-shrink: 0; } .brtm-advs-owner-avatar.brtm-all { background: var(--surface); color: var(--text-3); border: 2px solid var(--border); font-size: 14px; } .brtm-advs-owner-name { font-size: 13px; font-weight: 600; color: var(--text-1); } .brtm-advs-owner-sub { font-size: 11px; color: var(--text-3); } .brtm-advs-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--border); flex-shrink: 0; gap: 10px; } .brtm-advs-btn-reset { display: flex; align-items: center; gap: 5px; padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit; color: var(--text-3); background: var(--surface); cursor: pointer; transition: all .15s; } .brtm-advs-btn-reset:hover { border-color: #EF4444; color: #EF4444; background: #FEF2F2; } .brtm-advs-btn-apply { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 20px; border: none; border-radius: 8px; font-size: 13.5px; font-weight: 700; font-family: inherit; color: #fff; background: var(--primary); cursor: pointer; transition: background .15s; } .brtm-advs-btn-apply:hover { background: var(--primary-dark); } /* Map modal */ .brtm-map-modal-body { width: 100%; height: 400px; background: #E8F4FD; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-2); } /* Inline card edit textarea (activity notes) */ .brtm-act-inline-edit { width: 100%; min-height: 80px; padding: 8px 10px; border: 1.5px solid var(--primary); border-radius: 7px; font-size: 12.5px; font-family: inherit; color: var(--text-1); resize: vertical; outline: none; transition: border-color .15s; } .brtm-act-inline-edit:focus { border-color: var(--primary-dark); } .brtm-act-inline-edit-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; } /* ── Convert Wizard — Existing Search/List ── */ .brtm-cvt-existing-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); margin-bottom: 10px; transition: border-color .15s; } .brtm-cvt-existing-search:focus-within { border-color: var(--primary); background: #fff; } .brtm-cvt-existing-search i { font-size: 13px; color: var(--text-3); flex-shrink: 0; } .brtm-cvt-existing-search input { flex: 1; border: none; outline: none; font-size: 13px; font-family: inherit; color: var(--text-1); background: transparent; } .brtm-cvt-existing-list { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .brtm-cvt-existing-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; border: 1.5px solid transparent; transition: all .12s; } .brtm-cvt-existing-item:hover { background: var(--primary-light); border-color: rgba(27, 111, 190, .2); } .brtm-cvt-existing-item.brtm-selected { background: var(--primary-light); border-color: var(--primary); } .brtm-cvt-ei-avatar { width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-cvt-ei-info { flex: 1; min-width: 0; } .brtm-cvt-ei-name { font-size: 13px; font-weight: 600; color: var(--text-1); } .brtm-cvt-ei-meta { font-size: 11.5px; color: var(--text-2); } .brtm-cvt-ei-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; transition: all .15s; } .brtm-cvt-existing-item.brtm-selected .brtm-cvt-ei-check { background: var(--primary); border-color: var(--primary); color: #fff; } .brtm-cvt-select, .brtm-cvt-textarea { font-size: 13px; font-family: inherit; color: var(--text-1); } .brtm-cvt-mode-tab.brtm-skip { color: var(--text-2); } .brtm-cvt-mode-tab.brtm-skip.brtm-active { color: #EF4444; } /* -- CALENDAR VIEW -- */ /* ─── §10k · Calendar View ─── */ .brtm-cal-wrap { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); flex: 1; min-height: 0; } .brtm-cal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); gap: 12px; flex-wrap: wrap; } .brtm-cal-nav { display: flex; align-items: center; gap: 6px; } .brtm-cal-nav-btn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; transition: all .15s; } .brtm-cal-nav-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-cal-month-label { font-size: 15px; font-weight: 700; color: var(--text-main); min-width: 130px; text-align: center; } .brtm-cal-today-btn { padding: 5px 12px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s; } .brtm-cal-today-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-cal-field-toggle { display: flex; align-items: center; gap: 6px; } .brtm-cal-field-label { font-size: 12px; color: var(--text-muted); font-weight: 500; } .brtm-cal-field-btn { padding: 4px 11px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; } .brtm-cal-field-btn.brtm-active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; } .brtm-cal-field-btn:not(.brtm-active):hover { border-color: var(--primary); color: var(--primary); } .brtm-cal-grid-wrap { flex: 1; overflow-y: auto; min-height: 0; } .brtm-cal-day-headers { flex-shrink: 0; } .brtm-cal-day-headers { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); background: var(--surface); } .brtm-cal-day-headers>div { padding: 8px 10px; font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-align: center; text-transform: uppercase; letter-spacing: .4px; } .brtm-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .brtm-cal-cell { min-height: 110px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 8px; display: flex; flex-direction: column; gap: 3px; position: relative; transition: background .1s; } .brtm-cal-cell:nth-child(7n) { border-right: none; } .brtm-cal-cell:hover { background: var(--primary-light); } .brtm-cal-has-leads { background: #fafcff; } .brtm-cal-other-month { background: var(--surface); opacity: .55; } .brtm-cal-today .brtm-cal-date-num { background: var(--primary); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: 700; } .brtm-cal-date-num { font-size: 13px; font-weight: 600; color: var(--text-main); line-height: 24px; width: 24px; text-align: center; } .brtm-cal-count { position: absolute; top: 6px; right: 7px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 6px; line-height: 1.5; } .brtm-cal-chip { font-size: 11.5px; font-weight: 500; color: var(--chip-color, #6B7A99); background: color-mix(in srgb, var(--chip-color, #6B7A99) 12%, #fff); border-left: 3px solid var(--chip-color, #6B7A99); border-radius: 0 4px 4px 0; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; } .brtm-cal-more { font-size: 11px; color: var(--text-muted); font-weight: 600; padding: 1px 4px; cursor: pointer; } .brtm-cal-more:hover { color: var(--primary); text-decoration: underline; } /* -- CALENDAR CHIP POPOVER -- */ .brtm-cal-popover { display: none; position: fixed; z-index: 9000; width: 260px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .14); overflow: hidden; } .brtm-cal-popover.brtm-show { display: block; animation: calPopIn .15s ease; } @keyframes calPopIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .brtm-cal-pop-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; } .brtm-cal-pop-name { flex: 1; font-size: 14px; font-weight: 700; color: var(--text-main); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brtm-cal-pop-close { width: 24px; height: 24px; border: none; background: transparent; color: var(--text-muted); font-size: 11px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-cal-pop-close:hover { background: var(--surface); color: var(--text-main); } .brtm-cal-pop-badge-row { padding: 0 14px 10px; } .brtm-cal-pop-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid; } .brtm-cal-pop-rows { padding: 0 14px 10px; display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--border); padding-top: 10px; } .brtm-cal-pop-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-main); } .brtm-cal-pop-row i { font-size: 12px; color: var(--primary); flex-shrink: 0; margin-top: 2px; } .brtm-cal-pop-row span { flex: 1; min-width: 0; word-break: break-all; } .brtm-cal-pop-link { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--primary); text-decoration: none; transition: background .12s; } .brtm-cal-pop-link:hover { background: var(--primary-light); } .brtm-cal-chip { cursor: pointer; } /* -- DESCRIPTION CELL -- */ /* ─── §10l · Description Cell ─── */ .brtm-desc-cell { position: relative; display: inline-block; max-width: 200px; cursor: default; } .brtm-desc-preview { font-size: 12.5px; color: var(--text-main); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .brtm-desc-tooltip { display: none; position: absolute; z-index: 8000; bottom: calc(100% + 8px); left: 0; width: 300px; background: #1E293B; color: #F1F5F9; font-size: 12.5px; line-height: 1.7; padding: 10px 14px; border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, .22); white-space: normal; pointer-events: none; } .brtm-desc-tooltip::after { content: ''; position: absolute; top: 100%; left: 16px; border: 6px solid transparent; border-top-color: #1E293B; } .brtm-desc-global-tooltip { display: none; position: fixed; z-index: 9500; width: 300px; max-width: calc(100vw - 24px); background: #1E293B; color: #F1F5F9; font-size: 12.5px; line-height: 1.7; padding: 10px 14px; border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, .22); pointer-events: none; word-break: break-word; } .brtm-desc-global-tooltip.brtm-desc-tip-show { display: block; animation: calPopIn .15s ease; } .brtm-desc-global-tooltip::after { content: ""; position: absolute; top: 100%; left: 16px; border: 6px solid transparent; border-top-color: #1E293B; } .brtm-photo-pop { display: none; position: fixed; z-index: 9600; background: #1E293B; border-radius: 12px; padding: 6px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); pointer-events: none; } .brtm-photo-pop.brtm-photo-pop-show { display: block; animation: calPopIn .15s ease; } .brtm-photo-pop img { display: block; width: 150px; height: 150px; object-fit: cover; border-radius: 8px; } /* ── CUSTOMISE MODULE LAYOUT (brtm-cml) ── */ /* ─── §10m · Customise Module Layout (brtm-cml) ─── */ .brtm-cml-body { padding: 0; } .brtm-cml-section { border-bottom: 1px solid var(--border); } .brtm-cml-section:last-of-type { border-bottom: none; } .brtm-cml-section-header { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--text-main); cursor: default; user-select: none; } .brtm-cml-section-header span { display: flex; align-items: center; gap: 7px; } .brtm-cml-section-header span i { color: var(--primary); font-size: 14px; } .brtm-cml-section-actions { display: flex; align-items: center; gap: 4px; } .brtm-cml-section-btn { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; transition: all .15s; } .brtm-cml-section-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-cml-chevron { transition: transform .2s; } .brtm-cml-section.brtm-collapsed .brtm-cml-chevron { transform: rotate(-180deg); } .brtm-cml-section-body { padding: 2px 0 6px; } .brtm-cml-section.brtm-collapsed .brtm-cml-section-body { display: none; } .brtm-cml-field-row { display: flex; align-items: center; gap: 8px; padding: 7px 16px; font-size: 13px; color: var(--text-main); transition: background .12s; cursor: grab; } .brtm-cml-field-row:hover { background: var(--primary-light); } .brtm-cml-field-icon { font-size: 14px; color: var(--text-muted); flex-shrink: 0; } .brtm-cml-field-name { flex: 1; } .brtm-cml-field-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; border-radius: 4px; padding: 2px 6px; flex-shrink: 0; } .brtm-cml-field-badge.brtm-required { background: #FEE2E2; color: #DC2626; } .brtm-cml-toggle { flex-shrink: 0; margin-left: 4px; } .brtm-cml-toggle input:disabled~.brtm-col-toggle-track { opacity: .5; cursor: not-allowed; } /* Section drag handle */ .brtm-cml-section-drag-handle { color: var(--text-muted); font-size: 15px; cursor: grab; flex-shrink: 0; opacity: .35; transition: opacity .15s; padding: 0 2px; } .brtm-cml-section-header:hover .brtm-cml-section-drag-handle { opacity: .8; } .brtm-cml-section-drag-handle:active { cursor: grabbing; } /* Section drag states */ .brtm-cml-section.brtm-section-dragging { opacity: .35; } .brtm-cml-section.brtm-section-drop-before { box-shadow: 0 -2px 0 var(--primary); } .brtm-cml-section.brtm-section-drop-after { box-shadow: 0 2px 0 var(--primary); } /* Section label structure */ .brtm-cml-section-label { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; overflow: hidden; } .brtm-cml-section-label .brtm-cml-section-icon { color: var(--primary); font-size: 14px; flex-shrink: 0; } .brtm-cml-section-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Section inline edit mode */ .brtm-cml-section-header.brtm-editing .brtm-cml-section-label { display: none; } .brtm-cml-section-edit-row { display: none; flex: 1; align-items: center; gap: 6px; min-width: 0; } .brtm-cml-section-header.brtm-editing .brtm-cml-section-edit-row { display: flex; } .brtm-cml-icon-pick-btn { width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all .15s; color: var(--primary); } .brtm-cml-icon-pick-btn:hover { border-color: var(--primary); background: var(--primary-light); } .brtm-cml-name-input { flex: 1; min-width: 0; border: 1px solid var(--primary); border-radius: 6px; padding: 4px 8px; font-size: 13px; font-weight: 600; font-family: inherit; outline: none; color: var(--text-main); background: #fff; } .brtm-cml-edit-confirm-btn, .brtm-cml-edit-cancel-btn { width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; transition: all .15s; } .brtm-cml-edit-confirm-btn { color: var(--accent); } .brtm-cml-edit-confirm-btn:hover { background: #D1FAE5; border-color: var(--accent); } .brtm-cml-edit-cancel-btn { color: #EF4444; } .brtm-cml-edit-cancel-btn:hover { background: #FEE2E2; border-color: #EF4444; } /* Hide edit pencil btn in edit mode */ .brtm-cml-section-header.brtm-editing .brtm-cml-edit-btn { display: none; } /* Icon picker popup */ .brtm-cml-icon-picker { display: none; position: absolute; z-index: 1200; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); padding: 10px; width: 224px; } .brtm-cml-icon-picker.brtm-show { display: block; } .brtm-cml-ip-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 8px; } .brtm-cml-ip-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .brtm-cml-ip-icon { width: 28px; height: 28px; border-radius: 6px; border: 1px solid transparent; background: none; cursor: pointer; font-size: 14px; color: var(--text-main); display: flex; align-items: center; justify-content: center; transition: all .12s; } .brtm-cml-ip-icon:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); } .brtm-cml-ip-icon.brtm-selected { background: var(--primary); color: #fff; border-color: var(--primary); } /* ── FIELD ROW: hover actions (edit + delete) ── */ .brtm-cml-field-row { position: relative; } .brtm-cml-field-actions { display: none; align-items: center; gap: 3px; margin-left: auto; flex-shrink: 0; } .brtm-cml-field-row:hover .brtm-cml-field-actions { display: flex; } .brtm-cml-field-row:hover .brtm-cml-toggle { display: none; } .brtm-cml-field-action-btn { width: 24px; height: 24px; border-radius: 5px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; transition: all .13s; color: var(--text-muted); } .brtm-cml-field-action-btn.brtm-edit:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-cml-field-action-btn.brtm-del:hover { border-color: #EF4444; color: #EF4444; background: #FEE2E2; } /* Field row inline edit mode */ .brtm-cml-field-row.brtm-field-editing { cursor: default; background: var(--primary-light); } .brtm-cml-field-row.brtm-field-editing .brtm-col-drag-handle, .brtm-cml-field-row.brtm-field-editing .brtm-cml-field-icon, .brtm-cml-field-row.brtm-field-editing .brtm-cml-field-name, .brtm-cml-field-row.brtm-field-editing .brtm-cml-field-badge, .brtm-cml-field-row.brtm-field-editing .brtm-cml-toggle, .brtm-cml-field-row.brtm-field-editing .brtm-cml-field-actions { display: none !important; } .brtm-cml-field-edit-inline { display: none; align-items: center; gap: 6px; flex: 1; min-width: 0; } .brtm-cml-field-row.brtm-field-editing .brtm-cml-field-edit-inline { display: flex; } /* Add-field inline form row */ .brtm-cml-add-field-row { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: #f0f6ff; border-top: 1px dashed var(--primary); animation: slideDown .15s ease; } .brtm-cml-add-type-select { flex-shrink: 0; width: 100px; border: 1px solid var(--border); border-radius: 6px; background: #fff; font-size: 12px; font-family: inherit; padding: 4px 6px; outline: none; color: var(--text-main); cursor: pointer; } .brtm-cml-add-type-select:focus { border-color: var(--primary); } .brtm-cml-add-confirm-btn { padding: 4px 12px; border-radius: 6px; border: none; background: var(--primary); color: #fff; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; flex-shrink: 0; transition: background .15s; white-space: nowrap; } .brtm-cml-add-confirm-btn:hover { background: var(--primary-dark); } .brtm-cml-add-cancel-btn { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); background: #fff; font-size: 12px; font-family: inherit; color: var(--text-muted); cursor: pointer; flex-shrink: 0; transition: all .13s; } .brtm-cml-add-cancel-btn:hover { border-color: #EF4444; color: #EF4444; } /* ── COLUMN RESIZE ── */ /* ─── §10n · Column Resize ─── */ .brtm-col-resizer { position: absolute; right: -6px; top: 0; width: 12px; height: 100%; cursor: col-resize; user-select: none; z-index: 4; border-radius: 3px; } .brtm-col-resizer::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 15%; width: 3px; height: 70%; background: transparent; border-radius: 2px; transition: background .15s; } .brtm-col-resizer:hover::after, .brtm-col-resizer.brtm-resizing::after { background: var(--primary); } table.brtm-leads-table.brtm-col-resizing { cursor: col-resize !important; user-select: none !important; } table.brtm-leads-table.brtm-col-resizing * { cursor: col-resize !important; user-select: none !important; } /* ══════════════════════════════════════════ SHARED — REPORT VIEW (all listing pages) ══════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ §11 SHARED — Report View, Status Pills, Module Cards ══════════════════════════════════════════════════════════════ */ .brtm-report-wrap { padding: 20px 20px 32px; display: flex; flex-direction: column; gap: 20px; } .brtm-report-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .brtm-rpt-kpi { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; } .brtm-rpt-kpi-label { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .5px; } .brtm-rpt-kpi-val { font-size: 28px; font-weight: 700; color: var(--text-1); line-height: 1.1; } .brtm-rpt-kpi-sub { font-size: 11.5px; color: var(--text-3); } .brtm-rpt-chart-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; } .brtm-rpt-chart-card-title { font-size: 12.5px; font-weight: 700; color: var(--text-1); margin-bottom: 14px; } .brtm-rpt-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .brtm-rpt-bar-label { font-size: 12px; color: var(--text-2); } .brtm-rpt-bar-track { flex: 1; height: 10px; background: var(--surface); border-radius: 99px; overflow: hidden; } .brtm-rpt-bar-fill { height: 100%; border-radius: 99px; transition: width .4s; } .brtm-rpt-bar-val { font-size: 11.5px; font-weight: 700; color: var(--text-1); min-width: 28px; text-align: right; } /* ══════════════════════════════════════════ SHARED — STATUS / TYPE / PRIORITY PILLS ══════════════════════════════════════════ */ .brtm-status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; } /* status variants */ .brtm-status-pill.completed { background: #DCFCE7; color: #15803D; } .brtm-status-pill.missed { background: #FEE2E2; color: #B91C1C; } .brtm-status-pill.no-answer { background: #FEF9C3; color: #A16207; } .brtm-status-pill.scheduled { background: #DBEAFE; color: #1D4ED8; } .brtm-status-pill.cancelled { background: #F1F5F9; color: #64748B; } .brtm-status-pill.rescheduled { background: #FEF9C3; color: #A16207; } .brtm-status-pill.not-started { background: #F1F5F9; color: #64748B; } .brtm-status-pill.in-progress { background: #DBEAFE; color: #1D4ED8; } .brtm-status-pill.overdue { background: #FEE2E2; color: #B91C1C; } .brtm-status-pill.deferred { background: #FEF9C3; color: #A16207; } .brtm-status-pill.draft { background: #F1F5F9; color: #475569; } .brtm-status-pill.active { background: #DCFCE7; color: #15803D; } .brtm-status-pill.closed { background: #FEE2E2; color: #B91C1C; } .brtm-status-pill.archived { background: #FEF9C3; color: #A16207; } .brtm-priority-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; } .brtm-priority-pill.none { background: #F1F5F9; color: #64748B; } .brtm-priority-pill.low { background: #DCFCE7; color: #15803D; } .brtm-priority-pill.medium { background: #FEF9C3; color: #A16207; } .brtm-priority-pill.high { background: #FEE2E2; color: #B91C1C; } .brtm-type-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; } /* call type variants */ .brtm-type-pill.sales-call { background: #EFF6FF; color: #1E40AF; } .brtm-type-pill.support-call { background: #FEF3C7; color: #B45309; } .brtm-type-pill.follow-up { background: #F0FDF4; color: #15803D; } .brtm-type-pill.demo-call { background: #F5F3FF; color: #6D28D9; } .brtm-type-pill.escalation { background: #FFF1F2; color: #BE123C; } /* meeting type variants */ .brtm-type-pill.online { background: #EDE9FE; color: #6D28D9; } .brtm-type-pill.offline { background: #FEF3C7; color: #B45309; } .brtm-type-pill.hybrid { background: #CCFBF1; color: #0F766E; } /* task type variants */ .brtm-type-pill.general { background: #EFF6FF; color: #1E40AF; } .brtm-type-pill.integration { background: #F5F3FF; color: #6D28D9; } .brtm-type-pill.other { background: #F1F5F9; color: #64748B; } /* survey type variants */ .brtm-type-pill.csat { background: #EDE9FE; color: #6D28D9; } .brtm-type-pill.nps { background: #DBEAFE; color: #1D4ED8; } .brtm-type-pill.product { background: #CCFBF1; color: #0F766E; } .brtm-type-pill.market { background: #FEF3C7; color: #B45309; } .brtm-type-pill.employee { background: #FCE7F3; color: #9D174D; } .brtm-type-pill.internal { background: #E0F2FE; color: #0369A1; } .brtm-parent-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; background: #EFF6FF; color: #1E40AF; } /* direction (calls) */ .brtm-dir-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; } .brtm-dir-pill.inbound { background: #EDE9FE; color: #6D28D9; } .brtm-dir-pill.outbound { background: #CCFBF1; color: #0F766E; } /* ══════════════════════════════════════════ SHARED — DETAIL PAGE: NOTE/CALL/TASK CARD ══════════════════════════════════════════ */ .brtm-nd-meta-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; } .brtm-nd-meta-chip i { font-size: 11px; color: var(--text-3); } .brtm-nd-meta-chip a { color: var(--primary); text-decoration: none; } .brtm-nd-meta-chip a:hover { text-decoration: underline; } .brtm-nd-priority { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; } .brtm-nd-priority.none { background: #F1F5F9; color: #64748B; } .brtm-nd-priority.low { background: #DCFCE7; color: #15803D; } .brtm-nd-priority.medium { background: #FEF9C3; color: #A16207; } .brtm-nd-priority.high { background: #FEE2E2; color: #B91C1C; } .brtm-note-doc-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 6px rgba(27,111,190,.06); overflow: hidden; } .brtm-note-doc-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); background: var(--primary-light); border-radius: 11px 11px 0 0; } .brtm-note-doc-title { font-size: 20px; font-weight: 700; color: var(--text-1); line-height: 1.35; margin-bottom: 10px; } .brtm-note-doc-meta-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .brtm-note-doc-body { padding: 24px; font-size: 14px; color: var(--text-1); line-height: 1.8; min-height: 100px; white-space: pre-wrap; word-break: break-word; } .brtm-note-doc-body.brtm-empty-body { color: var(--text-3); font-style: italic; } .brtm-note-body-edit { width: 100%; min-height: 100px; padding: 24px; font-size: 14px; font-family: var(--brtm-font-ui); color: var(--text-1); line-height: 1.8; border: none; outline: none; resize: none; background: #fff; box-sizing: border-box; } .brtm-note-edit-bar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface); } .brtm-editable-zone { position: relative; cursor: pointer; transition: box-shadow .15s, background .15s; } .brtm-editable-zone:hover { box-shadow: inset 0 0 0 2px rgba(27,111,190,.35); background: rgba(27,111,190,.04) !important; } .brtm-edit-hint { position: absolute; top: 8px; right: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--primary); background: #fff; border: 1px solid rgba(27,111,190,.3); border-radius: 5px; padding: 2px 8px; opacity: 0; pointer-events: none; transition: opacity .15s; white-space: nowrap; box-shadow: 0 1px 4px rgba(27,111,190,.12); z-index: 2; } .brtm-editable-zone:hover .brtm-edit-hint { opacity: 1; } .brtm-note-edit-btn { display: inline-flex; align-items: center; gap: 5px; height: 29px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--border); background: #fff; color: var(--text-2); font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all .15s; } .brtm-note-edit-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } /* ── Sections ── */ .brtm-nd-section { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .brtm-nd-section-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; user-select: none; background: var(--surface); transition: background .12s; } .brtm-nd-section-header:hover { background: #eef3fb; } .brtm-nd-section-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } .brtm-nd-section-title { font-size: 12.5px; font-weight: 700; color: var(--text-1); flex: 1; } .brtm-nd-section-count { font-size: 10.5px; font-weight: 700; background: var(--primary-light); color: var(--primary); border-radius: 99px; padding: 1px 8px; } .brtm-nd-chevron { font-size: 10px; color: var(--text-3); transition: transform .2s; } .brtm-nd-section.brtm-open .brtm-nd-chevron { transform: rotate(180deg); } .brtm-nd-section-body { display: none; } .brtm-nd-section.brtm-open .brtm-nd-section-body { display: block; } /* ── Field rows ── */ .brtm-nd-field-row { display: flex; align-items: flex-start; padding: 8px 16px; border-bottom: 1px solid var(--border); transition: background .1s; position: relative; } .brtm-nd-field-row:last-child { border-bottom: none; } .brtm-nd-field-row:hover { background: var(--row-hover); } .brtm-nd-field-key { width: 110px; flex-shrink: 0; font-size: 12px; font-weight: 500; color: var(--text-2); padding-top: 2px; line-height: 1.5; } .brtm-nd-field-val { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-1); font-weight: 500; line-height: 1.5; word-break: break-word; } .brtm-nd-field-val.empty { color: var(--text-3); font-style: italic; font-weight: 400; } .brtm-nd-field-val a { color: var(--primary); text-decoration: none; } .brtm-nd-field-val a:hover { text-decoration: underline; } /* ── Right panel ── */ .brtm-nd-right-panel { width: 400px; flex-shrink: 0; border-left: 1px solid var(--border); background: var(--card-bg); display: flex; flex-direction: column; overflow: hidden; } .brtm-nd-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; } .brtm-nd-tabs::-webkit-scrollbar { display: none; } .brtm-nd-tab-btn { padding: 10px 13px; font-size: 12.5px; font-weight: 600; font-family: inherit; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .15s, border-color .15s; white-space: nowrap; } .brtm-nd-tab-btn:hover { color: var(--text-main); } .brtm-nd-tab-btn.brtm-active { color: var(--primary); border-bottom-color: var(--primary); } .brtm-nd-tab-panel { display: none; flex: 1; flex-direction: column; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.12) transparent; } .brtm-nd-tab-panel::-webkit-scrollbar { width: 4px; } .brtm-nd-tab-panel::-webkit-scrollbar-track { background: transparent; } .brtm-nd-tab-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 99px; } .brtm-nd-tab-panel.brtm-active { display: flex; flex-direction: column; overflow-y: auto; } .brtm-nd-center-scroll { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.12) transparent; } .brtm-nd-center-scroll::-webkit-scrollbar { width: 4px; } .brtm-nd-center-scroll::-webkit-scrollbar-track { background: transparent; } .brtm-nd-center-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 99px; } /* ── Changelog ── */ .brtm-nd-cl-list { padding: 10px 14px; display: flex; flex-direction: column; } .brtm-nd-cl-entry { display: flex; gap: 10px; position: relative; padding-bottom: 18px; } .brtm-nd-cl-entry:last-child { padding-bottom: 4px; } .brtm-nd-cl-entry::before { content: ''; position: absolute; left: 9px; top: 22px; bottom: 0; width: 1px; background: var(--border); } .brtm-nd-cl-entry:last-child::before { display: none; } .brtm-nd-cl-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); background: #fff; flex-shrink: 0; position: relative; z-index: 1; margin-top: 3px; } .brtm-nd-cl-dot.brtm-current { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27,111,190,.15); } .brtm-nd-cl-card { flex: 1; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; min-width: 0; } .brtm-nd-cl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 4px; } .brtm-nd-cl-user { font-size: 11.5px; font-weight: 700; color: var(--text-1); } .brtm-nd-cl-time { font-size: 10px; color: var(--text-3); white-space: nowrap; } .brtm-nd-cl-badge { display: inline-block; padding: 1px 7px; border-radius: 4px; margin-bottom: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; } .brtm-nd-cl-diff { font-size: 11.5px; color: var(--text-2); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .brtm-nd-cl-old { padding: 1px 6px; border-radius: 4px; background: #FEF2F2; color: #B91C1C; text-decoration: line-through; } .brtm-nd-cl-new { padding: 1px 6px; border-radius: 4px; background: #ECFDF5; color: #065F46; font-weight: 600; } .brtm-nd-att-upload { display: flex; align-items: center; justify-content: center; gap: 7px; border: 1.5px dashed var(--border); border-radius: 8px; padding: 18px; font-size: 12.5px; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: border-color .15s, color .15s, background .15s; margin: 10px 14px; } .brtm-nd-att-upload:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } /* ── Recording player card ── */ .brtm-rec-player { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 16px; } .brtm-rec-player-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); } .brtm-rec-waveform { display: flex; align-items: center; gap: 12px; padding: 16px 20px; } .brtm-rec-play-btn { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--primary); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; flex-shrink: 0; } .brtm-rec-play-btn:hover { background: var(--primary-dark); } .brtm-rec-bars { flex: 1; display: flex; align-items: center; gap: 2px; height: 36px; } .brtm-rec-bar { flex: 1; border-radius: 2px; background: #BFDBFE; transition: background .2s; } .brtm-rec-bar.played { background: var(--primary); } .brtm-rec-time { font-size: 12px; font-weight: 700; color: var(--text-1); white-space: nowrap; } .brtm-outcome-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 16px; } @keyframes brtm-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(245,158,11,.2); } 50% { box-shadow: 0 0 0 6px rgba(245,158,11,.08); } } /* ── Quick preview bodies ── */ .brtm-qp-call-note, .brtm-qp-task-desc, .brtm-qp-note-body, .brtm-qp-agenda, .brtm-qp-desc { font-size: 12.5px; color: var(--text-1); line-height: 1.75; white-space: pre-wrap; word-break: break-word; } .brtm-qp-note-body, .brtm-qp-desc { padding: 0; } /* ── Snippet cells ── */ .brtm-note-snippet, .brtm-meet-snippet, .brtm-desc-snippet { font-size: 12px; color: var(--text-2); max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-note-snippet { max-width: 300px; } .brtm-meet-snippet { max-width: 200px; } /* ── Header filter group (shared listing page pattern) ── */ .brtm-header-filter-group { display: flex; align-items: center; gap: 8px; margin-left: 16px; } .brtm-header-right-group { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 12px; } .brtm-header-btn-rel { position: relative; } /* ── Topbar panel trigger wrappers ── */ .brtm-topbar-panel-wrap { position: relative; } /* ── Topbar icon with cursor pointer ── */ .brtm-avatar-btn { cursor: pointer; } /* ── Logout color ── */ .brtm-logout-icon { color: #EF4444; } .brtm-logout-text { color: #EF4444; } /* ── Chevron small ── */ .brtm-chevron-sm { font-size: 10px; margin-left: 2px; } /* ── Dropdown not-found placeholder ── */ .brtm-dd-not-found { display: none; padding: 12px 14px; font-size: 12.5px; color: var(--text-2); text-align: center; } .brtm-dd-not-found i { display: block; font-size: 20px; margin-bottom: 6px; opacity: .4; } /* ── Pagination ellipsis ── */ .brtm-page-ellipsis { padding: 0 4px; color: var(--text-2); line-height: 32px; } /* ── Info circle flex-shrink ── */ .brtm-flex-shrink-0 { flex-shrink: 0; } /* ── Table th min-width helpers ── */ .brtm-col-w-180 { min-width: 180px; } .brtm-col-w-200 { min-width: 200px; } /* ══════════════════════════════════════════ SHARED — SETTINGS PAGE ══════════════════════════════════════════ */ .brtm-settings-shell { flex: 1; display: flex; overflow: hidden; min-height: 0; } .brtm-settings-nav { width: 240px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; } .brtm-settings-nav::-webkit-scrollbar { width: 0; } .brtm-settings-nav-header { padding: 18px 20px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); } .brtm-settings-nav-group { margin-bottom: 4px; } .brtm-settings-nav-group-label { padding: 10px 20px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-light); } .brtm-settings-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 20px; font-size: 13px; font-weight: 500; color: var(--text-main); cursor: pointer; border-radius: 0; transition: background .12s, color .12s; border: none; background: none; width: 100%; text-align: left; font-family: var(--brtm-font-ui); } .brtm-settings-nav-item i { font-size: 15px; color: var(--text-muted); width: 18px; text-align: center; flex-shrink: 0; } .brtm-settings-nav-item:hover { background: var(--surface); color: var(--primary); } .brtm-settings-nav-item:hover i { color: var(--primary); } .brtm-settings-nav-item.brtm-active { background: var(--primary-light); color: var(--primary); font-weight: 600; } .brtm-settings-nav-item.brtm-active i { color: var(--primary); } .brtm-settings-nav-divider { height: 1px; background: var(--border); margin: 6px 0; } .brtm-settings-content { flex: 1; overflow-y: auto; min-width: 0; background: var(--surface); padding: 28px 32px 40px; } .brtm-settings-panel { display: none; } .brtm-settings-panel.brtm-active { display: block; } .brtm-settings-section-title { font-size: 18px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; } .brtm-settings-section-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; } .brtm-settings-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm); } .brtm-settings-card-title { font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; } .brtm-settings-card-title i { color: var(--primary); font-size: 16px; } .brtm-settings-card-sub { font-size: 12.5px; color: var(--text-muted); margin-bottom: 18px; } .brtm-settings-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .brtm-settings-form-row.brtm-full { grid-template-columns: 1fr; } .brtm-settings-field { display: flex; flex-direction: column; gap: 5px; } .brtm-settings-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; } .brtm-settings-input, .brtm-settings-select, .brtm-settings-textarea { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; font-family: var(--brtm-font-ui); color: var(--text-main); padding: 9px 12px; outline: none; transition: border-color .15s, background .15s; } .brtm-settings-input:focus, .brtm-settings-select:focus, .brtm-settings-textarea:focus { border-color: var(--primary); background: #fff; } .brtm-settings-textarea { resize: vertical; min-height: 80px; } .brtm-settings-avatar-row { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; } .brtm-settings-avatar { width: 68px; height: 68px; border-radius: 16px; background: var(--primary); color: #fff; font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; cursor: pointer; } .brtm-settings-avatar-overlay { position: absolute; inset: 0; border-radius: 16px; background: rgba(0,0,0,0.4); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; opacity: 0; transition: opacity .15s; } .brtm-settings-avatar:hover .brtm-settings-avatar-overlay { opacity: 1; } .brtm-settings-avatar-name { font-size: 16px; font-weight: 700; color: var(--text-main); } .brtm-settings-avatar-role { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } .brtm-settings-avatar-actions { display: flex; gap: 8px; margin-top: 8px; } .brtm-settings-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); } .brtm-settings-toggle-row:last-child { border-bottom: none; } .brtm-settings-toggle-info { flex: 1; min-width: 0; } .brtm-settings-toggle-label { font-size: 13.5px; font-weight: 600; color: var(--text-main); } .brtm-settings-toggle-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .brtm-settings-toggle { position: relative; width: 42px; height: 24px; flex-shrink: 0; margin-left: 16px; } .brtm-settings-toggle input { display: none; } .brtm-settings-toggle-track { position: absolute; inset: 0; border-radius: 99px; background: #CBD5E1; transition: background .2s; cursor: pointer; } .brtm-settings-toggle input:checked ~ .brtm-settings-toggle-track { background: var(--primary); } .brtm-settings-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: left .2s; pointer-events: none; } .brtm-settings-toggle input:checked ~ .brtm-settings-toggle-thumb { left: 21px; } .brtm-settings-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; } .brtm-settings-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 18px; border-radius: 8px; font-size: 13.5px; font-weight: 600; font-family: var(--brtm-font-ui); cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-main); transition: all .15s; } .brtm-settings-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .brtm-settings-btn.brtm-primary { background: var(--primary); color: #fff; border-color: var(--primary); } .brtm-settings-btn.brtm-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); } .brtm-settings-btn.brtm-danger { background: #EF4444; color: #fff; border-color: #EF4444; } .brtm-settings-btn.brtm-danger:hover { background: #DC2626; border-color: #DC2626; } .brtm-settings-info-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; } .brtm-settings-info-badge.brtm-green { background: var(--accent-light); color: #065F46; } .brtm-settings-info-badge.brtm-blue { background: var(--primary-light); color: var(--primary-dark); } .brtm-settings-info-badge.brtm-warn { background: #FEF3C7; color: #92400E; } .brtm-settings-danger-card { border: 1px solid #FECACA; border-radius: 12px; padding: 22px 24px; margin-bottom: 20px; background: #FFF5F5; } .brtm-settings-danger-title { font-size: 14px; font-weight: 700; color: #B91C1C; margin-bottom: 4px; display: flex; align-items: center; gap: 7px; } .brtm-settings-danger-sub { font-size: 12.5px; color: #DC2626; margin-bottom: 16px; } .brtm-settings-danger-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #FCA5A5; gap: 16px; } .brtm-settings-danger-row:last-child { border-bottom: none; } .brtm-settings-danger-row-label { font-size: 13.5px; font-weight: 600; color: var(--text-main); } .brtm-settings-danger-row-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .brtm-settings-apikey-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .brtm-settings-apikey-field { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 9px 14px; font-size: 13px; font-family: monospace; color: var(--text-main); outline: none; letter-spacing: .5px; } .brtm-settings-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .brtm-settings-table thead tr { background: #DBEEFF; border-bottom: 1px solid var(--border); } .brtm-settings-table thead th { padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); white-space: nowrap; } .brtm-settings-table tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; } .brtm-settings-table tbody tr:last-child { border-bottom: none; } .brtm-settings-table tbody tr:hover { background: var(--row-hover); } .brtm-settings-table tbody td { padding: 11px 14px; vertical-align: middle; } .brtm-settings-member-av { width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-settings-member-name { font-weight: 600; color: var(--text-main); line-height: 1.2; } .brtm-settings-member-email { font-size: 11.5px; color: var(--text-muted); } .brtm-settings-role-badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; } .brtm-settings-role-badge.brtm-admin { background: #EDE9FE; color: #7C3AED; } .brtm-settings-role-badge.brtm-manager { background: var(--primary-light); color: var(--primary-dark); } .brtm-settings-role-badge.brtm-member { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); } .brtm-settings-plan-card { background: linear-gradient(135deg, #1B6FBE 0%, #134E8E 100%); border-radius: 14px; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .brtm-settings-plan-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.65); margin-bottom: 4px; } .brtm-settings-plan-name { font-size: 22px; font-weight: 700; color: #fff; } .brtm-settings-plan-desc { font-size: 12.5px; color: rgba(255,255,255,.75); margin-top: 4px; } .brtm-settings-plan-actions { display: flex; gap: 8px; flex-shrink: 0; } .brtm-settings-plan-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 18px; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: var(--brtm-font-ui); cursor: pointer; transition: all .15s; } .brtm-settings-plan-btn.brtm-white { background: #fff; color: var(--primary); border: 1.5px solid rgba(255,255,255,0.4); } .brtm-settings-plan-btn.brtm-white:hover { background: rgba(255,255,255,.9); } .brtm-settings-plan-btn.brtm-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.25); } .brtm-settings-plan-btn.brtm-ghost:hover { background: rgba(255,255,255,.22); } .brtm-settings-notif-section { margin-bottom: 8px; } .brtm-settings-notif-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-light); padding: 12px 0 6px; } .brtm-settings-theme-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .brtm-settings-swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s; } .brtm-settings-swatch:hover { transform: scale(1.1); } .brtm-settings-swatch.brtm-selected { border-color: #fff; box-shadow: 0 0 0 3px var(--primary); } .brtm-settings-search-bar { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; margin-bottom: 20px; box-shadow: var(--shadow-sm); } .brtm-settings-search-bar i { color: var(--text-muted); font-size: 15px; flex-shrink: 0; } .brtm-settings-search-bar input { flex: 1; border: none; outline: none; font-size: 13.5px; font-family: var(--brtm-font-ui); color: var(--text-main); background: transparent; } .brtm-settings-search-bar input::placeholder { color: var(--text-light); } .brtm-settings-page-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; background: #fff; border-bottom: 1px solid var(--border); flex-shrink: 0; } .brtm-settings-page-header-left { display: flex; align-items: center; gap: 8px; } .brtm-settings-page-header h1 { font-size: 18px; font-weight: 700; color: var(--text-main); margin: 0; } .brtm-settings-integration-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); } .brtm-settings-integration-row:last-child { border-bottom: none; } .brtm-settings-integration-logo { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .brtm-settings-integration-info { flex: 1; min-width: 0; } .brtm-settings-integration-name { font-size: 13.5px; font-weight: 600; color: var(--text-main); } .brtm-settings-integration-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .brtm-settings-integration-status { font-size: 11.5px; font-weight: 700; display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .brtm-settings-integration-status.brtm-connected { color: var(--accent); } .brtm-settings-integration-status.brtm-disconnected { color: var(--text-light); } .brtm-settings-integration-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .brtm-co-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 3000; align-items: center; justify-content: center; } .brtm-co-overlay.brtm-show { display: flex; } /* ══════════════════════════════════════════ SHARED — SURVEY DETAIL PAGE ══════════════════════════════════════════ */ .brtm-sv-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .brtm-sv-status.draft { background: #F1F5F9; color: #475569; } .brtm-sv-status.active { background: #DCFCE7; color: #15803D; } .brtm-sv-status.closed { background: #FEE2E2; color: #B91C1C; } .brtm-sv-status.archived { background: #FEF9C3; color: #A16207; } .brtm-sv-type { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .brtm-sv-type.csat { background: #EDE9FE; color: #6D28D9; } .brtm-sv-type.nps { background: #DBEAFE; color: #1D4ED8; } .brtm-sv-type.product { background: #CCFBF1; color: #0F766E; } .brtm-sv-type.market { background: #FEF3C7; color: #B45309; } .brtm-sv-type.employee { background: #FCE7F3; color: #9D174D; } .brtm-sv-type.internal { background: #E0F2FE; color: #0369A1; } .brtm-sv-ctr-bar { display: flex; align-items: center; gap: 0; background: #fff; border-bottom: 1px solid var(--border); padding: 0 24px; flex-shrink: 0; position: sticky; top: 0; z-index: 20; } .brtm-sv-ctr-tab { display: inline-flex; align-items: center; gap: 7px; padding: 13px 0; margin-right: 30px; font-size: 13px; font-weight: 600; font-family: inherit; color: var(--text-muted); background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s; } .brtm-sv-ctr-tab i { font-size: 14px; } .brtm-sv-ctr-tab:hover { color: var(--text-main); } .brtm-sv-ctr-tab.brtm-active { color: var(--primary); border-bottom-color: var(--primary); } .brtm-sv-ctr-cnt { font-size: 10.5px; font-weight: 700; background: var(--surface); color: var(--text-3); padding: 1px 7px; border-radius: 99px; } .brtm-sv-ctr-tab.brtm-active .brtm-sv-ctr-cnt { background: var(--primary-light); color: var(--primary); } .brtm-sv-ctr-panel { display: none; } .brtm-sv-ctr-panel.brtm-active { display: block; } .brtm-sv-hdr { background: #fff; border-bottom: 1px solid var(--border); flex-shrink: 0; } .brtm-sv-hdr-inner { padding: 22px 28px 18px; border-left: 4px solid var(--primary); } .brtm-sv-title-edit { font-size: 22px; font-weight: 700; color: var(--text-1); line-height: 1.3; border: none; outline: none; background: transparent; font-family: inherit; width: 100%; padding: 0; } .brtm-sv-title-edit:focus { color: var(--primary); } .brtm-sv-desc-edit { font-size: 13.5px; color: var(--text-2); line-height: 1.7; border: none; outline: none; background: transparent; font-family: inherit; width: 100%; padding: 0; resize: none; } .brtm-sv-kpi { display: flex; border-top: 1px solid var(--border); } .brtm-sv-kpi-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12px 8px; border-right: 1px solid var(--border); text-align: center; } .brtm-sv-kpi-item:last-child { border-right: none; } .brtm-sv-kpi-val { font-size: 22px; font-weight: 700; color: var(--text-1); line-height: 1; } .brtm-sv-kpi-lbl { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; } .brtm-sv-q { background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 10px; transition: box-shadow .15s, border-color .15s; } .brtm-sv-q:focus-within, .brtm-sv-q:hover { border-color: var(--primary); box-shadow: 0 2px 12px rgba(27,111,190,.1); } .brtm-sv-q-top { display: flex; align-items: flex-start; gap: 10px; padding: 16px 16px 4px; } .brtm-sv-q-num { width: 26px; height: 26px; border-radius: 7px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-sv-q-txt-field { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-1); line-height: 1.5; border: none; outline: none; background: transparent; font-family: inherit; padding: 0; resize: none; } .brtm-sv-q-type-select { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 600; background: var(--surface); color: var(--text-2); border: 1px solid var(--border); flex-shrink: 0; white-space: nowrap; cursor: pointer; font-family: inherit; appearance: none; } .brtm-sv-q-body { padding: 8px 16px 14px 52px; } .brtm-sv-q-footer { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--border); background: var(--surface); } .brtm-sv-req-badge { font-size: 10.5px; font-weight: 700; color: #DC2626; background: #FEF2F2; padding: 2px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 3px; } .brtm-sv-opt-badge { font-size: 10.5px; font-weight: 600; color: var(--text-3); background: var(--surface); border: 1px solid var(--border); padding: 2px 8px; border-radius: 4px; } .brtm-sv-opt { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: var(--text-1); border-bottom: 1px solid var(--border); } .brtm-sv-opt:last-child { border-bottom: none; } .brtm-sv-opt-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #CBD5E1; flex-shrink: 0; } .brtm-sv-opt-box { width: 16px; height: 16px; border-radius: 3px; border: 2px solid #CBD5E1; flex-shrink: 0; } .brtm-sv-opt-inp { flex: 1; border: none; background: transparent; font-size: 13px; color: var(--text-1); font-family: inherit; outline: none; padding: 0; min-width: 0; } .brtm-sv-opt-inp:focus { background: var(--surface); border-radius: 4px; padding: 0 4px; outline: 1px solid var(--primary); } .brtm-sv-opt-del { width: 22px; height: 22px; border: none; background: none; color: var(--text-3); cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; line-height: 1; padding: 0; } .brtm-sv-opt-del:hover { color: #DC2626; background: #FEF2F2; } .brtm-sv-req-badge, .brtm-sv-opt-badge { cursor: pointer; user-select: none; } .brtm-sv-stars { display: flex; gap: 6px; } .brtm-sv-star { font-size: 28px; color: #F59E0B; line-height: 1; } .brtm-sv-star.empty { color: #D1D5DB; } .brtm-sv-nps-row { display: flex; gap: 4px; flex-wrap: wrap; } .brtm-sv-nps-n { width: 36px; height: 36px; border-radius: 7px; border: 1.5px solid var(--border); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .brtm-sv-nps-n.det { background: #FEE2E2; border-color: #FECACA; color: #B91C1C; } .brtm-sv-nps-n.pas { background: #FEF9C3; border-color: #FDE68A; color: #92400E; } .brtm-sv-nps-n.pro { background: #DCFCE7; border-color: #BBF7D0; color: #15803D; } .brtm-sv-nps-lbl { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-3); margin-top: 6px; } .brtm-sv-resp-bar { display: flex; gap: 6px; padding: 16px 0 12px; } .brtm-sv-resp-subtab { padding: 6px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .12s; } .brtm-sv-resp-subtab.brtm-active, .brtm-sv-resp-subtab:hover { background: var(--primary-light); color: var(--primary); border-color: rgba(27,111,190,.3); } .brtm-sv-resp-sub { display: none; } .brtm-sv-resp-sub.brtm-active { display: block; } .brtm-sv-sum { background: #fff; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; } .brtm-sv-sum-hdr { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); } .brtm-sv-sum-num { width: 22px; height: 22px; border-radius: 5px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-sv-sum-q { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text-1); line-height: 1.4; } .brtm-sv-sum-n { font-size: 11px; color: var(--text-3); white-space: nowrap; } .brtm-sv-sum-body { padding: 14px 16px; } .brtm-sv-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .brtm-sv-bar-row:last-child { margin-bottom: 0; } .brtm-sv-bar-lbl { font-size: 12px; color: var(--text-2); min-width: 160px; } .brtm-sv-bar-track { flex: 1; height: 10px; background: var(--surface); border-radius: 99px; overflow: hidden; } .brtm-sv-bar-fill { height: 100%; border-radius: 99px; background: var(--primary); } .brtm-sv-bar-val { font-size: 11.5px; font-weight: 700; color: var(--text-1); min-width: 44px; text-align: right; } .brtm-sv-resp-item { background: #fff; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; overflow: hidden; } .brtm-sv-resp-hdr { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; user-select: none; background: var(--surface); transition: background .12s; } .brtm-sv-resp-hdr:hover { background: #eef3fb; } .brtm-sv-resp-av { width: 28px; height: 28px; border-radius: 7px; font-size: 11px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-sv-resp-name { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text-1); } .brtm-sv-resp-chev { font-size: 10px; color: var(--text-3); transition: transform .2s; } .brtm-sv-resp-item.brtm-open .brtm-sv-resp-chev { transform: rotate(180deg); } .brtm-sv-resp-body { display: none; padding: 12px 14px 14px; border-top: 1px solid var(--border); } .brtm-sv-resp-item.brtm-open .brtm-sv-resp-body { display: block; } .brtm-sv-ans-row { padding: 7px 0; border-bottom: 1px solid var(--border); } .brtm-sv-ans-row:last-child { border-bottom: none; padding-bottom: 0; } .brtm-sv-ans-q { font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-bottom: 3px; } .brtm-sv-ans-a { font-size: 12.5px; color: var(--text-1); line-height: 1.5; } .brtm-sv-progress { width: 100%; height: 8px; background: var(--surface); border-radius: 99px; overflow: hidden; margin-top: 6px; } .brtm-sv-progress-fill { height: 100%; border-radius: 99px; background: var(--primary); } .brtm-sv-sett { background: #fff; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; } .brtm-sv-sett-hdr { padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 7px; } .brtm-sv-sett-body { padding: 14px 16px; } .brtm-sv-sett-row { display: flex; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--border); gap: 12px; } .brtm-sv-sett-row:last-child { border-bottom: none; padding-bottom: 0; } .brtm-sv-sett-lbl { font-size: 12px; font-weight: 500; color: var(--text-2); min-width: 130px; flex-shrink: 0; padding-top: 2px; } .brtm-sv-sett-val { flex: 1; font-size: 12.5px; color: var(--text-1); } .brtm-sv-link-box { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .brtm-sv-link-url { flex: 1; font-size: 12.5px; color: var(--primary); font-weight: 500; word-break: break-all; } .brtm-rate-bar { display: flex; align-items: center; gap: 6px; } .brtm-rate-track { width: 60px; height: 6px; background: var(--surface); border-radius: 99px; overflow: hidden; flex-shrink: 0; } .brtm-rate-fill { height: 100%; border-radius: 99px; background: var(--primary); } .brtm-rate-pct { font-size: 11.5px; font-weight: 700; color: var(--text-1); } .brtm-survey-name-link { font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; display: block; } .brtm-survey-name-link:hover { text-decoration: underline; } /* ══════════════════════════════════════════ SHARED — DEALS PAGE SPECIFIC ══════════════════════════════════════════ */ .brtm-stage-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; } .brtm-stage-pill.prospecting { background: #DBEAFE; color: #1D4ED8; } .brtm-stage-pill.qualification{ background: #EDE9FE; color: #6D28D9; } .brtm-stage-pill.proposal { background: #FEF3C7; color: #B45309; } .brtm-stage-pill.negotiation { background: #FEF9C3; color: #A16207; } .brtm-stage-pill.closed-won { background: #DCFCE7; color: #15803D; } .brtm-stage-pill.closed-lost { background: #FEE2E2; color: #B91C1C; } .brtm-deal-type-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; } .brtm-deal-type-pill.new-business { background: #EFF6FF; color: #1E40AF; } .brtm-deal-type-pill.existing { background: #F0FDF4; color: #15803D; } .brtm-deal-type-pill.renewal { background: #F5F3FF; color: #6D28D9; } .brtm-amount-val { font-size: 12.5px; font-weight: 700; color: var(--text-1); } .brtm-prob-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--primary); } .brtm-close-date { font-size: 12.5px; color: var(--text-1); } .brtm-close-date.overdue { color: #B91C1C; font-weight: 600; } .brtm-pipeline-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; background: #EEF2FF; color: #4338CA; } /* ══════════════════════════════════════════ SHARED — CALLS PAGE SPECIFIC ══════════════════════════════════════════ */ .brtm-rec-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; border: 1px solid transparent; font-family: inherit; cursor: pointer; transition: filter .15s; white-space: nowrap; line-height: 1.4; background: none; } .brtm-rec-pill.has-rec { background: #DBEAFE; color: #1D4ED8; border-color: #BFDBFE; } .brtm-rec-pill.has-rec:hover { filter: brightness(.94); } .brtm-rec-pill.no-rec { background: #F1F5F9; color: #94A3B8; border-color: #E2E8F0; cursor: default; } /* ══════════════════════════════════════════ SHARED — TASKS PAGE SPECIFIC ══════════════════════════════════════════ */ .brtm-due-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; } .brtm-due-chip.overdue { background: #FEE2E2; color: #B91C1C; } .brtm-due-chip.soon { background: #FEF9C3; color: #A16207; } .brtm-due-chip.normal { background: #F1F5F9; color: #475569; } .brtm-due-chip.done { background: #DCFCE7; color: #15803D; } /* ══════════════════════════════════════════ SHARED — MEETINGS PAGE SPECIFIC ══════════════════════════════════════════ */ .brtm-attendee-stack { display: inline-flex; align-items: center; } .brtm-attendee-stack .brtm-av { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; color: #fff; font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-left: -6px; flex-shrink: 0; } .brtm-attendee-stack .brtm-av:first-child { margin-left: 0; } .brtm-attendee-stack .brtm-av-more { background: var(--surface); color: var(--text-2); border: 2px solid #fff; font-size: 8px; font-weight: 700; } .brtm-ci-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; border: 1px solid transparent; font-family: inherit; cursor: pointer; transition: filter .15s; white-space: nowrap; line-height: 1.4; } .brtm-ci-pill.ci-none { background: #DCFCE7; color: #15803D; border-color: #BBF7D0; } .brtm-ci-pill.ci-none:hover { filter: brightness(.94); } .brtm-ci-pill.ci-in { background: #FFFBEB; color: #92400E; border-color: #FDE68A; } .brtm-ci-pill.ci-in:hover { filter: brightness(.96); } .brtm-ci-pill.ci-out { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; } .brtm-ci-pill.ci-out:hover { filter: brightness(.96); } .brtm-ci-drawer-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1050; opacity: 0; pointer-events: none; transition: opacity .25s; } .brtm-ci-drawer-overlay.brtm-show { opacity: 1; pointer-events: all; } .brtm-ci-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; background: #fff; box-shadow: -4px 0 28px rgba(0,0,0,.13); z-index: 1055; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); overflow: hidden; } .brtm-ci-drawer.brtm-open { transform: translateX(0); } .brtm-ci-gps-panel { position: absolute; inset: 0; background: #fff; z-index: 10; display: flex; flex-direction: column; transform: translateY(12px); opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .22s ease; overflow: hidden; } .brtm-ci-gps-panel.brtm-open { transform: translateY(0); opacity: 1; pointer-events: all; } /* ══════════════════════════════════════════ SURVEY LISTING — NEW SURVEY DRAWER FORMS ══════════════════════════════════════════ */ #newSurveyDrawer .form-control, #newSurveyDrawer .form-select, #newSurveyDrawer .form-label, #newSurveyDrawer .form-check-label, #newSurveyDrawer .btn, #newSurveyDrawer textarea, #newSurveyDrawer input, #newSurveyDrawer select { font-family: var(--brtm-font-ui); font-size: 13px; } #newSurveyDrawer .form-label { font-size: 12px; font-weight: 600; color: var(--text-1); margin-bottom: 5px; } #newSurveyDrawer .form-control, #newSurveyDrawer .form-select { font-size: 13px; color: var(--text-1); } #newSurveyDrawer .form-control::placeholder { color: var(--text-muted); } .brtm-nsv-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); margin-bottom: 6px; display: block; } .brtm-nsv-section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .brtm-nsv-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; } .brtm-nsv-section-title i { font-size: 12px; } .brtm-nsv-section-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0 16px; } .brtm-nsv-qcard { background: #fff; border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, box-shadow .15s; } .brtm-nsv-qcard:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .brtm-nsv-qcard-top { display: flex; align-items: flex-start; gap: 8px; } .brtm-nsv-qnum { min-width: 22px; height: 22px; border-radius: 6px; background: var(--primary-light); color: var(--primary); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .brtm-nsv-qtext { flex: 1; border: none; outline: none; resize: none; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-1); background: transparent; line-height: 1.5; min-height: 40px; } .brtm-nsv-qtext::placeholder { color: var(--text-muted); font-weight: 400; } .brtm-nsv-qdel { background: none; border: none; padding: 2px 4px; cursor: pointer; color: var(--text-3); font-size: 13px; line-height: 1; border-radius: 5px; flex-shrink: 0; transition: background .12s, color .12s; } .brtm-nsv-qdel:hover { background: #FEE2E2; color: #B91C1C; } .brtm-nsv-qcard-bottom { display: flex; align-items: center; gap: 8px; } .brtm-nsv-qtype { flex: 1; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--text-1); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; cursor: pointer; outline: none; transition: border-color .15s; } .brtm-nsv-qtype:focus { border-color: var(--primary); } .brtm-nsv-qrequired { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); white-space: nowrap; cursor: pointer; user-select: none; } .brtm-nsv-qrequired input { cursor: pointer; accent-color: var(--primary); } .brtm-nsv-add-q-btn { width: 100%; padding: 8px 0; border-radius: 8px; border: 1.5px dashed var(--border); background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--primary); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s, border-color .15s; } .brtm-nsv-add-q-btn:hover { background: var(--primary-light); border-color: var(--primary); } .brtm-nsv-opts-wrap { display: flex; flex-direction: column; gap: 6px; } .brtm-nsv-opt-row { display: flex; align-items: center; gap: 7px; } .brtm-nsv-opt-input { flex: 1; border: none; border-bottom: 1.5px solid var(--border); outline: none; font-family: inherit; font-size: 12.5px; color: var(--text-1); background: transparent; padding: 2px 0; } .brtm-nsv-opt-input:focus { border-bottom-color: var(--primary); } .brtm-nsv-opt-del { width: 20px; height: 20px; border: none; background: none; color: var(--text-3); cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 13px; padding: 0; transition: color .12s, background .12s; flex-shrink: 0; } .brtm-nsv-opt-del:hover { color: #DC2626; background: #FEF2F2; } /* ══════════════════════════════════════════ CALL DETAIL — STATUS / DIR / TYPE PILLS ══════════════════════════════════════════ */ .brtm-call-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .brtm-call-status.completed { background:#DCFCE7; color:#15803D; } .brtm-call-status.missed { background:#FEE2E2; color:#B91C1C; } .brtm-call-status.no-answer { background:#FEF9C3; color:#A16207; } .brtm-call-status.scheduled { background:#DBEAFE; color:#1D4ED8; } .brtm-call-status.cancelled { background:#F1F5F9; color:#64748B; } .brtm-call-dir { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .brtm-call-dir.outbound { background:#CCFBF1; color:#0F766E; } .brtm-call-dir.inbound { background:#EDE9FE; color:#6D28D9; } .brtm-call-type { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .brtm-call-type.sales-call { background:#EFF6FF; color:#1E40AF; } .brtm-call-type.support-call { background:#FEF3C7; color:#B45309; } .brtm-call-type.follow-up { background:#F0FDF4; color:#15803D; } .brtm-call-type.demo-call { background:#F5F3FF; color:#6D28D9; } .brtm-call-type.escalation { background:#FFF1F2; color:#BE123C; } /* ══════════════════════════════════════════ TASK DETAIL — STATUS / PRIORITY / TYPE PILLS ══════════════════════════════════════════ */ .brtm-task-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .brtm-task-status.not-started { background: #F1F5F9; color: #64748B; } .brtm-task-status.in-progress { background: #DBEAFE; color: #1D4ED8; } .brtm-task-status.completed { background: #DCFCE7; color: #15803D; } .brtm-task-status.overdue { background: #FEE2E2; color: #B91C1C; } .brtm-task-status.deferred { background: #FEF9C3; color: #A16207; } .brtm-task-priority { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .brtm-task-priority.high { background: #FEE2E2; color: #B91C1C; } .brtm-task-priority.medium { background: #FEF9C3; color: #A16207; } .brtm-task-priority.low { background: #DCFCE7; color: #15803D; } .brtm-task-priority.none { background: #F1F5F9; color: #64748B; } .brtm-task-type { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .brtm-task-type.follow-up { background: #F0FDF4; color: #15803D; } .brtm-task-type.general { background: #EFF6FF; color: #1E40AF; } .brtm-task-type.integration { background: #F5F3FF; color: #6D28D9; } .brtm-task-type.other { background: #F1F5F9; color: #64748B; } /* ── Complete task banner ── */ .brtm-task-complete-bar { display: flex; align-items: center; gap: 10px; padding: 10px 24px; background: #ECFDF5; border-bottom: 1px solid #BBF7D0; } .brtm-task-complete-bar.overdue { background: #FEF2F2; border-bottom-color: #FECACA; } .brtm-task-complete-bar i { color: #15803D; font-size: 14px; } .brtm-task-complete-bar.overdue i { color: #B91C1C; } .brtm-task-complete-bar span { font-size: 12.5px; font-weight: 500; flex: 1; } .brtm-task-complete-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 14px; border-radius: 6px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; border: 1.5px solid #15803D; background: #fff; color: #15803D; transition: all .15s; white-space: nowrap; } .brtm-task-complete-btn:hover { background: #15803D; color: #fff; } .brtm-task-complete-bar.overdue .brtm-task-complete-btn { border-color: #B91C1C; color: #B91C1C; } .brtm-task-complete-bar.overdue .brtm-task-complete-btn:hover { background: #B91C1C; color: #fff; } /* ══════════════════════════════════════════ DEALS DETAIL — STAGE PILLS & STEPPER ══════════════════════════════════════════ */ .brtm-deal-stage { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .brtm-deal-stage.prospecting { background:#DBEAFE; color:#1D4ED8; } .brtm-deal-stage.qualification { background:#EDE9FE; color:#6D28D9; } .brtm-deal-stage.proposal { background:#FEF3C7; color:#B45309; } .brtm-deal-stage.negotiation { background:#FEF9C3; color:#A16207; } .brtm-deal-stage.closed-won { background:#DCFCE7; color:#15803D; } .brtm-deal-stage.closed-lost { background:#FEE2E2; color:#B91C1C; } .brtm-stage-stepper-wrap { border-bottom: 1px solid var(--border); background: var(--surface-raised, #fff); } .brtm-stage-stepper { display: flex; align-items: stretch; gap: 0; padding: 10px 16px 8px; overflow-x: auto; } .brtm-stage-stepper::-webkit-scrollbar { display: none; } .brtm-stage-pill-btn { display: flex; align-items: center; gap: 6px; flex: 1; padding: 7px 14px; border-radius: 0; border: none; background: #F1F5F9; color: var(--text-3); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; position: relative; transition: background .2s, color .2s; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); padding-left: 20px; padding-right: 20px; min-width: 90px; justify-content: center; flex-direction: column; } .brtm-stage-pill-btn:first-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); border-radius: 6px 0 0 6px; padding-left: 14px; } .brtm-stage-pill-btn:last-child { clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); border-radius: 0 6px 6px 0; padding-right: 14px; } .brtm-stage-pill-btn:hover:not(.brtm-stage-current) { background: #E2E8F0; color: var(--text-1); } .brtm-stage-pill-btn[data-stage="Prospecting"].brtm-stage-done { background:#DBEAFE; color:#1D4ED8; } .brtm-stage-pill-btn[data-stage="Prospecting"].brtm-stage-done:hover { background:#BFDBFE; } .brtm-stage-pill-btn[data-stage="Qualification"].brtm-stage-done { background:#EDE9FE; color:#6D28D9; } .brtm-stage-pill-btn[data-stage="Qualification"].brtm-stage-done:hover { background:#DDD6FE; } .brtm-stage-pill-btn[data-stage="Prospecting"].brtm-stage-current { background:#1D4ED8; color:#fff; box-shadow: 2px 0 0 0 #1D4ED8, -2px 0 0 0 #1D4ED8; } .brtm-stage-pill-btn[data-stage="Qualification"].brtm-stage-current { background:#6D28D9; color:#fff; box-shadow: 2px 0 0 0 #6D28D9, -2px 0 0 0 #6D28D9; } .brtm-stage-pill-btn[data-stage="Proposal"].brtm-stage-current { background:#B45309; color:#fff; box-shadow: 2px 0 0 0 #B45309, -2px 0 0 0 #B45309; } .brtm-stage-pill-btn[data-stage="Negotiation"].brtm-stage-current { background:#A16207; color:#fff; box-shadow: 2px 0 0 0 #A16207, -2px 0 0 0 #A16207; } .brtm-stage-pill-btn[data-stage="Closed Won"].brtm-stage-current { background:#15803D; color:#fff; box-shadow: 2px 0 0 0 #15803D, -2px 0 0 0 #15803D; } .brtm-stage-pill-btn[data-stage="Closed Lost"].brtm-stage-current { background:#B91C1C; color:#fff; box-shadow: 2px 0 0 0 #B91C1C, -2px 0 0 0 #B91C1C; } .brtm-stage-pill-btn.brtm-stage-current { cursor: default; z-index: 1; color:#fff; } .brtm-stage-pill-btn .brtm-stage-check { font-size: 11px; flex-shrink: 0; } .brtm-stage-pill-label { display: flex; align-items: center; gap: 5px; } .brtm-stage-pill-sub { font-size: 9.5px; font-weight: 400; opacity: .75; margin-top: 1px; line-height: 1; } .brtm-stage-pill-btn.brtm-stage-current .brtm-stage-pill-sub { opacity: .85; } .brtm-stage-close-bar { display: flex; align-items: center; gap: 6px; padding: 5px 18px 9px; font-size: 11.5px; color: var(--text-2); } .brtm-stage-close-bar i { color: var(--primary); font-size: 12px; } .brtm-stage-close-bar strong { color: var(--text-1); font-weight: 600; } .brtm-stage-close-days { display: inline-flex; align-items: center; background: #FEF3C7; color: #B45309; font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 99px; } .brtm-stage-bar { display: flex; gap: 3px; margin: 12px 0 4px; } .brtm-stage-seg { flex: 1; height: 5px; border-radius: 99px; background: var(--border); transition: background .3s; } .brtm-stage-seg.done { background: #00B87A; } .brtm-stage-seg.current { background: #1B6FBE; } .brtm-deal-val-card { background: linear-gradient(135deg,#EFF6FF 0%,#E0F2FE 100%); border: 1px solid rgba(27,111,190,.2); border-radius: 10px; padding: 14px 16px; margin: 0 12px 14px; } .brtm-deal-val-label { font-size: 10px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; } .brtm-deal-val-amount { font-size: 22px; font-weight: 700; color: var(--text-1); line-height: 1.1; } .brtm-deal-val-prob { font-size: 11.5px; color: var(--text-2); margin-top: 5px; display: flex; align-items: center; gap: 6px; } .brtm-deal-prob-bar { flex: 1; height: 5px; background: var(--border); border-radius: 99px; overflow: hidden; } .brtm-deal-prob-fill { height: 100%; background: #00B87A; border-radius: 99px; transition: width .4s; } /* ══════════════════════════════════════════ TOPBAR — MISC UTILITY ══════════════════════════════════════════ */ .brtm-tb-icon-ml { margin-left: 4px; } .brtm-tb-icon-16 { font-size: 16px; } /* Form / drawer label heading style */ .brtm-form-label-sm { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); margin-bottom: 6px; display: block; } /* Required asterisk */ .brtm-required-star { color: #EF4444; } /* Form select consistent font */ .brtm-form-select { font-size: 12.5px; font-family: var(--brtm-font-ui); } /* Form textarea consistent font */ .brtm-form-textarea { width: 100%; border: 1.5px solid var(--border); border-radius: 9px; padding: 10px 12px; font-size: 12.5px; font-family: var(--brtm-font-ui); color: var(--text-1); line-height: 1.6; resize: none; box-sizing: border-box; outline: none; transition: border-color .15s; } .brtm-form-textarea:focus { border-color: var(--primary); } /* Icon in chart card title / info context */ .brtm-icon-primary { color: var(--primary); margin-right: 6px; } /* Tag dot swatch */ /* .brtm-tag-dot background is set inline (data-driven) — keep as is */ /* Avatar initials in inline JS are kept inline (data-driven) */ /* ══════════════════════════════════════ UTILITY — FLEX & GRID ══════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ §12 UTILITY CLASSES ══════════════════════════════════════════════════════════════ */ .brtm-flex-1 { flex: 1; } .brtm-flex-1-min { flex: 1; min-width: 0; } .brtm-flex-c-g2 { display: flex; align-items: center; gap: 2px; } .brtm-flex-c-g4 { display: flex; align-items: center; gap: 4px; } .brtm-flex-c-g5 { display: flex; align-items: center; gap: 5px; } .brtm-flex-c-g6 { display: flex; align-items: center; gap: 6px; } .brtm-flex-c-g7 { display: flex; align-items: center; gap: 7px; } .brtm-flex-c-g8 { display: flex; align-items: center; gap: 8px; } .brtm-flex-c-g9 { display: flex; align-items: center; gap: 9px; } .brtm-flex-c-g10 { display: flex; align-items: center; gap: 10px; } .brtm-flex-c-g12 { display: flex; align-items: center; gap: 12px; } .brtm-flex-c-g14 { display: flex; align-items: center; gap: 14px; } .brtm-flex-c-sb { display: flex; align-items: center; justify-content: space-between; } .brtm-flex-c-g7w { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; } .brtm-flex-c-g8w { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .brtm-flex-FS-g8 { display: flex; gap: 8px; align-items: flex-start; } .brtm-flex-g4 { display: flex; gap: 4px; } .brtm-flex-g5 { display: flex; gap: 5px; } .brtm-flex-g6 { display: flex; gap: 6px; } .brtm-flex-g8 { display: flex; gap: 8px; } .brtm-flex-g10 { display: flex; gap: 10px; } .brtm-flex-g12 { display: flex; gap: 12px; } .brtm-flex-g14 { display: flex; gap: 14px; } .brtm-flex-g16 { display: flex; gap: 16px; } .brtm-flex-wrap-g2 { display: flex; flex-wrap: wrap; gap: 2px; } .brtm-flex-wrap-g4 { display: flex; flex-wrap: wrap; gap: 4px; } .brtm-flex-wrap-g5 { display: flex; flex-wrap: wrap; gap: 5px; } .brtm-flex-wrap-g6 { display: flex; flex-wrap: wrap; gap: 6px; } .brtm-flex-wrap-g8 { display: flex; flex-wrap: wrap; gap: 8px; } .brtm-flex-end-g6 { display: flex; justify-content: flex-end; gap: 6px; } .brtm-flex-end-g6-mt5 { display: flex; justify-content: flex-end; gap: 6px; margin-top: 5px; } .brtm-flex-col-g3 { display: flex; flex-direction: column; gap: 3px; } .brtm-flex-col-g8 { display: flex; flex-direction: column; gap: 8px; } .brtm-flex-col-g10 { display: flex; flex-direction: column; gap: 10px; } .brtm-ml-auto-flex { margin-left: auto; display: flex; gap: 6px; } .brtm-ml-auto-bold { margin-left: auto; font-weight: 600; color: var(--text-1); } .brtm-flex-sb-mb16 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; } .brtm-flex-sb-mb14 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .brtm-flex-base-g8 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; } .brtm-grid-2-g12 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .brtm-grid-2-g16 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .brtm-flex-c-g2-rel { display: flex; align-items: center; gap: 2px; position: relative; } .brtm-flex-c-g8-sm { display: flex; align-items: center; gap: 8px; font-size: 12px; } /* ══════════════════════════════════════ UTILITY — TEXT & COLOR ══════════════════════════════════════ */ .brtm-text-accent { color: var(--accent); } .brtm-text-primary { color: var(--primary); } .brtm-text-2 { color: var(--text-2); } .brtm-text-3 { color: var(--text-3); } .brtm-text-1-w6 { color: var(--text-1); font-weight: 600; } .brtm-text-3-w5 { color: var(--text-3); font-weight: 500; } .brtm-field-key { font-size: 12.5px; font-weight: 700; color: var(--text-1); } .brtm-field-key-flex { font-size: 12.5px; font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 6px; } .brtm-text-xs-muted { font-size: 11px; color: var(--text-3); } .brtm-text-xxs-muted { font-size: 10px; color: var(--text-3); } .brtm-text-muted-sm { font-size: 12px; color: var(--text-muted); } .brtm-text-muted { font-size: 12.5px; color: var(--text-muted); } .brtm-text-sm-3 { font-size: 12px; color: var(--text-3); } .brtm-text-sm-2 { font-size: 12px; color: var(--text-2); } .brtm-text-muted-line { font-size: 12px; color: var(--text-muted); line-height: 1.6; } .brtm-text-danger-sm { font-size: 12px; color: #DC2626; } .brtm-text-primary-xs { color: var(--primary); font-size: 11px; } .brtm-text-cyan-sm { font-size: 12px; color: #0891B2; } .brtm-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); } .brtm-section-label-sm { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); } .brtm-section-label-xs { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; } .brtm-section-label-grp { font-size: 11px; color: var(--text-3); font-weight: 500; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; } .brtm-stat-val { font-size: 26px; font-weight: 700; color: var(--text-main); margin: 6px 0 2px; } .brtm-stat-val-lg { font-size: 26px; font-weight: 800; color: var(--text-main); } .brtm-text-md { font-size: 13px; font-weight: 500; } .brtm-text-md-b { font-size: 13px; font-weight: 600; } .brtm-text-sm-b { font-size: 12px; font-weight: 600; } .brtm-sub-link-btn { margin-top: 4px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 0; font-size: 12.5px; color: var(--primary); background: none; border: none; font-family: inherit; cursor: pointer; font-weight: 600; } .brtm-sub-link-btn:hover { opacity: .8; } .brtm-act-likes { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-3); flex: 1; } /* ══════════════════════════════════════ UTILITY — SPACING ══════════════════════════════════════ */ .brtm-mt-4 { margin-top: 4px; } .brtm-mt-5 { margin-top: 5px; } .brtm-mt-6 { margin-top: 6px; } .brtm-mb-0 { margin-bottom: 0; } .brtm-mb-12 { margin-bottom: 12px; } .brtm-mb-14 { margin-bottom: 14px; } .brtm-mb-16 { margin-bottom: 16px; } .brtm-ml-12 { margin-left: 12px; } /* ══════════════════════════════════════ UTILITY — BUTTONS ══════════════════════════════════════ */ .brtm-btn-sm-primary { height: 28px; padding: 0 14px; border-radius: 6px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; background: var(--primary); color: #fff; border: none; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; } .brtm-btn-sm-primary:hover { background: var(--primary-dark); } .brtm-btn-sm-outline { height: 26px; padding: 0 10px; border-radius: 5px; border: 1px solid var(--border); background: #fff; color: var(--text-2); font-size: 11.5px; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; } .brtm-btn-sm-outline:hover { border-color: var(--primary); color: var(--primary); } .brtm-btn-sm-h28 { height: 28px; font-size: 12px; padding: 0 10px; } .brtm-btn-h30 { height: 30px; font-size: 12px; padding: 0 12px; } .brtm-btn-h30-danger { height: 30px; font-size: 12px; padding: 0 12px; color: #EF4444; border-color: #FECACA; } .brtm-btn-h40 { height: 40px; padding: 0 22px; font-size: 13.5px; } /* ══════════════════════════════════════ UTILITY — MISC COMPONENTS ══════════════════════════════════════ */ .brtm-kpi-bar-track { height: 6px; background: var(--border); border-radius: 99px; margin-top: 10px; overflow: hidden; } .brtm-overflow-x { overflow-x: auto; } .brtm-w-full-jc { width: 100%; justify-content: center; } .brtm-card-base { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); } .brtm-mini-badge { background: var(--primary-light); color: var(--primary); font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 99px; margin-left: 8px; } .brtm-sep-h1 { height: 1px; background: var(--border); margin: 3px 0; } .brtm-pos-rel-pl32 { position: relative; padding-left: 32px; } .brtm-field-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-3); pointer-events: none; } .brtm-search-field { width: 100%; padding-left: 30px; box-sizing: border-box; } .brtm-pill-xs { font-size: 11px; padding: 2px 8px; } .brtm-w-110-sm { width: 110px; font-size: 11.5px; color: var(--text-2); font-weight: 500; } .brtm-timeline-line { position: absolute; left: 13px; top: 6px; bottom: 6px; width: 2px; background: var(--border); border-radius: 2px; } .brtm-self-center-sm { align-self: center; font-size: 12px; color: var(--text-3); } .brtm-empty-icon-lg { display: block; font-size: 20px; margin-bottom: 6px; opacity: .4; } .brtm-icon-18-shrink { font-size: 18px; flex-shrink: 0; } .brtm-check-icon-g { color: #16A34A; font-size: 12px; width: 14px; text-align: center; flex-shrink: 0; } .brtm-check-icon-b { color: #2563EB; font-size: 12px; width: 14px; text-align: center; flex-shrink: 0; } .brtm-green-icon-sm { color: #059669; font-size: 12px; margin-right: 5px; } .brtm-comment-label { font-size: 11px; margin-left: 3px; } .brtm-icon-22-primary { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-icon-22-violet { width: 22px; height: 22px; border-radius: 6px; background: #7C3AED; color: #fff; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-nd-center-scroll { flex: 1; overflow-y: auto; min-width: 0; background: var(--surface); scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.12) transparent; } .brtm-btn-h28-danger { height: 28px; font-size: 12px; padding: 0 10px; color: #EF4444; border-color: #FECACA; } .brtm-flex-scroll { flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.12) transparent; } .brtm-flex-scroll::-webkit-scrollbar { width: 4px; } .brtm-flex-scroll::-webkit-scrollbar-track { background: transparent; } .brtm-flex-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 2px; } .brtm-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); } .brtm-btn-inline-link { margin-top: 4px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 0; font-size: 12.5px; color: var(--primary); background: none; border: none; font-family: inherit; cursor: pointer; font-weight: 600; } .brtm-ml-3 { margin-left: 3px; } .brtm-pos-rel-iflex { position: relative; display: inline-flex; } .brtm-badge-blue { background: #DBEAFE; color: #1D4ED8; } .brtm-badge-green { background: #DCFCE7; color: #15803D; } .brtm-badge-red { background: #FEE2E2; color: #B91C1C; } .brtm-tbl-sep-cell { padding: 0 4px; color: var(--text-2); line-height: 32px; } .brtm-icon-28 { width: 28px; height: 28px; flex-shrink: 0; } .brtm-primary-bar-mt4 { background: var(--primary); margin-top: 4px; } /* Icon sizes */ .brtm-icon-22 { font-size: 22px; } .brtm-icon-20 { font-size: 20px; } .brtm-icon-18 { font-size: 18px; } .brtm-icon-16 { font-size: 16px; } /* Settings toggle device icon */ .brtm-settings-toggle-info > i { font-size: 22px; } /* GPS panel circle icon */ #mpDetecting .brtm-text-primary, #ciGpsDetecting .brtm-text-primary { font-size: 22px; } /* Checkout section label icon */ .brtm-co-section-label i, .brtm-co-pay-opt-icon i { font-size: 16px; } /* Single-value font-size utilities */ .brtm-fs-9 { font-size: 9px; } .brtm-fs-10 { font-size: 10px; } .brtm-fs-11 { font-size: 11px; } .brtm-fs-12 { font-size: 12px; } .brtm-fs-13 { font-size: 13px; } .brtm-fs-14 { font-size: 14px; } .brtm-fs-15 { font-size: 15px; } .brtm-fs-17 { font-size: 17px; } .brtm-fs-20 { font-size: 20px; } .brtm-pos-rel { position: relative; } .brtm-fw-6 { font-weight: 600; } .brtm-min-w-0 { min-width: 0; } .brtm-min-w-50 { min-width: 50px; } /* Commonly repeated multi-prop patterns (4x+) */ .brtm-dd-footer { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-top: 1px solid var(--border); background: var(--surface); } .brtm-drawer-footer { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; } .brtm-flex-FSB-g12 { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .brtm-flex-FS-g12 { display: flex; align-items: flex-start; gap: 12px; } .brtm-flex-c-g9-min { display: flex; align-items: center; gap: 9px; min-width: 0; } .brtm-flex-c-g4-sh { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .brtm-flex-c-g6-mb6 { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .brtm-flex-c-g6-sm { display: flex; align-items: center; gap: 6px; font-size: 11.5px; } .brtm-flex-c-g8-sm13 { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-1); cursor: pointer; } .brtm-flex-wrap-g5-mb8 { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; } .brtm-flex-1-min-g6 { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; } .brtm-flex-g12-rel { display: flex; gap: 12px; position: relative; } .brtm-flex-col-c-sh { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .brtm-flex-c-sb-mb16 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .brtm-ml-auto-bold-r { margin-left: auto; font-weight: 600; color: var(--text-1); text-align: right; } .brtm-card-title-clip { font-size: 13.5px; font-weight: 700; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-card-sub-row { font-size: 10.5px; color: var(--text-3); display: flex; align-items: center; gap: 4px; margin-top: 1px; } .brtm-info-box { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .brtm-subhead-2 { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; } .brtm-text-sm-3-sh { font-size: 12px; color: var(--text-3); flex-shrink: 0; } .brtm-text-key-6 { font-size: 12.5px; font-weight: 600; color: var(--text-1); } .brtm-text-11-3-sh { font-size: 11px; color: var(--text-3); width: 16px; flex-shrink: 0; } .brtm-text-muted-xs { font-size: 11.5px; color: var(--text-3); margin-right: auto; } .brtm-icon-circle-48 { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; } .brtm-icon-circle-40 { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; } .brtm-dd-section-label { padding: 6px 10px; font-size: 10px; font-weight: 700; color: var(--text-3); border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: .4px; } .brtm-btn-sm-disabled { height: 28px; padding: 0 14px; border-radius: 6px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: not-allowed; background: #C3D7EF; color: #fff; border: none; transition: all .12s; } .brtm-input-fieldset { flex: 1; border: 1.5px solid var(--border); border-radius: 8px; overflow: visible; background: #fff; transition: border-color .15s; } .brtm-flex-1-scroll { flex: 1; display: flex; min-height: 0; overflow: hidden; } .brtm-text-primary-md-sh { color: var(--primary); font-size: 14px; flex-shrink: 0; } .brtm-text-11-sec-sh { font-size: 11px; color: var(--text-secondary); margin-top: 2px; flex-shrink: 0; } .brtm-btn-outline-primary { background: var(--white); color: var(--primary); border: 1px solid var(--primary); } .brtm-checkbox-sm { accent-color: var(--primary); width: 14px; height: 14px; } .brtm-sep-v { width: 1px; height: 16px; background: var(--border); margin: 0 3px; flex-shrink: 0; } .brtm-code-block { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 10px 12px; font-size: 12.5px; color: var(--text-1); line-height: 1.6; } .brtm-flex-c-g16-sh { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .brtm-flex-c-g6-sh { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .brtm-flex-c-g8-sh { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .brtm-flex-col-g5 { display: flex; flex-direction: column; gap: 5px; } .brtm-icon-16-primary { width: 16px; height: 16px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 8px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } /* More color utilities */ .brtm-text-1 { color: var(--text-1); } .brtm-text-disabled { color: #CBD5E1; } .brtm-text-amber { color: #D97706; } .brtm-text-amber-sm { font-size: 12px; color: #D97706; } .brtm-text-orange { color: #EA580C; } .brtm-text-green { color: #059669; } .brtm-text-red { color: #EF4444; } .brtm-text-dark-red { color: #B91C1C; } .brtm-text-violet { color: #7C3AED; } .brtm-text-yellow { color: #F59E0B; } .brtm-text-purple { color: #9333EA; } .brtm-text-blue { color: #0284C7; } .brtm-text-white { color: #fff; } .brtm-text-lg-3 { font-size: 20px; color: var(--text-3); } .brtm-text-lg-1 { font-size: 20px; color: var(--text-1); } /* Spacing */ .brtm-m-0 { margin: 0; } .brtm-mb-0 { margin-bottom: 0; } .brtm-w-full { width: 100%; } /* Component patterns */ .brtm-btn-group { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; } .brtm-btn-group-r { border: none; border-radius: 0; padding: 5px 9px; border-right: 1px solid var(--border); } .brtm-btn-group-l { border: none; border-radius: 0; padding: 5px 9px; border-left: 1px solid var(--border); } .brtm-plan-card { border: 1.5px solid var(--border); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s; } .brtm-heading-flex { font-size: 13px; font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: 5px; } .brtm-acc-body-p { padding: 10px 12px 12px; } .brtm-acc-body-p2 { padding: 10px 12px 8px; } .brtm-text-center { text-align: center; } .brtm-text-fs7 { font-size: 7px; } .brtm-text-fs6 { font-size: 6px; } /* Final utility batch */ .brtm-section-label-xs2 { font-size: 10px; font-weight: 700; color: var(--text-3); margin-bottom: 7px; text-transform: uppercase; letter-spacing: .5px; } .brtm-body-text { font-size: 12px; color: var(--text-2); line-height: 1.6; margin: 6px 0 4px; } .brtm-text-17-3 { font-size: 17px; color: var(--text-3); } .brtm-label-primary { display: block; font-size: 10.5px; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; opacity: .8; } .brtm-grid-3-g14-mb20 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 20px; } .brtm-grid-3-g14-mt4 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 4px; } .brtm-sup-text { font-size: 8px; vertical-align: baseline; } .brtm-subhead-3 { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 3px; } .brtm-tag-text { font-size: 11px; font-weight: 700; letter-spacing: -.5px; } .brtm-flex-end-g6-wrap { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .brtm-modal-body-wide { padding: 24px 24px 40px; max-width: none; } .brtm-form-input-sm { font-size: 12.5px; font-family: inherit; max-width: 90px; } .brtm-plan-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 12px; border-radius: 99px; letter-spacing: .4px; white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════ CHAT MODULE (Omnichannel) Classes use brtm- prefix, scoped under .brtm-chat-page body class to prevent conflicts with other Barantum page components. ═══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ §13 CHAT MODULE (Omnichannel — scoped under .brtm-chat-page) ══════════════════════════════════════════════════════════════ */ .brtm-chat-page { --panel-width: 320px; --sidebar-width: 56px; --bg: #f4f6fb; --text-muted: #8a9ab0; --tag-green: #43A047; --tag-blue: var(--primary); --tag-orange: #E65100; --border: #e3e8ef; overflow: hidden; display: flex; flex-direction: column; height: 100vh; font-family: var(--brtm-font-ui); } .brtm-chat-page .brtm-topbar, .brtm-chat-page .brtm-topbar * { font-family: var(--brtm-font-ui); } .brtm-chat-page .brtm-chat-search-bar { top: 56px !important; left: calc(var(--sidebar-width) + 56px) !important; } /* ── LAYOUT ── */ /* ─── §13a · Layout & Icon Sidebar ─── */ .brtm-chat-page .brtm-main-wrapper { display: flex; flex: 1; height: calc(100vh - 56px); min-height: 0; } /* ── ICON SIDEBAR ── */ .brtm-chat-page .brtm-icon-sidebar { width: var(--sidebar-width); background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: 12px 6px; gap: 4px; flex-shrink: 0; height: calc(100vh - 56px); overflow: visible; transition: width .25s ease; position: relative; } .brtm-chat-page .brtm-sidebar-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 17px; cursor: pointer; transition: background .15s, color .15s, width .25s ease, justify-content .25s, padding .25s; text-decoration: none; flex-shrink: 0; gap: 0; } /* Expanded state: icons become full-width rows */ .brtm-chat-page .brtm-icon-sidebar.brtm-expanded .brtm-sidebar-icon { width: calc(var(--sidebar-width) - 28px); justify-content: flex-start; padding: 0 10px; gap: 10px; } .brtm-chat-page .brtm-sidebar-icon:hover { background: #f1f5f9; color: var(--primary); } .brtm-chat-page .brtm-sidebar-icon.brtm-active { background: var(--primary-light); color: var(--primary); } /* Inline label (visible when expanded) */ .brtm-chat-page .brtm-sidebar-label { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; max-width: 0; opacity: 0; transition: max-width .25s ease, opacity .2s ease; pointer-events: none; display: inline-block; } .brtm-chat-page .brtm-icon-sidebar.brtm-expanded .brtm-sidebar-label { max-width: 130px; opacity: 1; pointer-events: auto; } .brtm-chat-page .brtm-sidebar-spacer { flex: 1; } .brtm-chat-page .brtm-sidebar-upgrade { color: #e65100 !important; } .brtm-chat-page .brtm-sidebar-upgrade:hover { background: #fff3ed; color: #e65100 !important; } .brtm-chat-page .brtm-sidebar-onboarding { background: var(--primary) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(27,111,190,0.35); } .brtm-chat-page .brtm-sidebar-onboarding:hover { background: var(--primary-dark) !important; color: #fff !important; } .brtm-chat-page .brtm-sidebar-onboarding.brtm-active { background: var(--primary-dark) !important; color: #fff !important; } /* Expand/collapse toggle — tab protruding from right edge */ .brtm-chat-page .brtm-sidebar-toggle { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 20px; height: 44px; border-radius: 0 8px 8px 0; border: 1px solid var(--border); border-left: none; background: white; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 11px; cursor: pointer; z-index: 10; transition: background .15s, color .15s, box-shadow .15s; padding: 0; box-shadow: 2px 0 6px rgba(0,0,0,0.06); } .brtm-chat-page .brtm-sidebar-toggle:hover { background: #f1f5f9; color: var(--primary); } .brtm-chat-page .brtm-sidebar-toggle .bi { transition: transform .25s ease; } .brtm-chat-page .brtm-icon-sidebar.brtm-expanded .brtm-sidebar-toggle .bi { transform: rotate(180deg); } /* JS tooltip element (fixed, appended to body) */ .brtm-sidebar-tooltip-el { position: fixed; transform: translateY(-50%); background: #1e293b; color: #fff; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 99999; white-space: nowrap; font-family: var(--brtm-font-ui); } .brtm-sidebar-tooltip-el.brtm-visible { opacity: 1; } /* ── CHAT PANEL ── */ /* ─── §13b · Chat Panel (chat list) ─── */ .brtm-chat-page .brtm-chat-panel { width: var(--panel-width); min-width: 260px; min-width: 220px; max-width: 520px; background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; height: calc(100vh - 56px); position: relative; } /* Resize handle */ .brtm-chat-page .brtm-resize-handle { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 10; display: flex; align-items: center; justify-content: center; } .brtm-chat-page .brtm-resize-handle::after { content: ''; width: 3px; height: 40px; background: #d0d8e8; border-radius: 3px; transition: background .15s, height .15s; } .brtm-chat-page .brtm-resize-handle:hover::after, .brtm-chat-page .brtm-resize-handle.brtm-dragging::after { background: var(--primary); height: 60px; } .brtm-chat-page .brtm-chat-panel-header { padding: 16px 20px 10px; display: flex; align-items: center; justify-content: space-between; } .brtm-chat-page .brtm-chat-panel-header h2 { font-size: 18px; font-weight: 700; color: var(--primary); margin: 0; } .brtm-chat-page .brtm-header-actions { display: flex; align-items: center; gap: 6px; } .brtm-chat-page .brtm-btn-plus { width: 32px; height: 32px; border-radius: 8px; background: var(--primary); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; transition: background .15s, box-shadow .15s; } .brtm-chat-page .brtm-btn-plus:hover { background: #1a72b0; box-shadow: 0 2px 8px rgba(34,132,198,.35); } .brtm-chat-page .brtm-header-icon-btn { width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid #d0d8e8; background: white; color: #8a9ab0; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; flex-shrink: 0; transition: border-color .15s, color .15s; } .brtm-chat-page .brtm-header-icon-btn:hover { border-color: var(--primary); color: var(--primary); } .brtm-chat-page .brtm-filter-wrap .brtm-filter-dropdown { top: calc(100% + 6px); right: 0; left: auto; } /* Search box */ .brtm-chat-page .brtm-search-box { margin: 10px 20px 10px; position: relative; } .brtm-chat-page .brtm-search-box input { width: 100%; border: 1.5px solid #d0d8e8; border-radius: 8px; padding: 8px 34px 8px 34px; font-size: 13px; font-family: var(--brtm-font-ui); outline: none; color: #1a2234; transition: border-color .15s; } .brtm-chat-page .brtm-search-box input:focus { border-color: var(--primary); } .brtm-chat-page .brtm-search-box input::placeholder { color: #b0bac8; } .brtm-chat-page .brtm-search-box .brtm-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #b0bac8; font-size: 15px; pointer-events: none; } .brtm-chat-page .brtm-search-box input.brtm-has-value { padding-left: 12px; } .brtm-chat-page .brtm-search-box .brtm-clear-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #8a9ab0; font-size: 16px; cursor: pointer; padding: 0; line-height: 1; } /* Status tabs */ .brtm-chat-page .brtm-status-tabs { display: flex; align-items: center; gap: 4px; padding: 0 20px 10px; flex-wrap: nowrap; overflow-x: auto; } .brtm-chat-page .brtm-status-tabs::-webkit-scrollbar { display: none; } .brtm-chat-page .brtm-tab-btn { border: 1px solid #d0d8e8; background: white; color: #4b5563; border-radius: 14px; padding: 3px 10px; font-size: 11px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all .15s; font-family: var(--brtm-font-ui); line-height: 1.5; } .brtm-chat-page .brtm-tab-btn.brtm-active { background: var(--primary); color: white; border-color: var(--primary); } .brtm-chat-page .brtm-tab-btn:hover:not(.brtm-active) { border-color: var(--primary); color: var(--primary); } /* Chat list */ .brtm-chat-page .brtm-chat-list { flex: 1; overflow-y: auto; } .brtm-chat-page .brtm-chat-list::-webkit-scrollbar { width: 4px; } .brtm-chat-page .brtm-chat-list::-webkit-scrollbar-track { background: transparent; } .brtm-chat-page .brtm-chat-list::-webkit-scrollbar-thumb { background: #d0d8e8; border-radius: 4px; } .brtm-chat-page .brtm-section-label { font-size: 11px; font-weight: 600; color: #8a9ab0; text-transform: uppercase; letter-spacing: .6px; padding: 8px 20px 4px; } .brtm-chat-page .brtm-chat-item { padding: 10px 12px; margin: 2px 10px; border-radius: 10px; cursor: pointer; border-bottom: none; transition: background .12s; } .brtm-chat-page .brtm-chat-item:hover { background: #f0f4fb; } .brtm-chat-page .brtm-chat-item-top { display: flex; align-items: flex-start; gap: 10px; } .brtm-chat-page .brtm-avatar-wrap { position: relative; flex-shrink: 0; } .brtm-chat-page .brtm-avatar { width: 38px; height: 38px; border-radius: 50%; background: #e3e8ef; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #8a9ab0; } .brtm-chat-page .brtm-avatar-status { position: absolute; bottom: -1px; right: -1px; width: 14px; height: 14px; border-radius: 50%; background: white; display: flex; align-items: center; justify-content: center; } .brtm-chat-page .brtm-avatar-status i { font-size: 12px; color: #8a9ab0; } .brtm-chat-page .brtm-chat-info { flex: 1; min-width: 0; } .brtm-chat-page .brtm-chat-name-row { display: flex; justify-content: space-between; align-items: center; } .brtm-chat-page .brtm-chat-name { font-size: var(--fs-base); font-weight: var(--fw-med); color: var(--tx-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.005em; } .brtm-chat-page .brtm-chat-item.brtm-unread .brtm-chat-name { font-weight: var(--fw-bold); } .brtm-chat-page .brtm-chat-time { font-size: var(--fs-xs); color: var(--tx-3); flex-shrink: 0; font-variant-numeric: tabular-nums; } .brtm-chat-page .brtm-chat-msg { font-size: var(--fs-sm); color: var(--tx-2); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; display: flex; align-items: center; gap: 4px; } .brtm-chat-page .brtm-chat-item.brtm-unread .brtm-chat-msg { color: var(--tx-1); font-weight: var(--fw-med); } .brtm-chat-page .brtm-chat-msg i { font-size: 11px; color: #a0d4a0; } .brtm-chat-page .brtm-chat-msg .brtm-highlight { font-weight: var(--fw-bold); color: var(--tx-1); } .brtm-chat-page .brtm-chat-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; } .brtm-chat-page .brtm-meta-chip { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--tx-3); font-weight: var(--fw-reg); } .brtm-chat-page .brtm-meta-chip i { font-size: 12px; } .brtm-chat-page .brtm-tag { font-size: 11px; font-weight: 600; border-radius: 20px; padding: 2px 10px; white-space: nowrap; flex-shrink: 0; } .brtm-chat-page .brtm-tag-green { background: #e8f5e9; color: #388e3c; } .brtm-chat-page .brtm-tag-blue { background: #e3f0ff; color: #2284C6; } .brtm-chat-page .brtm-tag-red { background: #fff3e0; color: #e65100; } /* Empty state */ .brtm-chat-page .brtm-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; color: #a0aab8; font-size: 13px; text-align: center; padding: 20px; line-height: 1.5; } /* Main area */ .brtm-chat-page .brtm-main-area { flex: 1; min-width: 0; background: #f4f6fb; display: flex; flex-direction: column; height: calc(100vh - 56px); overflow: hidden; position: relative; } /* ── CONVERSATION HEADER ── */ /* ─── §13c · Conversation Header ─── */ .brtm-chat-page .brtm-cv-header { background: white; border-bottom: 1px solid var(--border); padding: 11px 20px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .brtm-chat-page .brtm-cv-header-left { display: flex; align-items: center; gap: 12px; } .brtm-chat-page .brtm-cv-avatar-wrap { position: relative; flex-shrink: 0; } .brtm-chat-page .brtm-cv-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #2284C6, #42a5f5); color: white; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .brtm-chat-page .brtm-cv-online-dot { position: absolute; bottom: 1px; right: 1px; width: 10px; height: 10px; background: #4caf50; border: 2px solid white; border-radius: 50%; } .brtm-chat-page .brtm-cv-header-info { display: flex; flex-direction: column; gap: 2px; } .brtm-chat-page .brtm-cv-name { font-size: 15px; font-weight: 600; color: #1a2234; display: flex; align-items: center; gap: 8px; } .brtm-chat-page .brtm-cv-status-badge { font-size: 11px; font-weight: 600; background: #e8f5e9; color: #2e7d32; border-radius: 20px; padding: 2px 8px; } .brtm-chat-page .brtm-cv-status-badge.brtm-badge-open { background: #e8f5e9; color: #2e7d32; } .brtm-chat-page .brtm-cv-status-badge.brtm-badge-inprogress { background: #eff6ff; color: #1d4ed8; } .brtm-chat-page .brtm-cv-status-badge.brtm-badge-done { background: #dcfce7; color: #166534; } .brtm-chat-page .brtm-cv-status-badge.brtm-badge-pending { background: #fff7ed; color: #ea580c; } .brtm-chat-page .brtm-cv-status-badge.brtm-badge-waiting { background: #faf5ff; color: #7c3aed; } .brtm-chat-page .brtm-cv-sub { font-size: 12px; color: #8a9ab0; display: flex; align-items: center; gap: 4px; } .brtm-chat-page .brtm-cv-dot { color: #c4cdd8; } .brtm-chat-page .brtm-cv-header-actions { display: flex; align-items: center; gap: 6px; } .brtm-chat-page .brtm-cv-action-btn { height: 34px; border-radius: 8px; border: 1px solid #e3e8ef; background: white; color: #8a9ab0; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; padding: 0 8px; gap: 5px; } .brtm-chat-page .brtm-cv-action-btn:hover { background: #f0f4ff; color: var(--primary); border-color: #c7d8f5; } .brtm-chat-page .brtm-cv-action-btn--active { background: #eff6ff; color: var(--primary); border-color: #bfdbfe; } /* WA Call button — same style as other action buttons */ .brtm-chat-page .brtm-cv-wacall-btn { color: #8a9ab0; } .brtm-chat-page .brtm-cv-wacall-btn:hover { background: #f0f4ff; color: var(--primary); border-color: #c7d8f5; } /* WA Call permission bubbles */ .brtm-chat-page .brtm-cv-wacall-bubble-wrap { overflow: hidden; min-width: 240px; max-width: 320px; border-radius: 12px; } .brtm-chat-page .brtm-outgoing-wacall { background: #dcf8c6; border: 1px solid #b9e89b; } .brtm-chat-page .brtm-incoming-wacall { background: #fff; border: 1px solid #e3e8ef; box-shadow: 0 1px 3px rgba(0,0,0,.06); } .brtm-chat-page .brtm-cv-wacall-bubble { padding: 12px 12px 0; } .brtm-chat-page .brtm-cv-wacall-bubble-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .brtm-chat-page .brtm-cv-wacall-icon-circle { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: #e8f5e9; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #25d366; position: relative; } .brtm-chat-page .brtm-wacall-badge-sm { position: absolute; bottom: -1px; right: -2px; font-size: 10px; color: #25d366; background: #fff; border-radius: 50%; line-height: 1; } .brtm-chat-page .brtm-cv-wacall-bubble-title { font-size: 13px; font-weight: 600; color: #1a2234; } .brtm-chat-page .brtm-cv-wacall-bubble-sub { font-size: 11px; color: #5a7396; } .brtm-chat-page .brtm-cv-wacall-bubble-desc { font-size: 12.5px; color: #4a5568; margin-bottom: 10px; line-height: 1.5; } /* Status pills */ .brtm-chat-page .brtm-wacall-status-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 20px; margin-left: auto; flex-shrink: 0; white-space: nowrap; } .brtm-chat-page .brtm-wacall-pending { background: #fef9c3; color: #92400e; } .brtm-chat-page .brtm-wacall-allowed { background: #dcfce7; color: #166534; } .brtm-chat-page .brtm-wacall-denied { background: #fee2e2; color: #991b1b; } .brtm-chat-page .brtm-wacall-ended { background: #eff6ff; color: #1e40af; } /* Agent action row (Cancel / Call Now) */ .brtm-chat-page .brtm-cv-wacall-bubble-actions { display: flex; gap: 8px; padding: 2px 12px 10px; } .brtm-chat-page .brtm-wacall-cancel-btn { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.12); color: #5a7396; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: all .15s; } .brtm-chat-page .brtm-wacall-cancel-btn:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; } .brtm-chat-page .brtm-wacall-call-now-btn { display: inline-flex; align-items: center; gap: 6px; background: #25d366; border: none; color: #fff; font-size: 12.5px; font-weight: 600; padding: 7px 16px; border-radius: 7px; cursor: pointer; transition: all .15s; } .brtm-chat-page .brtm-wacall-call-now-btn:hover { background: #1ebe5d; } .brtm-chat-page .brtm-wacall-call-now-btn:disabled { background: #9de5bc; cursor: not-allowed; } /* User Izinkan / Tolak buttons — full-bleed row */ .brtm-chat-page .brtm-cv-wacall-user-actions { display: flex; border-top: 1px solid rgba(0,0,0,.08); } .brtm-chat-page .brtm-wacall-deny-btn, .brtm-chat-page .brtm-wacall-allow-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; border: none; font-size: 13px; font-weight: 600; padding: 10px 0; cursor: pointer; transition: all .15s; } .brtm-chat-page .brtm-wacall-deny-btn { background: transparent; color: #64748b; border-right: 1px solid rgba(0,0,0,.08); } .brtm-chat-page .brtm-wacall-deny-btn:hover { background: #fef2f2; color: #dc2626; } .brtm-chat-page .brtm-wacall-allow-btn { background: transparent; color: #25d366; } .brtm-chat-page .brtm-wacall-allow-btn:hover { background: #f0fdf4; color: #166534; } /* Response states (replace Allow/Deny after tap) */ .brtm-chat-page .brtm-wacall-response-granted, .brtm-chat-page .brtm-wacall-response-denied { display: flex; align-items: center; gap: 6px; border-top: 1px solid rgba(0,0,0,.08); padding: 9px 12px; font-size: 12.5px; font-weight: 500; } .brtm-chat-page .brtm-wacall-response-granted { color: #166534; background: #f0fdf4; } .brtm-chat-page .brtm-wacall-response-denied { color: #991b1b; background: #fff5f5; } /* Time row */ .brtm-chat-page .brtm-cv-wacall-time-row { padding: 4px 12px 8px; font-size: 11px; color: #8a9ab0; } .brtm-chat-page .brtm-outgoing-wacall .brtm-cv-wacall-time-row { text-align: right; } .brtm-chat-page .brtm-incoming-wacall .brtm-cv-wacall-time-row { text-align: left; } /* Live call pulsing dot */ .brtm-chat-page .brtm-wacall-live { display: flex; align-items: center; gap: 5px; } .brtm-chat-page .brtm-wacall-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0; animation: brtm-wacall-pulse 1.2s ease-in-out infinite; } @keyframes brtm-wacall-pulse { 0%,100%{ opacity:1;transform:scale(1); } 50%{ opacity:.5;transform:scale(.8); } } /* Simulator section divider */ .brtm-chat-page .brtm-wacall-sim-divider span { background: #ede9fe; color: #5b21b6; } /* WA Call Modal — tier badge + info banner */ .brtm-wacall-tier-badge { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg,#7c3aed,#6d28d9); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; } .brtm-wacall-info-banner { display: flex; align-items: flex-start; gap: 8px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 12px; font-size: 12px; color: #1e40af; line-height: 1.5; } .brtm-wacall-info-banner i { color: #3b82f6; font-size: 14px; flex-shrink: 0; margin-top: 1px; } /* Active WA Call Bar */ .brtm-active-call-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; flex-shrink: 0; background: linear-gradient(135deg,#064e3b,#065f46); border-bottom: 1px solid #047857; box-shadow: 0 2px 10px rgba(16,185,129,.2); animation: brtm-callbar-in .25s ease; } @keyframes brtm-callbar-in { from{ opacity:0;transform:translateY(-6px); } to{ opacity:1;transform:translateY(0); } } .brtm-active-call-left { display: flex; align-items: center; gap: 10px; } .brtm-active-call-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } .brtm-active-call-name { font-size: 13px; font-weight: 600; color: #fff; } .brtm-active-call-status { display: flex; align-items: center; gap: 5px; font-size: 12px; color: rgba(255,255,255,.8); } .brtm-active-call-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex-shrink: 0; animation: brtm-wacall-pulse 1.2s ease-in-out infinite; } .brtm-active-call-actions { display: flex; align-items: center; gap: 8px; } .brtm-active-call-btn { height: 34px; padding: 0 12px; border-radius: 8px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 15px; display: flex; align-items: center; gap: 5px; cursor: pointer; transition: all .15s; } .brtm-active-call-btn:hover { background: rgba(255,255,255,.3); } .brtm-active-call-btn--active { background: rgba(255,255,255,.35); } .brtm-active-call-end { background: #dc2626 !important; border-color: #b91c1c !important; font-size: 13px; font-weight: 600; padding: 0 14px; } .brtm-active-call-end:hover { background: #b91c1c !important; } /* Status pesan button */ .brtm-chat-page .brtm-cv-status-btn { font-size: 12px; font-weight: 500; color: #1a2234; padding: 0 10px; gap: 6px; min-width: unset; } .brtm-chat-page .brtm-cv-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .brtm-chat-page .brtm-cv-status-dot.brtm-status-online { background: #22c55e; } .brtm-chat-page .brtm-cv-status-dot.brtm-status-away { background: #f59e0b; } .brtm-chat-page .brtm-cv-status-dot.brtm-status-offline { background: #94a3b8; } .brtm-chat-page .brtm-cv-status-label { font-family: var(--brtm-font-ui); font-size: 12px; } /* Bot toggle button */ .brtm-chat-page .brtm-cv-bot-btn { gap: 5px; padding: 0 10px; position: relative; } .brtm-chat-page .brtm-cv-bot-btn i { font-size: 16px; } /* Bot status dot */ .brtm-chat-page .brtm-bot-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid white; } .brtm-chat-page .brtm-bot-dot--on { background: #22c55e; } .brtm-chat-page .brtm-bot-dot--off { background: #94a3b8; } .brtm-chat-page .brtm-bot-dot--na { background: #ef4444; } .brtm-chat-page .brtm-cv-bot-btn[data-bot-state="unavailable"] { opacity: .5; cursor: not-allowed; } .brtm-chat-page .brtm-cv-bot-badge { font-size: 9px; font-weight: 700; font-family: var(--brtm-font-ui); padding: 1px 5px; border-radius: 10px; letter-spacing: .3px; } .brtm-chat-page .brtm-cv-bot-badge.brtm-bot-on { background: #dcfce7; color: #16a34a; } .brtm-chat-page .brtm-cv-bot-badge.brtm-bot-off { background: #f1f5f9; color: #94a3b8; } /* Bot popover */ .brtm-chat-page .brtm-bot-popover { display: none; position: absolute; top: calc(100% + 10px); right: 0; background: white; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.14); border: 1px solid #e8edf5; padding: 12px 14px; width: 220px; z-index: 300; animation: ctxFadeIn .15s ease; } .brtm-chat-page .brtm-bot-popover::before { content: ''; position: absolute; top: -6px; right: 16px; width: 10px; height: 10px; background: white; border-left: 1px solid #e8edf5; border-top: 1px solid #e8edf5; transform: rotate(45deg); } .brtm-chat-page .brtm-bot-popover--show { display: block; } .brtm-chat-page .brtm-bot-popover-title { font-size: 12px; font-weight: 700; color: #1a2234; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .brtm-chat-page .brtm-bot-popover-title i { color: var(--primary); font-size: 13px; } .brtm-chat-page .brtm-bot-popover-desc { font-size: 11.5px; color: #64748b; line-height: 1.5; } .brtm-chat-page .brtm-bot-popover-desc strong { color: #16a34a; } /* Resolve split button */ .brtm-chat-page .brtm-resolve-wrap { display: flex; align-items: stretch; position: relative; } .brtm-chat-page .brtm-cv-btn-resolve { background: var(--primary); color: white; border: none; border-radius: 8px 0 0 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--brtm-font-ui); transition: background .15s; white-space: nowrap; } .brtm-chat-page .brtm-cv-btn-resolve:hover { background: #1560a8; } .brtm-chat-page .brtm-cv-btn-resolve-arrow { background: var(--primary); color: rgba(255,255,255,.85); border: none; border-left: 1px solid rgba(255,255,255,.2); border-radius: 0 8px 8px 0; padding: 8px 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; font-size: 11px; } .brtm-chat-page .brtm-cv-btn-resolve-arrow:hover { background: #1560a8; } .brtm-chat-page .brtm-resolve-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; background: white; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.13); min-width: 200px; padding: 5px; z-index: 200; animation: ctxFadeIn .12s ease; } .brtm-chat-page .brtm-resolve-dropdown.brtm-open { display: block; } .brtm-chat-page .brtm-resolve-dd-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 7px; cursor: pointer; font-size: 13px; color: #1a2234; font-family: var(--brtm-font-ui); transition: background .12s; } .brtm-chat-page .brtm-resolve-dd-item:hover { background: #f0f4ff; color: var(--primary); } .brtm-chat-page .brtm-resolve-dd-item i { font-size: 15px; color: #8a9ab0; width: 18px; text-align: center; } .brtm-chat-page .brtm-resolve-dd-item:hover i { color: var(--primary); } .brtm-chat-page .brtm-resolve-dd-divider { height: 1px; background: #f0f0f0; margin: 3px 0; } /* Tags bar */ .brtm-chat-page .brtm-cv-tags-bar { background: white; border-bottom: 1px solid var(--border); padding: 8px 20px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .brtm-chat-page .brtm-cv-tag-add { background: none; border: 1px dashed #c4cdd8; color: #8a9ab0; border-radius: 20px; font-size: 11px; padding: 2px 10px; cursor: pointer; font-family: var(--brtm-font-ui); display: flex; align-items: center; gap: 3px; transition: all .15s; } .brtm-chat-page .brtm-cv-tag-add:hover { border-color: var(--primary); color: var(--primary); } /* ── MESSAGES ── */ /* ─── §13d · Messages & Bubbles ─── */ .brtm-chat-page .brtm-cv-messages { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 15px; background-color: #edf4fb; background-image: radial-gradient(circle, rgba(34,132,198,.12) 1px, transparent 1px); background-size: 24px 24px; } .brtm-chat-page .brtm-cv-messages::-webkit-scrollbar { width: 2px; } .brtm-chat-page .brtm-cv-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 2px; } .brtm-chat-page .brtm-cv-messages::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.28); } .brtm-chat-page .brtm-cv-date-divider { text-align: center; margin: 12px 0; } .brtm-chat-page .brtm-cv-date-divider.brtm-date-real { position: sticky; top: 8px; z-index: 10; } .brtm-chat-page .brtm-cv-date-divider::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 0; } .brtm-chat-page .brtm-cv-date-divider span { background: #daeaf8; position: relative; padding: 4px 14px; font-size: 11.5px; color: #1565a0; font-weight: 600; border-radius: 20px; box-shadow: 0 1px 4px rgba(0,0,0,.12); } .brtm-chat-page .brtm-cv-msg { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 0; position: relative; } .brtm-chat-page .brtm-cv-msg.brtm-outgoing { flex-direction: row-reverse; } /* ── BUBBLE HOVER ACTION BUTTONS (WA-style) ── */ /* Outside bubble: emoji + chevron, as flex siblings beside the bubble */ .brtm-chat-page .brtm-cv-msg-outside-actions { display: flex; align-items: center; gap: 3px; align-self: center; opacity: 0; pointer-events: none; transition: opacity .15s; flex-shrink: 0; } .brtm-chat-page .brtm-cv-msg:hover .brtm-cv-msg-outside-actions { opacity: 1; pointer-events: auto; } .brtm-chat-page .brtm-cv-msg-actions-btn { width: 26px; height: 26px; border-radius: 50%; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #8a9ab0; transition: background .12s, color .12s; } .brtm-chat-page .brtm-cv-msg-actions-btn:hover { background: rgba(0,0,0,.08); color: #4a5568; } .brtm-chat-page .brtm-cv-msg-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #2284C6, #42a5f5); color: white; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-chat-page .brtm-cv-msg-body { display: flex; flex-direction: column; gap: 3px; max-width: 65%; min-width: 0; } .brtm-chat-page .brtm-cv-msg.brtm-outgoing .brtm-cv-msg-body { align-items: flex-end; } .brtm-chat-page .brtm-cv-bubble { padding: 7px 12px 6px; border-radius: 10px; font-size: 13px; line-height: 1.55; word-break: break-word; position: relative; } .brtm-chat-page .brtm-cv-bubble.brtm-incoming { background: #ffffff; color: #1a2234; border-top-left-radius: 0; box-shadow: 0 1px 1px rgba(0,0,0,.1); } .brtm-chat-page .brtm-cv-bubble.brtm-incoming::before { content: ''; position: absolute; top: 0; left: -8px; border-top: 0 solid transparent; border-right: 8px solid #ffffff; border-bottom: 10px solid transparent; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing { background: #dbeafe; color: #1a2234; border-top-right-radius: 0; box-shadow: 0 1px 1px rgba(0,0,0,.1); } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing::after { content: ''; position: absolute; top: 0; right: -8px; border-top: 0 solid transparent; border-left: 8px solid #dbeafe; border-bottom: 10px solid transparent; } /* Timestamp inside bubble (WhatsApp style) */ .brtm-chat-page .brtm-cv-bubble-meta { float: right; margin: 4px -2px 6px 8px; font-size: 11px; white-space: nowrap; line-height: 1; color: #8a9ab0; display: flex; align-items: center; gap: 3px; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-bubble-meta { color: #5a7396; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-bubble-meta i:not(.brtm-msg-status) { color: var(--primary); } /* Meta row for audio/doc/call bubbles — timestamp below content, right-aligned */ .brtm-chat-page .brtm-cv-bubble-meta-row { display: flex; justify-content: flex-end; margin-top: 2px; padding: 0 2px; } .brtm-chat-page .brtm-cv-bubble-meta-row .brtm-cv-bubble-meta { float: none; margin: 0; } .brtm-chat-page .brtm-cv-msg-meta { display: none; } /* Typing indicator */ .brtm-chat-page .brtm-cv-typing { display: flex; align-items: center; gap: 4px; padding: 12px 16px; width: fit-content; } .brtm-chat-page .brtm-cv-typing span { width: 7px; height: 7px; background: #b0bac8; border-radius: 50%; display: inline-block; animation: typingBounce 1.2s infinite; } .brtm-chat-page .brtm-cv-typing span:nth-child(2) { animation-delay: .2s; } .brtm-chat-page .brtm-cv-typing span:nth-child(3) { animation-delay: .4s; } @keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } } /* System note */ .brtm-chat-page .brtm-cv-system-note { text-align: center; font-size: 11px; color: #54656f; background: #e8eef7; border-radius: 20px; padding: 4px 14px; align-self: center; margin: 6px 0; display: flex; align-items: center; gap: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.08); } /* ══ MEDIA DOWNLOAD STATES ══ */ .brtm-chat-page .brtm-cv-media-dl-wrap { position: relative; border-radius: 8px; overflow: hidden; } .brtm-chat-page .brtm-cv-media-thumb { width: 100%; min-height: 150px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; position: relative; background: rgba(0,0,0,.13); border-radius: 8px; } .brtm-chat-page .brtm-cv-media-thumb > i { font-size: 42px; opacity: .2; color: #fff; } .brtm-chat-page .brtm-cv-media-dl-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(0,0,0,.52); color: white; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; transition: background .15s; } .brtm-chat-page .brtm-cv-media-dl-btn:hover { background: rgba(0,0,0,.72); } .brtm-chat-page .brtm-cv-media-dl-size { position: absolute; bottom: 8px; right: 8px; font-size: 10px; color: white; font-weight: 600; background: rgba(0,0,0,.45); border-radius: 8px; padding: 2px 7px; } .brtm-chat-page .brtm-cv-media-progress-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; } .brtm-chat-page .brtm-cv-media-progress-ring { width: 52px; height: 52px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: white; animation: dlSpin .8s linear infinite; } @keyframes dlSpin { to { transform: rotate(360deg); } } .brtm-chat-page .brtm-cv-media-dl-pct { font-size: 11px; color: white; font-weight: 700; } .brtm-chat-page .brtm-cv-media-thumb.brtm-media-downloaded { background: rgba(0,0,0,.07); } .brtm-chat-page .brtm-cv-media-thumb.brtm-media-downloaded > i { opacity: .5; color: #0ea5e9; } .brtm-chat-page .brtm-media-dl-indicator { position: absolute; bottom: 8px; left: 8px; width: 20px; height: 20px; border-radius: 50%; background: #16a34a; color: white; font-size: 11px; display: flex; align-items: center; justify-content: center; } .brtm-chat-page .brtm-cv-media-thumb.brtm-media-previewing { background: #0d1117; } .brtm-chat-page .brtm-cv-media-thumb.brtm-media-previewing > i { opacity: .15; color: #fff; } .brtm-chat-page .brtm-cv-media-preview-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.18); color: white; display: flex; align-items: center; justify-content: center; font-size: 28px; cursor: pointer; border: 2px solid rgba(255,255,255,.4); } .brtm-chat-page .brtm-cv-media-progress-label { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 10px; color: white; font-weight: 600; background: rgba(0,0,0,.45); border-radius: 8px; padding: 2px 8px; white-space: nowrap; } .brtm-chat-page .brtm-cv-media-unsupported { background: #f4f6fb; min-height: 70px; flex-direction: row; gap: 12px; padding: 14px 16px; justify-content: flex-start; align-items: center; border-radius: 8px; } .brtm-chat-page .brtm-cv-media-unsupported > i { font-size: 28px; opacity: .35; flex-shrink: 0; } .brtm-chat-page .brtm-cv-media-unsupported-label { font-size: 13px; font-weight: 600; color: #555; } .brtm-chat-page .brtm-cv-media-unsupported-sub { font-size: 11px; color: #9ca3af; } /* ══ INTERACTIVE MESSAGE BUTTONS ══ */ .brtm-chat-page .brtm-cv-btn-list { display: flex; flex-direction: column; margin-top: 4px; } .brtm-chat-page .brtm-cv-btn-item { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border-top: 1px solid rgba(0,0,0,.08); color: #1284d4; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .12s; } .brtm-chat-page .brtm-cv-btn-item:hover { background: rgba(0,0,0,.04); } .brtm-chat-page .brtm-cv-btn-item i { font-size: 14px; } .brtm-chat-page .brtm-cv-tpl-header-img { width: 100%; min-height: 130px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #dbeafe, #e0e7ff); display: flex; align-items: center; justify-content: center; font-size: 44px; color: #6366f1; margin-bottom: 10px; } .brtm-chat-page .brtm-cv-tpl-header-text { font-size: 14px; font-weight: 700; color: #1a2234; margin-bottom: 6px; } .brtm-chat-page .brtm-cv-tpl-body { font-size: 13px; color: #1a2234; line-height: 1.55; margin-bottom: 6px; } .brtm-chat-page .brtm-cv-tpl-footer { font-size: 11px; color: #8a9ab0; margin-bottom: 2px; } .brtm-chat-page .brtm-cv-bcast-label { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #1565c0; background: rgba(255,255,255,.6); border-radius: 20px; padding: 2px 8px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .4px; } .brtm-chat-page .brtm-cv-bot-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #7c3aed; background: #f3e8ff; border-radius: 20px; padding: 2px 8px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .4px; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-btn-item { color: #1565c0; border-top-color: rgba(0,0,0,.1); } /* ══ CTW ADS ENTRY POINT ══ */ /* CTW quote inside bubble */ .brtm-chat-page .brtm-cv-ctw-quote { background: rgba(0,0,0,.04); border-radius: 8px; border-left: 3px solid #f59e0b; padding: 7px 10px; margin-bottom: 7px; } .brtm-chat-page .brtm-cv-ctw-quote-label { font-size: 10px; font-weight: 700; color: #b45309; text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 4px; margin-bottom: 6px; } .brtm-chat-page .brtm-cv-ctw-quote-card { display: flex; gap: 8px; align-items: center; } .brtm-chat-page .brtm-cv-ctw-quote-thumb { width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0; background: #fde68a; display: flex; align-items: center; justify-content: center; font-size: 18px; } .brtm-chat-page .brtm-cv-ctw-quote-title { font-size: 12px; font-weight: 700; color: #1a2234; margin-bottom: 2px; } .brtm-chat-page .brtm-cv-ctw-quote-src { font-size: 11px; color: #8a9ab0; } /* ══ POLL MESSAGE ══ */ .brtm-chat-page .brtm-cv-poll-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #7c3aed; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; } .brtm-chat-page .brtm-cv-poll-question { font-size: 13px; font-weight: 700; color: #1a2234; margin-bottom: 10px; } .brtm-chat-page .brtm-cv-poll-option { display: flex; flex-direction: column; gap: 4px; margin-bottom: 7px; } .brtm-chat-page .brtm-cv-poll-option-label { display: flex; justify-content: space-between; font-size: 12px; color: #1a2234; font-weight: 500; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-poll-bar-track { background: rgba(0,0,0,.12); } .brtm-chat-page .brtm-cv-poll-bar-track { height: 5px; background: #e3e8ef; border-radius: 5px; overflow: hidden; } .brtm-chat-page .brtm-cv-poll-bar-fill { height: 100%; background: var(--primary); border-radius: 5px; } .brtm-chat-page .brtm-cv-poll-option.brtm-poll-winner .brtm-cv-poll-bar-fill { background: #10b981; } .brtm-chat-page .brtm-cv-poll-total { font-size: 11px; color: #8a9ab0; margin-top: 2px; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-poll-total { color: #5a7396; } .brtm-chat-page .brtm-cv-poll-choices { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; } .brtm-chat-page .brtm-cv-poll-choice { padding: 8px 12px; border-radius: 10px; border: 1.5px solid #dde3ee; font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; transition: border-color .15s, background .15s, color .15s; color: #2d3a50; } .brtm-chat-page .brtm-cv-poll-choice:hover { border-color: var(--primary); background: #f0f5ff; } .brtm-chat-page .brtm-cv-poll-choice.selected { border-color: var(--primary); background: var(--primary); color: #fff; } /* ══ EMOJI REACTIONS ══ */ .brtm-chat-page .brtm-cv-reactions { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; } .brtm-chat-page .brtm-cv-msg.brtm-outgoing .brtm-cv-reactions { justify-content: flex-end; } .brtm-chat-page .brtm-cv-reaction { display: inline-flex; align-items: center; gap: 3px; background: white; border: 1px solid #e3e8ef; border-radius: 20px; padding: 2px 8px; font-size: 14px; cursor: pointer; transition: background .12s; box-shadow: 0 1px 3px rgba(0,0,0,.07); } .brtm-chat-page .brtm-cv-reaction:hover { background: #f0f4ff; border-color: #c7daff; } .brtm-chat-page .brtm-cv-reaction span { font-size: 11px; font-weight: 600; color: #5a7396; } .brtm-chat-page .brtm-cv-reaction.brtm-reacted { background: #eef4ff; border-color: #c7daff; } /* ══ PAYMENT LINK ══ */ .brtm-chat-page .brtm-cv-payment-bubble { padding: 12px 14px; min-width: 220px; } .brtm-chat-page .brtm-cv-payment-label { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #16a34a; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; } .brtm-chat-page .brtm-cv-payment-amount { font-size: 22px; font-weight: 700; color: #1a2234; margin-bottom: 4px; } .brtm-chat-page .brtm-cv-payment-desc { font-size: 12px; color: #5a7396; margin-bottom: 10px; } .brtm-chat-page .brtm-cv-payment-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px 12px; border-top: 1px solid rgba(0,0,0,.08); color: #16a34a; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s; box-sizing: border-box; } .brtm-chat-page .brtm-cv-payment-btn:hover { background: rgba(0,0,0,.04); } /* ── INPUT BAR ── */ /* ─── §13e · Input Bar & Toolbar ─── */ .brtm-chat-page .brtm-cv-input-bar { background: white; border-top: 1px solid var(--border); padding: 10px 16px 12px; flex-shrink: 0; } /* ── REPLY PREVIEW BAR (above input) ── */ .brtm-chat-page .brtm-reply-preview-bar { display: flex; align-items: center; gap: 10px; background: #f0f4ff; border-left: 3px solid var(--primary); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: 12px; } .brtm-chat-page .brtm-reply-preview-bar .brtm-rp-content { flex: 1; min-width: 0; } .brtm-chat-page .brtm-reply-preview-bar .brtm-rp-sender { font-weight: 600; color: var(--primary); margin-bottom: 2px; } .brtm-chat-page .brtm-reply-preview-bar .brtm-rp-text { color: #5a7396; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-chat-page .brtm-reply-preview-bar .brtm-rp-close { background: none; border: none; cursor: pointer; color: #8a9ab0; font-size: 16px; padding: 0; line-height: 1; flex-shrink: 0; } .brtm-chat-page .brtm-reply-preview-bar .brtm-rp-close:hover { color: #dc2626; } /* ── FORWARD MODAL ── */ .brtm-forward-modal { display: none; position: fixed; inset: 0; z-index: 9990; background: rgba(0,0,0,.35); align-items: center; justify-content: center; } .brtm-forward-modal.brtm-open { display: flex; } .brtm-forward-modal-card { background: white; border-radius: 16px; width: 400px; max-width: 94vw; box-shadow: 0 16px 48px rgba(0,0,0,.18); overflow: hidden; animation: ctxFadeIn .15s ease; display: flex; flex-direction: column; max-height: 90vh; } .brtm-forward-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #f0f0f0; font-weight: 600; font-size: 15px; color: #1a2234; flex-shrink: 0; } .brtm-forward-modal-header button { background: none; border: none; cursor: pointer; color: #8a9ab0; font-size: 18px; line-height: 1; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .12s; } .brtm-forward-modal-header button:hover { background: #f0f4ff; color: #1a2234; } /* Message preview */ .brtm-forward-modal-preview { margin: 14px 20px 0; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 13px; font-size: 12.5px; background: #f8faff; overflow: hidden; flex-shrink: 0; } .brtm-fwd-preview-label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #8a9ab0; margin-bottom: 6px; } .brtm-fwd-preview-label i { font-size: 11px; } .brtm-fwd-preview-body { color: #1a2234; } /* Selected chips strip */ .brtm-fwd-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 20px 0; flex-shrink: 0; min-height: 0; } .brtm-fwd-chip { display: flex; align-items: center; gap: 6px; background: #eef4ff; border-radius: 20px; padding: 4px 10px 4px 6px; font-size: 12px; color: var(--primary); font-weight: 500; animation: ctxFadeIn .1s ease; } .brtm-fwd-chip .brtm-fwd-chip-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: white; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .brtm-fwd-chip button { background: none; border: none; cursor: pointer; color: #8a9ab0; font-size: 12px; padding: 0; line-height: 1; display: flex; align-items: center; } .brtm-fwd-chip button:hover { color: #dc2626; } /* Search */ .brtm-forward-modal-search { padding: 12px 20px 8px; flex-shrink: 0; position: relative; } .brtm-forward-modal-search i { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); color: #8a9ab0; font-size: 14px; pointer-events: none; } .brtm-forward-modal-search input { width: 100%; padding: 9px 12px 9px 36px; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 13px; outline: none; font-family: var(--brtm-font-ui); transition: border-color .15s; box-sizing: border-box; } .brtm-forward-modal-search input:focus { border-color: var(--primary); } /* List */ .brtm-forward-modal-list { overflow-y: auto; padding: 4px 10px 4px; flex: 1; min-height: 160px; } .brtm-forward-modal-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 13px; color: #1a2234; transition: background .12s; position: relative; } .brtm-forward-modal-item:hover { background: #f5f8ff; } .brtm-forward-modal-item.brtm-fwd-selected { background: #eef4ff; } .brtm-forward-modal-item .brtm-fwd-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #2284C6, #42a5f5); color: white; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; } .brtm-forward-modal-item .brtm-fwd-info { flex: 1; min-width: 0; } .brtm-forward-modal-item .brtm-fwd-name { font-weight: 500; color: #1a2234; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-forward-modal-item .brtm-fwd-sub { font-size: 11px; color: #8a9ab0; margin-top: 1px; } .brtm-forward-modal-item .brtm-fwd-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d0d8e8; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .15s; font-size: 11px; color: transparent; } .brtm-forward-modal-item.brtm-fwd-selected .brtm-fwd-check { background: var(--primary); border-color: var(--primary); color: white; } .brtm-fwd-empty { text-align: center; padding: 28px 0; color: #b0bac8; font-size: 13px; } .brtm-fwd-empty i { font-size: 28px; display: block; margin-bottom: 8px; } /* Footer */ .brtm-forward-modal-footer { padding: 14px 20px; border-top: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; } .brtm-fwd-footer-count { font-size: 12px; color: #8a9ab0; } .brtm-fwd-footer-btns { display: flex; gap: 8px; } .brtm-forward-modal-footer button { padding: 9px 22px; border-radius: 8px; font-size: 13px; font-family: var(--brtm-font-ui); cursor: pointer; border: none; font-weight: 500; } .brtm-fwd-btn-cancel { background: #f0f4ff; color: #1a2234; } .brtm-fwd-btn-cancel:hover { background: #e2eaf8; } .brtm-fwd-btn-send { background: var(--primary); color: white; transition: opacity .15s; } .brtm-fwd-btn-send:disabled { opacity: .45; cursor: not-allowed; } .brtm-fwd-btn-send:not(:disabled):hover { opacity: .88; } /* ── MSG INFO PANEL (slide from right) ── */ .brtm-msg-info-panel { position: fixed; top: 0; right: -340px; bottom: 0; width: 320px; background: white; z-index: 9980; box-shadow: -4px 0 24px rgba(0,0,0,.12); transition: right .22s ease; display: flex; flex-direction: column; font-family: var(--brtm-font-ui); } .brtm-msg-info-panel.brtm-open { right: 0; } .brtm-msg-info-header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #f0f0f0; font-weight: 600; font-size: 14px; color: #1a2234; } .brtm-msg-info-header button { background: none; border: none; cursor: pointer; color: #8a9ab0; font-size: 18px; margin-left: auto; } .brtm-msg-info-bubble-wrap { padding: 16px 18px; border-bottom: 1px solid #f0f0f0; } .brtm-msg-info-rows { padding: 12px 18px; display: flex; flex-direction: column; gap: 2px; } .brtm-msg-info-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #f8f8f8; font-size: 13px; } .brtm-msg-info-row i { font-size: 16px; width: 20px; text-align: center; } .brtm-msg-info-row .brtm-mir-label { color: #8a9ab0; min-width: 80px; } .brtm-msg-info-row .brtm-mir-val { color: #1a2234; font-weight: 500; } .brtm-chat-page .brtm-cv-tool-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: none; outline: none; -webkit-appearance: none; appearance: none; color: #8a9ab0; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; flex-shrink: 0; } .brtm-chat-page .brtm-cv-tool-btn:focus, .brtm-chat-page .brtm-cv-tool-btn:focus-visible { outline: none; box-shadow: none; } .brtm-chat-page .brtm-cv-tool-btn:hover { color: #4a5568; background: rgba(0,0,0,.08); } /* WhatsApp-style input row */ .brtm-chat-page .brtm-cv-input-row { display: flex; align-items: flex-end; gap: 4px; } .brtm-chat-page .brtm-cv-input-wrap { flex: 1; background: #f0f2f5; border: none; border-radius: 24px; padding: 9px 14px; transition: background .15s; min-height: 42px; display: flex; align-items: flex-end; } .brtm-chat-page .brtm-cv-input-wrap:focus-within { background: #e8eaf0; } .brtm-chat-page .brtm-cv-textarea { flex: 1; border: none; background: none; font-family: var(--brtm-font-ui); font-size: 13px; color: #1a2234; resize: none; outline: none; line-height: 1.5; /* Single line by default, grows with content */ height: 22px; max-height: 140px; overflow-y: hidden; display: block; padding: 0; } .brtm-chat-page .brtm-cv-textarea.brtm-expanded { overflow-y: auto; } .brtm-chat-page .brtm-cv-textarea::placeholder { color: #b0bac8; } .brtm-chat-page .brtm-cv-send-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: white; border: none; outline: none; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .15s, transform .1s; box-shadow: 0 2px 8px rgba(34,132,198,.3); } .brtm-chat-page .brtm-cv-send-btn:focus, .brtm-chat-page .brtm-cv-send-btn:focus-visible { outline: none; box-shadow: 0 2px 8px rgba(34,132,198,.3); } .brtm-chat-page .brtm-cv-send-btn:hover { background: var(--primary-dark); transform: scale(1.05); } .brtm-chat-page .brtm-cv-send-btn:active { transform: scale(0.95); } .brtm-chat-page .brtm-cv-send-btn.brtm-note-mode { background: #f59e0b; box-shadow: 0 2px 8px rgba(245,158,11,.35); } .brtm-chat-page .brtm-cv-send-btn.brtm-note-mode:hover { background: #d97706; } /* ── MODE TOGGLE ── */ .brtm-chat-page .brtm-cv-input-toprow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .brtm-chat-page .brtm-cv-mode-toggle { display: flex; gap: 4px; background: #f4f6fb; border-radius: 10px; padding: 3px; width: fit-content; } .brtm-chat-page .brtm-cv-mode-btn { display: flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: 8px; border: none; background: none; font-size: 12px; font-weight: 600; color: #8a9ab0; cursor: pointer; font-family: var(--brtm-font-ui); transition: all .15s; } .brtm-chat-page .brtm-cv-mode-btn i { font-size: 14px; } .brtm-chat-page .brtm-cv-mode-btn.brtm-active { background: white; color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,.1); } .brtm-chat-page .brtm-cv-mode-btn.brtm-active.brtm-note-active { color: #d97706; } /* Input wrap note mode */ .brtm-chat-page .brtm-cv-input-wrap.brtm-note-mode { background: #fffbeb; border-color: #fcd34d; } .brtm-chat-page .brtm-cv-input-wrap.brtm-note-mode:focus-within { border-color: #f59e0b; background: #fffdf5; } .brtm-chat-page .brtm-cv-textarea.brtm-note-mode::placeholder { color: #c4a84a; } /* Note hint */ .brtm-chat-page .brtm-cv-note-hint { display: none; align-items: center; gap: 5px; font-size: 11px; color: #b45309; background: #fef3c7; border-radius: 8px; padding: 5px 10px; margin-top: 6px; } .brtm-chat-page .brtm-cv-note-hint.brtm-visible { display: flex; } .brtm-chat-page .brtm-cv-note-hint i { font-size: 13px; } /* ── NOTE BUBBLE ── */ .brtm-chat-page .brtm-cv-msg.brtm-note { justify-content: flex-end; margin-bottom: 6px; } .brtm-chat-page .brtm-cv-note-bubble { max-width: 68%; background: #fffbeb; border: 1.5px dashed #fcd34d; border-radius: 14px; border-bottom-right-radius: 4px; padding: 10px 14px; font-size: 13px; line-height: 1.55; color: #78350f; position: relative; } .brtm-chat-page .brtm-cv-note-header { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #d97706; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .4px; } .brtm-chat-page .brtm-cv-note-header i { font-size: 13px; } .brtm-chat-page .brtm-cv-note-author { color: #92400e; } .brtm-chat-page .brtm-cv-note-time { font-size: 11px; color: #b45309; margin-top: 6px; text-align: right; } /* ── BOT / BUSINESS APP BUBBLE (status 3) ── */ .brtm-chat-page .brtm-cv-bubble.brtm-bot { background: #f5f0ff; color: #1a2234; border-top-right-radius: 0; box-shadow: 0 1px 1px rgba(0,0,0,.1); border: 1px solid #d8b4fe; position: relative; } .brtm-chat-page .brtm-cv-bubble.brtm-bot::after { content: ''; position: absolute; top: 0; right: -8px; border-top: 0 solid transparent; border-left: 8px solid #d8b4fe; border-bottom: 10px solid transparent; } .brtm-chat-page .brtm-cv-bot-label { font-size: 10px; font-weight: 700; letter-spacing: .4px; color: #7c3aed; text-transform: uppercase; margin-bottom: 4px; display: flex; align-items: center; gap: 4px; } /* ── JIRA ISSUE / COMMENT BUBBLE (status 3 + jira) ── */ .brtm-chat-page .brtm-cv-msg.brtm-jira { justify-content: flex-end; } .brtm-chat-page .brtm-cv-jira-bubble { max-width: 68%; background: #fffbeb; border: 1.5px solid #fcd34d; border-radius: 12px; border-top-right-radius: 0; padding: 10px 14px; font-size: 13px; line-height: 1.5; color: #1a2234; box-shadow: 0 1px 3px rgba(0,0,0,.08); } .brtm-chat-page .brtm-cv-jira-header { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #b45309; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; } .brtm-chat-page .brtm-cv-jira-header i { font-size: 14px; } .brtm-chat-page .brtm-cv-jira-id { font-size: 11px; font-weight: 700; color: var(--primary); background: #dbeafe; border-radius: 4px; padding: 1px 6px; margin-left: auto; } .brtm-chat-page .brtm-cv-jira-title { font-weight: 600; font-size: 13px; color: #1a2234; margin-bottom: 4px; } .brtm-chat-page .brtm-cv-jira-meta { font-size: 11px; color: #8a9ab0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .brtm-chat-page .brtm-cv-jira-status { background: #dcfce7; color: #16a34a; border-radius: 4px; padding: 1px 7px; font-size: 11px; font-weight: 600; } .brtm-chat-page .brtm-cv-jira-priority { background: #fee2e2; color: #b91c1c; border-radius: 4px; padding: 1px 7px; font-size: 11px; font-weight: 600; } .brtm-chat-page .brtm-cv-jira-time { font-size: 11px; color: #b45309; text-align: right; margin-top: 6px; } /* ── WA CALL BUBBLE ── */ .brtm-chat-page .brtm-cv-call-bubble { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-width: 180px; } .brtm-chat-page .brtm-cv-call-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-call-icon { background: rgba(27,111,190,.12); color: var(--primary); } .brtm-chat-page .brtm-cv-bubble.brtm-incoming .brtm-cv-call-icon { background: #f0f4ff; color: var(--primary); } .brtm-chat-page .brtm-cv-call-icon.brtm-call-missed, .brtm-chat-page .brtm-cv-call-icon.brtm-call-rejected { background: #fee2e2 !important; color: #b91c1c !important; } .brtm-chat-page .brtm-cv-call-info { display: flex; flex-direction: column; gap: 2px; flex: 1; } .brtm-chat-page .brtm-cv-call-label { font-size: 13px; font-weight: 600; } .brtm-chat-page .brtm-cv-call-sub { font-size: 11px; opacity: .75; } /* ── MEDIA BUBBLES ── */ .brtm-chat-page .brtm-cv-media-bubble { padding: 4px; min-width: 180px; max-width: 260px; } .brtm-chat-page .brtm-cv-media-placeholder { width: 100%; border-radius: 8px; background: rgba(0,0,0,.06); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 110px; padding: 16px; cursor: pointer; transition: filter .15s; } .brtm-chat-page .brtm-cv-media-placeholder:hover { filter: brightness(.92); } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-media-placeholder { background: rgba(27,111,190,.08); } .brtm-chat-page .brtm-cv-media-placeholder i { font-size: 32px; opacity: .55; } .brtm-chat-page .brtm-cv-media-placeholder span { font-size: 12px; opacity: .6; } /* Media Lightbox */ .brtm-media-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.92); display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity .2s; } .brtm-media-lightbox.brtm-lb-open { opacity: 1; pointer-events: all; } .brtm-media-lb-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); flex-shrink: 0; } .brtm-media-lb-sender { color: #fff; font-size: 14px; font-weight: 600; } .brtm-media-lb-actions { display: flex; gap: 4px; } .brtm-media-lb-btn { width: 38px; height: 38px; border-radius: 50%; border: none; background: none; color: rgba(255,255,255,.8); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .brtm-media-lb-btn:hover { background: rgba(255,255,255,.15); color: #fff; } .brtm-media-lb-body { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 16px; } .brtm-media-lb-content { max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; } .brtm-media-lb-content img { max-width: min(90vw, 900px); max-height: calc(100vh - 140px); border-radius: 6px; object-fit: contain; display: block; box-shadow: 0 8px 40px rgba(0,0,0,.6); } .brtm-media-lb-content video { max-width: min(90vw, 900px); max-height: calc(100vh - 140px); border-radius: 6px; display: block; box-shadow: 0 8px 40px rgba(0,0,0,.6); } .brtm-media-lb-footer { min-height: 40px; padding: 8px 20px 14px; text-align: center; color: rgba(255,255,255,.7); font-size: 13px; flex-shrink: 0; } .brtm-chat-page .brtm-cv-media-caption { padding: 5px 8px 2px; font-size: 13px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } /* Audio / Voice */ .brtm-chat-page .brtm-cv-audio-bubble { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-width: 200px; } .brtm-chat-page .brtm-cv-audio-play { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-audio-play { background: rgba(27,111,190,.12); color: var(--primary); } .brtm-chat-page .brtm-cv-bubble.brtm-incoming .brtm-cv-audio-play { background: #f0f4ff; color: var(--primary); } .brtm-chat-page .brtm-cv-audio-waveform { flex: 1; display: flex; align-items: center; gap: 2px; height: 28px; } .brtm-chat-page .brtm-cv-audio-waveform span { display: inline-block; width: 3px; border-radius: 3px; background: currentColor; opacity: .4; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-audio-waveform { color: var(--primary); } .brtm-chat-page .brtm-cv-bubble.brtm-incoming .brtm-cv-audio-waveform { color: var(--primary); } .brtm-chat-page .brtm-cv-audio-dur { font-size: 11px; opacity: .75; flex-shrink: 0; } /* Document */ .brtm-chat-page .brtm-cv-doc-bubble { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-width: 200px; } .brtm-chat-page .brtm-cv-doc-icon { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-doc-icon { background: rgba(27,111,190,.12); color: var(--primary); } .brtm-chat-page .brtm-cv-bubble.brtm-incoming .brtm-cv-doc-icon { background: #f0f4ff; color: #6366f1; } .brtm-chat-page .brtm-cv-doc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .brtm-chat-page .brtm-cv-doc-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-chat-page .brtm-cv-doc-size { font-size: 11px; opacity: .65; } /* Contact card */ .brtm-chat-page .brtm-cv-contact-bubble { padding: 10px 14px 8px; min-width: 210px; } .brtm-chat-page .brtm-cv-contact-card { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; margin-bottom: 0; } .brtm-chat-page .brtm-cv-contact-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(0,0,0,.08); } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-contact-avatar { background: rgba(27,111,190,.12); } .brtm-chat-page .brtm-cv-contact-name { font-size: 13px; font-weight: 600; } .brtm-chat-page .brtm-cv-contact-phone { font-size: 11px; opacity: .7; } /* Location */ .brtm-chat-page .brtm-cv-location-bubble { padding: 4px 4px 0; min-width: 210px; } .brtm-chat-page .brtm-cv-location-map { width: 100%; border-radius: 8px; overflow: hidden; background: #e8f0fe; min-height: 100px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: filter .15s; } .brtm-chat-page .brtm-cv-location-map:hover { filter: brightness(.93); } .brtm-chat-page .brtm-cv-location-map i { font-size: 36px; color: #b91c1c; } .brtm-chat-page .brtm-cv-location-info { padding: 6px 8px 2px; font-size: 12px; display: flex; align-items: flex-end; justify-content: space-between; } .brtm-chat-page .brtm-cv-location-action { font-size: 12.5px; font-weight: 600; text-align: center; cursor: pointer; color: var(--primary); padding: 9px 8px; border-top: 1px solid rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .12s; } .brtm-chat-page .brtm-cv-location-action:hover { background: rgba(0,0,0,.04); } /* Carousel */ .brtm-chat-page .brtm-cv-carousel-wrap { max-width: 480px; } .brtm-chat-page .brtm-cv-carousel-label { font-size: 11px; font-weight: 700; color: #8a9ab0; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; padding: 0 2px; } .brtm-chat-page .brtm-cv-carousel-track { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .brtm-chat-page .brtm-cv-carousel-track::-webkit-scrollbar { height: 3px; } .brtm-chat-page .brtm-cv-carousel-track::-webkit-scrollbar-thumb { background: #d0d8e8; border-radius: 3px; } .brtm-chat-page .brtm-cv-carousel-card { min-width: 190px; background: white; border-radius: 10px; border: 1px solid #e3e8ef; overflow: hidden; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); } .brtm-chat-page .brtm-cv-carousel-card-img { width: 100%; height: 90px; background: #eef2fb; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #8a9ab0; } .brtm-chat-page .brtm-cv-carousel-card-body { padding: 8px; } .brtm-chat-page .brtm-cv-carousel-card-title { font-size: 12px; font-weight: 700; color: #1a2234; margin-bottom: 2px; } .brtm-chat-page .brtm-cv-carousel-card-desc { font-size: 11px; color: #8a9ab0; margin-bottom: 6px; } .brtm-chat-page .brtm-cv-carousel-card-btn { width: 100%; padding: 5px; border: 1px solid var(--primary); border-radius: 6px; background: none; color: var(--primary); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; } /* Order (WA Catalog) */ .brtm-chat-page .brtm-cv-order-bubble { padding: 10px 14px; min-width: 220px; } .brtm-chat-page .brtm-cv-order-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; display: flex; align-items: center; gap: 5px; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-order-header { color: #5a7396; } .brtm-chat-page .brtm-cv-bubble.brtm-incoming .brtm-cv-order-header { color: #8a9ab0; } .brtm-chat-page .brtm-cv-order-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,.07); } .brtm-chat-page .brtm-cv-order-item:last-of-type { border-bottom: none; } .brtm-chat-page .brtm-cv-order-img { width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0; background: rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; font-size: 18px; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-order-img { background: rgba(27,111,190,.1); } .brtm-chat-page .brtm-cv-order-item-name { font-size: 12px; font-weight: 600; } .brtm-chat-page .brtm-cv-order-item-price { font-size: 11px; opacity: .7; } .brtm-chat-page .brtm-cv-order-total { padding-top: 8px; margin-top: 4px; border-top: 1px solid rgba(0,0,0,.1); display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; } /* Error / unsupported */ .brtm-chat-page .brtm-cv-error-bubble { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #f9fafb; border: 1.5px dashed #d1d5db; color: #9ca3af; font-size: 12px; font-style: italic; border-radius: 10px; max-width: 260px; } .brtm-chat-page .brtm-cv-error-bubble i { font-size: 18px; flex-shrink: 0; } /* System notification variants (status 5) */ .brtm-chat-page .brtm-cv-system-note.brtm-sys-blocked { background: #fee2e2; color: #b91c1c; } .brtm-chat-page .brtm-cv-system-note.brtm-sys-unblocked { background: #dcfce7; color: #16a34a; } /* Sticker */ .brtm-chat-page .brtm-cv-sticker { font-size: 72px; background: transparent; box-shadow: none; border: none; padding: 8px; line-height: 1; } /* ── MESSAGE STATUS ICONS ── */ .brtm-chat-page .brtm-msg-status { font-size: 13px; } .brtm-chat-page .brtm-status-pending { color: #a0aab8; } .brtm-chat-page .brtm-status-sent { color: #a0aab8; } .brtm-chat-page .brtm-status-delivered { color: #a0aab8; } .brtm-chat-page .brtm-status-read { color: var(--primary); } .brtm-chat-page .brtm-status-failed { color: #dc2626; } .brtm-chat-page .brtm-status-expired { color: #d97706; } /* Bubble tint overrides for failed/expired */ .brtm-chat-page .brtm-cv-bubble.brtm-bubble-failed { background: #fff1f1; border: 1px solid #fecaca; } .brtm-chat-page .brtm-cv-bubble.brtm-bubble-failed::after { border-left-color: #fff1f1; } .brtm-chat-page .brtm-cv-bubble.brtm-bubble-expired { background: #fffbeb; border: 1px solid #fde68a; } .brtm-chat-page .brtm-cv-bubble.brtm-bubble-expired::after { border-left-color: #fffbeb; } .brtm-chat-page .brtm-meta-failed { color: #dc2626; } .brtm-chat-page .brtm-meta-expired { color: #d97706; } /* Popover rows */ .brtm-status-pop-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .brtm-status-pop-row { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; font-size: 12px; color: #1a2234; } .brtm-status-pop-row:last-child { border-bottom: none; } .brtm-status-pop-row .brtm-pop-icon { width: 18px; flex-shrink: 0; text-align: center; } .brtm-status-pop-row .brtm-pop-label { color: #8a9ab0; width: 72px; flex-shrink: 0; } .brtm-status-pop-row .brtm-pop-val { flex: 1; } .brtm-status-pop-row.brtm-pop-empty .brtm-pop-val { color: #c0cad8; } .brtm-status-pop-row.brtm-pop-error .brtm-pop-val { color: #dc2626; font-weight: 600; } .brtm-status-pop-row.brtm-pop-expired .brtm-pop-val { color: #d97706; font-weight: 600; } .brtm-status-pop-tip { margin-top: 8px; padding: 6px 10px; border-radius: 8px; font-size: 11px; display: flex; align-items: flex-start; gap: 6px; } .brtm-status-pop-tip.brtm-tip-error { background: #fff1f1; color: #b91c1c; } .brtm-status-pop-tip.brtm-tip-expired { background: #fffbeb; color: #b45309; } /* ── CHAT ITEM CONTEXT MENU ── */ .brtm-ctx-menu { background: white; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08); padding: 6px; min-width: 210px; font-family: var(--brtm-font-ui); font-size: 13px; overflow: hidden; animation: ctxFadeIn .12s ease; } @keyframes ctxFadeIn { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } } .brtm-ctx-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; cursor: pointer; color: #1a2234; transition: background .12s; white-space: nowrap; } .brtm-ctx-item:hover { background: #f0f4ff; color: var(--primary); } .brtm-ctx-item i { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; color: #8a9ab0; } .brtm-ctx-item:hover i { color: var(--primary); } .brtm-ctx-item-danger { color: #dc2626; } .brtm-ctx-item-danger i { color: #dc2626; } .brtm-ctx-item-danger:hover { background: #fff1f1; color: #b91c1c; } .brtm-ctx-item-danger:hover i { color: #b91c1c; } .brtm-ctx-divider { height: 1px; background: #f0f0f0; margin: 4px 0; } /* ── BUBBLE CONTEXT MENU ── */ .brtm-bubble-ctx { background: #ffffff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08); overflow: hidden; font-family: var(--brtm-font-ui); font-size: 13px; min-width: 210px; animation: ctxFadeIn .12s ease; } .brtm-bubble-ctx-emojis { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #f0f0f0; } .brtm-bubble-ctx-emoji { font-size: 22px; cursor: pointer; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .12s, transform .12s; line-height: 1; } .brtm-bubble-ctx-emoji:hover { background: #f0f4ff; transform: scale(1.25); } .brtm-bubble-ctx-emoji-more { font-size: 17px; color: #8a9ab0; cursor: pointer; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .12s, color .12s; } .brtm-bubble-ctx-emoji-more:hover { background: #f0f4ff; color: var(--primary); } .brtm-bubble-ctx-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; color: #1a2234; transition: background .12s; white-space: nowrap; } .brtm-bubble-ctx-item:hover { background: #f0f4ff; color: var(--primary); } .brtm-bubble-ctx-item i { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; color: #8a9ab0; } .brtm-bubble-ctx-item:hover i { color: var(--primary); } .brtm-bubble-ctx-item-danger { color: #dc2626; } .brtm-bubble-ctx-item-danger i { color: #dc2626; } .brtm-bubble-ctx-item-danger:hover { background: #fff1f1; color: #b91c1c; } .brtm-bubble-ctx-item-danger:hover i { color: #b91c1c; } .brtm-bubble-ctx-divider { height: 1px; background: #f0f0f0; } /* ── MULTI-SELECT MODE ── */ .brtm-chat-page.brtm-select-mode .brtm-cv-msg { cursor: pointer; user-select: none; padding-left: 44px; position: relative; transition: background .12s; } .brtm-chat-page.brtm-select-mode .brtm-cv-msg.brtm-outgoing { padding-left: 0; padding-right: 44px; } /* hide hover action buttons in select mode */ .brtm-chat-page.brtm-select-mode .brtm-bubble-chevron-wrap, .brtm-chat-page.brtm-select-mode .brtm-cv-msg-outside-actions { display: none !important; } /* checkbox circle */ .brtm-chat-page.brtm-select-mode .brtm-cv-msg::before { content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c0cad8; background: white; transition: all .15s; z-index: 2; } .brtm-chat-page.brtm-select-mode .brtm-cv-msg.brtm-outgoing::before { left: auto; right: 10px; } /* selected state */ .brtm-chat-page.brtm-select-mode .brtm-cv-msg.brtm-msg-selected::before { background: var(--primary); border-color: var(--primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E"); background-size: 14px; background-repeat: no-repeat; background-position: center; } .brtm-chat-page.brtm-select-mode .brtm-cv-msg.brtm-msg-selected { background: rgba(27,111,190,.07); border-radius: 8px; } /* Multi-select bottom action bar */ .brtm-multiselect-bar { display: none; position: absolute; top: 0; left: 0; right: 0; z-index: 50; background: white; border-bottom: 1px solid #e2e8f0; box-shadow: 0 4px 16px rgba(0,0,0,.08); padding: 10px 20px; align-items: center; justify-content: space-between; font-family: var(--brtm-font-ui); animation: ctxFadeIn .15s ease; } .brtm-multiselect-bar.brtm-open { display: flex; } .brtm-multiselect-bar-left { display: flex; align-items: center; gap: 12px; } .brtm-multiselect-bar-count { font-size: 14px; font-weight: 600; color: #1a2234; } .brtm-multiselect-bar-hint { font-size: 12px; color: #8a9ab0; } .brtm-multiselect-bar-close { background: none; border: none; cursor: pointer; color: #8a9ab0; font-size: 20px; display: flex; align-items: center; padding: 0; } .brtm-multiselect-bar-close:hover { color: #1a2234; } .brtm-multiselect-bar-actions { display: flex; gap: 8px; } .brtm-multiselect-bar-actions button { display: flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 8px; border: none; font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--brtm-font-ui); transition: opacity .12s; } .brtm-multiselect-bar-actions button:hover { opacity: .82; } .brtm-msbar-btn-fwd { background: var(--primary); color: white; } .brtm-msbar-btn-del { background: #fff1f1; color: #dc2626; } .brtm-msbar-btn-copy { background: #f0f4ff; color: #1a2234; } .brtm-chat-page .brtm-cv-reply-quote { display: flex; border-left: 3px solid var(--primary); background: rgba(0,0,0,.06); border-radius: 6px; padding: 6px 10px; margin-bottom: 6px; gap: 8px; cursor: pointer; overflow: hidden; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-reply-quote { border-left-color: var(--primary); background: rgba(27,111,190,.1); } .brtm-chat-page .brtm-cv-reply-quote-thumb { width: 36px; height: 36px; border-radius: 4px; flex-shrink: 0; background: rgba(0,0,0,.1); display: flex; align-items: center; justify-content: center; font-size: 18px; overflow: hidden; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-reply-quote-thumb { background: rgba(27,111,190,.1); } .brtm-chat-page .brtm-cv-reply-quote-body { flex: 1; min-width: 0; } .brtm-chat-page .brtm-cv-reply-quote-author { font-size: 11px; font-weight: 700; color: var(--primary); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-reply-quote-author { color: var(--primary); } .brtm-chat-page .brtm-cv-reply-quote-text { font-size: 12px; color: #5a7396; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-reply-quote-text { color: #5a7396; } /* ── FORWARD LABEL ── */ .brtm-chat-page .brtm-cv-forward-label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #8a9ab0; font-style: italic; margin-bottom: 4px; } /* forward label inside outgoing bubble */ .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-forward-label { color: #5a7396; } /* forward label outside bubble (on msg-body, for non-text types) */ .brtm-chat-page .brtm-cv-msg.brtm-outgoing .brtm-cv-msg-body > .brtm-cv-forward-label { justify-content: flex-end; } .brtm-chat-page .brtm-cv-forward-label i { font-size: 12px; } /* ── PROFILE PANEL ── */ /* ─── §13f · Profile Panel ─── */ .brtm-chat-page .brtm-profile-panel { width: 300px; min-width: 300px; max-width: 440px; background: white; border-left: 1px solid var(--border); display: flex; flex-direction: column; height: calc(100vh - 56px); overflow: hidden; flex-shrink: 0; position: relative; } .brtm-chat-page .brtm-profile-panel::-webkit-scrollbar { width: 4px; } .brtm-chat-page .brtm-profile-panel::-webkit-scrollbar-thumb { background: #d0d8e8; border-radius: 4px; } .brtm-chat-page .brtm-pp-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; } .brtm-chat-page .brtm-pp-body::-webkit-scrollbar { width: 4px; } .brtm-chat-page .brtm-pp-body::-webkit-scrollbar-thumb { background: #d0d8e8; border-radius: 4px; } /* Profile panel resize handle (left side) */ .brtm-chat-page .brtm-pp-resize-handle { position: absolute; top: 0; left: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 10; display: flex; align-items: center; justify-content: center; } .brtm-chat-page .brtm-pp-resize-handle::after { content: ''; width: 3px; height: 40px; background: #d0d8e8; border-radius: 3px; transition: background .15s, height .15s; } .brtm-chat-page .brtm-pp-resize-handle:hover::after, .brtm-chat-page .brtm-pp-resize-handle.brtm-dragging::after { background: var(--primary); height: 60px; } .brtm-chat-page .brtm-pp-header { padding: 10px 16px; min-height: 48px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); flex-shrink: 0; box-sizing: border-box; position: sticky; top: 0; background: white; z-index: 2; } .brtm-chat-page .brtm-pp-header span { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--tx-1); text-transform: none; letter-spacing: -0.01em; } .brtm-chat-page .brtm-pp-close { width: 28px; height: 28px; border-radius: 7px; border: none; background: none; color: #8a9ab0; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; } .brtm-chat-page .brtm-pp-close:hover { background: #f0f4ff; color: var(--primary); } /* Profile hero */ .brtm-chat-page .brtm-pp-hero { display: flex; flex-direction: column; align-items: center; padding: 16px 16px 12px; border-bottom: 1px solid var(--border); gap: 0; } .brtm-chat-page .brtm-pp-hero-top { display: none; } .brtm-chat-page .brtm-pp-big-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #2284C6, #63b3ed); color: white; font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(34,132,198,.25); margin-bottom: 8px; } .brtm-chat-page .brtm-pp-hero-info { display: contents; } .brtm-chat-page .brtm-pp-name { font-size: 14px; font-weight: 700; color: #1a2234; margin-bottom: 4px; text-align: center; } .brtm-chat-page .brtm-pp-hero-phone { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; } .brtm-chat-page .brtm-pp-hero-phone-num { font-size: 12px; color: #4a5568; font-weight: 500; } .brtm-chat-page .brtm-pp-channel { font-size: 11.5px; color: #8a9ab0; display: flex; align-items: center; gap: 4px; margin-bottom: 10px; } .brtm-chat-page .brtm-pp-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .brtm-chat-page .brtm-pp-hero-phone { display: flex; align-items: center; gap: 5px; } .brtm-chat-page .brtm-pp-hero-phone-num { font-size: 12px; color: #4a5568; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brtm-chat-page .brtm-pp-channel { font-size: 11.5px; color: #8a9ab0; display: flex; align-items: center; gap: 4px; } .brtm-chat-page .brtm-pp-badges { display: flex; gap: 6px; flex-wrap: wrap; } /* Section */ .brtm-chat-page .brtm-pp-section { border-bottom: 1px solid var(--border); } .brtm-chat-page .brtm-pp-section-header { padding: 12px 16px 8px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; } .brtm-chat-page .brtm-pp-section-header:hover { background: #fafbfd; } .brtm-chat-page .brtm-pp-section-title { font-size: 11px; font-weight: 700; color: #8a9ab0; text-transform: uppercase; letter-spacing: .6px; } .brtm-chat-page .brtm-pp-section-toggle { font-size: 16px; color: #b0bac8; transition: transform .2s; } .brtm-chat-page .brtm-pp-section-toggle.brtm-open { transform: rotate(180deg); } .brtm-chat-page .brtm-pp-section-body { padding: 0 16px 14px; } /* Info row */ .brtm-chat-page .brtm-pp-info-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; } .brtm-chat-page .brtm-pp-info-icon { width: 28px; height: 28px; border-radius: 7px; background: #f0f4ff; color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; margin-top: 1px; } .brtm-chat-page .brtm-pp-info-content { flex: 1; min-width: 0; } .brtm-chat-page .brtm-pp-info-label { font-size: 11px; color: #a0aab8; margin-bottom: 1px; } .brtm-chat-page .brtm-pp-info-value { font-size: 13px; font-weight: 500; color: #1a2234; word-break: break-word; } .brtm-chat-page .brtm-pp-info-value a { color: var(--primary); text-decoration: none; } .brtm-chat-page .brtm-pp-info-value a:hover { text-decoration: underline; } /* Assign row */ .brtm-chat-page .brtm-pp-assign-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; } .brtm-chat-page .brtm-pp-assign-label { font-size: 12.5px; color: #1a2234; font-weight: 500; } .brtm-chat-page .brtm-pp-assign-val { font-size: 12px; color: #8a9ab0; display: flex; align-items: center; gap: 5px; } .brtm-chat-page .brtm-pp-assign-val .brtm-dot-unassigned { width: 8px; height: 8px; border-radius: 50%; background: #d0d8e8; } .brtm-chat-page .brtm-pp-assign-btn { font-size: 11.5px; color: var(--primary); background: none; border: 1px solid #c7d8f5; border-radius: 6px; padding: 3px 9px; cursor: pointer; font-family: var(--brtm-font-ui); transition: all .15s; } .brtm-chat-page .brtm-pp-assign-btn:hover { background: #e8f3ff; } /* Notes */ .brtm-chat-page .brtm-pp-note-input { width: 100%; border: 1.5px solid #e3e8ef; border-radius: 8px; padding: 8px 10px; font-size: 12px; font-family: var(--brtm-font-ui); color: #1a2234; resize: none; outline: none; min-height: 68px; transition: border-color .15s; } .brtm-chat-page .brtm-pp-note-input:focus { border-color: var(--primary); } .brtm-chat-page .brtm-pp-note-input::placeholder { color: #b0bac8; } .brtm-chat-page .brtm-pp-note-save { margin-top: 6px; width: 100%; background: var(--primary); color: white; border: none; border-radius: 8px; padding: 7px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--brtm-font-ui); transition: background .15s; } .brtm-chat-page .brtm-pp-note-save:hover { background: #1a6ea8; } /* ── Hero meta rows (phone/channel/bot/room id) ── */ .brtm-chat-page .brtm-pp-hero-meta-row { display: none; } .brtm-chat-page .brtm-pp-hero-meta-text { display: none; } /* Channel (WA account) card — small green chip below phone */ .brtm-chat-page .brtm-pp-channel-card { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px; padding: 3px 10px 3px 7px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 20px; width: auto; box-sizing: border-box; } .brtm-chat-page .brtm-pp-channel-card-icon { color: #16a34a; font-size: 13px; line-height: 1; display: flex; align-items: center; } .brtm-chat-page .brtm-pp-channel-card-info { display: flex; flex-direction: column; } .brtm-chat-page .brtm-pp-channel-card-title { font-size: 11.5px; font-weight: 600; color: #15803d; } .brtm-chat-page .brtm-pp-channel-card-sub { display: none; } .brtm-chat-page .brtm-pp-bot-card { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 7px 10px; background: #f5f0ff; border: 1.5px solid #e9d5ff; border-radius: 8px; gap: 10px; width: 100%; box-sizing: border-box; } .brtm-chat-page .brtm-pp-bot-card-left { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; } .brtm-chat-page .brtm-pp-bot-card-icon { width: 32px; height: 32px; border-radius: 8px; background: #ede9fe; color: #7c3aed; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .brtm-chat-page .brtm-pp-bot-card-info { display: flex; flex-direction: column; gap: 2px; } .brtm-chat-page .brtm-pp-bot-card-title { font-size: 12.5px; font-weight: 600; color: #1a2234; } .brtm-chat-page .brtm-pp-bot-card-status { font-size: 11px; color: #7c3aed; display: flex; align-items: center; gap: 4px; } .brtm-chat-page .brtm-pp-bot-card-status.brtm-bot-off { color: #94a3b8; } .brtm-chat-page .brtm-pp-bot-sdot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .brtm-chat-page .brtm-pp-bot-sdot--on { background: #22c55e; } .brtm-chat-page .brtm-pp-bot-sdot--off { background: #94a3b8; } /* Channel (WA account) — small green pill chip */ .brtm-chat-page .brtm-pp-channel-card { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px; padding: 3px 10px 3px 6px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 20px; } .brtm-chat-page .brtm-pp-channel-card-icon { color: #16a34a; font-size: 13px; display: flex; align-items: center; } .brtm-chat-page .brtm-pp-channel-card-info { display: contents; } .brtm-chat-page .brtm-pp-channel-card-title { font-size: 11.5px; font-weight: 600; color: #15803d; } .brtm-chat-page .brtm-pp-channel-card-sub { display: none; } .brtm-chat-page .brtm-pp-roomid-bar { display: flex; align-items: center; gap: 6px; margin-top: 0; padding: 5px 9px; background: #f8fbff; border: 1.5px solid #e3e8ef; border-radius: 8px; width: 100%; box-sizing: border-box; } .brtm-chat-page .brtm-pp-roomid-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; } .brtm-chat-page .brtm-pp-roomid-lbl { font-size: 10.5px; font-weight: 700; color: #a0aab8; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; } .brtm-chat-page .brtm-pp-roomid-val { font-size: 12px; font-weight: 600; color: #1a2234; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brtm-chat-page .brtm-pp-copylink-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 10px; border-radius: 6px; border: 1.5px solid #e3e8ef; background: #fff; font-size: 11.5px; color: #4a5568; cursor: pointer; font-family: inherit; font-weight: 500; white-space: nowrap; flex: 1; width: 100%; transition: border-color .15s, color .15s; } .brtm-chat-page .brtm-pp-copylink-btn:hover { border-color: var(--primary); color: var(--primary); } /* ── Info tip button ── */ .brtm-chat-page .brtm-pp-tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #c7d3e8; background: #f0f4ff; color: #6b7fa8; font-size: 9.5px; font-weight: 700; cursor: default; flex-shrink: 0; line-height: 1; position: relative; font-family: inherit; transition: border-color .15s, color .15s, background .15s; pointer-events: auto; } .brtm-chat-page .brtm-pp-tip:hover { border-color: var(--primary); color: var(--primary); background: #ddeaff; } /* ── CRM Records rows ── */ .brtm-chat-page .brtm-pp-crm-row { border-bottom: 1px solid #f1f5f9; } .brtm-chat-page .brtm-pp-crm-create, .brtm-chat-page .brtm-pp-crm-linked { display: flex; align-items: center; gap: 10px; padding: 10px 16px; } .brtm-chat-page .brtm-pp-crm-icon { width: 30px; height: 30px; border-radius: 8px; background: #f0f4ff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; } .brtm-chat-page .brtm-pp-crm-label { font-size: 12.5px; font-weight: 600; color: #1a2234; flex: 1; } .brtm-chat-page .brtm-pp-crm-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; border: 1.5px dashed #c8d5e0; background: transparent; font-size: 11.5px; color: #8a9ab0; cursor: pointer; font-family: inherit; font-weight: 500; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; } .brtm-chat-page .brtm-pp-crm-btn:hover { border-color: var(--primary); color: var(--primary); background: #eff6ff; } .brtm-chat-page .brtm-pp-crm-linked-info { flex: 1; min-width: 0; } .brtm-chat-page .brtm-pp-crm-linked-name { font-size: 11.5px; color: #5a7396; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brtm-chat-page .brtm-pp-crm-open-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; border: 1.5px solid #c7d8f5; background: #eff6ff; font-size: 11.5px; color: var(--primary); cursor: pointer; font-family: inherit; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s; } .brtm-chat-page .brtm-pp-crm-open-btn:hover { background: #dbeafe; border-color: var(--primary); } /* ── Escalation badge ── */ .brtm-chat-page .brtm-pp-escal-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: #ea580c; background: #fff7ed; border: 1.5px solid #fed7aa; border-radius: 20px; padding: 2px 9px; } /* ── Tags chips in pp ── */ .brtm-chat-page .brtm-pp-tags-chips { display: flex; flex-wrap: wrap; gap: 6px; } .brtm-chat-page .brtm-pp-tags-add-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; border: 1.5px dashed #c8d5e0; background: transparent; font-size: 11px; color: #8a9ab0; cursor: pointer; font-family: inherit; transition: border-color .15s, color .15s; } .brtm-chat-page .brtm-pp-tags-add-btn:hover { border-color: var(--primary); color: var(--primary); } .brtm-chat-page .brtm-pp-tag-remove { background: none; border: none; padding: 0 0 0 3px; cursor: pointer; color: inherit; opacity: .6; display: inline-flex; align-items: center; font-size: 10px; } .brtm-chat-page .brtm-pp-tag-remove:hover { opacity: 1; } /* ── Bookmark Bubble ── */ .brtm-chat-page .brtm-pp-bookmark-item { display: flex; align-items: flex-start; gap: 9px; padding: 9px 16px; border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background .1s; } .brtm-chat-page .brtm-pp-bookmark-item:last-child { border-bottom: none; } .brtm-chat-page .brtm-pp-bookmark-item:hover { background: #f8fbff; } .brtm-chat-page .brtm-pp-bookmark-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-50); color: var(--brand); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .brtm-chat-page .brtm-pp-bookmark-avatar--agent { background: linear-gradient(135deg,#2284C6,#42a5f5); color: #fff; } .brtm-chat-page .brtm-pp-bookmark-content { flex: 1; min-width: 0; } .brtm-chat-page .brtm-pp-bookmark-text { font-size: 12px; color: #1a2234; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brtm-chat-page .brtm-pp-bookmark-meta { font-size: 11px; color: #a0aab8; margin-top: 2px; } .brtm-chat-page .brtm-pp-bookmark-del { background: none; border: none; cursor: pointer; color: #c0cad8; font-size: 14px; padding: 2px; flex-shrink: 0; transition: color .12s; } .brtm-chat-page .brtm-pp-bookmark-del:hover { color: #dc2626; } /* ── Sublabel (used in bot log section) ── */ .brtm-chat-page .brtm-pp-sublabel { font-size: 10.5px; font-weight: 700; color: #8a9ab0; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; } /* ── Bot Log ── */ .brtm-chat-page .brtm-pp-botlog { display: flex; flex-direction: column; gap: 0; } .brtm-chat-page .brtm-pp-botlog-item { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; border-bottom: 1px solid #f4f6fb; } .brtm-chat-page .brtm-pp-botlog-item:last-child { border-bottom: none; } .brtm-chat-page .brtm-pp-botlog-dot { width: 8px; height: 8px; border-radius: 50%; background: #d0d8e8; flex-shrink: 0; margin-top: 4px; } .brtm-chat-page .brtm-pp-botlog-content { flex: 1; min-width: 0; } .brtm-chat-page .brtm-pp-botlog-text { font-size: 12px; font-weight: 500; color: #1a2234; } .brtm-chat-page .brtm-pp-botlog-time { font-size: 11px; color: #a0aab8; margin-top: 1px; } /* ── Footer actions ── */ .brtm-chat-page .brtm-pp-footer-actions { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 16px; border-top: 1px solid #f1f5f9; background: var(--bg-app); margin-top: 4px; } .brtm-chat-page .brtm-pp-footer-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border-radius: 8px; border: 1.5px solid #e3e8ef; background: #fff; font-size: 12px; font-weight: 600; color: #4a5568; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s, color .15s; } .brtm-chat-page .brtm-pp-footer-btn:hover { border-color: #a0aab8; background: #f8fafc; } .brtm-chat-page .brtm-pp-footer-btn--danger { color: #dc2626; border-color: #fecaca; background: #fff5f5; } .brtm-chat-page .brtm-pp-footer-btn--danger:hover { border-color: #dc2626; background: #fee2e2; } /* Conversation history mini list */ .brtm-chat-page .brtm-pp-conv-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f4f6fb; cursor: pointer; } .brtm-chat-page .brtm-pp-conv-item:last-child { border-bottom: none; } .brtm-chat-page .brtm-pp-conv-icon { width: 28px; height: 28px; border-radius: 7px; background: #e8f3ff; color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .brtm-chat-page .brtm-pp-conv-info { flex: 1; min-width: 0; } .brtm-chat-page .brtm-pp-conv-title { font-size: 12px; font-weight: 600; color: #1a2234; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-chat-page .brtm-pp-conv-date { font-size: 11px; color: #a0aab8; } .brtm-chat-page .brtm-pp-conv-badge { font-size: 10px; font-weight: 600; border-radius: 20px; padding: 2px 8px; } /* ─── pp-conv-item hover ─── */ .brtm-chat-page .brtm-pp-conv-item:hover { background: #f4f7fd; border-radius: 8px; } /* tag-orange */ .brtm-chat-page .brtm-tag-orange { background: #fff3e0; color: #e65100; } .brtm-chat-page .brtm-tag-purple { background: #f3e8ff; color: #7c3aed; } /* ── UNREAD state ── */ .brtm-chat-page .brtm-chat-item.brtm-unread { background: transparent; } .brtm-chat-page .brtm-chat-item.brtm-unread .brtm-chat-name { color: #0f172a; } .brtm-chat-page .brtm-chat-item.brtm-unread .brtm-chat-msg { color: #1a2234; font-weight: 500; } .brtm-chat-page .brtm-chat-item.brtm-unread:hover { background: var(--bg-hover); } /* Unread badge */ .brtm-chat-page .brtm-unread-badge { min-width: 18px; height: 18px; background: var(--primary); color: white; border-radius: 20px; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; } /* Unread dot (marked as unread manually) */ .brtm-chat-page .brtm-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; display: inline-block; } /* ── PINNED state ── */ .brtm-chat-page .brtm-chat-item.brtm-pinned { background: transparent; } .brtm-chat-page .brtm-chat-item.brtm-pinned:hover { background: var(--bg-hover); } .brtm-chat-page .brtm-pin-icon { font-size: 11px; color: #f59e0b; flex-shrink: 0; } /* ── SLA timer ── */ /* icon jam jadi trigger — tooltip dihandle JS */ .brtm-chat-page .brtm-avatar-status.brtm-sla-trigger { cursor: default; } /* sla-chip class kept for potential future use but hidden */ .brtm-chat-page .brtm-sla-chip { display: none; } /* ── Tags overflow ── */ .brtm-chat-page .brtm-tags-row { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; min-width: 0; } .brtm-chat-page .brtm-tag-more { font-size: 10px; font-weight: 600; color: #8a9ab0; background: #f1f5f9; border-radius: 20px; padding: 2px 7px; white-space: nowrap; flex-shrink: 0; cursor: pointer; } /* JS-powered tag tooltip popup */ .brtm-tag-popup { position: fixed; background: white; border: 1px solid #e3e8ef; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.13); padding: 8px 10px; z-index: 99999; pointer-events: none; opacity: 0; transition: opacity .12s; min-width: 130px; } .brtm-tag-popup.brtm-visible { opacity: 1; } .brtm-tag-popup-label { font-size: 10px; font-weight: 700; color: #a0aab8; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; } .brtm-tag-popup-chips { display: flex; flex-direction: column; gap: 4px; } /* SLA JS tooltip */ .brtm-sla-tooltip { position: fixed; background: #1e293b; color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 7px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 99999; box-shadow: 0 4px 10px rgba(0,0,0,.2); font-family: var(--brtm-font-ui); } .brtm-sla-tooltip.brtm-visible { opacity: 1; } .brtm-sla-tooltip.brtm-sla-ok { background: #15803d; } .brtm-sla-tooltip.brtm-sla-warn { background: #b45309; } .brtm-sla-tooltip.brtm-sla-breach { background: #b91c1c; } /* ── Message type previews ── */ .brtm-chat-page .brtm-msg-type-icon { font-size: 12px; margin-right: 3px; flex-shrink: 0; } .brtm-chat-page .brtm-msg-type-icon.brtm-type-img { color: #0ea5e9; } .brtm-chat-page .brtm-msg-type-icon.brtm-type-file { color: #6366f1; } .brtm-chat-page .brtm-msg-type-icon.brtm-type-voice { color: #10b981; } .brtm-chat-page .brtm-msg-type-icon.brtm-type-video { color: #f59e0b; } .brtm-chat-page .brtm-msg-type-icon.brtm-type-loc { color: #ef4444; } /* ── Section label with scenario note ── */ .brtm-chat-page .brtm-scenario-label { display: none; } .brtm-chat-page .brtm-scenario-label::before { display: none; } /* ─── MORE MENU ─── */ /* ─── §13g · Menus, Modals & Extras ─── */ .brtm-chat-page .brtm-more-menu { position: absolute; top: calc(100% + 6px); right: 0; background: white; border: 1px solid #e3e8ef; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 180px; z-index: 200; padding: 4px 0; display: none; } .brtm-chat-page .brtm-more-menu.brtm-open { display: block; } .brtm-chat-page .brtm-more-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 16px; background: none; border: none; font-size: 12.5px; font-family: var(--brtm-font-ui); color: #1a2234; cursor: pointer; text-align: left; transition: background .12s; } .brtm-chat-page .brtm-more-menu-item:hover { background: #f4f7fd; } .brtm-chat-page .brtm-more-menu-item i { font-size: 16px; color: #8a9ab0; } .brtm-chat-page .brtm-more-menu-item.brtm-danger { color: #e53935; } .brtm-chat-page .brtm-more-menu-item.brtm-danger i { color: #e53935; } .brtm-chat-page .brtm-more-menu-item.brtm-danger:hover { background: #fff5f5; } .brtm-chat-page .brtm-more-menu-divider { height: 1px; background: #f0f3f8; margin: 4px 0; } /* ─── FILTER DROPDOWN ─── */ .brtm-chat-page .brtm-filter-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: white; border: 1px solid #e3e8ef; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 220px; z-index: 200; padding: 12px 0 6px; display: none; } .brtm-chat-page .brtm-filter-dropdown.brtm-open { display: block; } .brtm-chat-page .brtm-filter-dropdown-title { font-size: 10.5px; font-weight: 700; color: #8a9ab0; text-transform: uppercase; letter-spacing: .6px; padding: 2px 14px 6px; } .brtm-chat-page .brtm-filter-option { display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 12.5px; color: #1a2234; cursor: pointer; transition: background .1s; } .brtm-chat-page .brtm-filter-option:hover { background: #f4f7fd; } .brtm-chat-page .brtm-filter-option input[type=checkbox] { accent-color: var(--primary); width: 14px; height: 14px; } .brtm-chat-page .brtm-filter-divider { height: 1px; background: #f0f3f8; margin: 6px 0; } .brtm-chat-page .brtm-filter-actions { display: flex; gap: 8px; padding: 8px 12px 4px; } .brtm-chat-page .brtm-filter-reset { flex: 1; padding: 6px; border-radius: 7px; border: 1px solid #e3e8ef; background: white; font-size: 12px; font-family: var(--brtm-font-ui); color: #555; cursor: pointer; } .brtm-chat-page .brtm-filter-reset:hover { background: #f4f7fd; } .brtm-chat-page .brtm-filter-apply { flex: 1; padding: 6px; border-radius: 7px; border: none; background: var(--primary); font-size: 12px; font-family: var(--brtm-font-ui); color: white; cursor: pointer; font-weight: 600; } .brtm-chat-page .brtm-filter-apply:hover { background: var(--primary-dark); } .brtm-chat-page .brtm-status-tabs { position: relative; } /* ─── EMOJI PICKER ─── */ .brtm-chat-page .brtm-emoji-picker { position: absolute; bottom: calc(100% + 8px); left: 0; background: white; border: 1px solid #e3e8ef; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); width: 280px; padding: 10px; z-index: 200; display: none; } .brtm-chat-page .brtm-emoji-picker.brtm-open { display: block; } .brtm-chat-page .brtm-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; } .brtm-chat-page .brtm-emoji-btn { font-size: 22px; padding: 4px; background: none; border: none; cursor: pointer; border-radius: 6px; transition: background .1s; line-height: 1; } .brtm-chat-page .brtm-emoji-btn:hover { background: #f0f4ff; } /* ─── TEMPLATE PANEL ─── */ /* ── ATTACH + DROPDOWN ── */ .brtm-chat-page .brtm-attach-dropdown-wrap { position: relative; display: flex; align-items: center; } .brtm-chat-page .brtm-attach-dropdown { position: absolute; bottom: calc(100% + 8px); left: 0; background: white; border: 1px solid #e3e8ef; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.07); min-width: 180px; z-index: 200; padding: 4px; display: none; font-family: var(--brtm-font-ui); animation: ctxFadeIn .12s ease; } .brtm-chat-page .brtm-attach-dropdown.brtm-open { display: block; } .brtm-chat-page .brtm-attach-dd-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 12px; font-weight: 500; color: #1a2234; cursor: pointer; border-radius: 8px; transition: background .12s; white-space: nowrap; } .brtm-chat-page .brtm-attach-dd-item:hover { background: #f5f7ff; } .brtm-chat-page .brtm-attach-dd-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; } .brtm-chat-page .brtm-attach-dd-item i { font-size: 12px; } .brtm-chat-page .brtm-attach-dd-divider { height: 1px; background: #f0f3f8; margin: 3px 2px; } .brtm-chat-page .brtm-template-panel, .brtm-chat-page .brtm-quick-reply-panel { position: absolute; bottom: calc(100% + 8px); right: 0; background: white; border: 1px solid #e3e8ef; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.13); width: 280px; z-index: 200; display: none; } .brtm-chat-page .brtm-template-panel.brtm-open, .brtm-chat-page .brtm-quick-reply-panel.brtm-open { display: block; } .brtm-chat-page .brtm-template-header { font-size: 12px; font-weight: 700; color: #8a9ab0; text-transform: uppercase; letter-spacing: .5px; padding: 10px 14px 6px; border-bottom: 1px solid #f0f3f8; } .brtm-chat-page .brtm-template-search { padding: 8px 10px; } .brtm-chat-page .brtm-template-search input { width: 100%; border: 1.5px solid #e3e8ef; border-radius: 7px; padding: 6px 10px; font-size: 12.5px; font-family: var(--brtm-font-ui); outline: none; } .brtm-chat-page .brtm-template-search input:focus { border-color: var(--primary); } .brtm-chat-page .brtm-template-list { max-height: 220px; overflow-y: auto; padding-bottom: 6px; } .brtm-chat-page .brtm-template-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f8fafc; transition: background .1s; } .brtm-chat-page .brtm-template-item:hover { background: #f4f7fd; } .brtm-chat-page .brtm-template-name { font-size: 13px; font-weight: 600; color: #1a2234; } .brtm-chat-page .brtm-template-preview { font-size: 11px; color: #8a9ab0; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brtm-chat-page .brtm-template-list::-webkit-scrollbar { width: 3px; } .brtm-chat-page .brtm-template-list::-webkit-scrollbar-thumb { background: #d0d8e8; border-radius: 3px; } /* ─── TAG PICKER ─── */ .brtm-chat-page .brtm-tag-picker { position: absolute; top: calc(100% + 6px); left: 24px; background: white; border: 1px solid #e3e8ef; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 200px; z-index: 200; padding: 6px 0; display: none; } .brtm-chat-page .brtm-tag-picker.brtm-open { display: block; } .brtm-chat-page .brtm-tag-picker-input { display: block; width: calc(100% - 16px); margin: 0 8px 6px; border: 1.5px solid #e3e8ef; border-radius: 7px; padding: 6px 10px; font-size: 12.5px; font-family: var(--brtm-font-ui); outline: none; } .brtm-chat-page .brtm-tag-picker-input:focus { border-color: var(--primary); } .brtm-chat-page .brtm-tag-picker-item { padding: 7px 12px; cursor: pointer; transition: background .1s; } .brtm-chat-page .brtm-tag-picker-item:hover { background: #f4f7fd; } .brtm-chat-page .brtm-tag-picker-create { padding: 4px 8px 6px; } .brtm-chat-page .brtm-tag-picker-create button { display: flex; align-items: center; gap: 5px; background: none; border: none; color: var(--primary); font-size: 12.5px; font-family: var(--brtm-font-ui); cursor: pointer; padding: 4px 4px; } /* ─── CHAT SEARCH BAR ─── */ .brtm-chat-page .brtm-chat-search-bar { position: fixed; top: 0; left: var(--sidebar-width); right: 0; background: white; border-bottom: 1px solid var(--border); padding: 10px 20px; display: flex; align-items: center; gap: 10px; z-index: 150; box-shadow: 0 2px 12px rgba(0,0,0,.08); } .brtm-chat-page .brtm-chat-search-bar i { color: #8a9ab0; font-size: 18px; } .brtm-chat-page .brtm-chat-search-bar input { flex: 1; border: none; outline: none; font-size: 14px; font-family: var(--brtm-font-ui); color: #1a2234; } .brtm-chat-page .brtm-chat-search-bar button { background: none; border: none; color: #8a9ab0; font-size: 20px; cursor: pointer; display: flex; align-items: center; } .brtm-chat-page .brtm-chat-search-bar button:hover { color: var(--primary); } /* ─── MODAL ─── */ .brtm-chat-page .brtm-modal-backdrop { position: fixed; inset: 0; z-index: 100; display: none; } .brtm-chat-page .brtm-modal-backdrop.brtm-active { display: block; } .brtm-chat-page .brtm-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.4); backdrop-filter: blur(2px); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; } .brtm-chat-page .brtm-modal-box { background: white; border-radius: 16px; width: 100%; max-width: 480px; box-shadow: 0 24px 64px rgba(0,0,0,.2); overflow: hidden; animation: modalIn .18s ease; } .brtm-chat-page .brtm-modal-box--sm { max-width: 380px; } @keyframes modalIn { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } .brtm-chat-page .brtm-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--border); } .brtm-chat-page .brtm-modal-title { font-size: 15px; font-weight: 700; color: #1a2234; } .brtm-chat-page .brtm-modal-close { width: 28px; height: 28px; border-radius: 7px; border: none; background: none; color: #8a9ab0; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .brtm-chat-page .brtm-modal-close:hover { background: #f0f4ff; color: var(--primary); } .brtm-chat-page .brtm-modal-body { padding: 18px 20px; background: white; display: block; min-height: unset; } .brtm-chat-page .brtm-modal-field { margin-bottom: 14px; } .brtm-chat-page .brtm-modal-field label { display: block; font-size: 12px; font-weight: 600; color: #4a5568; margin-bottom: 6px; } .brtm-chat-page .brtm-modal-input { width: 100%; border: 1.5px solid #e3e8ef; border-radius: 8px; padding: 9px 12px; font-size: 13.5px; font-family: var(--brtm-font-ui); outline: none; color: #1a2234; } .brtm-chat-page .brtm-modal-input:focus { border-color: var(--primary); } .brtm-chat-page .brtm-modal-select { width: 100%; border: 1.5px solid #e3e8ef; border-radius: 8px; padding: 9px 12px; font-size: 13.5px; font-family: var(--brtm-font-ui); outline: none; color: #1a2234; background: white; cursor: pointer; } .brtm-chat-page .brtm-modal-select:focus { border-color: var(--primary); } .brtm-chat-page .brtm-modal-textarea { width: 100%; border: 1.5px solid #e3e8ef; border-radius: 8px; padding: 9px 12px; font-size: 13.5px; font-family: var(--brtm-font-ui); outline: none; color: #1a2234; resize: none; min-height: 80px; } .brtm-chat-page .brtm-modal-textarea:focus { border-color: var(--primary); } .brtm-chat-page .brtm-modal-contact-results { margin-top: 6px; border: 1px solid #e3e8ef; border-radius: 8px; overflow: hidden; } .brtm-chat-page .brtm-modal-contact-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; transition: background .1s; } .brtm-chat-page .brtm-modal-contact-item:hover { background: #f4f7fd; } .brtm-chat-page .brtm-modal-contact-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #2284C6, #42a5f5); color: white; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-chat-page .brtm-modal-contact-name { font-size: 13px; font-weight: 600; color: #1a2234; } .brtm-chat-page .brtm-modal-contact-sub { font-size: 11.5px; color: #8a9ab0; } .brtm-chat-page .brtm-modal-footer { padding: 12px 20px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; } .brtm-chat-page .brtm-modal-btn-cancel { padding: 8px 18px; border-radius: 8px; border: 1px solid #e3e8ef; background: white; font-size: 13px; font-weight: 600; font-family: var(--brtm-font-ui); color: #555; cursor: pointer; } .brtm-chat-page .brtm-modal-btn-cancel:hover { background: #f4f7fd; } .brtm-chat-page .brtm-modal-btn-primary { padding: 8px 18px; border-radius: 8px; border: none; background: var(--primary); font-size: 13px; font-weight: 600; font-family: var(--brtm-font-ui); color: white; cursor: pointer; display: flex; align-items: center; gap: 6px; } .brtm-chat-page .brtm-modal-btn-primary:hover { background: var(--primary-dark); } /* ─── ASSIGN LIST ─── */ .brtm-chat-page .brtm-assign-list { margin-top: 10px; max-height: 240px; overflow-y: auto; } .brtm-chat-page .brtm-assign-item { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; cursor: pointer; transition: background .1s; } .brtm-chat-page .brtm-assign-item:hover { background: #f4f7fd; } .brtm-chat-page .brtm-assign-avatar { width: 34px; height: 34px; border-radius: 50%; color: white; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brtm-chat-page .brtm-assign-name { font-size: 13px; font-weight: 600; color: #1a2234; } .brtm-chat-page .brtm-assign-sub { font-size: 11.5px; color: #8a9ab0; } .brtm-chat-page .brtm-assign-check { margin-left: auto; color: var(--primary); font-size: 18px; display: none; } .brtm-chat-page .brtm-assign-item.brtm-selected .brtm-assign-check { display: block; } .brtm-chat-page .brtm-assign-item.brtm-selected { background: #eef6ff; } /* ─── PAGE OVERLAY ─── */ .brtm-chat-page .brtm-page-overlay { position: fixed; inset: 0; background: #f4f6fb; z-index: 50; display: flex; align-items: center; justify-content: center; } .brtm-chat-page .brtm-page-overlay-content { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .brtm-chat-page .brtm-page-overlay-icon { font-size: 56px; color: var(--primary); } .brtm-chat-page .brtm-page-overlay-title { font-size: 22px; font-weight: 700; color: #1a2234; } .brtm-chat-page .brtm-page-overlay-sub { font-size: 14px; color: #8a9ab0; } .brtm-chat-page .brtm-page-overlay-back { margin-top: 8px; padding: 9px 22px; border-radius: 10px; border: none; background: var(--primary); color: white; font-size: 13.5px; font-weight: 600; font-family: var(--brtm-font-ui); cursor: pointer; display: flex; align-items: center; gap: 7px; transition: background .15s; } .brtm-chat-page .brtm-page-overlay-back:hover { background: var(--primary-dark); } /* ─── TOAST ─── */ .brtm-chat-page .brtm-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1a2234; color: white; font-size: 13.5px; font-family: var(--brtm-font-ui); padding: 10px 20px; border-radius: 30px; box-shadow: 0 4px 20px rgba(0,0,0,.2); z-index: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; } .brtm-chat-page .brtm-toast.brtm-show { opacity: 1; transform: translateX(-50%) translateY(0); } .brtm-chat-page .brtm-toast.brtm-success { background: #2e7d32; } .brtm-chat-page .brtm-toast.brtm-error { background: #c62828; } /* ─── UPGRADE FEATURES ─── */ .brtm-chat-page .brtm-upgrade-features { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; text-align: left; } .brtm-chat-page .brtm-upgrade-feat { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #1a2234; } /* ════════════════════════════════════════════════════════════════════════════ §14 CHAT SAAS UX REVISION — PHASES 2–8 (overrides earlier rules) -------------------------------------------------------------------------- §14a Phase 2 — Chat list item: SLA edge bar + condensed layout §14b Phase 3 — Color tokens: calm palette, single severity source §14c Phase 4 — Segmented tab bar with counts §14d Phase 5 — Conversation header regrouping (ghost-icon secondaries) §14e Phase 6 — Customer panel hero + quick-stats + smart collapse §14f Phase 7 — WA-style bubble palette + max-width caps §14g Phase 8 — Compact mode toggle (body.brtm-compact) ════════════════════════════════════════════════════════════════════════════ */ /* ── §14a · Phase 2 — Chat list item ─────────────────────────────────────── */ .brtm-chat-page .brtm-chat-item { position: relative; padding: 10px 14px 10px 16px; border-bottom: 1px solid var(--br-1); transition: background .12s; } .brtm-chat-page .brtm-chat-item:hover { background: var(--bg-hover); } .brtm-chat-page .brtm-chat-item.brtm-active, .brtm-chat-page .brtm-chat-item.brtm-selected { background: var(--bg-active); } /* Severity / pin encoded as left edge bar (single source of truth) */ .brtm-chat-page .brtm-chat-item::before { content: none; } /* Avatar — flatter, calmer, smaller monogram */ .brtm-chat-page .brtm-chat-item .brtm-avatar { width: 36px; height: 36px; background: var(--brand-50); color: var(--brand); font-size: var(--fs-sm); font-weight: var(--fw-bold); } /* Calmer SLA dot inside avatar (color carried by left bar; here just an indicator) */ .brtm-chat-page .brtm-avatar-status { width: 13px; height: 13px; background: #fff; border: 1.5px solid var(--br-2); } .brtm-chat-page .brtm-avatar-status i { font-size: 9px; color: var(--tx-3); } /* Meta row — keep it single-line, ellipsis-able */ .brtm-chat-page .brtm-chat-meta { margin-top: 5px; flex-wrap: nowrap; gap: 8px; white-space: nowrap; overflow: hidden; } .brtm-chat-page .brtm-chat-meta > * { flex-shrink: 0; } .brtm-chat-page .brtm-chat-meta .brtm-tags-row { flex: 1 1 auto; min-width: 0; } /* Unread badge — pill, brand color, tabular */ .brtm-chat-page .brtm-unread-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: var(--fw-bold); display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(34,132,198,.25); } .brtm-chat-page .brtm-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); display: inline-block; } /* ── Info popover (body-level, not clipped) ── */ #brtmTipPopover { position: fixed; z-index: 9999; max-width: 220px; background: #1a2234; color: #fff; font-size: 11.5px; font-weight: 400; line-height: 1.55; padding: 9px 12px; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.22); pointer-events: auto; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; font-family: var(--brtm-font-ui); } #brtmTipPopover.brtm-tip-show { opacity: 1; visibility: visible; } #brtmTipPopover::before { content: ''; position: absolute; border: 6px solid transparent; } #brtmTipPopover.brtm-tip-above::before { top: 100%; left: var(--arrow-x, 50%); transform: translateX(-50%); border-top-color: #1a2234; } #brtmTipPopover.brtm-tip-below::before { bottom: 100%; left: var(--arrow-x, 50%); transform: translateX(-50%); border-bottom-color: #1a2234; } /* ── §14b · Phase 3 — Color rollout ──────────────────────────────────────── */ .brtm-chat-page { background: var(--bg-app); } .brtm-chat-page .brtm-chat-panel { background: var(--bg-card); border-right: 1px solid var(--br-1); } .brtm-chat-page .brtm-main-area { background: var(--bg-app); } .brtm-chat-page .brtm-chat-panel-header { border-bottom: 1px solid var(--br-1); } .brtm-chat-page .brtm-chat-panel-header h2, .brtm-chat-page #panelTitle { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--tx-1); letter-spacing: -0.01em; } /* Tag pills — softer, tighter */ .brtm-chat-page .brtm-tag { font-size: var(--fs-xs); font-weight: var(--fw-med); padding: 2px 8px; border-radius: 10px; line-height: 1.5; letter-spacing: .01em; } .brtm-chat-page .brtm-tag-green { background: #e8f6ee; color: #166534; } .brtm-chat-page .brtm-tag-blue { background: #e7f1fb; color: #1554a6; } .brtm-chat-page .brtm-tag-red { background: #fde9e7; color: #b91c1c; } .brtm-chat-page .brtm-tag-orange { background: #fef0e3; color: #b34507; } .brtm-chat-page .brtm-tag-purple { background: #f1ecfe; color: #6024c5; } /* Soften the colored clock icons inside avatar status — bar is the truth */ .brtm-chat-page .brtm-avatar-status .bi-clock { color: var(--tx-3) !important; } .brtm-chat-page .brtm-avatar-status[data-sla-type="breach"] .bi-clock { color: var(--sev-crit) !important; } .brtm-chat-page .brtm-avatar-status[data-sla-type="warn"] .bi-clock { color: var(--sev-warn) !important; } .brtm-chat-page .brtm-avatar-status[data-sla-type="ok"] .bi-clock { color: var(--sev-ok) !important; } /* ── §14c · Phase 4 — Icon-tab filter row (equal-width, no scroll) ─────── Pattern: icon + count chips, all tabs share the bar evenly via flex 1. No labels (tooltips on hover via title="..."), so all 4 always fit. */ .brtm-chat-page .brtm-status-tabs { position: relative; display: flex; align-items: center; padding: 0 12px 10px; background: transparent; border-radius: 0; gap: 6px; overflow: hidden; } .brtm-chat-page .brtm-tab-btn { flex: 1 1 0; min-width: 0; padding: 0 6px; border: 1px solid var(--br-2); background: #fff; font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--tx-2); border-radius: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; column-gap: 5px; white-space: nowrap; transition: background .12s, color .12s, border-color .12s, box-shadow .12s; font-family: var(--brtm-font-ui); letter-spacing: -0.005em; line-height: 1; height: 30px; } .brtm-chat-page .brtm-tab-btn:hover:not(.brtm-active) { background: var(--bg-hover); color: var(--tx-1); border-color: var(--br-strong); } .brtm-chat-page .brtm-tab-btn.brtm-active { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 1px 3px rgba(34,132,198,.25); } /* Icon — colored per status; white on active */ .brtm-chat-page .brtm-tab-icon { font-size: 14px; line-height: 1; flex-shrink: 0; } .brtm-chat-page .brtm-tab-btn[data-status="open"] .brtm-tab-icon { color: #16a34a; } .brtm-chat-page .brtm-tab-btn[data-status="pending"] .brtm-tab-icon { color: #d97706; } .brtm-chat-page .brtm-tab-btn[data-status="progress"] .brtm-tab-icon { color: #2284C6; } .brtm-chat-page .brtm-tab-btn[data-status="done"] .brtm-tab-icon { color: #16a34a; } .brtm-chat-page .brtm-tab-btn.brtm-active .brtm-tab-icon { color: #fff; } /* Label — always visible; truncates naturally when the button is too narrow */ .brtm-chat-page .brtm-tab-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Count badge */ .brtm-chat-page .brtm-tab-count { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px; font-size: 10.5px; font-weight: var(--fw-bold); background: rgba(15,23,42,.08); color: var(--tx-2); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: 0; } .brtm-chat-page .brtm-tab-btn.brtm-active .brtm-tab-count { background: rgba(255,255,255,.22); color: #fff; } /* Container query — react to the chat panel's own width, not the viewport. The panel is a fixed-width column (resizable), so a viewport @media would never fire. When the panel itself is wide enough, all labels become visible (segmented-row behavior); otherwise the icon-only compact mode stays active. */ .brtm-chat-page .brtm-chat-panel { container-type: inline-size; container-name: chatpanel; } @container chatpanel (min-width: 420px) { .brtm-chat-page .brtm-tab-btn { padding: 0 10px; column-gap: 6px; } } /* Compact-mode adjustments */ body.brtm-compact .brtm-status-tabs { padding: 0 10px 8px !important; gap: 5px !important; } body.brtm-compact .brtm-tab-btn { height: 26px !important; padding: 0 5px !important; } body.brtm-compact .brtm-tab-icon { font-size: 12.5px !important; } body.brtm-compact .brtm-tab-count { height: 14px !important; font-size: 10px !important; min-width: 16px !important; padding: 0 4px !important; } /* Persistent search input — quieter chrome */ .brtm-chat-page .brtm-search-box input { border: 1px solid var(--br-2); background: var(--bg-app); font-size: var(--fs-sm); color: var(--tx-1); height: 36px; border-radius: 8px; } .brtm-chat-page .brtm-search-box input:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(34,132,198,.12); } .brtm-chat-page .brtm-search-box input::placeholder { color: var(--tx-4); } /* ── §14d · Phase 5 — Conversation header ────────────────────────────────── */ .brtm-chat-page .brtm-cv-header { padding: 10px 20px; border-bottom: 1px solid var(--br-1); background: #fff; gap: 14px; } .brtm-chat-page .brtm-cv-avatar { width: 38px; height: 38px; background: var(--brand-50); color: var(--brand); font-size: var(--fs-sm); font-weight: var(--fw-bold); } .brtm-chat-page .brtm-cv-name { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--tx-1); letter-spacing: -0.01em; } .brtm-chat-page .brtm-cv-sub { font-size: var(--fs-sm); color: var(--tx-2); margin-top: 1px; } /* Secondary actions become ghost circular icons */ .brtm-chat-page .brtm-cv-action-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--tx-2); font-size: 16px; } .brtm-chat-page .brtm-cv-action-btn:hover { background: var(--bg-hover); color: var(--tx-1); border-color: transparent; } .brtm-chat-page .brtm-cv-action-btn--active, .brtm-chat-page .brtm-cv-action-btn.brtm-cv-action-btn--active { background: var(--brand-50); color: var(--brand); border-color: transparent; } .brtm-chat-page .brtm-cv-wacall-btn:hover { background: var(--bg-hover); color: var(--brand); border-color: transparent; } /* Resolve — primary action, larger weight */ .brtm-chat-page .brtm-cv-btn-resolve { height: 34px; padding: 0 16px; background: var(--brand); color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-med); border-radius: 8px 0 0 8px; border: none; letter-spacing: -0.005em; } .brtm-chat-page .brtm-cv-btn-resolve:hover { background: #1a72b0; } .brtm-chat-page .brtm-cv-btn-resolve-arrow { height: 34px; width: 28px; padding: 0; background: var(--brand); color: #fff; border: none; border-left: 1px solid rgba(255,255,255,.22); border-radius: 0 8px 8px 0; } .brtm-chat-page .brtm-cv-btn-resolve-arrow:hover { background: #1a72b0; } /* ── §14e · Phase 6 — Customer panel hero + quick-stats ──────────────────── */ .brtm-chat-page .brtm-pp-header { padding: 15px 16px; border-bottom: 1px solid var(--br-1); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--tx-1); letter-spacing: -0.01em; text-transform: none; } .brtm-chat-page .brtm-pp-hero { padding: 18px 16px 14px; text-align: center; border-bottom: 1px solid var(--br-1); } .brtm-chat-page .brtm-pp-big-avatar { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: var(--brand-50); color: var(--brand); font-size: 22px; font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; letter-spacing: -0.02em; } .brtm-chat-page .brtm-pp-name { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--tx-1); letter-spacing: -0.015em; line-height: 1.25; } .brtm-chat-page .brtm-pp-channel { margin-top: 6px; font-size: var(--fs-sm); color: var(--tx-2); display: inline-flex; align-items: center; gap: 6px; } /* Quick-stats strip (added in HTML) */ .brtm-chat-page .brtm-pp-quickstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--br-1); background: var(--bg-app); } .brtm-chat-page .brtm-pp-qs-card { background: #fff; border: 1px solid var(--br-1); border-radius: 8px; padding: 9px 8px; text-align: center; min-width: 0; } .brtm-chat-page .brtm-pp-qs-val { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--tx-1); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .brtm-chat-page .brtm-pp-qs-lbl { font-size: 10.5px; color: var(--tx-3); text-transform: uppercase; letter-spacing: .04em; font-weight: var(--fw-med); margin-top: 2px; } /* Quick actions row */ .brtm-chat-page .brtm-pp-quickactions { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--br-1); } .brtm-chat-page .brtm-pp-qa-btn { flex: 1; height: 32px; border-radius: 8px; border: 1px solid var(--br-2); background: #fff; font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--tx-1); font-family: var(--brtm-font-ui); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: border-color .12s, background .12s, color .12s; } .brtm-chat-page .brtm-pp-qa-btn:hover { background: var(--bg-hover); border-color: var(--br-strong); } .brtm-chat-page .brtm-pp-qa-btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); } .brtm-chat-page .brtm-pp-qa-btn--primary:hover { background: #1a72b0; border-color: #1a72b0; } /* Section titles use type tokens */ .brtm-chat-page .brtm-pp-section-title { font-size: 11px; font-weight: var(--fw-bold); color: var(--tx-3); text-transform: uppercase; letter-spacing: .06em; } .brtm-chat-page .brtm-pp-section-header { padding: 12px 16px 8px; cursor: pointer; } /* ── §14f · Phase 7 — Bubble palette (WA-feel) ───────────────────────────── */ .brtm-chat-page .brtm-cv-msg-body { max-width: min(640px, 72%); } .brtm-chat-page .brtm-cv-bubble { padding: 8px 12px 6px; border-radius: 14px; font-size: var(--fs-base); line-height: 1.55; word-break: break-word; } .brtm-chat-page .brtm-cv-bubble.brtm-incoming { background: #ffffff; color: var(--tx-1); border: 1px solid var(--br-1); border-radius: 14px 14px 14px 4px; box-shadow: 0 1px 1px rgba(15,23,42,.04); } .brtm-chat-page .brtm-cv-bubble.brtm-incoming::before { display: none; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing { background: #dcf8c6; color: #0f172a; border-radius: 14px 14px 4px 14px; box-shadow: 0 1px 1px rgba(15,23,42,.06); } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing::after { display: none; } .brtm-chat-page .brtm-cv-bubble-meta { font-size: 10.5px; color: rgba(15,23,42,.45); margin-left: 8px; font-variant-numeric: tabular-nums; letter-spacing: .01em; } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-bubble-meta { color: rgba(15,23,42,.55); } .brtm-chat-page .brtm-cv-bubble.brtm-outgoing .brtm-cv-bubble-meta i { color: #2284C6; } /* Date divider — quieter */ .brtm-chat-page .brtm-cv-date-divider span { background: var(--bg-app); color: var(--tx-3); font-size: 11px; font-weight: var(--fw-med); border: 1px solid var(--br-1); box-shadow: none; } /* Avatar in messages — calmer */ .brtm-chat-page .brtm-cv-msg-avatar { width: 28px; height: 28px; background: var(--brand-50); color: var(--brand); } /* ── §14g · Phase 8 — Compact mode ───────────────────────────────────────── NOTE: already has class "brtm-chat-page", so we use a compound selector (body.brtm-compact) + descendants — NOT body.brtm-compact .brtm-chat-page which would require .brtm-chat-page to be a child element. */ body.brtm-compact .brtm-chat-item { padding: 6px 12px 6px 14px !important; } body.brtm-compact .brtm-chat-item-top { gap: 8px !important; } body.brtm-compact .brtm-chat-item .brtm-avatar { width: 30px !important; height: 30px !important; font-size: 11.5px !important; } body.brtm-compact .brtm-avatar-status { width: 11px !important; height: 11px !important; } body.brtm-compact .brtm-avatar-status i { font-size: 7.5px !important; } body.brtm-compact .brtm-chat-name { font-size: var(--fs-sm) !important; } body.brtm-compact .brtm-chat-msg { font-size: 11.5px !important; margin-top: 1px !important; } body.brtm-compact .brtm-chat-meta { margin-top: 3px !important; gap: 6px !important; } body.brtm-compact .brtm-chat-time { font-size: 10.5px !important; } body.brtm-compact .brtm-meta-chip { font-size: 10.5px !important; } body.brtm-compact .brtm-tag { font-size: 10px !important; padding: 1px 6px !important; } body.brtm-compact .brtm-section-label { padding: 6px 14px 2px !important; font-size: 10px !important; } body.brtm-compact .brtm-status-tabs { padding: 3px !important; margin: 0 10px 8px !important; } body.brtm-compact .brtm-tab-btn { padding: 4px 8px !important; font-size: 11.5px !important; } body.brtm-compact .brtm-tab-count { font-size: 10px !important; padding: 0 5px !important; } body.brtm-compact .brtm-search-box { margin: 0 12px 8px !important; } body.brtm-compact .brtm-search-box input { height: 30px !important; font-size: 12px !important; } body.brtm-compact .brtm-chat-panel-header { padding-top: 10px !important; padding-bottom: 8px !important; } body.brtm-compact #panelTitle, body.brtm-compact .brtm-chat-panel-header h2 { font-size: 14px !important; } /* Conversation area in compact mode */ body.brtm-compact .brtm-cv-header { padding: 8px 16px !important; gap: 10px !important; } body.brtm-compact .brtm-cv-avatar { width: 32px !important; height: 32px !important; font-size: 12px !important; } body.brtm-compact .brtm-cv-name { font-size: var(--fs-base) !important; } body.brtm-compact .brtm-cv-sub { font-size: 11.5px !important; } body.brtm-compact .brtm-cv-action-btn { width: 30px !important; height: 30px !important; font-size: 14px !important; } body.brtm-compact .brtm-cv-btn-resolve, body.brtm-compact .brtm-cv-btn-resolve-arrow { height: 30px !important; } body.brtm-compact .brtm-cv-btn-resolve { padding: 0 12px !important; font-size: 12px !important; } body.brtm-compact .brtm-cv-messages { padding: 12px 18px !important; gap: 8px !important; } body.brtm-compact .brtm-cv-bubble { padding: 6px 10px 5px !important; font-size: var(--fs-sm) !important; line-height: 1.5 !important; border-radius: 12px !important; } body.brtm-compact .brtm-cv-msg-avatar { width: 24px !important; height: 24px !important; font-size: 9px !important; } body.brtm-compact .brtm-cv-msg-body { max-width: min(560px, 76%) !important; } body.brtm-compact .brtm-cv-bubble-meta { font-size: 9.5px !important; } body.brtm-compact .brtm-cv-date-divider { margin: 6px 0 !important; } body.brtm-compact .brtm-cv-date-divider span { font-size: 10px !important; padding: 2px 9px !important; } /* Customer profile panel in compact mode */ body.brtm-compact .brtm-pp-hero { padding: 12px 14px 10px !important; } body.brtm-compact .brtm-pp-big-avatar { width: 52px !important; height: 52px !important; font-size: 18px !important; margin-bottom: 8px !important; } body.brtm-compact .brtm-pp-name { font-size: var(--fs-md) !important; } body.brtm-compact .brtm-pp-channel { font-size: 11.5px !important; } body.brtm-compact .brtm-pp-quickstats { padding: 9px 12px !important; gap: 6px !important; } body.brtm-compact .brtm-pp-qs-card { padding: 7px 6px !important; } body.brtm-compact .brtm-pp-qs-val { font-size: var(--fs-base) !important; } body.brtm-compact .brtm-pp-qs-lbl { font-size: 9.5px !important; } body.brtm-compact .brtm-pp-quickactions { padding: 8px 12px !important; gap: 6px !important; } body.brtm-compact .brtm-pp-qa-btn { height: 28px !important; font-size: 11.5px !important; } body.brtm-compact .brtm-pp-section-header { padding: 10px 14px 6px !important; } body.brtm-compact .brtm-pp-section-title { font-size: 10px !important; } body.brtm-compact .brtm-pp-section-body { padding: 0 14px 10px !important; } /* Compact-mode indicator pill (visible in header so users know it is on) */ .brtm-compact-indicator { display: none; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 8px; border-radius: 10px; background: var(--brand-50); color: var(--brand); font-size: 10.5px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .05em; vertical-align: middle; } body.brtm-compact .brtm-compact-indicator { display: inline-flex; } body.brtm-compact #compactToggleBtn { background: var(--brand-50) !important; color: var(--brand) !important; } /* Keyboard-cue for the toggle */ .brtm-kbd { display: inline-flex; align-items: center; justify-content: center; height: 18px; min-width: 18px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--br-2); background: #fff; color: var(--tx-2); font-size: 10px; font-weight: var(--fw-med); font-family: var(--brtm-font-num); box-shadow: 0 1px 0 rgba(15,23,42,.06); } /* ====================================================== �SHARED ICON SIDEBAR (CRM/Activity pages � non-chat) ====================================================== */ .brtm-page-wrap { display: flex; flex: 1; height: calc(100vh - 56px); min-height: 0; } .brtm-icon-sidebar { width: 56px; background: #fff; border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 4px; flex-shrink: 0; height: calc(100vh - 56px); overflow: visible; transition: width .25s ease; position: relative; } .brtm-icon-sidebar.brtm-expanded { width: 160px; } .brtm-sidebar-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 17px; cursor: pointer; transition: background .15s, color .15s, width .25s ease, justify-content .25s, padding .25s; text-decoration: none; flex-shrink: 0; gap: 0; } .brtm-icon-sidebar.brtm-expanded .brtm-sidebar-icon { width: 144px; justify-content: flex-start; padding: 0 10px; gap: 10px; } .brtm-sidebar-icon:hover { background: #f1f5f9; color: #1B6FBE; } .brtm-sidebar-icon.brtm-active { background: #E7F1FB; color: #1B6FBE; } .brtm-sidebar-label { font-family: var(--brtm-font-ui); font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; max-width: 0; opacity: 0; transition: max-width .25s ease, opacity .2s ease; pointer-events: none; display: inline-block; } .brtm-icon-sidebar.brtm-expanded .brtm-sidebar-label { max-width: 130px; opacity: 1; pointer-events: auto; } .brtm-sidebar-spacer { flex: 1; } .brtm-sidebar-toggle { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 20px; height: 44px; border-radius: 0 8px 8px 0; border: 1px solid #e2e8f0; border-left: none; background: #fff; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 11px; cursor: pointer; z-index: 10; transition: background .15s, color .15s; padding: 0; box-shadow: 2px 0 6px rgba(0,0,0,.06); } .brtm-sidebar-toggle:hover { background: #f1f5f9; color: #1B6FBE; } .brtm-sidebar-toggle .bi { transition: transform .25s ease; } .brtm-icon-sidebar.brtm-expanded .brtm-sidebar-toggle .bi { transform: rotate(180deg); } .brtm-sidebar-section-label { font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #b0bcc9; padding: 12px 0 4px; display: none; font-family: var(--brtm-font-ui); width: 100%; text-align: center; } .brtm-icon-sidebar.brtm-expanded .brtm-sidebar-section-label { display: block; text-align: left; padding-left: 12px; } .brtm-sidebar-divider { width: 32px; height: 1px; background: #e8edf2; margin: 4px 0; transition: width .25s; } .brtm-icon-sidebar.brtm-expanded .brtm-sidebar-divider { width: calc(100% - 24px); } .brtm-page-content { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; } /* Activity shell (existing) */ .brtm-activity-shell { display: flex; flex: 1; height: calc(100vh - 56px); min-height: 0; } .brtm-act-sidebar { width: 56px; background: #fff; border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; align-items: center; padding: 10px 0; gap: 2px; flex-shrink: 0; transition: width .25s ease; } .brtm-act-sidebar.brtm-act-expanded { width: 160px; } .brtm-act-sidebar-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 17px; cursor: pointer; transition: background .15s, color .15s, width .25s, padding .25s; text-decoration: none; flex-shrink: 0; gap: 0; } .brtm-act-sidebar.brtm-act-expanded .brtm-act-sidebar-icon { width: 144px; justify-content: flex-start; padding: 0 10px; gap: 10px; } .brtm-act-sidebar-icon:hover { background: #f1f5f9; color: #1B6FBE; } .brtm-act-sidebar-icon.brtm-active { background: #E7F1FB; color: #1B6FBE; } .brtm-act-sidebar-label { font-family: var(--brtm-font-ui); font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; max-width: 0; opacity: 0; transition: max-width .25s ease, opacity .2s ease; pointer-events: none; display: inline-block; } .brtm-act-sidebar.brtm-act-expanded .brtm-act-sidebar-label { max-width: 130px; opacity: 1; pointer-events: auto; } .brtm-act-sidebar-toggle { margin-top: auto; width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 13px; cursor: pointer; transition: background .15s, color .15s; } .brtm-act-sidebar-toggle:hover { background: #f1f5f9; color: #1B6FBE; } /* ══════════════════════════════════════════════════════════════ §14 SHARED COMPONENTS (used by 2+ pages) ══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── §14a ADVANCED FILTER DRAWER (chat-listing, email-listing) ───────────────────────────────────────────────────────────── */ /* drawer width overridden per-page via #advFilterDrawer */ .brtm-adv-filter-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #e8edf2; flex-shrink:0; } .brtm-adv-filter-head-title { font-weight:700; font-size:14px; color:#1a2234; display:flex; align-items:center; gap:7px; } .brtm-adv-filter-count-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; border-radius:9px; background:#2284C6; color:#fff; font-size:10px; font-weight:700; padding:0 4px; } .brtm-adv-filter-body { flex:1; overflow-y:auto; overflow-x:hidden; } .brtm-adv-filter-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid #f1f5f9; } .brtm-adv-filter-toggle-label { font-size:12.5px; color:#1a2234; font-weight:500; display:flex; align-items:center; gap:7px; } .brtm-adv-filter-section { padding:10px 14px 12px; border-bottom:1px solid #f1f5f9; } .brtm-adv-filter-section:last-of-type { border-bottom:none; } .brtm-adv-filter-sec-title { font-size:11px; font-weight:700; color:#8a9ab0; text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px; } .brtm-adv-filter-chips { display:flex; flex-wrap:wrap; gap:6px; } .brtm-afc { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:20px; border:1.5px solid #e3e8ef; font-size:12px; cursor:pointer; color:#4a5568; transition:border-color .15s,background .15s,color .15s; user-select:none; white-space:nowrap; } .brtm-afc:hover { border-color:#2284C6; color:#2284C6; } .brtm-afc.brtm-afc--on { border-color:#2284C6; background:#eef4ff; color:#2284C6; font-weight:600; } .brtm-afc .brtm-afc-dot { width:8px; height:8px; border-radius:50%; } .brtm-adv-agent-search { width:100%; padding:6px 10px; border:1.5px solid #e3e8ef; border-radius:8px; font-size:12px; font-family:inherit; color:#1a2234; outline:none; margin-bottom:8px; box-sizing:border-box; } .brtm-adv-agent-search:focus { border-color:#2284C6; } .brtm-adv-agent-list { display:flex; flex-direction:column; gap:3px; max-height:130px; overflow-y:auto; } .brtm-adv-agent-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; cursor:pointer; transition:background .1s; } .brtm-adv-agent-item:hover { background:#f5f7fa; } .brtm-adv-agent-item.brtm-agent-on { background:#eef4ff; } .brtm-adv-agent-av { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#2284C6,#42a5f5); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .brtm-adv-agent-av.brtm-av-gray { background:#e3e8ef; color:#8a9ab0; } .brtm-adv-agent-name { font-size:12px; color:#1a2234; flex:1; } .brtm-adv-agent-check { color:#2284C6; font-size:12px; display:none; } .brtm-adv-agent-item.brtm-agent-on .brtm-adv-agent-check { display:block; } .brtm-adv-filter-date-row { display:flex; gap:8px; align-items:center; } .brtm-adv-filter-date-row input[type=date] { flex:1; min-width:0; padding:6px 8px; border:1.5px solid #e3e8ef; border-radius:8px; font-size:12px; font-family:inherit; color:#1a2234; outline:none; width:100%; box-sizing:border-box; } .brtm-adv-filter-date-row input[type=date]:focus { border-color:#2284C6; } .brtm-adv-filter-footer { display:flex; gap:8px; padding:10px 14px; border-top:1px solid #e8edf2; background:#fff; flex-shrink:0; } .brtm-adv-btn-reset { flex:1; padding:7px; border-radius:8px; border:1.5px solid #e3e8ef; background:#fff; font-size:12.5px; font-family:inherit; color:#4a5568; cursor:pointer; font-weight:500; } .brtm-adv-btn-apply { flex:2; padding:7px; border-radius:8px; border:none; background:#2284C6; color:#fff; font-size:12.5px; font-family:inherit; cursor:pointer; font-weight:600; } .brtm-adv-btn-reset:hover { border-color:#2284C6; color:#2284C6; } .brtm-adv-btn-apply:hover { background:#1a72b0; } /* Toggle switch */ .brtm-sw { position:relative; width:36px; height:20px; display:inline-block; flex-shrink:0; } .brtm-sw input { opacity:0; width:0; height:0; position:absolute; } .brtm-sw-track { position:absolute; cursor:pointer; inset:0; background:#cbd5e0; border-radius:20px; transition:.2s; } .brtm-sw-track:before { position:absolute; content:''; height:14px; width:14px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.15); } .brtm-sw input:checked + .brtm-sw-track { background:#2284C6; } .brtm-sw input:checked + .brtm-sw-track:before { transform:translateX(16px); } /* Active filter indicator on topbar button */ .brtm-header-icon-btn.brtm-filter-active { background:#eef4ff; color:#2284C6; border-color:#2284C6; } .brtm-filter-active-dot { position:absolute; top:4px; right:4px; width:7px; height:7px; border-radius:50%; background:#2284C6; border:2px solid #fff; display:none; } .brtm-filter-wrap .brtm-header-icon-btn { position:relative; } .brtm-filter-wrap.brtm-has-filter .brtm-filter-active-dot { display:block; } /* ───────────────────────────────────────────────────────────── §14b GMAIL-STYLE THREAD (chat-listing, email-listing) ───────────────────────────────────────────────────────────── */ .brtm-gmail-thread-outer { display:block; padding:4px 0 10px; width:100%; } .brtm-gmail-thread-wrap { background:#fff; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.08); } /* Subject bar */ .brtm-gmail-subject-bar { display:flex; align-items:center; gap:8px; padding:10px 16px 9px; border-bottom:1px solid #ebebeb; } .brtm-gmail-subject-icon { font-size:14px; flex-shrink:0; } .brtm-gmail-subject-text { font-size:14px; font-weight:700; color:#202124; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .brtm-gmail-subject-count { font-size:12px; color:#5f6368; font-weight:400; flex-shrink:0; } .brtm-gmail-subject-label { padding:2px 8px; border-radius:12px; font-size:10.5px; font-weight:600; flex-shrink:0; } .brtm-gmail-star-btn { background:none; border:none; cursor:pointer; padding:4px; font-size:15px; color:#dadce0; line-height:1; flex-shrink:0; transition:color .15s; } .brtm-gmail-star-btn:hover { color:#f4b400; } .brtm-gmail-star-btn.brtm-starred { color:#f4b400; } /* Individual email */ .brtm-gmail-email { border-top:1px solid #ebebeb; } .brtm-gmail-email:first-of-type { border-top:none; } .brtm-gmail-email-collapsed { display:flex; align-items:center; gap:10px; padding:9px 16px; cursor:pointer; transition:background .12s; } .brtm-gmail-email-collapsed:hover { background:#f5f5f5; } .brtm-gmail-av { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0; } .brtm-gmail-col-from { font-size:13px; font-weight:600; color:#202124; white-space:nowrap; flex-shrink:0; min-width:72px; } .brtm-gmail-col-snippet { font-size:13px; color:#5f6368; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .brtm-gmail-col-attach { font-size:13px; color:#9aa0a6; flex-shrink:0; } .brtm-gmail-col-time { font-size:11.5px; color:#5f6368; white-space:nowrap; flex-shrink:0; margin-left:6px; } /* Expanded */ .brtm-gmail-email-expanded { padding:12px 16px 0; } .brtm-gmail-exp-header { display:flex; align-items:flex-start; gap:10px; } .brtm-gmail-exp-header-right { flex:1; min-width:0; } .brtm-gmail-exp-sender-row { display:flex; align-items:center; gap:4px; flex-wrap:wrap; } .brtm-gmail-exp-name { font-size:13.5px; font-weight:700; color:#202124; flex:1; min-width:0; } .brtm-gmail-exp-time { font-size:11.5px; color:#5f6368; white-space:nowrap; flex-shrink:0; } .brtm-gmail-exp-actions { display:flex; gap:0; margin-left:2px; flex-shrink:0; } .brtm-gmail-exp-action-btn { width:30px; height:30px; border-radius:50%; border:none; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#5f6368; font-size:14px; transition:background .12s; } .brtm-gmail-exp-action-btn:hover { background:#f1f3f4; } .brtm-gmail-exp-to-row { font-size:12px; color:#5f6368; display:flex; align-items:center; gap:4px; cursor:pointer; margin-top:3px; line-height:1.4; user-select:none; } .brtm-gmail-exp-to-row:hover { color:#202124; } .brtm-gmail-exp-to-row i { font-size:9px; transition:transform .15s; } .brtm-gmail-details-panel { display:none; margin-top:6px; padding:4px 0 2px; } .brtm-gmail-detail-row { display:flex; gap:8px; font-size:11.5px; margin-bottom:2px; } .brtm-gmail-detail-lbl { color:#5f6368; min-width:42px; flex-shrink:0; } .brtm-gmail-detail-val { color:#202124; word-break:break-all; } .brtm-gmail-exp-body { font-size:13px; color:#202124; line-height:1.75; padding:12px 0 10px; } .brtm-gmail-quote-toggle-btn { display:inline-flex; align-items:center; gap:4px; font-size:12.5px; letter-spacing:2px; color:#5f6368; cursor:pointer; border:1px solid #dadce0; background:#f8f9fa; padding:0 8px 2px; border-radius:3px; margin-bottom:10px; line-height:1.8; } .brtm-gmail-quote-toggle-btn:hover { background:#f1f3f4; border-color:#bdc1c6; } .brtm-gmail-quote-body { font-size:12.5px; color:#5f6368; border-left:3px solid #dadce0; padding:6px 10px; margin-bottom:10px; display:none; line-height:1.65; } .brtm-gmail-attachments { display:flex; flex-wrap:wrap; gap:8px; padding:8px 0 12px; border-top:1px solid #ebebeb; margin-top:4px; } .brtm-gmail-attach-card { display:flex; align-items:center; gap:8px; border:1px solid #dadce0; border-radius:6px; padding:7px 12px; cursor:pointer; min-width:168px; max-width:238px; transition:border-color .12s,box-shadow .12s; } .brtm-gmail-attach-card:hover { border-color:#aecbfa; box-shadow:0 1px 4px rgba(34,132,198,.15); } .brtm-gmail-attach-icon { width:36px; height:36px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; } .brtm-gmail-attach-meta { min-width:0; } .brtm-gmail-attach-name { font-size:11.5px; font-weight:600; color:#202124; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px; display:block; } .brtm-gmail-attach-size { font-size:11px; color:#5f6368; } .brtm-gmail-reply-bar { display:flex; gap:8px; padding:10px 0 12px; border-top:1px solid #ebebeb; margin-top:4px; flex-wrap:wrap; } .brtm-gmail-reply-btn { display:flex; align-items:center; gap:6px; padding:6px 16px; border-radius:4px; border:1px solid #dadce0; background:#fff; font-size:13px; color:#202124; cursor:pointer; font-family:inherit; transition:border-color .12s,color .12s; } .brtm-gmail-reply-btn:hover { background:#f0f7ff; border-color:#aecbfa; color:#1a72b0; } /* Inline compose */ .brtm-gmail-compose { border-top:1px solid #ebebeb; background:#fff; } .brtm-gmail-compose-placeholder { display:flex; align-items:center; gap:10px; padding:10px 16px; cursor:text; } .brtm-gmail-compose-placeholder-text { flex:1; font-size:13px; color:#bdc1c6; background:#f1f3f4; border-radius:24px; padding:8px 16px; transition:background .12s; } .brtm-gmail-compose-placeholder:hover .brtm-gmail-compose-placeholder-text { background:#e8eaed; } .brtm-gmail-compose-expanded { padding:10px 16px 0; display:none; } .brtm-gmail-compose.brtm-compose-open .brtm-gmail-compose-placeholder { display:none; } .brtm-gmail-compose.brtm-compose-open .brtm-gmail-compose-expanded { display:block; } .brtm-gmail-compose-fields { border:1px solid #e0e0e0; border-radius:6px 6px 0 0; border-bottom:none; } .brtm-gmail-compose-field-row { display:flex; align-items:center; gap:6px; padding:6px 12px; border-bottom:1px solid #f1f3f4; min-height:36px; } .brtm-gmail-compose-field-row:last-of-type { border-bottom:none; } .brtm-gmail-compose-field-lbl { font-size:12px; color:#5f6368; flex-shrink:0; min-width:36px; } .brtm-gmail-compose-field-val { flex:1; font-size:13px; color:#202124; outline:none; border:none; background:transparent; font-family:inherit; } .brtm-gmail-compose-field-chip { display:inline-flex; align-items:center; gap:4px; background:#e8eaed; border-radius:12px; padding:2px 8px; font-size:12px; color:#202124; margin-right:4px; } .brtm-gmail-compose-field-chip button { background:none; border:none; cursor:pointer; color:#5f6368; font-size:11px; padding:0; line-height:1; } .brtm-gmail-compose-cc-bcc { display:flex; gap:6px; margin-left:auto; } .brtm-gmail-compose-cc-bcc button { background:none; border:none; cursor:pointer; font-size:12px; color:#5f6368; font-family:inherit; padding:2px 4px; border-radius:3px; } .brtm-gmail-compose-cc-bcc button:hover { background:#f1f3f4; color:#202124; } .brtm-gmail-compose-toolbar { display:flex; align-items:center; gap:1px; padding:5px 10px; border:1px solid #e0e0e0; border-top:none; border-bottom:none; background:#f8f9fa; flex-wrap:wrap; } .brtm-gmail-compose-tb-sep { width:1px; height:18px; background:#dadce0; margin:0 4px; flex-shrink:0; } .brtm-gmail-compose-tb-btn { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:none; cursor:pointer; font-size:12.5px; color:#5f6368; border-radius:4px; font-family:inherit; font-weight:600; transition:background .1s; flex-shrink:0; } .brtm-gmail-compose-tb-btn:hover { background:#e8eaed; color:#202124; } .brtm-gmail-compose-tb-btn.brtm-tb-active { background:#d2e3fc; color:#1967d2; } .brtm-gmail-compose-body-wrap { border:1px solid #e0e0e0; border-top:none; border-radius:0 0 6px 6px; background:#fff; overflow:hidden; } .brtm-gmail-compose-body { min-height:100px; max-height:280px; overflow-y:auto; padding:10px 14px; font-size:13px; color:#202124; line-height:1.7; outline:none; font-family:inherit; } .brtm-gmail-compose-body:empty:before { content:attr(data-placeholder); color:#bdc1c6; pointer-events:none; display:block; } .brtm-gmail-compose-sig-divider { border:none; border-top:1px solid #e0e0e0; margin:8px 0 4px; } .brtm-gmail-compose-sig { font-size:12px; color:#5f6368; line-height:1.5; } .brtm-gmail-compose-attach-area { display:flex; flex-wrap:wrap; gap:6px; padding:8px 14px 4px; } .brtm-gmail-compose-attach-chip { display:inline-flex; align-items:center; gap:6px; border:1px solid #dadce0; border-radius:6px; padding:5px 10px; font-size:11.5px; color:#202124; cursor:default; background:#f8f9fa; } .brtm-gmail-compose-attach-chip button { background:none; border:none; cursor:pointer; color:#5f6368; font-size:12px; padding:0; line-height:1; } .brtm-gmail-compose-attach-chip button:hover { color:#d93025; } .brtm-gmail-compose-footer { display:flex; align-items:center; gap:6px; padding:10px 14px 12px; } .brtm-gmail-compose-send-btn { display:inline-flex; align-items:center; gap:7px; background:#1a73e8; color:#fff; font-size:13px; font-weight:600; padding:7px 20px; border-radius:4px; border:none; cursor:pointer; font-family:inherit; transition:background .12s; } .brtm-gmail-compose-send-btn:hover { background:#1558b4; } .brtm-gmail-compose-footer-icon-btn { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:none; background:none; cursor:pointer; color:#5f6368; font-size:15px; transition:background .12s; } .brtm-gmail-compose-footer-icon-btn:hover { background:#f1f3f4; } .brtm-gmail-compose-footer-icon-btn.brtm-discard:hover { color:#d93025; background:#fce8e6; } .brtm-gmail-compose-fwd-header { font-size:12px; color:#5f6368; padding:8px 0 4px; border-top:1px solid #ebebeb; margin-top:8px; line-height:1.6; } .brtm-email-subject-preview { color:#1a2234; font-weight:600; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ───────────────────────────────────────────────────────────── §14c ICON SIDEBAR (brtm-customer-page — listing pages) ───────────────────────────────────────────────────────────── */ .brtm-customer-page .brtm-main-wrapper { display:flex; flex:1; height:calc(100vh - 56px); min-height:0; } .brtm-customer-page .brtm-icon-sidebar { width:56px; background:#fff; border-right:1px solid var(--border,#e2e8f0); display:flex; flex-direction:column; align-items:center; padding:12px 0; gap:4px; flex-shrink:0; height:calc(100vh - 56px); overflow:visible; transition:width .25s ease; position:relative; } .brtm-customer-page .brtm-icon-sidebar.brtm-expanded { width:160px; } .brtm-customer-page .brtm-sidebar-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:17px; cursor:pointer; transition:background .15s, color .15s, width .25s ease, justify-content .25s, padding .25s; text-decoration:none; flex-shrink:0; gap:0; } .brtm-customer-page .brtm-icon-sidebar.brtm-expanded .brtm-sidebar-icon { width:144px; justify-content:flex-start; padding:0 10px; gap:10px; } .brtm-customer-page .brtm-sidebar-icon:hover { background:#f1f5f9; color:var(--primary,#1B6FBE); } .brtm-customer-page .brtm-sidebar-icon.brtm-active { background:var(--primary-light,#E7F1FB); color:var(--primary,#1B6FBE); } .brtm-customer-page .brtm-sidebar-label { font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; max-width:0; opacity:0; transition:max-width .25s ease, opacity .2s ease; pointer-events:none; display:inline-block; } .brtm-customer-page .brtm-icon-sidebar.brtm-expanded .brtm-sidebar-label { max-width:130px; opacity:1; pointer-events:auto; } .brtm-customer-page .brtm-sidebar-spacer { flex:1; } .brtm-customer-page .brtm-sidebar-toggle { position:absolute; right:-12px; top:50%; transform:translateY(-50%); width:20px; height:44px; border-radius:0 8px 8px 0; border:1px solid var(--border,#e2e8f0); border-left:none; background:#fff; display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:11px; cursor:pointer; z-index:10; transition:background .15s, color .15s; padding:0; box-shadow:2px 0 6px rgba(0,0,0,.06); } .brtm-customer-page .brtm-sidebar-toggle:hover { background:#f1f5f9; color:var(--primary,#1B6FBE); } .brtm-customer-page .brtm-sidebar-toggle .bi { transition:transform .25s ease; } .brtm-customer-page .brtm-icon-sidebar.brtm-expanded .brtm-sidebar-toggle .bi { transform:rotate(180deg); } .brtm-customer-page .brtm-page-wrapper { flex:1; min-width:0; overflow:hidden; } /* ══════════════════════════════════════════════════════════════ */