/* CURE WA Hub — dark dashboard language (design-inspiration notes.md) */ :root { --bg: #0B0F1A; --surface: #1A1F2E; --surface-2: #222941; --sidebar: #0F1117; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --text: #E7ECF5; --text-2: #94A3B8; --muted: #64748B; --accent: #2DD4BF; --accent-strong: #14B8A6; --accent-soft: rgba(45, 212, 191, 0.12); --chart-teal: #0D9488; --chart-blue: #3B82F6; --blue: #3B82F6; --green: #22C55E; --green-soft: rgba(34, 197, 94, 0.14); --red: #EF4444; --red-soft: rgba(239, 68, 68, 0.14); --amber: #F59E0B; --amber-soft: rgba(245, 158, 11, 0.14); --r: 14px; --r-sm: 9px; --shadow: 0 4px 24px rgba(0, 0, 0, 0.35); --glass: rgba(22, 28, 42, 0.72); --glass-brd: rgba(255, 255, 255, 0.11); --glass-blur: blur(26px) saturate(1.8); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.14); --glass-grad: linear-gradient(180deg, rgba(26, 32, 45, 0.86), rgba(14, 18, 27, 0.84)); --ease: cubic-bezier(.2, .7, .3, 1); --spring: cubic-bezier(.34, 1.25, .5, 1); /* semantic overlays + glass surfaces (theme-aware — see [data-theme="light"]) */ --hover: rgba(255, 255, 255, 0.05); --hover-strong: rgba(255, 255, 255, 0.09); --scroll: rgba(255, 255, 255, 0.14); --raised-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)); --sidebar-grad: linear-gradient(180deg, rgba(16, 21, 30, 0.72), rgba(9, 12, 18, 0.66)); --panel-grad: linear-gradient(180deg, rgba(30, 36, 48, 0.94), rgba(13, 16, 24, 0.96)); color-scheme: dark; } /* ── Light theme ────────────────────────────────────────────────── Applied to the app shell via . The login page always renders dark (applyTheme() forces dark while signed out), so the .login-* rules never see these values — the Fluid Ink splash stays intact. */ :root[data-theme="light"] { --bg: #EEF2F7; --surface: #FFFFFF; --surface-2: #E7EDF4; --sidebar: #F8FAFC; --border: rgba(15, 23, 42, 0.10); --border-strong: rgba(15, 23, 42, 0.16); --text: #0F172A; --text-2: #475569; --muted: #64748B; --accent: #0F766E; --accent-strong: #0E6B60; --accent-soft: rgba(13, 148, 136, 0.12); --shadow: 0 4px 20px rgba(15, 23, 42, 0.10); --glass: rgba(255, 255, 255, 0.72); --glass-brd: rgba(15, 23, 42, 0.10); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9); --glass-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.80)); --panel-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.95)); --sidebar-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(248, 250, 252, 0.78)); --hover: rgba(15, 23, 42, 0.05); --hover-strong: rgba(15, 23, 42, 0.08); --scroll: rgba(15, 23, 42, 0.18); --raised-grad: linear-gradient(180deg, rgba(13, 148, 136, 0.14), rgba(13, 148, 136, 0.05)); color-scheme: light; } /* status/link colours need darker shades to keep contrast on light surfaces */ :root[data-theme="light"] .btn-danger { color: #B91C1C; } :root[data-theme="light"] .pill.ok { color: #15803D; } :root[data-theme="light"] .pill.warn { color: #B45309; } :root[data-theme="light"] .pill.bad { color: #B91C1C; } :root[data-theme="light"] .pill.info { color: #1D4ED8; } /* Chat bubbles: outgoing goes pale teal (dark text) instead of the dark-mode deep teal, and the light-on-dark meta/sender/doc colours flip for contrast. */ :root[data-theme="light"] .bubble.out { background: #CCFBF1; } :root[data-theme="light"] .bubble .b-meta { color: rgba(15, 23, 42, .5); } :root[data-theme="light"] .bubble.out .b-sender { color: #0F766E; } :root[data-theme="light"] .bubble .b-tmpl { color: #0F766E; } :root[data-theme="light"] .bubble .b-doc { background: rgba(15, 23, 42, .06); } :root[data-theme="light"] .tick-read { color: #0D9488; } :root[data-theme="light"] .thread-menu .tm-danger { color: #B91C1C; } :root[data-theme="light"] .tick-fail { color: #B91C1C; } :root[data-theme="light"] .mpill-slot { color: rgba(15, 23, 42, 0.4); } /* positive/success inline text — green needs a darker shade on light surfaces */ .pos { color: #4ADE80; } :root[data-theme="light"] .pos { color: #15803D; } /* floated field label + code chips: the bright-teal / muted tones vanish on white */ :root[data-theme="light"] .ff-cure { --ff-label-active: #0F766E; } :root[data-theme="light"] .kbd { color: var(--text-2); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { background: var(--bg); color: var(--text); font: 14px/1.5 "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, Roboto, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; } ::selection { background: rgba(45, 212, 191, 0.28); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, select, textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 9px 12px; outline: none; width: 100%; } input:focus, select:focus, textarea:focus { border-color: var(--accent); } input::placeholder, textarea::placeholder { color: var(--muted); } label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin: 12px 0 5px; } a { color: var(--accent); text-decoration: none; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 9px; } ::-webkit-scrollbar-track { background: transparent; } /* ── buttons ─────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: 13.5px; background: var(--surface-2); border: 1px solid var(--border-strong); transition: filter .15s, transform .05s; white-space: nowrap; } .btn:hover { filter: brightness(1.15); } .btn:active { transform: scale(.98); } .btn svg, .btn-icon svg { width: 18px; height: 18px; flex: 0 0 auto; } .btn-sm svg { width: 14px; height: 14px; } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, #5EEAD4 0%, #2DD4BF 48%, #0F9D8F 100%); border-color: transparent; color: #052e2b; } .btn-primary:hover { filter: brightness(1.1); } .btn-danger { background: var(--red-soft); border-color: transparent; color: #FCA5A5; } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); } .btn-ghost:hover { color: var(--text); background: var(--surface-2); } .btn-sm { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; } .btn-icon { padding: 8px; border-radius: 10px; } /* ── badges / pills ──────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--text-2); } .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .pill.ok { background: var(--green-soft); color: #4ADE80; } .pill.warn { background: var(--amber-soft); color: #FCD34D; } .pill.bad { background: var(--red-soft); color: #FCA5A5; } .pill.info { background: rgba(59,130,246,.14); color: #93C5FD; } .pill.teal { background: var(--accent-soft); color: var(--accent); } /* audit-log details: readable key/value chips instead of a raw JSON blob */ .au-details { line-height: 1.9; } .au-kv { display: inline-flex; align-items: center; gap: 5px; background: var(--hover); border: 1px solid var(--border); border-radius: 7px; padding: 2px 9px; font-size: 11.5px; margin: 2px 5px 2px 0; white-space: nowrap; color: var(--text); } .au-kv b { color: var(--text-2); font-weight: 600; } /* ── settings: sectioned layout (left nav + content) ─── */ .settings-layout { display: flex; gap: 22px; align-items: flex-start; } .settings-nav { display: flex; flex-direction: column; gap: 3px; min-width: 212px; flex: 0 0 auto; position: sticky; top: 10px; } .set-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 13px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--text-2); cursor: pointer; font: inherit; font-size: 14px; text-align: start; transition: background .15s, color .15s; } .set-nav-item:hover { background: var(--hover); color: var(--text); } .set-nav-item.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); font-weight: 600; } .set-nav-item svg { width: 17px; height: 17px; flex: 0 0 auto; } .settings-body { flex: 1; min-width: 0; } @media (max-width: 820px) { .settings-layout { flex-direction: column; } .settings-nav { flex-direction: row; overflow-x: auto; min-width: 0; width: 100%; position: static; padding-bottom: 2px; scrollbar-width: none; } .settings-nav::-webkit-scrollbar { display: none; } .set-nav-item span { white-space: nowrap; } } /* editable WhatsApp-connection form (Settings › Channels, superadmin) */ .cfg-form { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 4px; } .cfg-field { display: flex; flex-direction: column; gap: 6px; } .cfg-field > label { font-size: 12.5px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cfg-src { font-size: 10.5px; font-weight: 600; color: var(--muted); background: var(--hover); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; } /* .cfg-field .cfg-rm out-specifies the global `label{display:block}` so it stays inline */ .cfg-field .cfg-rm { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 2px 0 0; font-size: 11.5px; font-weight: 500; color: var(--muted); cursor: pointer; } /* the global `input{width:100%}` rule stretches an unclassed checkbox into a full-width box — reset it */ .cfg-field .cfg-rm input[type="checkbox"] { width: 15px; height: 15px; margin: 0; padding: 0; border: 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; } /* glass confirm bubble */ .confirm-body { margin: 4px 0 14px; } .confirm-list { margin: 0 0 12px; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 5px; } .confirm-list li { font-size: 13.5px; color: var(--text); } .confirm-warn { font-size: 12.5px; color: var(--muted); margin: 0; } /* per-user menu-access grid (Users → manage, superadmin) */ .tab-perms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 10px; margin-top: 6px; } .tabperm { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; padding: 6px 9px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg); } .tabperm:hover { border-color: var(--accent-soft); } .tabperm input[type="checkbox"] { width: 15px; height: 15px; margin: 0; padding: 0; border: 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; } .tabperm > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .tabperm svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .75; } @media (max-width: 520px) { .tab-perms { grid-template-columns: 1fr; } } /* chat-list media preview — icon + label instead of "[audio]" */ .ci-media { display: inline-flex; align-items: center; gap: 4px; } .ci-prev svg { width: 13px; height: 13px; opacity: .7; flex: 0 0 auto; vertical-align: -2px; } /* ── login (Fluid Ink kit, retuned to CURE teal) ─── */ /* page chrome around the card — brand top-left, language top-right, footer bottom */ .login-topbar { position: absolute; top: 0; inset-inline: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px clamp(16px, 4vw, 40px); } .login-brandmark { display: flex; align-items: center; gap: 11px; min-width: 0; } .login-brandmark img { height: 30px; width: auto; flex: 0 0 auto; } .login-brandmark span { font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--text-2); white-space: nowrap; } .login-lang { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 8px 13px; border-radius: 10px; cursor: pointer; border: 1px solid var(--glass-brd); background: rgba(255, 255, 255, .04); color: var(--accent); font-size: 13px; font-weight: 600; transition: background .15s; } .login-lang:hover { background: rgba(255, 255, 255, .08); } .login-lang svg { width: 16px; height: 16px; } .login-footer { position: absolute; bottom: 0; inset-inline: 0; z-index: 2; text-align: center; padding: 16px 20px; font-size: 12px; color: var(--muted); } .login-footer b { color: var(--text-2); font-weight: 600; } .login-footer .sep { opacity: .4; margin: 0 8px; } @media (max-width: 560px) { .login-brandmark span { display: none; } } .login-wrap { position: relative; height: 100vh; height: 100dvh; display: grid; place-items: center; /* doubles as the no-WebGL backdrop, with the ambient .orbs behind it */ background: radial-gradient(600px 400px at 15% 10%, rgba(45,212,191,.09), transparent 60%), radial-gradient(700px 500px at 90% 90%, rgba(59,130,246,.08), transparent 60%), var(--bg); } /* fluid ink — full-viewport WebGL canvas behind the login card */ .login-fluid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } /* Two-panel card: form + a brand aside that stays translucent so the fluid ink animates THROUGH it (a solid panel would hide the best part of the page). Collapses to the form alone below 900px. */ .login-shell { position: relative; z-index: 1; width: min(430px, 94vw); border-radius: 52px 22px 22px 22px; overflow: hidden; background: var(--glass-grad); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-brd); box-shadow: var(--glass-hi), 0 28px 56px rgba(0, 0, 0, .55), 0 0 0 1px rgba(45, 212, 191, .18), 0 0 54px rgba(45, 212, 191, .16); /* teal glow ring */ } /* neon hairline across the card head — the kit's signature detail */ .login-shell::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .85; } .login-form { position: relative; z-index: 2; padding: 56px 38px 32px; } [dir="rtl"] .login-shell { border-radius: 22px 52px 22px 22px; } /* a touch larger on desktop */ @media (min-width: 1280px) { .login-shell { width: min(460px, 92vw); border-radius: 64px 24px 24px 24px; } [dir="rtl"] .login-shell { border-radius: 24px 64px 24px 24px; } .login-form { padding: 64px 44px 36px; } } /* The brand side. Separated from the form by a TONAL shift on a soft diagonal, with no dividing stroke — the reference set never uses hard seams between panels, and a hairline here cut straight through the copy. */ .login-aside { position: relative; display: flex; align-items: center; padding: 34px 32px 34px 56px; background: linear-gradient(100deg, transparent 0 6%, rgba(45, 212, 191, .085) 34%, rgba(59, 130, 246, .05) 100%); -webkit-clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); } .la-inner { position: relative; } .la-title { font-size: 27px; font-weight: 800; letter-spacing: -.022em; line-height: 1.15; color: var(--text); } .la-sub { margin-top: 11px; font-size: 13.5px; line-height: 1.7; color: var(--text-2); opacity: .8; } .la-points { list-style: none; margin-top: 24px; display: grid; gap: 14px; } .la-points li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--text-2); } .la-points svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--accent); } /* password reveal — sits inside the floating-label field */ .pw-wrap { position: relative; } .pw-wrap .float-field .input { padding-inline-end: 44px; } .pw-toggle { position: absolute; top: 50%; inset-inline-end: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; border: none; background: transparent; border-radius: 9px; cursor: pointer; color: var(--muted); transition: color .15s ease, background .15s ease; } .pw-toggle:hover { color: var(--text-2); background: rgba(255, 255, 255, .06); } .pw-toggle.on { color: var(--accent); } .pw-toggle svg { width: 17px; height: 17px; } .caps-hint { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 11.5px; font-weight: 600; color: #FCD34D; } .caps-hint svg { width: 12px; height: 12px; } .login-err { color: #FCA5A5; font-size: 12.5px; min-height: 18px; margin-top: 12px; } .login-err.is-locked { padding: 8px 11px; margin-top: 12px; border-radius: 9px; background: var(--amber-soft); color: #FCD34D; min-height: 0; } .login-submit { width: 100%; justify-content: center; margin-top: 6px; height: 44px; font-size: 14px; } .login-submit:disabled { cursor: default; filter: none; opacity: .85; } .login-submit .lg-spin { display: none; } .login-submit.loading .lg-spin { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(5, 46, 43, .3); border-top-color: #052e2b; animation: lg-spin .6s linear infinite; } @keyframes lg-spin { to { transform: rotate(360deg); } } .login-help { margin-top: 14px; text-align: center; font-size: 11.5px; color: var(--muted); } /* a failed sign-in nudges the form rather than only changing a line of text */ .shake { animation: shake .35s cubic-bezier(.36, .07, .19, .97); } @keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } /* RTL: the diagonal has to lean the other way or it reads as a mistake */ [dir="rtl"] .login-aside { padding: 34px 56px 34px 32px; background: linear-gradient(260deg, transparent 0 6%, rgba(45, 212, 191, .085) 34%, rgba(59, 130, 246, .05) 100%); -webkit-clip-path: polygon(0 0, 91% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 91% 0, 100% 100%, 0 100%); } /* one column on laptops-down: the aside is decoration, the form is the job */ @media (max-width: 900px) { .login-shell { grid-template-columns: minmax(0, 1fr); width: min(400px, 92vw); } .login-aside { display: none; } } @media (prefers-reduced-motion: reduce) { .shake { animation: none; } .login-submit.loading .lg-spin { animation-duration: 2s; } } /* Bold geometric sans, tight tracking — the reference set is explicitly "never serif, never loose". Gradient kept: a wordmark is an accent element. */ .login-title { text-align: center; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.022em; background: linear-gradient(100deg, #5EEAD4 0%, #CCFBF1 42%, #2DD4BF 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: login-sheen 6s ease-in-out infinite alternate; } @keyframes login-sheen { from { background-position: 0 0; } to { background-position: 100% 0; } } .login-eyebrow { margin-top: 6px; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--text-2); opacity: .72; } @media (prefers-reduced-motion: reduce) { .login-title { animation: none; } } /* ── app shell ───────────────────────────────────── */ .shell { display: flex; height: 100vh; height: 100dvh; } .sidebar { width: 228px; flex: 0 0 228px; background: var(--sidebar-grad); backdrop-filter: blur(26px) saturate(1.8); -webkit-backdrop-filter: blur(26px) saturate(1.8); border-right: 1px solid var(--border); box-shadow: inset -1px 0 0 var(--hover), 1px 0 30px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; padding: 18px 12px; position: relative; transition: width .3s cubic-bezier(.4, 0, .2, 1), flex-basis .3s cubic-bezier(.4, 0, .2, 1), padding .3s cubic-bezier(.4, 0, .2, 1); } .nav-item { position: relative; transition: background .2s ease, color .15s ease, border-color .2s ease, transform .18s ease, padding .3s cubic-bezier(.4,0,.2,1), border-radius .25s ease; } /* labels fade + slide away instead of snapping */ .nav-item span, .brand-text, .sidebar-user .who { overflow: hidden; white-space: nowrap; max-width: 160px; transition: opacity .16s ease, max-width .3s cubic-bezier(.4,0,.2,1); } /* square menu toggle, top of the sidebar with the logo */ .collapse-toggle { position: absolute; top: 8px; inset-inline-end: 4px; z-index: 1; width: 32px; height: 32px; padding: 0; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); transition: color .15s ease, border-color .15s ease, background .15s ease; } .collapse-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--surface); } .shell.collapsed .collapse-toggle { position: static; order: -1; margin: 0; } /* hamburger ↔ X morph */ .burger { position: relative; width: 18px; height: 14px; } .burger i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s cubic-bezier(.4, 0, .2, 1), top .3s cubic-bezier(.4, 0, .2, 1), opacity .18s ease; } .burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { top: 6px; } .burger i:nth-child(3) { top: 12px; } .shell.collapsed .burger i:nth-child(1) { top: 6px; transform: rotate(45deg); } .shell.collapsed .burger i:nth-child(2) { opacity: 0; transform: scaleX(0); } .shell.collapsed .burger i:nth-child(3) { top: 6px; transform: rotate(-45deg); } /* ── collapsed rail: frosted-glass icon bubbles ── */ .shell.collapsed .sidebar { width: 78px; flex: 0 0 78px; padding: 16px 13px; } .shell.collapsed .nav-item span, .shell.collapsed .brand-text, .shell.collapsed .sidebar-user .who { opacity: 0; max-width: 0; } .shell.collapsed .brand { flex-direction: column; align-items: center; gap: 12px; padding: 6px 0 14px; } .shell.collapsed .brand-full { display: none; } .shell.collapsed .brand-mark { display: block; } .shell.collapsed .nav { gap: 9px; } .shell.collapsed .nav-item { justify-content: center; gap: 0; padding: 12px 0; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22); } .shell.collapsed .nav-item svg { width: 20px; height: 20px; } .shell.collapsed .nav-item:hover { background: var(--hover-strong); color: var(--text); transform: translateY(-1px); } .shell.collapsed .nav-item.active { background: var(--accent-soft); border-color: rgba(45, 212, 191, 0.4); color: var(--accent); box-shadow: 0 0 20px rgba(45, 212, 191, 0.18); } .shell.collapsed .nav-item .count { position: absolute; top: 5px; right: 12px; margin: 0; padding: 0 5px; line-height: 15px; font-size: 10px; } .shell.collapsed .sidebar-user { flex-direction: column; gap: 9px; align-items: center; padding: 12px 0 2px; } .shell.collapsed .sidebar-user .who { display: none; } .shell.collapsed .sidebar-user .avatar { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid rgba(45, 212, 191, 0.3); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22); color: var(--accent); font-size: 15px; font-weight: 800; } .shell.collapsed .user-actions { gap: 7px; } .shell.collapsed #btn-lang, .shell.collapsed #btn-logout { flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border-radius: 11px; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: background .15s ease, border-color .15s ease, color .15s ease; } .shell.collapsed #btn-lang { color: var(--accent); font-weight: 800; font-size: 13px; } .shell.collapsed #btn-logout { color: var(--text-2); } .shell.collapsed #btn-logout svg { width: 17px; height: 17px; } .shell.collapsed #btn-lang:hover, .shell.collapsed #btn-logout:hover { color: var(--accent); border-color: rgba(45, 212, 191, 0.4); background: var(--hover); } [dir="rtl"] .shell.collapsed .nav-item .count { right: auto; left: 12px; } /* hover tooltip for the collapsed rail — fixed to the viewport so it never gets clipped by the scrolling nav and never widens it */ .tip { position: fixed; z-index: 200; pointer-events: none; padding: 6px 11px; border-radius: 9px; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--panel-grad); border: 1px solid var(--glass-brd); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi), 0 10px 28px rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity .14s ease; } .tip.on { opacity: 1; } .brand { position: relative; display: flex; align-items: center; justify-content: center; padding: 8px 34px 16px; min-height: 40px; } /* full CURE logo rendered via a mask so it takes the brand teal in BOTH themes — the source PNG is light-cyan and would be invisible on the light sidebar. The brand's right padding reserves room for the corner toggle so the centred logo never runs under it. */ .brand-full { width: 118px; max-width: 100%; aspect-ratio: 560 / 248; background: var(--accent); -webkit-mask: url(logo.png) center / contain no-repeat; mask: url(logo.png) center / contain no-repeat; } .brand-mark { display: none; width: 42px; height: 42px; object-fit: contain; } .nav { display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; /* tooltips are fixed-position, so no h-scrollbar */ scrollbar-width: none; } .nav::-webkit-scrollbar { width: 0; height: 0; } .user-actions { display: flex; align-items: center; gap: 6px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9.5px 12px; border-radius: 11px; color: var(--text-2); font-weight: 600; font-size: 13.5px; text-align: left; width: 100%; } .nav-item svg { width: 18px; height: 18px; flex: 0 0 18px; } .nav-item { border: 1px solid transparent; } .nav-item:hover { color: var(--text); background: var(--hover); } .nav-item.active { background: linear-gradient(135deg, rgba(45, 212, 191, 0.20), rgba(45, 212, 191, 0.06)); border-color: rgba(45, 212, 191, 0.28); color: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 18px rgba(45, 212, 191, 0.16); } .nav-item.active::before { content: ""; position: absolute; inset-inline-start: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 10px var(--accent); } .shell.collapsed .nav-item.active::before { display: none; } .nav-item .count { margin-left: auto; background: var(--accent); color: #06281f; font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 1px 7px; } .sidebar-user { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 8px; display: flex; align-items: center; gap: 10px; padding-left: 6px; } .avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px; background: var(--surface-2); color: var(--accent); display: grid; place-items: center; font-weight: 800; font-size: 13px; } .sidebar-user .who { flex: 1; min-width: 0; } .sidebar-user .who b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user .who span { font-size: 11px; color: var(--muted); text-transform: capitalize; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .topbar { display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-bottom: 1px solid var(--glass-brd); background: var(--sidebar-grad); /* match the side menu */ backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi); position: sticky; top: 0; z-index: 4; } .topbar h2 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar h2 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; } .topbar .spacer { flex: 1; } .view { flex: 1; overflow-y: auto; padding: 22px 24px; } /* ── cards / grid ────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; } .card h3 { font-size: 13.5px; font-weight: 700; color: var(--text-2); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .card h3 svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .85; } .grid { display: grid; gap: 16px; } .tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); } .tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; position: relative; } .t-spark { position: absolute; right: 16px; bottom: 18px; } .tile .t-ico svg { width: 13px; height: 13px; } .tile .t-label { font-size: 11.5px; font-weight: 700; color: var(--text-2); letter-spacing: .04em; text-transform: uppercase; display:flex; align-items:center; gap:8px; } .tile .t-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(45, 212, 191, 0.22), rgba(59, 130, 246, 0.22)); border: 1px solid rgba(45, 212, 191, 0.18); color: var(--accent); font-size: 13px; } .tile .t-value { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin-top: 8px; font-variant-numeric: tabular-nums; } .tile .t-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; } /* gradient progress rings (percentage KPIs) */ .tile-ring { display: flex; flex-direction: column; align-items: center; text-align: center; } .tile-ring .t-label { justify-content: flex-start; align-self: stretch; } .ring-wrap { position: relative; width: 86px; height: 86px; margin: 8px 0 2px; } .ring { width: 100%; height: 100%; display: block; } .ring-center { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17.5px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ring-arc { animation: ring-sweep 1s cubic-bezier(.22, 1, .36, 1) .15s forwards; } @keyframes ring-sweep { to { stroke-dashoffset: var(--ring-to); } } @media (prefers-reduced-motion: reduce) { .ring-arc { animation: none; stroke-dashoffset: var(--ring-to); } } /* ── tables ──────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; font-size: 13px; } th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); } td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } /* scrollable table with a frozen header row. The bottom rule is drawn as an inset shadow because a collapsed border scrolls away from a sticky cell. */ .table-scroll { overflow: auto; } .table-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); box-shadow: inset 0 -1px 0 var(--border); border-bottom: none; } tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--hover); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } /* ── inbox ───────────────────────────────────────── */ .inbox { display: flex; height: 100%; margin: -22px -24px; } .chat-list { width: 315px; flex: 0 0 315px; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--sidebar); } .chat-list-head { padding: 14px 14px 10px; display: flex; gap: 8px; } .chat-list-items { flex: 1; overflow-y: auto; } .chat-item { display: flex; gap: 12px; padding: 11px 14px; cursor: pointer; width: 100%; text-align: left; position: relative; border-bottom: none; } .chat-item::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 70px; inset-inline-end: 0; height: 1px; background: var(--border); } .chat-item .avatar { width: 44px; height: 44px; flex: 0 0 44px; font-size: 15px; } .chat-item .ci-time.unread { color: var(--accent); font-weight: 700; } .ci-bottom { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .ci-bottom .ci-prev { flex: 1; min-width: 0; margin-top: 0; } .ci-meta { display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .ci-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .chat-item:hover { background: var(--hover); } .chat-item.active { background: var(--surface); } .chat-item .ci-body { flex: 1; min-width: 0; } .chat-item .ci-top { display: flex; justify-content: space-between; gap: 8px; } .chat-item .ci-name { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-item .ci-time { font-size: 11px; color: var(--muted); flex-shrink: 0; } .chat-item .ci-prev { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .chat-item .ci-badges { display: flex; align-items: center; gap: 6px; margin-top: 3px; } /* ── message search results ──────────────────────── */ .msg-results { border-top: 1px solid var(--border); margin-top: 4px; } .msg-results-head { padding: 10px 14px 5px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); } .mr-note { padding: 6px 14px 12px; font-size: 12.5px; } .msg-hit { display: block; width: 100%; text-align: start; padding: 8px 14px; border-radius: 0; transition: background .12s ease; } .msg-hit:hover { background: var(--hover); } .msg-hit .mh-top { display: flex; justify-content: space-between; gap: 8px; } .msg-hit .mh-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-hit .mh-time { font-size: 11px; color: var(--muted); flex-shrink: 0; } .msg-hit .mh-dir { color: var(--muted); } .msg-hit .mh-snip { font-size: 12px; color: var(--text-2); margin-top: 2px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .msg-hit mark { background: var(--accent-soft); color: var(--accent); border-radius: 3px; padding: 0 1px; } /* pulse a message when jumped to from search */ .bubble.b-hit { animation: bHit 2.4s var(--ease); } @keyframes bHit { 0%, 68% { box-shadow: 0 0 0 2px var(--accent), 0 0 14px var(--accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } } /* ── contact tags ────────────────────────────────── */ .tg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tc, var(--accent)); display: inline-block; flex: 0 0 auto; } .ci-tagdot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; } .tag-filters { display: flex; gap: 6px; padding: 0 14px 8px; overflow-x: auto; scrollbar-width: none; } .tag-filters::-webkit-scrollbar { display: none; } .tagf { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--hover); border: 1px solid transparent; transition: background .12s ease, color .12s ease, border-color .12s ease; } .tagf:hover { color: var(--text); } .tagf.on { color: var(--text); border-color: var(--tc); background: color-mix(in srgb, var(--tc) 16%, transparent); } .th-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; align-items: center; } .th-tags:empty { display: none; } .tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 5px 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--tc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent); } .tag-chip .tc-x { display: inline-flex; opacity: .55; } .tag-chip .tc-x svg { width: 11px; height: 11px; } .tag-chip .tc-x:hover { opacity: 1; } .tag-add { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--text-2); border: 1px dashed var(--border-strong); } .tag-add:hover { color: var(--accent); border-color: var(--accent); } .tag-add svg { width: 12px; height: 12px; } .tag-pick-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; max-height: 340px; overflow-y: auto; } .tag-pick { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; padding: 9px 11px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid transparent; transition: background .12s ease, color .12s ease, border-color .12s ease; } .tag-pick span { flex: 1; min-width: 0; } .tag-pick > svg { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; } .tag-pick:hover { color: var(--text); } .tag-pick.on { color: var(--text); border-color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, transparent); } /* tags manager (settings) */ .tag-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .tag-row:last-child { border-bottom: none; } .tag-row .tr-name { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tag-row .tr-count { font-size: 12px; color: var(--muted); } .tag-row input[type="color"] { width: 30px; height: 30px; padding: 0; border: 1px solid var(--border-strong); border-radius: 8px; background: none; cursor: pointer; flex: 0 0 auto; } .tag-row .btn-icon svg { width: 15px; height: 15px; } .tag-new { display: flex; gap: 8px; align-items: center; margin-top: 12px; } .tag-new input[type="text"] { flex: 1; } .es-connect { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } /* ── internal notes (in the thread timeline) ─────── */ .note-item { align-self: stretch; margin: 4px 0; background: color-mix(in srgb, var(--amber) 7%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 15%, transparent); border-inline-start: 3px solid var(--amber); border-radius: 14px; padding: 9px 13px; } .note-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } .note-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--amber); background: var(--amber-soft); padding: 2px 8px; border-radius: 999px; } .note-tag svg { width: 10px; height: 10px; } .note-meta { font-size: 10.5px; color: var(--muted); } .note-del { margin-inline-start: auto; color: var(--muted); display: inline-flex; } .note-del svg { width: 12px; height: 12px; } .note-del:hover { color: var(--red); } .note-body { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; line-height: 1.4; } /* ── composer Reply / Note toggle ────────────────── */ /* icon-only Reply/Note switch — lives inline at the start of the composer bar */ .composer-mode { display: inline-flex; gap: 2px; padding: 3px; background: var(--hover); border: 1px solid var(--border); border-radius: 9px; flex: 0 0 auto; align-self: flex-end; } .cm-tab { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; color: var(--text-2); transition: color .15s, background .15s; } .cm-tab svg { width: 15px; height: 15px; } .cm-tab:hover { color: var(--text); } .cm-tab.on { color: var(--accent); background: var(--accent-soft); } .composer.note-mode { background: color-mix(in srgb, var(--amber) 7%, transparent); } .composer.note-mode .cm-tab[data-cmode="note"].on { color: var(--amber); background: var(--amber-soft); } .composer.note-mode #btn-send { background: var(--amber); color: #3a2a00; } /* in Note mode, the message-only tools don't apply — hide them */ .composer.note-mode .cm-msg-only { display: none; } /* ── conversation status ─────────────────────────── */ .conv-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: var(--muted); } .conv-open .conv-dot { background: var(--blue); } .conv-pending .conv-dot { background: var(--amber); } .conv-resolved .conv-dot { background: var(--green); } .conv-pill { display: inline-flex; align-items: center; gap: 5px; } .conv-pill.conv-open { background: rgba(59, 130, 246, .14); color: var(--blue); } .conv-pill.conv-pending { background: var(--amber-soft); color: var(--amber); } .conv-pill.conv-resolved { background: var(--green-soft); color: var(--green); } .chat-item.conv-pending { box-shadow: inset 3px 0 0 var(--amber); } .chat-item.conv-resolved { box-shadow: inset 3px 0 0 var(--green); } .tm-status { padding: 2px 6px; } .tm-status > label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 2px 6px 6px; } .tm-status-btns { display: flex; gap: 5px; } .tm-st { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 4px; border-radius: 8px; font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--hover); border: 1px solid transparent; } .tm-st:hover { color: var(--text); } .tm-st.on { border-color: currentColor; } .tm-st.conv-open.on { color: var(--blue); } .tm-st.conv-pending.on { color: var(--amber); } .tm-st.conv-resolved.on { color: var(--green); } .status-filters .ibf.sf-pending.on { color: var(--amber); } .status-filters .ibf.sf-resolved.on { color: var(--green); } .unread-dot { background: var(--accent); color: #06281f; font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 0 6.5px; line-height: 17px; } /* chat wallpaper: faint teal geometric lattice + a soft top glow over the base colour — theme-aware (base is var(--bg), overlays are translucent so they work in both dark and clean/light skins). Sits on .thread so it stays put while the messages in .thread-body scroll over it. */ .thread { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%232dd4bf' stroke-opacity='0.06' stroke-width='1'%3E%3Crect x='18' y='18' width='24' height='24'/%3E%3Crect x='18' y='18' width='24' height='24' transform='rotate(45 30 30)'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(120% 80% at 50% 0%, rgba(45, 212, 191, .05), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .05)); background-repeat: repeat, no-repeat, no-repeat; background-size: 60px 60px, 100% 100%, 100% 100%; } .thread-head { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 10px; margin: 10px; padding: 10px 14px; border-radius: 14px; background: var(--glass-grad); border: 1px solid var(--glass-brd); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi), 0 6px 22px rgba(0, 0, 0, 0.28); } .th-back { display: none; } .th-actions { display: flex; gap: 8px; flex-shrink: 0; } .th-kebab { display: inline-flex; flex-shrink: 0; } .thread-menu .tm-sep { height: 1px; background: var(--border); margin: 4px 6px; } .thread-menu .tm-danger { color: #FCA5A5; } .thread-menu .tm-danger:hover { background: var(--red-soft); } /* on desktop the inline actions already show these, so hide the duplicates in the menu */ @media (min-width: 1024px) { .thread-menu .tm-primary { display: none; } } .th-name, .th-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* masked / temporarily revealed contact number in the chat header */ .num-hidden, .num-shown { display: inline-flex; align-items: center; gap: 4px; } .num-hidden svg, .num-shown svg { width: 12px; height: 12px; } .num-hidden { opacity: .75; } .num-shown { color: var(--accent); font-variant-numeric: tabular-nums; } .thread-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 8px; z-index: 30; min-width: 210px; padding: 6px; background: var(--panel-grad); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-brd); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 16px 44px rgba(0, 0, 0, 0.5); animation: rise .2s var(--ease); } .thread-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 11px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 600; } .thread-menu button:hover { background: var(--hover); } .thread-menu button svg { width: 16px; height: 16px; flex: 0 0 auto; } .thread-menu .tm-info { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; color: var(--text-2); border-top: 1px solid var(--border); margin-top: 4px; } .thread-menu .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; } .thread-head .th-name { font-weight: 800; font-size: 14.5px; } .thread-head .th-sub { font-size: 11.5px; color: var(--muted); } .thread-body { position: absolute; inset: 0; overflow-y: auto; padding: 80px 24px 122px; display: flex; flex-direction: column; gap: 4px; } .day-sep { align-self: center; margin: 12px 0 8px; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; } /* WhatsApp-generated notice (number / identity change) — belongs to neither side */ .sys-note { align-self: center; max-width: min(86%, 420px); margin: 8px 0; display: flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: var(--hover); border: 1px solid var(--border); font-size: 11.5px; line-height: 1.45; color: var(--text-2); text-align: center; } .sys-note svg { width: 13px; height: 13px; flex: 0 0 13px; color: var(--muted); } .bubble { max-width: min(68%, 560px); padding: 8px 13px; border-radius: 18px; font-size: 13.5px; word-break: break-word; position: relative; } .bubble .b-text { white-space: pre-wrap; } .b-unsupported { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-style: italic; } .b-unsupported .bu-ico { flex: 0 0 auto; display: inline-flex; } .b-unsupported .bu-ico svg { width: 18px; height: 18px; } .bubble.in { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 6px; } .bubble.out { align-self: flex-end; background: #115E57; border-bottom-right-radius: 6px; } .bubble .b-meta { display: flex; align-items: center; gap: 5px; justify-content: flex-end; margin-top: 3px; font-size: 10.5px; color: rgba(231,236,245,.55); } .bubble .b-sender { font-size: 10.5px; font-weight: 700; color: var(--accent); margin-bottom: 2px; } .bubble.out .b-sender { color: #5EEAD4; } .bubble img { max-width: 300px; border-radius: 9px; display: block; margin-bottom: 4px; } .bubble .b-doc { display: flex; align-items: center; gap: 9px; background: rgba(0,0,0,.22); padding: 9px 11px; border-radius: 9px; margin-bottom: 4px; color: var(--text); } /* custom voice-note player (replaces native