/* ========================================================================== * upway_ui.css — Upway Console v2 * -------------------------------------------------------------------------- * The single visual identity layer for the whole product. Loaded LAST in * every , so its tokens and component rules win the cascade over * tabler.min.css, admin_tabler_bridge.css, upway_product_ui.css and * upway_design_system.css without modifying those files. * * Identity: * - "Upway Blue" (#1b6df5) primary with a blue→cyan brand gradient. * - Signature dark-navy navigation rail in BOTH light and dark themes * (the look buyers know from Blip/Zenvia-class consoles). * - WhatsApp green reserved for live/online/connected signals. * - Inter for text, JetBrains Mono for numbers and protocols. * - Light theme default, full dark theme via [data-bs-theme="dark"]. * * New component namespaces introduced by the v2 redesign use the `uw-` * prefix (inbox, chat bubbles, avatars, auth screen, side panel). * ========================================================================== */ /* -------------------------------------------------------------------------- * 1. TOKEN OVERRIDES — recolor the entire existing design system * -------------------------------------------------------------------------- */ :root { /* Upway brand */ --uw-blue-50: #eaf2ff; --uw-blue-100: #d6e6ff; --uw-blue-200: #adccff; --uw-blue-300: #7dadfc; --uw-blue-400: #4a8cf9; --uw-blue-500: #1b6df5; --uw-blue-600: #1257d4; --uw-blue-700: #0e45ab; --uw-blue-800: #0c3787; --uw-cyan-400: #22c8e6; --uw-cyan-500: #00b8d9; --uw-gradient: linear-gradient(135deg, var(--uw-blue-500) 0%, var(--uw-cyan-500) 100%); --uw-gradient-soft: linear-gradient(135deg, rgba(27,109,245,.12) 0%, rgba(0,184,217,.10) 100%); /* Navy rail palette (constant across themes) */ --uw-navy-900: #081021; --uw-navy-850: #0a142a; --uw-navy-800: #0d1a33; --uw-navy-700: #14244a; --uw-navy-line: rgba(148, 178, 255, 0.12); --uw-navy-text: #aab8d4; --uw-navy-text-strong: #eef3ff; /* WhatsApp / live */ --uw-wa-green: #25d366; --uw-wa-green-deep: #128c7e; /* Remap the existing --ds-* accent so every legacy component recolors */ --ds-accent-50: var(--uw-blue-50); --ds-accent-100: var(--uw-blue-100); --ds-accent-200: var(--uw-blue-200); --ds-accent-300: var(--uw-blue-300); --ds-accent-400: var(--uw-blue-400); --ds-accent-500: var(--uw-blue-500); --ds-accent-600: var(--uw-blue-600); --ds-accent-700: var(--uw-blue-700); --ds-accent-800: var(--uw-blue-800); --ds-bg: #f5f7fb; --ds-surface: #ffffff; --ds-surface-raised: #ffffff; --ds-surface-sunken: #eef1f7; --ds-surface-hover: #f6f9ff; --ds-border: #e3e8f1; --ds-border-strong: #cdd6e4; --ds-border-subtle: #ecf0f6; --ds-shadow-xs: 0 1px 2px rgba(13, 27, 62, 0.05); --ds-shadow-sm: 0 1px 3px rgba(13, 27, 62, 0.07), 0 1px 2px rgba(13, 27, 62, 0.05); --ds-shadow-md: 0 4px 10px -2px rgba(13, 27, 62, 0.08), 0 2px 4px -2px rgba(13, 27, 62, 0.05); --ds-shadow-lg: 0 12px 28px -6px rgba(13, 27, 62, 0.14), 0 4px 10px -4px rgba(13, 27, 62, 0.08); --ds-shadow-ring-accent: 0 0 0 3px rgba(27, 109, 245, 0.18); --ds-rail-width: 264px; --ds-topbar-height: 60px; /* Keep the shell grid column in sync with the actual rail width (admin_tabler_bridge.css defaults this to 18rem, leaving a gap). */ --gt-sidebar-width: var(--ds-rail-width); /* Tabler bridge — recolor bootstrap-ish components on legacy pages */ --tblr-primary: var(--uw-blue-500); --tblr-primary-rgb: 27, 109, 245; --tblr-link-color: var(--uw-blue-600); --tblr-link-hover-color: var(--uw-blue-700); } [data-bs-theme="dark"] { --ds-bg: #0b1220; --ds-surface: #101a2d; --ds-surface-raised: #14203a; --ds-surface-sunken: #0d1626; --ds-surface-hover: #15223d; --ds-border: #1f2c47; --ds-border-strong: #2c3c5e; --ds-border-subtle: #18243c; --ds-text: #e6ecf7; --ds-text-strong: #f6f9ff; --ds-text-muted: #94a3bf; --ds-text-subtle: #7385a3; --ds-text-disabled: #51637f; --ds-shadow-xs: none; --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --ds-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55); } /* -------------------------------------------------------------------------- * 2. BASE * -------------------------------------------------------------------------- */ body, body.gt-tabler-body { font-family: var(--ds-font-sans); background: var(--ds-bg); color: var(--ds-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--uw-blue-500); color: #fff; } a { color: var(--uw-blue-600); } a:hover { color: var(--uw-blue-700); } /* Focus ring, consistent everywhere */ :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--uw-blue-500); outline-offset: 2px; border-radius: 6px; } /* -------------------------------------------------------------------------- * 2b. SHELL LAYOUT FIX — kill the double left offset * The shell grid already reserves the rail column, but Tabler ALSO applies * `.navbar-vertical.navbar-expand-lg ~ .page-wrapper { margin-left: 15rem }`, * producing a large dead gap between the sidebar and the content. * -------------------------------------------------------------------------- */ .gt-shell .page-wrapper, .gt-shell .navbar-vertical.navbar-expand-lg ~ .page-wrapper { margin-left: 0 !important; margin-right: 0 !important; } .gt-shell.page, .gt-shell:not(.page) { grid-template-columns: var(--ds-rail-width) minmax(0, 1fr); } /* -------------------------------------------------------------------------- * 3. NAVIGATION RAIL — signature navy sidebar, both themes * -------------------------------------------------------------------------- */ .gt-rail, [data-bs-theme="dark"] .gt-rail { background: radial-gradient(120% 60% at 0% 0%, rgba(27, 109, 245, 0.20), transparent 55%), radial-gradient(100% 50% at 100% 100%, rgba(0, 184, 217, 0.10), transparent 60%), var(--uw-navy-900); border-right: 1px solid var(--uw-navy-line); color: var(--uw-navy-text); width: var(--ds-rail-width); } .gt-rail .gt-rail-inner { padding: 18px 14px; } .gt-brand { gap: 12px; padding: 4px 8px 16px; align-items: center; } .gt-brand-mark, .gt-brand-mark-command, [data-bs-theme="dark"] .gt-brand-mark, [data-bs-theme="dark"] .gt-brand-mark-command { width: 40px; height: 40px; border-radius: 12px; background: var(--uw-gradient); color: #fff; font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -4px rgba(27, 109, 245, 0.55); border: none; } .gt-brand-title { color: var(--uw-navy-text-strong); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; line-height: 1.15; } .gt-brand-subtitle { color: var(--uw-navy-text); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; } .gt-rail-group-title { color: #5e729a; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin: 18px 10px 8px; } .gt-destination-list { gap: 2px; } .gt-destination-tile, .gt-rail .nav-link.gt-destination-tile { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; color: var(--uw-navy-text); border: 1px solid transparent; transition: background .15s ease, color .15s ease; position: relative; } .gt-destination-tile:hover, .gt-rail .nav-link.gt-destination-tile:hover { background: rgba(133, 170, 255, 0.08); color: var(--uw-navy-text-strong); } .gt-destination-tile.active, .gt-destination-tile[aria-current="page"], [data-bs-theme="dark"] .gt-destination-tile.active, [data-bs-theme="dark"] .gt-destination-tile[aria-current="page"] { background: linear-gradient(90deg, rgba(27, 109, 245, 0.28), rgba(27, 109, 245, 0.10)); border-color: rgba(27, 109, 245, 0.35); color: #fff; } .gt-destination-tile.active::before, .gt-destination-tile[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 20%; bottom: 20%; width: 3px; border-radius: 3px; background: var(--uw-gradient); } .gt-destination-copy strong { display: block; color: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; } .gt-destination-copy small { display: block; color: #6c7fa6; font-size: 11px; line-height: 1.25; margin-top: 1px; } .gt-destination-tile.active .gt-destination-copy small, .gt-destination-tile:hover .gt-destination-copy small { color: #93a7cf; } /* Icon tiles: quiet monochrome squares; active = gradient */ .gt-icon-tile, .gt-rail .nav-link-icon.gt-icon-tile { width: 32px; height: 32px; min-width: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(133, 170, 255, 0.10); border: 1px solid rgba(133, 170, 255, 0.10); color: #8fa5cf; } .gt-icon-tile .icon { width: 17px; height: 17px; } .gt-destination-tile.active .gt-icon-tile, .gt-destination-tile[aria-current="page"] .gt-icon-tile { background: var(--uw-gradient); border-color: transparent; color: #fff; box-shadow: 0 4px 10px -2px rgba(27, 109, 245, 0.5); } /* Neutralize the old per-item rainbow tints for a calmer rail */ .gt-icon-tile.gt-blue, .gt-icon-tile.gt-indigo, .gt-icon-tile.gt-purple, .gt-icon-tile.gt-cyan, .gt-icon-tile.gt-orange, .gt-icon-tile.gt-green, .gt-icon-tile.gt-teal, .gt-icon-tile.gt-red, .gt-icon-tile.gt-gray, .gt-icon-tile.gt-amber, .gt-icon-tile.gt-yellow { background: rgba(133, 170, 255, 0.10); color: #8fa5cf; } .gt-destination-tile.active :is(.gt-icon-tile.gt-blue, .gt-icon-tile.gt-indigo, .gt-icon-tile.gt-purple, .gt-icon-tile.gt-cyan, .gt-icon-tile.gt-orange, .gt-icon-tile.gt-green, .gt-icon-tile.gt-teal, .gt-icon-tile.gt-red, .gt-icon-tile.gt-gray, .gt-icon-tile.gt-amber, .gt-icon-tile.gt-yellow) { background: var(--uw-gradient); color: #fff; } /* Rail user card (new) */ .uw-user-card { margin-top: 14px; padding: 10px; border-radius: 12px; background: rgba(133, 170, 255, 0.07); border: 1px solid var(--uw-navy-line); display: flex; align-items: center; gap: 10px; } .uw-user-card .uw-avatar { width: 34px; height: 34px; font-size: 13px; } .uw-user-card-name { color: var(--uw-navy-text-strong); font-size: 13px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; } .uw-user-card-role { color: #6c7fa6; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; } .uw-user-card .uw-logout { margin-left: auto; color: #8fa5cf; display: inline-flex; padding: 6px; border-radius: 8px; } .uw-user-card .uw-logout:hover { background: rgba(239, 68, 68, 0.16); color: #fda4af; } .uw-user-card .uw-logout .icon { width: 17px; height: 17px; } /* -------------------------------------------------------------------------- * 4. TOPBAR * -------------------------------------------------------------------------- */ .gt-topbar { background: color-mix(in srgb, var(--ds-surface) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ds-border); min-height: var(--ds-topbar-height); position: sticky; top: 0; z-index: 30; } .gt-topbar .gt-screen-title { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; } .gt-topbar-pill { background: var(--uw-gradient-soft); color: var(--uw-blue-700); border: 1px solid rgba(27, 109, 245, 0.22); border-radius: 999px; font-size: 11px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 11px; } [data-bs-theme="dark"] .gt-topbar-pill { color: var(--uw-blue-300); } /* Live connection pill (new, used in shells) */ .uw-live-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ds-text-muted); border: 1px solid var(--ds-border); background: var(--ds-surface); border-radius: 999px; padding: 5px 12px; } .uw-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-text-disabled); flex: none; } .uw-live-pill.is-live .uw-live-dot { background: var(--uw-wa-green); box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.22); animation: uw-pulse 2.2s ease-in-out infinite; } .uw-live-pill.is-live { color: var(--uw-wa-green-deep); border-color: rgba(37, 211, 102, 0.35); } [data-bs-theme="dark"] .uw-live-pill.is-live { color: #5fe39a; } @keyframes uw-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.22); } 50% { box-shadow: 0 0 0 6px rgba(37, 211, 102, 0.08); } } /* Compact icon buttons in the topbar */ .uw-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--ds-border); background: var(--ds-surface); color: var(--ds-text-muted); transition: all .15s ease; } .uw-icon-btn:hover { border-color: var(--ds-border-strong); color: var(--ds-text); background: var(--ds-surface-hover); } .uw-icon-btn .icon { width: 18px; height: 18px; } /* Theme toggle modernized */ .gt-theme-toggle { border-radius: 10px; } /* -------------------------------------------------------------------------- * 5. PAGE INTRO * -------------------------------------------------------------------------- */ .gt-kicker { color: var(--uw-blue-600); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } [data-bs-theme="dark"] .gt-kicker { color: var(--uw-blue-300); } .gt-page-intro-block { margin: 4px 0 18px; } .gt-page-intro-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 2px 0 4px; } .gt-page-intro { color: var(--ds-text-muted); max-width: 70ch; font-size: 13.5px; margin: 0; } /* -------------------------------------------------------------------------- * 6. CORE COMPONENTS — buttons, inputs, cards, badges, tables * -------------------------------------------------------------------------- */ .btn { border-radius: 10px; font-weight: 600; } .btn-primary, .gt-button-primary { background: var(--uw-blue-500); border-color: var(--uw-blue-500); color: #fff; box-shadow: 0 1px 2px rgba(13, 27, 62, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .btn-primary:hover, .gt-button-primary:hover { background: var(--uw-blue-600); border-color: var(--uw-blue-600); color: #fff; } .btn-secondary, .btn-outline-secondary, .btn-outline-light, .gt-button-secondary { background: var(--ds-surface); border: 1px solid var(--ds-border-strong); color: var(--ds-text); box-shadow: var(--ds-shadow-xs); } .btn-secondary:hover, .btn-outline-secondary:hover, .btn-outline-light:hover, .gt-button-secondary:hover { background: var(--ds-surface-hover); border-color: var(--uw-blue-300); color: var(--ds-text-strong); } .btn-danger, .gt-button-danger { background: #dc2626; border-color: #dc2626; color: #fff; } .btn-danger:hover, .gt-button-danger:hover { background: #b91c1c; border-color: #b91c1c; } .btn-outline-danger { color: #dc2626; border-color: rgba(220, 38, 38, 0.4); background: transparent; } .btn-outline-danger:hover { background: #dc2626; border-color: #dc2626; color: #fff; } .form-control, .form-select, .gt-input, .gt-textarea { border-radius: 10px; border: 1px solid var(--ds-border-strong); background: var(--ds-surface); color: var(--ds-text); font-size: 14px; } .form-control:focus, .form-select:focus, .gt-input:focus, .gt-textarea:focus { border-color: var(--uw-blue-400); box-shadow: var(--ds-shadow-ring-accent); background: var(--ds-surface); color: var(--ds-text); } .form-control::placeholder, .gt-input::placeholder, .gt-textarea::placeholder { color: var(--ds-text-subtle); } .form-label, .gt-field-label { font-weight: 600; color: var(--ds-text); } /* Cards / panels */ .card, .gt-panel-frame { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 14px; box-shadow: var(--ds-shadow-sm); } .gt-panel-header { border-bottom: 1px solid var(--ds-border-subtle); } .gt-panel-header h2 { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; } .gt-panel-kicker { color: var(--uw-blue-600); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } [data-bs-theme="dark"] .gt-panel-kicker { color: var(--uw-blue-300); } /* Metric cards */ .gt-metric-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 14px; box-shadow: var(--ds-shadow-sm); position: relative; overflow: hidden; } .gt-metric-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--uw-gradient); opacity: .9; } .gt-metric-card strong { font-family: var(--ds-font-mono); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; } .gt-metric-label { color: var(--ds-text-muted); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; } /* Status badges — soft tint + dot */ .gt-status-badge { border-radius: 999px; font-size: 11.5px; font-weight: 650; padding: 4px 11px; letter-spacing: 0.02em; } /* Flash messages */ .gt-flash, .alert { border-radius: 12px; border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-xs); } .gt-flash.success, .alert-success { background: #ecfdf5; border-color: rgba(16, 185, 129, .35); color: #047857; } .gt-flash.danger, .alert-danger { background: #fef2f2; border-color: rgba(239, 68, 68, .35); color: #b91c1c; } .gt-flash.info, .alert-info { background: var(--uw-blue-50); border-color: rgba(27, 109, 245, .3); color: var(--uw-blue-700); } .gt-flash.warning, .alert-warning { background: #fffbeb; border-color: rgba(245, 158, 11, .4); color: #b45309; } [data-bs-theme="dark"] .gt-flash.success, [data-bs-theme="dark"] .alert-success { background: rgba(16,185,129,.1); color: #6ee7b7; } [data-bs-theme="dark"] .gt-flash.danger, [data-bs-theme="dark"] .alert-danger { background: rgba(239,68,68,.1); color: #fca5a5; } [data-bs-theme="dark"] .gt-flash.info, [data-bs-theme="dark"] .alert-info { background: rgba(27,109,245,.12); color: #93c0ff; } [data-bs-theme="dark"] .gt-flash.warning, [data-bs-theme="dark"] .alert-warning { background: rgba(245,158,11,.1); color: #fcd34d; } /* Tables */ .table thead th, th { color: var(--ds-text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; } .table tbody tr:hover { background: var(--ds-surface-hover); } /* Accordion (Tabler/Bootstrap) reskin for protocol history */ .accordion-item { background: var(--ds-surface); border: 1px solid var(--ds-border) !important; border-radius: 14px !important; box-shadow: var(--ds-shadow-sm); overflow: hidden; } .accordion-button { background: var(--ds-surface); color: var(--ds-text); font-weight: 600; padding: 16px 18px; } .accordion-button:not(.collapsed) { background: var(--uw-gradient-soft); color: var(--ds-text-strong); box-shadow: inset 0 -1px 0 var(--ds-border); } .accordion-button:focus { box-shadow: var(--ds-shadow-ring-accent); } /* -------------------------------------------------------------------------- * 7. AVATARS & CHIPS (new) * -------------------------------------------------------------------------- */ .uw-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--uw-gradient); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; user-select: none; } .uw-avatar.is-neutral { background: var(--ds-surface-sunken); color: var(--ds-text-muted); border: 1px solid var(--ds-border); } .uw-avatar.is-sm { width: 32px; height: 32px; font-size: 12.5px; } .uw-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-size: 11.5px; font-weight: 650; padding: 3px 10px; border: 1px solid transparent; white-space: nowrap; } .uw-chip .uw-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .uw-chip.bot { background: #ecfdf5; color: #047857; border-color: rgba(16,185,129,.3); } .uw-chip.handoff { background: #fff7ed; color: #c2410c; border-color: rgba(249,115,22,.35); } .uw-chip.unread { background: var(--uw-blue-50); color: var(--uw-blue-700); border-color: rgba(27,109,245,.3); } .uw-chip.os { background: #f5f3ff; color: #6d28d9; border-color: rgba(124,58,237,.3); } .uw-chip.danger { background: #fef2f2; color: #b91c1c; border-color: rgba(239,68,68,.3); } .uw-chip.neutral { background: var(--ds-surface-sunken); color: var(--ds-text-muted); border-color: var(--ds-border); } [data-bs-theme="dark"] .uw-chip.bot { background: rgba(16,185,129,.12); color: #6ee7b7; } [data-bs-theme="dark"] .uw-chip.handoff { background: rgba(249,115,22,.14); color: #fdba74; } [data-bs-theme="dark"] .uw-chip.unread { background: rgba(27,109,245,.14); color: #93c0ff; } [data-bs-theme="dark"] .uw-chip.os { background: rgba(124,58,237,.14); color: #c4b5fd; } [data-bs-theme="dark"] .uw-chip.danger { background: rgba(239,68,68,.12); color: #fca5a5; } /* -------------------------------------------------------------------------- * 8. INBOX WORKSPACE (admin dashboard) — uw-app namespace * -------------------------------------------------------------------------- */ .uw-app { display: grid; grid-template-columns: 340px minmax(0, 1fr) 350px; gap: 0; border: 1px solid var(--ds-border); border-radius: 16px; background: var(--ds-surface); box-shadow: var(--ds-shadow-md); overflow: hidden; height: calc(100vh - var(--ds-topbar-height) - 48px); min-height: 540px; } /* Column 1 — conversation list */ .uw-inbox { display: flex; flex-direction: column; border-right: 1px solid var(--ds-border); min-height: 0; background: var(--ds-surface); } .uw-inbox-head { padding: 14px 14px 10px; border-bottom: 1px solid var(--ds-border-subtle); } .uw-inbox-title { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 10px; display: flex; align-items: center; justify-content: space-between; } .uw-inbox-count { font-size: 11.5px; font-weight: 650; color: var(--ds-text-muted); background: var(--ds-surface-sunken); border: 1px solid var(--ds-border); border-radius: 999px; padding: 2px 9px; } .uw-search { position: relative; } .uw-search .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ds-text-subtle); pointer-events: none; } .uw-search input { padding-left: 34px; height: 38px; font-size: 13.5px; } .uw-filter-row { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; } .uw-filter-tab { text-decoration: none; font-size: 12px; font-weight: 600; color: var(--ds-text-muted); background: var(--ds-surface-sunken); border: 1px solid var(--ds-border); border-radius: 999px; padding: 4px 11px; transition: all .15s ease; } .uw-filter-tab:hover { color: var(--ds-text); border-color: var(--ds-border-strong); } .uw-filter-tab.active { background: var(--uw-blue-500); border-color: var(--uw-blue-500); color: #fff; box-shadow: 0 2px 6px -2px rgba(27,109,245,.5); } .uw-inbox-list { flex: 1; overflow-y: auto; min-height: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; } .uw-convo { display: flex; gap: 11px; padding: 11px 10px; border-radius: 12px; text-decoration: none; color: inherit; border: 1px solid transparent; transition: background .12s ease; position: relative; } .uw-convo:hover { background: var(--ds-surface-hover); } .uw-convo.active { background: var(--uw-gradient-soft); border-color: rgba(27, 109, 245, 0.3); } .uw-convo-main { flex: 1; min-width: 0; } .uw-convo-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .uw-convo-name { font-size: 13.5px; font-weight: 650; color: var(--ds-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uw-convo-time { font-size: 11px; color: var(--ds-text-subtle); flex: none; } .uw-convo-preview { font-size: 12.5px; color: var(--ds-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; } .uw-convo-badges { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; } .uw-convo-badges .uw-chip { font-size: 10.5px; padding: 2px 8px; } .uw-convo.unread .uw-convo-name { font-weight: 750; } .uw-convo .uw-unread-dot { position: absolute; top: 14px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--uw-blue-500); box-shadow: 0 0 0 3px rgba(27,109,245,.18); } /* Column 2 — chat area */ .uw-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ds-bg); } .uw-chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); flex-wrap: wrap; } .uw-chat-head-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; } .uw-chat-head-meta { font-size: 12px; color: var(--ds-text-muted); font-family: var(--ds-font-mono); } .uw-chat-head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .uw-chat-banner { margin: 12px 18px 0; padding: 10px 14px; border-radius: 11px; background: #fffbeb; border: 1px solid rgba(245, 158, 11, 0.4); color: #92400e; font-size: 13px; font-weight: 550; } [data-bs-theme="dark"] .uw-chat-banner { background: rgba(245,158,11,.1); color: #fcd34d; } .uw-timeline { flex: 1; overflow-y: auto; min-height: 0; padding: 18px; display: flex; flex-direction: column; gap: 10px; } /* Chat bubbles — WhatsApp-inspired but on-brand */ .uw-bubble { max-width: min(78%, 620px); border-radius: 14px; padding: 9px 13px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; box-shadow: var(--ds-shadow-xs); position: relative; } .uw-bubble .uw-bubble-meta { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ds-text-subtle); margin-top: 5px; justify-content: flex-end; white-space: nowrap; } .uw-bubble-author { font-size: 11px; font-weight: 700; margin-bottom: 3px; } /* customer (left) */ .uw-bubble.from-user { align-self: flex-start; background: var(--ds-surface); border: 1px solid var(--ds-border); border-bottom-left-radius: 5px; } .uw-bubble.from-user .uw-bubble-author { color: var(--uw-wa-green-deep); } [data-bs-theme="dark"] .uw-bubble.from-user .uw-bubble-author { color: #5fe39a; } /* bot / agent (right) */ .uw-bubble.from-assistant, .uw-bubble.from-admin { align-self: flex-end; background: var(--uw-blue-50); border: 1px solid rgba(27, 109, 245, 0.25); border-bottom-right-radius: 5px; } [data-bs-theme="dark"] .uw-bubble.from-assistant, [data-bs-theme="dark"] .uw-bubble.from-admin { background: #16294d; border-color: rgba(27,109,245,.4); } .uw-bubble.from-assistant .uw-bubble-author { color: var(--uw-blue-700); } .uw-bubble.from-admin .uw-bubble-author { color: #6d28d9; } [data-bs-theme="dark"] .uw-bubble.from-assistant .uw-bubble-author { color: #93c0ff; } [data-bs-theme="dark"] .uw-bubble.from-admin .uw-bubble-author { color: #c4b5fd; } /* system (center) */ .uw-bubble.from-system { align-self: center; background: var(--ds-surface-sunken); border: 1px dashed var(--ds-border-strong); color: var(--ds-text-muted); font-size: 12px; border-radius: 10px; max-width: 86%; } .uw-bubble img, .uw-bubble video { max-width: 100%; max-height: 280px; border-radius: 10px; display: block; } .uw-bubble audio { width: 260px; max-width: 100%; } .uw-bubble-attachment-note { font-size: 11.5px; color: var(--ds-text-muted); margin-top: 6px; } .uw-protocol-tag { font-family: var(--ds-font-mono); font-size: 10px; color: var(--ds-text-subtle); background: var(--ds-surface-sunken); border-radius: 999px; padding: 1px 8px; } /* Composer */ .uw-composer { padding: 12px 18px; background: var(--ds-surface); border-top: 1px solid var(--ds-border); } .uw-composer form { display: flex; gap: 10px; align-items: flex-end; } .uw-composer textarea { flex: 1; resize: none; min-height: 44px; max-height: 140px; border-radius: 12px; } .uw-send-btn { height: 44px; min-width: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; } /* Column 3 — context / actions panel */ .uw-side { border-left: 1px solid var(--ds-border); overflow-y: auto; min-height: 0; background: var(--ds-surface); display: flex; flex-direction: column; } .uw-side-block { padding: 16px; border-bottom: 1px solid var(--ds-border-subtle); } .uw-side-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ds-text-muted); margin: 0 0 10px; } .uw-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 12.5px; } .uw-kv dt { color: var(--ds-text-muted); font-weight: 500; flex: none; } .uw-kv dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; } /* Collapsible action groups */ .uw-action { border: 1px solid var(--ds-border); border-radius: 12px; background: var(--ds-surface); margin-bottom: 8px; overflow: hidden; } .uw-action > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 11px 13px; font-size: 13px; font-weight: 600; color: var(--ds-text); user-select: none; } .uw-action > summary::-webkit-details-marker { display: none; } .uw-action > summary::after { content: "+"; margin-left: auto; color: var(--ds-text-subtle); font-weight: 600; font-size: 15px; } .uw-action[open] > summary::after { content: "–"; } .uw-action[open] > summary { border-bottom: 1px solid var(--ds-border-subtle); background: var(--ds-surface-hover); } .uw-action-body { padding: 12px 13px; display: grid; gap: 9px; } .uw-action-body p { margin: 0; font-size: 12px; color: var(--ds-text-muted); line-height: 1.45; } .uw-result-item { border: 1px solid var(--ds-border); border-left: 3px solid var(--uw-blue-400); border-radius: 10px; padding: 9px 11px; font-size: 12.5px; background: var(--ds-surface-sunken); } .uw-result-item strong { display: block; margin-bottom: 3px; } /* Empty states */ .uw-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ds-text-muted); text-align: center; padding: 48px 24px; font-size: 13.5px; } .uw-empty .uw-empty-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--uw-gradient-soft); border: 1px solid rgba(27, 109, 245, 0.2); display: flex; align-items: center; justify-content: center; color: var(--uw-blue-500); } .uw-empty .uw-empty-icon .icon { width: 24px; height: 24px; } /* Inbox responsive */ @media (max-width: 1320px) { .uw-app { grid-template-columns: 300px minmax(0, 1fr); height: auto; min-height: 70vh; } .uw-side { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--ds-border); } } @media (max-width: 880px) { .uw-app { grid-template-columns: 1fr; height: auto; } .uw-inbox { border-right: none; border-bottom: 1px solid var(--ds-border); max-height: 44vh; } .uw-timeline { max-height: 56vh; } } /* -------------------------------------------------------------------------- * 9. PROTOCOL HISTORY PAGE (admin_logs) — uw-log namespace * -------------------------------------------------------------------------- */ .uw-log-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .message-timeline { background: var(--ds-bg); border: 1px solid var(--ds-border); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; } .message-timeline .uw-bubble { box-shadow: none; } /* -------------------------------------------------------------------------- * 9b. LEGACY TIMELINE (gt-message-card) — bubble-ize the protocol workspace * Used by protocol_detail.html and vendas_logs.html without markup changes. * -------------------------------------------------------------------------- */ .gt-timeline { display: flex; flex-direction: column; gap: 10px; } .gt-message-card { max-width: min(82%, 640px); border-radius: 14px; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; box-shadow: var(--ds-shadow-xs); border: 1px solid var(--ds-border); background: var(--ds-surface); } .gt-message-card.user { align-self: flex-start; border-bottom-left-radius: 5px; } .gt-message-card.assistant, .gt-message-card.admin { align-self: flex-end; background: var(--uw-blue-50); border-color: rgba(27, 109, 245, 0.25); border-bottom-right-radius: 5px; } [data-bs-theme="dark"] .gt-message-card.assistant, [data-bs-theme="dark"] .gt-message-card.admin { background: #16294d; border-color: rgba(27, 109, 245, 0.4); } .gt-message-card.system, .gt-message-card.system-event { align-self: center; max-width: 88%; background: var(--ds-surface-sunken); border: 1px dashed var(--ds-border-strong); color: var(--ds-text-muted); font-size: 12px; border-radius: 10px; } .gt-message-card .gt-message-top { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; margin-bottom: 4px; } .gt-message-card .gt-message-top strong { font-size: 11.5px; font-weight: 700; } .gt-message-card.user .gt-message-top strong { color: var(--uw-wa-green-deep); } [data-bs-theme="dark"] .gt-message-card.user .gt-message-top strong { color: #5fe39a; } .gt-message-card.assistant .gt-message-top strong { color: var(--uw-blue-700); } .gt-message-card.admin .gt-message-top strong { color: #6d28d9; } [data-bs-theme="dark"] .gt-message-card.assistant .gt-message-top strong { color: #93c0ff; } [data-bs-theme="dark"] .gt-message-card.admin .gt-message-top strong { color: #c4b5fd; } .gt-message-body { white-space: pre-wrap; word-break: break-word; } .gt-message-status { font-size: 10.5px; color: var(--ds-text-subtle); } .gt-message-status.read { color: var(--uw-blue-500); font-weight: 650; } .gt-message-status.failed { color: #dc2626; font-weight: 700; } [data-bs-theme="dark"] .gt-message-status.failed { color: #fca5a5; } /* Reply dock — sticky composer feel */ .gt-reply-dock { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 14px; box-shadow: var(--ds-shadow-md); } .gt-reply-textarea { border-radius: 12px; } /* -------------------------------------------------------------------------- * 10. AUTH SCREEN (login / 403) — uw-auth namespace * -------------------------------------------------------------------------- */ .uw-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--ds-bg); } .uw-auth-brand { position: relative; overflow: hidden; background: radial-gradient(110% 70% at 15% 0%, rgba(27, 109, 245, 0.55), transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(0, 184, 217, 0.35), transparent 55%), var(--uw-navy-900); color: #eef3ff; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; } .uw-auth-brand::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; } .uw-auth-logo { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; } .uw-auth-logo-mark { width: 46px; height: 46px; border-radius: 14px; background: var(--uw-gradient); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 21px; color: #fff; box-shadow: 0 10px 24px -6px rgba(27, 109, 245, 0.6); } .uw-auth-logo-name { font-size: 19px; font-weight: 750; letter-spacing: -0.01em; } .uw-auth-logo-sub { font-size: 11.5px; color: #93a7cf; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } .uw-auth-pitch { position: relative; z-index: 1; max-width: 46ch; } .uw-auth-pitch h2 { font-size: 30px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.18; margin: 0 0 14px; } .uw-auth-pitch p { color: #aab8d4; font-size: 14.5px; line-height: 1.6; margin: 0; } .uw-auth-points { position: relative; z-index: 1; display: grid; gap: 11px; margin-top: 26px; } .uw-auth-point { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: #c4d1ea; } .uw-auth-point .uw-point-dot { width: 22px; height: 22px; flex: none; border-radius: 7px; background: rgba(37, 211, 102, 0.16); border: 1px solid rgba(37, 211, 102, 0.35); color: var(--uw-wa-green); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; margin-top: 1px; } .uw-auth-foot { position: relative; z-index: 1; font-size: 12px; color: #5e729a; } .uw-auth-form-col { display: grid; place-items: center; padding: 32px 24px; position: relative; } .uw-auth-card { width: min(100%, 400px); } .uw-auth-card h1 { font-size: 24px; font-weight: 750; letter-spacing: -0.02em; margin: 0 0 6px; } .uw-auth-card .uw-auth-hint { color: var(--ds-text-muted); font-size: 14px; margin: 0 0 26px; } .uw-auth-theme { position: absolute; top: 18px; right: 18px; } @media (max-width: 940px) { .uw-auth { grid-template-columns: 1fr; } .uw-auth-brand { display: none; } } /* -------------------------------------------------------------------------- * 10b. TRIAGE DASHBOARD (ops_hub v2) — uw-kpi / uw-queue / uw-feed * -------------------------------------------------------------------------- */ .uw-dash { display: grid; gap: 16px; } /* Toolbar: period control + meta */ .uw-dash-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .uw-seg { display: inline-flex; background: var(--ds-surface-sunken); border: 1px solid var(--ds-border); border-radius: 11px; padding: 3px; gap: 2px; } .uw-seg a { text-decoration: none; font-size: 12.5px; font-weight: 600; color: var(--ds-text-muted); padding: 6px 14px; border-radius: 8px; transition: all .15s ease; white-space: nowrap; } .uw-seg a:hover { color: var(--ds-text); } .uw-seg a.active { background: var(--ds-surface); color: var(--ds-text-strong); box-shadow: var(--ds-shadow-sm); } .uw-dash-toolbar .uw-toolbar-note { margin-left: auto; font-size: 12px; color: var(--ds-text-subtle); } /* KPI strip — compact pills, horizontally scrollable on mobile */ .uw-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .uw-kpi { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ds-border); border-radius: 13px; background: var(--ds-surface); box-shadow: var(--ds-shadow-xs); min-width: 0; } .uw-kpi-icon { width: 38px; height: 38px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; } .uw-kpi-icon .icon { width: 19px; height: 19px; } .uw-kpi.is-danger .uw-kpi-icon { background: rgba(239, 68, 68, .12); color: #dc2626; } .uw-kpi.is-warning .uw-kpi-icon { background: rgba(245, 158, 11, .14); color: #b45309; } .uw-kpi.is-info .uw-kpi-icon { background: rgba(27, 109, 245, .12); color: var(--uw-blue-600); } .uw-kpi.is-violet .uw-kpi-icon { background: rgba(124, 58, 237, .12); color: #7c3aed; } [data-bs-theme="dark"] .uw-kpi.is-danger .uw-kpi-icon { color: #fca5a5; } [data-bs-theme="dark"] .uw-kpi.is-warning .uw-kpi-icon { color: #fcd34d; } [data-bs-theme="dark"] .uw-kpi.is-info .uw-kpi-icon { color: #93c0ff; } [data-bs-theme="dark"] .uw-kpi.is-violet .uw-kpi-icon { color: #c4b5fd; } .uw-kpi-num { font-family: var(--ds-font-mono); font-size: 22px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; } .uw-kpi-label { font-size: 11.5px; font-weight: 600; color: var(--ds-text-muted); line-height: 1.25; } /* Sub-stats inline chips */ .uw-substats { display: flex; gap: 8px; flex-wrap: wrap; } .uw-substats .uw-chip strong { font-family: var(--ds-font-mono); font-weight: 600; margin-left: 5px; } /* Queue — dense triage list */ .uw-queue-panel { overflow: hidden; } .uw-queue-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ds-border-subtle); flex-wrap: wrap; } .uw-queue-title { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; margin: 0; } .uw-queue-head .ms-spread { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .uw-queue-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px 0; } .uw-queue-list { display: flex; flex-direction: column; padding: 8px; } .uw-qrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; text-decoration: none; color: inherit; border: 1px solid transparent; transition: background .12s ease, border-color .12s ease; position: relative; } .uw-qrow:hover { background: var(--ds-surface-hover); border-color: var(--ds-border); } .uw-qrow + .uw-qrow { margin-top: 2px; } .uw-qrow.is-urgent::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: #ef4444; } .uw-qrow-main { min-width: 0; } .uw-qrow-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .uw-qrow-name { font-size: 13.5px; font-weight: 700; color: var(--ds-text-strong); } .uw-qrow-proto { font-family: var(--ds-font-mono); font-size: 11px; color: var(--ds-text-subtle); background: var(--ds-surface-sunken); border-radius: 999px; padding: 1px 8px; } .uw-qrow-contact { font-size: 11.5px; color: var(--ds-text-subtle); font-family: var(--ds-font-mono); } .uw-qrow-msg { margin: 3px 0 0; font-size: 12.5px; color: var(--ds-text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .uw-qrow-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; } .uw-qrow-chips .uw-chip { font-size: 10.5px; padding: 2px 8px; } .uw-qrow-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; } .uw-qrow-time { font-size: 11px; color: var(--ds-text-subtle); white-space: nowrap; } .uw-qrow-open { font-size: 12px; font-weight: 650; color: var(--uw-blue-600); border: 1px solid rgba(27, 109, 245, .35); border-radius: 9px; padding: 5px 12px; white-space: nowrap; } .uw-qrow:hover .uw-qrow-open { background: var(--uw-blue-500); border-color: var(--uw-blue-500); color: #fff; } [data-bs-theme="dark"] .uw-qrow-open { color: #93c0ff; } [data-bs-theme="dark"] .uw-qrow:hover .uw-qrow-open { color: #fff; } /* Audit feed — timeline of recent updates */ .uw-feed { display: flex; flex-direction: column; padding: 4px 0; } .uw-feed-item { display: flex; gap: 12px; padding: 10px 16px; text-decoration: none; color: inherit; position: relative; } .uw-feed-item:hover { background: var(--ds-surface-hover); } .uw-feed-rail { display: flex; flex-direction: column; align-items: center; flex: none; width: 10px; padding-top: 5px; } .uw-feed-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--uw-blue-400); box-shadow: 0 0 0 3px rgba(27, 109, 245, .15); flex: none; } .uw-feed-item:not(:last-child) .uw-feed-rail::after { content: ""; flex: 1; width: 2px; margin-top: 4px; border-radius: 2px; background: var(--ds-border); } .uw-feed-body { min-width: 0; flex: 1; } .uw-feed-title { font-size: 12.5px; font-weight: 650; color: var(--ds-text-strong); } .uw-feed-msg { font-size: 12px; color: var(--ds-text-muted); margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .uw-feed-meta { font-size: 11px; color: var(--ds-text-subtle); margin-top: 3px; } /* Collapsible window summary (chart + aging + categories) */ .uw-summary-details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-size: 13px; font-weight: 650; user-select: none; color: var(--ds-text); } .uw-summary-details > summary::-webkit-details-marker { display: none; } .uw-summary-details > summary::after { content: "▾"; margin-left: auto; color: var(--ds-text-subtle); transition: transform .15s ease; } .uw-summary-details[open] > summary::after { transform: rotate(180deg); } .uw-summary-details[open] > summary { border-bottom: 1px solid var(--ds-border-subtle); } .uw-summary-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 16px; } .uw-mini-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ds-text-muted); margin: 0 0 10px; } .uw-mini-rows { display: flex; flex-direction: column; gap: 6px; } .uw-mini-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 7px 10px; border-radius: 9px; background: var(--ds-surface-sunken); border: 1px solid var(--ds-border-subtle); } .uw-mini-row strong { font-weight: 550; color: var(--ds-text); } .uw-mini-row .ds-num, .uw-mini-row span:last-child { font-family: var(--ds-font-mono); font-weight: 600; } .uw-chart-box { position: relative; height: 200px; min-width: 0; } /* -------------------------------------------------------------------------- * 10b-2. QUEUE PAGE (protocol_queue v2) * -------------------------------------------------------------------------- */ .uw-queue-toolbar { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; } .uw-queue-toolbar .uw-qt-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .uw-queue-toolbar .uw-search { flex: 1 1 260px; } .uw-queue-toolbar select.form-select { width: auto; min-width: 150px; flex: 0 1 auto; } /* -------------------------------------------------------------------------- * 10b-3. PROTOCOL DETAIL (protocol_detail v2) * -------------------------------------------------------------------------- */ /* Sticky case bar: identity + status + quick actions, always visible */ .uw-case-bar { position: sticky; top: calc(var(--ds-topbar-height) + 8px); z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: color-mix(in srgb, var(--ds-surface) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--ds-border); border-radius: 14px; box-shadow: var(--ds-shadow-md); } .uw-case-id { display: flex; align-items: center; gap: 10px; min-width: 0; } .uw-case-name { font-size: 14px; font-weight: 750; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uw-case-sub { font-size: 11px; color: var(--ds-text-subtle); font-family: var(--ds-font-mono); white-space: nowrap; } .uw-case-chips { display: flex; gap: 5px; flex-wrap: wrap; } .uw-case-quick { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .uw-case-quick form { display: inline-flex; margin: 0; } .uw-case-quick .btn { padding: 5px 12px; font-size: 12.5px; border-radius: 9px; } /* Detail layout: chat column + sticky scrollable rail */ .uw-detail { display: grid; grid-template-columns: minmax(520px, 1fr) 10px var(--uw-detail-rail-width, clamp(380px, 28vw, 520px)); gap: 10px; align-items: start; } .uw-detail-chat { min-width: 0; } .uw-detail-resizer { position: sticky; top: calc(var(--ds-topbar-height) + 76px); z-index: 9; width: 10px; height: calc(100vh - var(--ds-topbar-height) - 92px); padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: col-resize; } .uw-detail-resizer::before { content: ""; display: block; width: 3px; height: 100%; margin: 0 auto; border-radius: 999px; background: var(--ds-border); transition: background .15s ease, width .15s ease; } .uw-detail-resizer:hover::before, .uw-detail-resizer:focus-visible::before, body.uw-detail-resizing .uw-detail-resizer::before { width: 5px; background: var(--uw-blue-500); } body.uw-detail-resizing { cursor: col-resize; user-select: none; } .uw-detail-rail { position: sticky; top: calc(var(--ds-topbar-height) + 76px); max-height: calc(100vh - var(--ds-topbar-height) - 92px); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 12px; padding-right: 2px; min-width: 0; } .uw-detail-rail::-webkit-scrollbar { width: 7px; } .uw-detail-rail::-webkit-scrollbar-thumb { background: var(--ds-border-strong); border-radius: 8px; } .uw-detail-rail > .gt-panel-frame { flex: 0 0 auto; overflow: visible; } /* Chat column: bounded timeline + composer pinned below */ .uw-detail-chat { display: flex; flex-direction: column; overflow: hidden; } .uw-detail-chat .gt-timeline { max-height: calc(100vh - var(--ds-topbar-height) - 320px); min-height: 320px; overflow-y: auto; } .uw-detail-rail .gt-panel-frame, .uw-detail-rail .uw-action, .uw-detail-rail .uw-action-body, .uw-detail-rail form, .uw-detail-rail .form-control, .uw-detail-rail .btn { min-width: 0; max-width: 100%; } .uw-detail-rail .gt-kv { align-items: flex-start; flex-wrap: wrap; gap: 10px; } .uw-detail-rail .gt-kv strong, .uw-detail-rail .gt-list-item strong, .uw-detail-rail .gt-list-item span, .uw-detail-rail .gt-empty-state { overflow-wrap: anywhere; } .uw-bill-result .uw-bill-link { font-size: 12px; font-weight: 650; overflow-wrap: anywhere; } .uw-bill-copy { display: grid; gap: 3px; margin-top: 6px; padding: 7px 9px; border: 1px solid var(--ds-border-subtle); border-radius: 8px; background: var(--ds-surface-sunken); font-family: var(--ds-font-mono); font-size: 10.5px; line-height: 1.45; overflow-wrap: anywhere; white-space: normal; } .uw-bill-copy span { font-family: var(--ds-font-sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ds-text-subtle); } .uw-contracts-os-result .gt-panel-body { gap: 10px; } .uw-result-summary-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .uw-result-summary-row > div { padding: 8px; border: 1px solid var(--ds-border-subtle); border-radius: 10px; background: var(--ds-surface-sunken); } .uw-result-summary-row span, .uw-detail-mini-grid span, .uw-result-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ds-text-subtle); } .uw-result-summary-row strong { display: block; margin-top: 2px; font-size: 15px; color: var(--ds-text-strong); } .uw-result-section-title { margin: 4px 0 -2px; } .uw-item-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .uw-status-pill { flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 750; border: 1px solid var(--ds-border-subtle); background: var(--ds-surface-sunken); color: var(--ds-text-muted); } .uw-status-pill.is-open { border-color: rgba(37, 211, 102, .25); background: rgba(37, 211, 102, .10); color: #16824a; } [data-bs-theme="dark"] .uw-status-pill.is-open { color: #7ee0a8; } .uw-status-pill.is-closed { border-color: rgba(100, 116, 139, .24); background: rgba(100, 116, 139, .10); color: var(--ds-text-muted); } .uw-detail-mini-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; } .uw-detail-mini-grid > div { display: grid; gap: 2px; padding: 7px 8px; border: 1px solid var(--ds-border-subtle); border-radius: 8px; background: var(--ds-surface-sunken); } .uw-detail-mini-grid strong { font-size: 11.5px; font-weight: 650; color: var(--ds-text-strong); overflow-wrap: anywhere; } .uw-detail-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 14px; } .uw-detail-meta-grid > div { background: var(--ds-surface-sunken); border: 1px solid var(--ds-border-subtle); border-radius: 10px; padding: 8px 10px; } .uw-detail-meta-grid .gt-card-kicker { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ds-text-subtle); margin-bottom: 2px; } .uw-detail-meta-grid strong { font-size: 12.5px; font-weight: 650; } @media (max-width: 1280px) { .uw-detail { grid-template-columns: 1fr; gap: 16px; } .uw-detail-resizer { display: none; } .uw-detail-rail { position: static; max-height: none; overflow: visible; } .uw-detail-chat .gt-timeline { max-height: 60vh; } .uw-detail-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .uw-case-bar { top: 8px; } .uw-case-quick { margin-left: 0; width: 100%; } .uw-case-quick .btn { flex: 1; } } /* -------------------------------------------------------------------------- * 10b-4. ANALYTICS v2 * -------------------------------------------------------------------------- */ .uw-chart-card .uw-chart-box { height: 240px; padding: 14px; } .uw-chart-card .uw-chart-box.is-tall { height: 280px; } .uw-export-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; } .uw-operator-row { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--ds-border-subtle); } .uw-operator-row:last-child { border-bottom: none; } .uw-operator-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; } .uw-operator-top strong { font-weight: 650; } .uw-operator-top span { font-family: var(--ds-font-mono); font-size: 11.5px; color: var(--ds-text-muted); } .uw-bar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; background: var(--ds-surface-sunken); } .uw-bar > span { height: 100%; } .uw-bar .seg-open { background: var(--uw-blue-500); } .uw-bar .seg-waiting { background: #f59e0b; } .uw-bar .seg-handoff { background: #8b5cf6; } .uw-bar .seg-closed { background: #10b981; } .uw-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--ds-text-muted); } .uw-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: baseline; } /* -------------------------------------------------------------------------- * 10c. RESPONSIVE / MOBILE LAYER — applies to the whole console * -------------------------------------------------------------------------- */ /* Fluid type + spacing on small screens */ @media (max-width: 1100px) { .gt-two-column { display: grid; grid-template-columns: 1fr !important; gap: 16px; } .gt-span-4, .gt-span-6, .gt-span-8, .gt-span-12 { grid-column: auto !important; } .uw-summary-grid { grid-template-columns: 1fr; } } @media (max-width: 992px) { /* Off-canvas navigation rail */ .gt-shell { display: block; } .gt-rail, [data-bs-theme="dark"] .gt-rail { position: fixed !important; inset: 0 auto 0 0; z-index: 1050; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .22s ease; box-shadow: none; } .gt-rail.mobile-open { transform: translateX(0); box-shadow: 24px 0 60px rgba(2, 8, 23, 0.5); } body.gt-nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(4, 10, 25, 0.55); backdrop-filter: blur(2px); z-index: 1040; } .gt-mobile-toggle { display: inline-flex !important; position: fixed; bottom: 18px; left: 18px; z-index: 1060; width: 48px; height: 48px; border-radius: 14px; align-items: center; justify-content: center; background: var(--uw-gradient); border: none; color: #fff; box-shadow: 0 10px 24px -6px rgba(27, 109, 245, 0.55); } .gt-screen, .page-wrapper.gt-screen { margin-left: 0 !important; padding-left: 0 !important; } .gt-topbar .gt-topbar-inner { padding: 0 14px; } .gt-page-body .gt-content-container { padding: 0 14px 28px; } .gt-page-intro-title { font-size: 21px; } .gt-page-intro { font-size: 13px; } /* Hide low-priority topbar items to reduce clutter */ .gt-topbar .gt-topbar-pill { display: none; } /* Metric grids stack 2-up */ .gt-metric-grid, .gt-metric-grid-4, .gt-metric-grid-5, .gt-metric-grid-primary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; } /* Tables scroll instead of squish */ .table-responsive, .table-shell { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Inbox app */ .uw-app { height: auto; border-radius: 14px; } } @media (max-width: 760px) { /* KPI strip: horizontal scroll */ .uw-kpis { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 4px; gap: 8px; } .uw-kpis::-webkit-scrollbar { height: 0; } .uw-kpi { min-width: 168px; scroll-snap-align: start; } .uw-dash-toolbar .uw-toolbar-note { display: none; } .uw-seg { overflow-x: auto; max-width: 100%; } /* Queue rows stack */ .uw-qrow { grid-template-columns: minmax(0, 1fr); } .uw-qrow-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; } .uw-queue-head { padding: 12px; } .uw-queue-tabs { padding: 8px 12px 0; overflow-x: auto; flex-wrap: nowrap; } .uw-queue-tabs::-webkit-scrollbar { height: 0; } .uw-queue-tabs .uw-filter-tab { white-space: nowrap; } /* Chat bubbles wider on phones */ .uw-bubble, .gt-message-card { max-width: 94%; } /* Forms & toolbars stack */ .gt-toolbar-main, .uw-log-toolbar { flex-direction: column; align-items: stretch; } /* Auth card breathing room */ .uw-auth-form-col { padding: 24px 16px; } /* Metric grids single column on phones stays 2-up unless tiny */ .gt-metric-card strong { font-size: 20px; } .gt-topbar .uw-live-pill [data-uw-live-label] { display: none; } .gt-topbar .uw-live-pill { padding: 5px 8px; } } @media (min-width: 993px) { .gt-mobile-toggle { display: none !important; } } /* -------------------------------------------------------------------------- * 11. SCROLLBARS & MISC POLISH * -------------------------------------------------------------------------- */ .uw-inbox-list::-webkit-scrollbar, .uw-timeline::-webkit-scrollbar, .uw-side::-webkit-scrollbar, .message-timeline::-webkit-scrollbar { width: 8px; } .uw-inbox-list::-webkit-scrollbar-thumb, .uw-timeline::-webkit-scrollbar-thumb, .uw-side::-webkit-scrollbar-thumb, .message-timeline::-webkit-scrollbar-thumb { background: var(--ds-border-strong); border-radius: 8px; } /* Toast container used by admin_live.js */ .toast-container { position: fixed; top: 18px; right: 18px; z-index: 9999; display: grid; gap: 10px; max-width: 360px; } .toast-container .toast { border-radius: 12px; box-shadow: var(--ds-shadow-lg); padding: 12px 16px; font-size: 13.5px; } @keyframes slideInRight { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Full-width pages (inbox) can opt out of the narrow container */ .gt-content-container.uw-fluid { max-width: none; } /* Print: hide chrome */ @media print { .gt-rail, .gt-topbar, .uw-composer, .gt-mobile-toggle { display: none !important; } }