/* ===================================================================== comms.css — Communications & Messaging Suite Glassmorphism surfaces, light by default, full dark-mode support via [data-theme="dark"] on (matches the app's existing toggle). ===================================================================== */ :root { --cm-accent: #7c4dff; --cm-accent-2: #4361ee; --cm-glass: rgba(255,255,255,.72); --cm-glass-brd: rgba(255,255,255,.55); --cm-ink: #1f2433; --cm-muted: #6b7280; --cm-bubble-in: #ffffff; --cm-bubble-out: linear-gradient(135deg, #7c4dff, #4361ee); --cm-shadow: 0 18px 44px rgba(20,22,45,.14); --cm-page: #eef1f8; --cm-unread: #ef4444; } [data-theme="dark"] { --cm-glass: rgba(30,32,54,.62); --cm-glass-brd: rgba(255,255,255,.10); --cm-ink: #e6e8f5; --cm-muted: #9aa1b4; --cm-bubble-in: rgba(255,255,255,.08); --cm-page: #0f1122; --cm-shadow: 0 18px 44px rgba(0,0,0,.5); } /* ---- shared glass panel ---- */ .cm-glass { background: var(--cm-glass); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--cm-glass-brd); border-radius: 18px; box-shadow: var(--cm-shadow); color: var(--cm-ink); } .cm-wrap { color: var(--cm-ink); } .cm-title { font-weight: 700; letter-spacing: -.01em; } /* ===================================================================== Sidebar item + red notification badge ===================================================================== */ .cm-nav-badge { position: absolute; /* floats over the menu icon */ top: 4px; right: 10px; min-width: 18px; height: 18px; padding: 0 5px; display: none; /* JS toggles to flex when > 0 */ align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; line-height: 1; color: #fff; background: var(--cm-unread); border-radius: 999px; box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 3px 8px rgba(239,68,68,.6); animation: cmPulse 1.8s ease-in-out infinite; } .cm-nav-badge.show { display: inline-flex; } @keyframes cmPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } } .sb-link { position: relative; } /* anchor for the absolute badge */ /* ===================================================================== INBOX — data grid ===================================================================== */ .cm-inbox { overflow: hidden; } .cm-inbox table { width: 100%; border-collapse: collapse; margin: 0; } .cm-inbox thead th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cm-muted); padding: 12px 16px; border-bottom: 1px solid var(--cm-glass-brd); } .cm-inbox tbody td { padding: 13px 16px; border-bottom: 1px solid var(--cm-glass-brd); vertical-align: middle; } .cm-inbox tbody tr { cursor: pointer; transition: background .15s ease; } .cm-inbox tbody tr:hover { background: rgba(124,77,255,.08); } .cm-row-unread td { font-weight: 700; } /* bold = unread */ .cm-row-unread .cm-dot { opacity: 1; } .cm-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cm-accent); opacity: 0; /* hidden when read */ box-shadow: 0 0 8px var(--cm-accent); } .cm-sender { display: flex; align-items: center; gap: 10px; } .cm-avatar { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .82rem; background: linear-gradient(135deg, var(--cm-accent), var(--cm-accent-2)); } .cm-date { color: var(--cm-muted); font-size: .82rem; white-space: nowrap; } /* ===================================================================== LIVE CHAT — split pane ===================================================================== */ .cm-chat { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 150px); min-height: 460px; overflow: hidden; } @media (max-width: 820px) { .cm-chat { grid-template-columns: 1fr; } .cm-chat .cm-thread { display: none; } /* mobile: show list, tap opens thread */ .cm-chat.cm-show-thread .cm-list { display: none; } .cm-chat.cm-show-thread .cm-thread { display: flex; } } /* left: contacts + groups */ .cm-list { display: flex; flex-direction: column; border-right: 1px solid var(--cm-glass-brd); min-height: 0; } .cm-search { padding: 14px; } .cm-search input { width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--cm-glass-brd); background: rgba(255,255,255,.35); color: var(--cm-ink); outline: none; } [data-theme="dark"] .cm-search input { background: rgba(255,255,255,.06); } .cm-people { overflow-y: auto; padding: 0 8px 12px; min-height: 0; } .cm-sec { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--cm-muted); padding: 10px 10px 4px; } .cm-person { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; cursor: pointer; transition: background .15s ease; } .cm-person:hover { background: rgba(124,77,255,.10); } .cm-person.active { background: linear-gradient(90deg, rgba(124,77,255,.22), rgba(67,97,238,.12)); } .cm-person .nm { font-weight: 600; font-size: .9rem; } .cm-person .rg { font-size: .72rem; color: var(--cm-muted); } .cm-person .cm-mini-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; display: none; align-items: center; justify-content: center; font-size: .66rem; font-weight: 700; color: #fff; background: var(--cm-unread); border-radius: 999px; } .cm-person .cm-mini-badge.show { display: inline-flex; } /* Unread conversation: make the sender obvious in the list */ .cm-person.cm-unread { background: rgba(239,68,68,.08); } .cm-person.cm-unread .nm { font-weight: 800; } .cm-person.cm-unread .nm::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; vertical-align: middle; border-radius: 50%; background: var(--cm-unread); } .cm-person.cm-unread.active { background: linear-gradient(90deg, rgba(124,77,255,.22), rgba(67,97,238,.12)); } /* "/shortcut" template picker popup */ .cm-tpl-pop { position: fixed; z-index: 4000; background: #fff; color: #1f2430; border: 1px solid rgba(0,0,0,.12); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.18); max-height: 260px; overflow-y: auto; } [data-theme="dark"] .cm-tpl-pop { background: #1b1e2e; color: #e6e8f5; border-color: rgba(255,255,255,.12); } .cm-tpl-item { display: flex; gap: 10px; align-items: baseline; padding: 9px 12px; cursor: pointer; } .cm-tpl-item .sc { font-weight: 700; color: #6d4bff; font-size: .82rem; white-space: nowrap; } .cm-tpl-item .ti { font-size: .84rem; color: inherit; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-tpl-item.sel, .cm-tpl-item:hover { background: rgba(124,77,255,.12); } /* Template manager (Chat page) */ .cm-tpl-mgr { border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 12px; margin-bottom: 12px; } [data-theme="dark"] .cm-tpl-mgr { border-color: rgba(255,255,255,.1); } .cm-tpl-mgr .row { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.05); } .cm-tpl-mgr .row .sc { font-weight: 700; color: #6d4bff; min-width: 90px; } .cm-tpl-mgr .row .bd { flex: 1; font-size: .82rem; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Rich-text formatting toolbar above a composer */ .cm-rich-bar { display: flex; gap: 4px; padding: 4px 6px; } .cm-rich-bar button { min-width: 28px; height: 26px; padding: 0 7px; border: 1px solid rgba(0,0,0,.12); background: transparent; border-radius: 7px; cursor: pointer; font-size: .82rem; color: inherit; line-height: 1; } .cm-rich-bar button:hover { background: rgba(124,77,255,.12); } [data-theme="dark"] .cm-rich-bar button { border-color: rgba(255,255,255,.15); } /* Formatting inside message bubbles */ .cm-bubble strong { font-weight: 700; } .cm-bubble em { font-style: italic; } .cm-bubble a { color: #6d4bff; text-decoration: underline; word-break: break-word; } .cm-bubble ul { margin: 4px 0 4px 18px; padding: 0; } .cm-bubble li { margin: 2px 0; } /* Attachments inside bubbles */ .cm-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .cm-att-img img { max-width: 200px; max-height: 200px; border-radius: 10px; display: block; } .cm-att-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.05); color: inherit; text-decoration: none; font-size: .82rem; max-width: 240px; } [data-theme="dark"] .cm-att-file { background: rgba(255,255,255,.08); } .cm-att-file:hover { background: rgba(124,77,255,.15); } .cm-att-file .sz { opacity: .6; font-size: .72rem; } .cm-att-file .sz.blocked { color: var(--cm-unread); opacity: 1; } .cm-att-file.disabled { cursor: not-allowed; opacity: .8; } /* Composer attachment tray (pending uploads) */ .cm-tray { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; } .cm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: rgba(124,77,255,.12); font-size: .76rem; } .cm-chip b { cursor: pointer; opacity: .7; font-weight: 700; } .cm-chip b:hover { opacity: 1; } /* Drag-and-drop highlight on the message area */ .cm-drop { outline: 2px dashed #6d4bff; outline-offset: -6px; background: rgba(124,77,255,.05); } /* Link-to-candidate panel (Chat page) */ .cm-link-panel { padding: 8px 10px; border-bottom: 1px solid rgba(0,0,0,.06); } [data-theme="dark"] .cm-link-panel { border-color: rgba(255,255,255,.1); } .cm-link-panel input { width: 100%; padding: 8px 10px; border: 1px solid rgba(0,0,0,.15); border-radius: 8px; } [data-theme="dark"] .cm-link-panel input { background: #0f1122; color: #e6e8f5; border-color: rgba(255,255,255,.15); } .cm-link-item { padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: .86rem; display: flex; flex-direction: column; } .cm-link-item span { font-size: .72rem; color: var(--cm-muted); } .cm-link-item:hover { background: rgba(124,77,255,.12); } /* Candidate profile transcript panel */ .cm-transcript .row2 { padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.05); } .cm-transcript .who { font-weight: 600; font-size: .82rem; } .cm-transcript .when { color: #888; font-size: .72rem; margin-left: 6px; } .cm-transcript .txt { font-size: .86rem; margin-top: 2px; } /* right: active conversation */ .cm-thread { display: flex; flex-direction: column; min-height: 0; } .cm-thread-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--cm-glass-brd); font-weight: 700; } .cm-thread-head .sub { font-weight: 400; font-size: .78rem; color: var(--cm-muted); } .cm-history { flex: 1 1 auto; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; } .cm-empty { margin: auto; text-align: center; color: var(--cm-muted); } /* chat bubbles */ .cm-msg { max-width: 68%; display: flex; flex-direction: column; } .cm-msg .who { font-size: .7rem; color: var(--cm-muted); margin: 0 6px 3px; } .cm-bubble { padding: 10px 14px; border-radius: 16px; font-size: .92rem; line-height: 1.4; word-wrap: break-word; box-shadow: 0 4px 14px rgba(20,22,45,.08); } .cm-msg.in { align-self: flex-start; } .cm-msg.out { align-self: flex-end; align-items: flex-end; } .cm-msg.in .cm-bubble { background: var(--cm-bubble-in); color: var(--cm-ink); border-bottom-left-radius: 5px; } .cm-msg.out .cm-bubble { background: var(--cm-bubble-out); color: #fff; border-bottom-right-radius: 5px; } .cm-time { font-size: .64rem; color: var(--cm-muted); margin: 3px 6px 0; } /* composer */ .cm-compose { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--cm-glass-brd); } .cm-compose textarea { flex: 1 1 auto; resize: none; height: 46px; max-height: 120px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--cm-glass-brd); background: rgba(255,255,255,.4); color: var(--cm-ink); outline: none; font: inherit; } [data-theme="dark"] .cm-compose textarea { background: rgba(255,255,255,.06); } .cm-send { flex: 0 0 auto; width: 46px; height: 46px; border: 0; border-radius: 14px; cursor: pointer; color: #fff; font-size: 1.15rem; background: linear-gradient(135deg, var(--cm-accent), var(--cm-accent-2)); box-shadow: 0 8px 20px rgba(124,77,255,.45); transition: transform .12s ease; } .cm-send:hover { transform: translateY(-1px); } .cm-send:disabled { opacity: .5; cursor: not-allowed; transform: none; } /* ===================================================================== Toast (bottom-right) — used site-wide by comms.js ===================================================================== */ .cm-toast-host { position: fixed; right: 20px; bottom: 96px; z-index: 3000; /* sits above the launcher */ display: flex; flex-direction: column; gap: 10px; max-width: 340px; } .cm-toast { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: 14px; color: var(--cm-ink); background: var(--cm-glass); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--cm-glass-brd); box-shadow: var(--cm-shadow); transform: translateX(120%); opacity: 0; transition: transform .32s cubic-bezier(.2,.9,.3,1), opacity .32s; } .cm-toast.show { transform: translateX(0); opacity: 1; } .cm-toast .ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--cm-accent), var(--cm-accent-2)); } .cm-toast .tt { font-weight: 700; font-size: .86rem; } .cm-toast .bd { font-size: .8rem; color: var(--cm-muted); margin-top: 1px; } /* ===================================================================== Floating corner chat widget (site-wide launcher + mini panel) ===================================================================== */ .cm-launcher { position: fixed; right: 24px; bottom: 24px; z-index: 2900; width: 58px; height: 58px; border: 0; border-radius: 50%; cursor: pointer; color: #fff; font-size: 1.5rem; display: grid; place-items: center; background: linear-gradient(135deg, var(--cm-accent), var(--cm-accent-2)); box-shadow: 0 12px 30px rgba(124,77,255,.5), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .16s ease, box-shadow .16s ease; } .cm-launcher:hover { transform: translateY(-2px) scale(1.04); } .cm-launcher .cm-widget-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; display: none; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; color: #fff; background: var(--cm-unread); border-radius: 999px; box-shadow: 0 0 0 2px rgba(255,255,255,.9); } [data-theme="dark"] .cm-launcher .cm-widget-badge { box-shadow: 0 0 0 2px #0f1122; } .cm-launcher .cm-widget-badge.show { display: inline-flex; } /* the panel */ .cm-widget { position: fixed; right: 24px; bottom: 92px; z-index: 2901; width: 360px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 130px); display: none; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--cm-glass); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--cm-glass-brd); box-shadow: var(--cm-shadow); color: var(--cm-ink); } .cm-widget.open { display: flex; animation: cmPop .18s ease; } @keyframes cmPop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } .cm-w-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--cm-glass-brd); background: linear-gradient(135deg, rgba(124,77,255,.16), rgba(67,97,238,.10)); } .cm-w-head .t { font-weight: 700; } .cm-w-head .sub2 { font-size: .72rem; color: var(--cm-muted); } .cm-w-head button { background: none; border: 0; color: var(--cm-ink); cursor: pointer; font-size: 1rem; padding: 4px 6px; border-radius: 8px; } .cm-w-head button:hover { background: rgba(0,0,0,.06); } [data-theme="dark"] .cm-w-head button:hover { background: rgba(255,255,255,.08); } .cm-w-head .cm-w-back { display: none; } .cm-widget.in-convo .cm-w-back { display: inline-block; } /* views */ .cm-w-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .cm-w-contacts { flex: 1 1 auto; overflow-y: auto; padding: 8px; } .cm-w-search { padding: 10px 12px 4px; } .cm-w-search input { width: 100%; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--cm-glass-brd); background: rgba(255,255,255,.4); color: var(--cm-ink); outline: none; } [data-theme="dark"] .cm-w-search input { background: rgba(255,255,255,.06); } .cm-widget.in-convo .cm-w-contacts, .cm-widget.in-convo .cm-w-search { display: none; } .cm-widget:not(.in-convo) .cm-w-convo { display: none; } .cm-w-convo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .cm-w-history { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; } .cm-w-compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--cm-glass-brd); } .cm-w-compose textarea { flex: 1 1 auto; resize: none; height: 40px; max-height: 96px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--cm-glass-brd); background: rgba(255,255,255,.4); color: var(--cm-ink); outline: none; font: inherit; } [data-theme="dark"] .cm-w-compose textarea { background: rgba(255,255,255,.06); } .cm-w-compose .cm-send { width: 40px; height: 40px; font-size: 1rem; border-radius: 12px; }