/* extra utilities on top of Tailwind CDN */ /* ── Prevent ALL horizontal overflow on mobile ───────────────────────────── iOS Safari ignores overflow:hidden on alone — must also be on . max-width:100% prevents any child from stretching the page wider. */ html { overflow-x: hidden; max-width: 100%; font-size: 15px; scroll-behavior: smooth; } :root { --ui-bg: #f6f8fa; --ui-surface: #ffffff; --ui-surface-muted: #f8faf9; --ui-border: #dce4e0; --ui-text: #152823; --ui-muted: #52645e; --ui-brand: #087f68; --ui-brand-strong: #066b58; --ui-selected: #e6f5ef; --app-sidebar-width: 224px; --app-topbar-height: 64px; --ui-ring: rgba(16, 185, 129, 0.28); --ui-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.055); --ui-shadow-raised: 0 18px 44px rgba(15, 23, 42, 0.16); } .dark { --ui-bg: #08111f; --ui-surface: #111d2f; --ui-surface-muted: #0c1728; --ui-border: #25344b; --ui-text: #edf4fc; --ui-muted: #9badc4; --ui-brand: #34d399; --ui-brand-strong: #10b981; --ui-ring: rgba(52, 211, 153, 0.24); --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 16px 38px rgba(0, 0, 0, 0.2); --ui-shadow-raised: 0 24px 64px rgba(0, 0, 0, 0.42); } /* Message content: break long URLs and words at ANY character boundary. 'anywhere' is stronger than 'break-word' — it breaks mid-URL too. */ .msg-content { overflow-wrap: anywhere; word-break: break-word; } /* Audio player: Safari's native control has a hard minimum width that can blow past the bubble boundary. Constrain it. */ audio { width: 100%; max-width: 260px; display: block; } /* Images / videos: always stay within their container */ img, video { max-width: 100%; height: auto; } /* Conversation list rows: never wider than the pane */ .conv-row { max-width: 100%; overflow: hidden; } /* ── Scrollbar styling ─────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .dark ::-webkit-scrollbar-thumb { background: #475569; } .dark ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Body fills */ body { background: radial-gradient(circle at 12% 0%, rgba(16, 185, 129, 0.055), transparent 28rem), var(--ui-bg); color: var(--ui-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* iOS Safari: use dynamic viewport height so the page doesn't overflow behind the address bar / home indicator. Falls back to 100vh on older browsers. */ height: 100vh; height: 100dvh; } .dark body { background: radial-gradient(circle at 12% 0%, rgba(16, 185, 129, 0.075), transparent 30rem), var(--ui-bg); color: var(--ui-text); } /* Generic surface helpers used in pages */ .dark .bg-white { background: var(--ui-surface) !important; } .dark .bg-slate-50 { background: var(--ui-surface-muted) !important; } .dark .bg-slate-100 { background: var(--ui-bg) !important; } .dark .bg-slate-800 { background: var(--ui-surface) !important; } .dark .bg-slate-900 { background: var(--ui-bg) !important; } .dark .border, .dark .border-l, .dark .border-r, .dark .border-t, .dark .border-b { border-color: var(--ui-border) !important; } .dark .text-slate-400, .dark .text-slate-500 { color: var(--ui-muted) !important; } .dark .text-slate-600 { color: #cbd5e1 !important; } .dark .text-slate-700, .dark .text-slate-800, .dark .text-slate-900 { color: #e2e8f0 !important; } .dark input, .dark textarea, .dark select { background: #0b1627; color: var(--ui-text); border-color: var(--ui-border); } .dark .hover\:bg-slate-50:hover { background: #1e293b !important; } .dark .bg-yellow-50 { background: #422006 !important; } .dark .bg-emerald-50 { background: #022c22 !important; } .dark .bg-red-50 { background: #450a0a !important; } .dark .bg-amber-50 { background: #451a03 !important; } /* ── Chattill application shell ────────────────────────────────────────── */ .app-skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-160%); padding: 9px 13px; border-radius: 8px; background: var(--ui-brand-strong); color: #fff; font-size: 13px; font-weight: 700; transition: transform .15s ease; } .app-skip-link:focus { transform: translateY(0); } #app-nav { min-height: var(--app-topbar-height); height: var(--app-topbar-height); background: var(--ui-surface); color: var(--ui-text); border-bottom: 1px solid var(--ui-border); box-shadow: none; z-index: 45; } .app-brand { letter-spacing: -0.015em; text-decoration: none !important; } .app-brand-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(145deg, #6ee7b7, #10b981); color: #053b2d; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 5px 16px rgba(0,0,0,0.18); font-size: 15px; } #app-nav .app-nav-link, #app-nav .dd-btn, #app-nav .app-icon-btn, #app-nav .app-user-btn { border-radius: 9px; transition: background-color .16s ease, color .16s ease, transform .16s ease; } #app-nav .app-nav-link:hover, #app-nav .dd-btn:hover, #app-nav .app-icon-btn:hover, #app-nav .app-user-btn:hover { background: var(--ui-selected); } #app-nav .app-icon-btn:active, #app-nav .app-user-btn:active { transform: translateY(1px); } #app-nav .nav-top-svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } #app-nav .dd-menu, #user-menu, #bell-panel { border: 1px solid var(--ui-border); border-radius: 13px; background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow-raised); padding: 6px; } #app-nav .dd-menu a { border-radius: 8px; margin: 1px 0; transition: background-color .14s ease, color .14s ease; } #app-nav .dd-menu a:hover { background: rgba(16, 185, 129, 0.09); color: var(--ui-brand-strong); } .dark #app-nav .dd-menu a:hover { color: #6ee7b7; } .app-menu-label { padding: 8px 10px 4px; color: var(--ui-muted); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; } .app-avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ui-selected); border: 1px solid #cce8de; color: var(--ui-brand-strong); font-weight: 750; } /* Desktop task-based navigation. The utility bar remains intentionally quiet; all destinations live in one scrollable, role-aware sidebar. */ #app-sidebar { display: none; } @media (min-width: 1100px) { body.has-app-shell { box-sizing: border-box; padding-left: var(--app-sidebar-width); padding-top: var(--app-topbar-height); } body.has-app-shell > #app-nav { position: fixed; top: 0; right: 0; left: var(--app-sidebar-width); width: auto; } #app-nav > .app-brand, #app-nav > #nav-links { display: none !important; } #app-nav > .ml-auto { width: 100%; justify-content: flex-end; gap: 6px; } #app-nav #org-switcher, #app-nav #account-switcher { min-height: 36px; max-width: 220px; padding-inline: 10px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-surface-muted); color: var(--ui-text); } #app-nav #global-search-btn, #app-nav #ai-global-pill { min-height: 36px; background: var(--ui-surface-muted); color: var(--ui-muted); border: 1px solid var(--ui-border); } #app-nav .app-icon-btn, #app-nav .app-user-btn { color: var(--ui-text); } #app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 46; display: flex; width: var(--app-sidebar-width); min-width: var(--app-sidebar-width); flex-direction: column; border-right: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); } .app-sidebar-brand { display: flex; min-height: var(--app-topbar-height); align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--ui-border); font-size: 16px; font-weight: 780; letter-spacing: -.02em; } .app-sidebar-home { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; color: var(--ui-text); } #app-sidebar-toggle { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border: 1px solid var(--ui-border); border-radius: 8px; color: var(--ui-muted); background: var(--ui-surface-muted); font-size: 20px; line-height: 1; } .app-sidebar-scroll { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 10px 20px; scrollbar-width: thin; } .app-sidebar-label { padding: 10px 10px 5px; color: var(--ui-muted); font-size: 10px; font-weight: 780; letter-spacing: .095em; text-transform: uppercase; } .app-sidebar-link, .app-sidebar-summary { display: flex; min-height: 38px; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; color: var(--ui-muted); font-size: 13px; font-weight: 620; line-height: 1.25; text-align: left; transition: background-color .14s ease, color .14s ease; } .app-sidebar-link:hover, .app-sidebar-summary:hover { background: var(--ui-surface-muted); color: var(--ui-text); } .app-sidebar-link svg, .app-sidebar-summary svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .app-sidebar-link[aria-current="page"], .app-sidebar-group[data-active="true"] > .app-sidebar-summary { background: var(--ui-selected); color: var(--ui-brand-strong); font-weight: 740; } .app-sidebar-link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ui-brand); } .app-sidebar-group > summary { list-style: none; cursor: pointer; } .app-sidebar-group > summary::-webkit-details-marker { display: none; } .app-sidebar-chevron { margin-left: auto; transition: transform .16s ease; } .app-sidebar-group[open] .app-sidebar-chevron { transform: rotate(90deg); } .app-sidebar-children { margin: 2px 0 6px 27px; padding-left: 8px; border-left: 1px solid var(--ui-border); } .app-sidebar-children .app-sidebar-link { min-height: 32px; padding: 6px 8px; font-size: 12.5px; } body.app-sidebar-collapsed { --app-sidebar-width: 68px; } body.app-sidebar-collapsed .app-sidebar-brand { padding-inline: 10px; } body.app-sidebar-collapsed .app-sidebar-home { flex: 0 0 auto; } body.app-sidebar-collapsed .app-sidebar-text, body.app-sidebar-collapsed .app-sidebar-label, body.app-sidebar-collapsed .app-sidebar-link > span, body.app-sidebar-collapsed .app-sidebar-summary > span, body.app-sidebar-collapsed .app-sidebar-children { display: none; } body.app-sidebar-collapsed .app-sidebar-scroll { padding-inline: 8px; } body.app-sidebar-collapsed .app-sidebar-link, body.app-sidebar-collapsed .app-sidebar-summary { justify-content: center; padding-inline: 8px; } body.app-sidebar-collapsed #app-sidebar-toggle { position: absolute; left: 52px; width: 24px; height: 30px; border-radius: 0 8px 8px 0; } } @media (min-width: 768px) and (max-width: 1099px) { #app-nav { position: relative; width: 100%; } #app-nav > #nav-links { display: none !important; } #app-nav > .app-brand { display: flex !important; } #mobile-menu { display: grid !important; } #mobile-nav:not(.hidden), #mobile-nav-backdrop:not(.hidden) { display: block !important; } } /* ── Shared visual system across authenticated pages ───────────────────── */ main { min-width: 0; } /* Page titles used to inherit dozens of one-off widths from their surrounding flex rows. When a toolbar became busy, the heading was allowed to shrink to a few characters and appeared "broken". Keep headings readable and make the action area wrap instead. */ .has-app-shell main h1, .has-app-shell main h2, .has-app-shell main h3, .has-app-shell .ui-page-title { min-width: 0; max-width: 100%; overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: pretty; } .has-app-shell main h1 { line-height: 1.18; font-weight: 760; } /* Older screens only declared `font-semibold` on the page h1. Give those screens the same hierarchy as newer screens without overriding pages that deliberately choose a Tailwind text size. */ .has-app-shell main h1:not([class*="text-"]) { font-size: 1.5rem; } .has-app-shell main > :is(header, section, div), .has-app-shell main :is(.flex, .grid) > * { min-width: 0; } main h1 { letter-spacing: -0.025em; color: var(--ui-text); } main h2 { letter-spacing: -0.012em; } main .shadow, main .shadow-md, main .shadow-lg { border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow) !important; } main .rounded { border-radius: 10px; } main .rounded-lg { border-radius: 14px; } main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), main select, main textarea { min-height: 38px; border-color: var(--ui-border); background-color: var(--ui-surface); color: var(--ui-text); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } main textarea { min-height: auto; } main input::placeholder, main textarea::placeholder { color: #94a3b8; opacity: .9; } main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, main select:focus, main textarea:focus { outline: none; border-color: #10b981 !important; box-shadow: 0 0 0 3px var(--ui-ring); } button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; } button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .52; } main button, main a[class*="bg-"], main a[class*="border"] { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; } main button:not(:disabled):active, main a[class*="bg-"]:active { transform: translateY(1px); } main table thead { color: var(--ui-muted); font-size: 11px; letter-spacing: .035em; text-transform: uppercase; } main table tbody tr { transition: background-color .14s ease; } main table tbody tr:hover { background: rgba(16, 185, 129, 0.045); } .dark main table tbody tr:hover { background: rgba(52, 211, 153, 0.055); } .ui-page { width: 100%; max-width: 1440px; margin-inline: auto; } .ui-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; margin-bottom: 22px; } .ui-page-header > :first-child { flex: 1 1 440px; min-width: 0; } .ui-page-header > :last-child:not(:first-child) { flex: 0 1 auto; } .ui-page-title { font-size: clamp(1.45rem, 1.05rem + .85vw, 1.9rem); line-height: 1.16; font-weight: 780; } .ui-page-subtitle { margin-top: 5px; max-width: 720px; color: var(--ui-muted); font-size: .875rem; } .ui-eyebrow { color: var(--ui-brand); font-size: 11px; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; } .ui-toolbar { border: 1px solid var(--ui-border); background: var(--ui-surface); border-radius: 14px; box-shadow: var(--ui-shadow); } .ui-page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } .ui-card { border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface); box-shadow: var(--ui-shadow); } .ui-card-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--ui-border); } .ui-section-title { font-size: 1rem; line-height: 1.3; font-weight: 720; color: var(--ui-text); } .ui-section-copy { margin-top: 3px; color: var(--ui-muted); font-size: .8rem; } .ui-table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; } .ui-table-wrap table { min-width: 720px; } .ui-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; } .ui-form-help { margin-top: 4px; color: var(--ui-muted); font-size: .75rem; line-height: 1.45; } .ui-primary-action { min-height: 40px; padding: 8px 15px; border-radius: 10px; background: var(--ui-brand-strong); color: #fff; font-size: .875rem; font-weight: 720; } .ui-secondary-action { min-height: 40px; padding: 8px 14px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); color: var(--ui-text); font-size: .875rem; font-weight: 650; } .ui-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 42px 24px; color: var(--ui-muted); } .ui-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; margin-bottom: 14px; background: rgba(16,185,129,.1); color: var(--ui-brand-strong); font-size: 24px; } .ui-kpi-card { position: relative; overflow: hidden; } .ui-kpi-card::after { content: ""; position: absolute; width: 80px; height: 80px; border-radius: 50%; right: -28px; top: -34px; background: rgba(16,185,129,.07); pointer-events: none; } .ui-tab-row { scrollbar-width: thin; scroll-snap-type: x proximity; } .ui-tab-row > * { scroll-snap-align: start; } /* Compact mobile drawer used by both the hamburger and the More tab. */ #mobile-nav { background: var(--ui-surface); color: var(--ui-text); box-shadow: 22px 0 60px rgba(15,23,42,.28); } #mobile-nav a { border-color: var(--ui-border); } #mobile-nav a:active { background: rgba(16,185,129,.1); } #mobile-nav-backdrop { backdrop-filter: blur(2px); } #mobile-tabs { display: none; min-height: calc(64px + env(safe-area-inset-bottom)); padding: 5px 6px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--ui-surface) 94%, transparent); box-shadow: 0 -8px 28px rgba(15,23,42,.08); border-color: var(--ui-border) !important; border-top: 1px solid var(--ui-border); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); } #mobile-tabs .mtab { position: relative; flex: 1 1 0; min-width: 0; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 14px; color: var(--ui-muted); font-size: 10px; font-weight: 650; line-height: 1; } #mobile-tabs .mtab-icon { width: 32px; height: 28px; border-radius: 999px; display: grid; place-items: center; transition: background-color .16s ease, color .16s ease, transform .16s ease; } #mobile-tabs .mtab-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } #mobile-tabs .mtab:active .mtab-icon { transform: scale(.91); } #mobile-tabs .mtab-active { color: var(--ui-brand-strong); } #mobile-tabs .mtab-active .mtab-icon { width: 44px; background: rgba(16,185,129,.13); } #mobile-tabs .mtab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } #mobile-tabs .mtab-badge { position: absolute; top: -3px; right: -7px; min-width: 17px; height: 17px; padding-inline: 4px; border: 2px solid var(--ui-surface); border-radius: 999px; background: #ef4444; color: #fff; font-size: 9px; line-height: 13px; text-align: center; } /* Inbox search is shared by desktop and mobile. Keep the SVG explicitly sized and unfilled so browser defaults can never expand it into the layout. */ .inbox-search { min-width: 0; min-height: 38px; display: flex; align-items: center; gap: 8px; padding-inline: 10px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); } .inbox-search:focus-within { border-color: #10b981; box-shadow: 0 0 0 3px var(--ui-ring); } .inbox-search svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: var(--ui-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .inbox-search input { width: 100%; min-width: 0; min-height: 34px; padding: 0; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; } @media (min-width: 768px) { .has-app-shell main h1 { font-size: clamp(1.5rem, 1.2rem + .65vw, 1.95rem); } .has-app-shell main h1 + p { max-width: 760px; } .has-app-shell main:not(.account-shell) { scrollbar-gutter: stable; } .has-app-shell main > .max-w-4xl, .has-app-shell main > .max-w-5xl, .has-app-shell main > .max-w-6xl, .has-app-shell main > .max-w-7xl { width: 100%; } .inbox-filter-bar { padding: 8px; } .inbox-channel-rail { scrollbar-width: thin; } .channel-chip { padding: 3px 7px; border-radius: 7px; } .channel-mark { font-size: 9px; font-weight: 800; } } @media (max-width: 767px) { #mobile-tabs { display: flex; } html { font-size: 14px; } #app-nav { height: 52px; min-height: 52px; } .ui-page-header { margin-bottom: 14px; } .ui-page-title { font-size: 1.28rem; } .ui-page-header > :first-child { flex-basis: 100%; } .ui-page-actions { width: 100%; justify-content: stretch; } .ui-page-actions > * { flex: 1 1 auto; } main .shadow, main .shadow-md, main .shadow-lg { box-shadow: 0 1px 2px rgba(15,23,42,.06) !important; } .ui-empty-state { padding: 34px 18px; } .ui-settings-page .grid.grid-cols-2 { grid-template-columns: minmax(0, 1fr); } .ui-settings-page .flex.items-center.gap-3 { flex-wrap: wrap; } } /* Drag-and-drop overlay */ .drop-active::after { content: 'Drop to send'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(16,185,129,0.15); border: 3px dashed #10b981; border-radius: 8px; color: #047857; font-weight: 600; font-size: 1.5rem; pointer-events: none; z-index: 5; } /* Within-thread search highlight */ .search-hit { background: #fef08a; color: #713f12; } .dark .search-hit { background: #ca8a04; color: #fef9c3; } .search-current { outline: 2px solid #f59e0b; } /* Emoji picker */ .emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; } .emoji-grid button { font-size: 1.25rem; padding: 4px; border-radius: 4px; } .emoji-grid button:hover { background: #e2e8f0; } .dark .emoji-grid button:hover { background: #334155; } /* Toast for undo */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #1e293b; color: white; padding: 12px 16px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); display: flex; gap: 12px; align-items: center; z-index: 100; } /* Mobile: hide top nav bar when in active chat to maximise message space */ @media (max-width: 767px) { body.mobile-chat-open nav:first-of-type { display: none; } } /* Inbox is a work surface: keep the list compact and let the thread own the remaining width. Customer information opens as a drawer at every width. */ @media (min-width: 768px) { .inbox-workspace .inbox-list-pane { width: clamp(300px, 23vw, 320px); flex: 0 0 clamp(300px, 23vw, 320px); } .inbox-workspace #chat-header { flex-wrap: wrap; align-content: center; } .inbox-workspace .inbox-thread-controls { order: 10; flex: 1 0 100%; align-items: center; gap: 6px; padding-left: 52px; } .inbox-workspace .inbox-thread-controls label { min-width: 0; } .inbox-workspace .inbox-thread-controls select { min-height: 30px; max-width: 170px; } .inbox-workspace .inbox-primary-toolbar { flex-wrap: wrap; } .inbox-workspace .inbox-primary-toolbar .inbox-search { flex: 1 0 100%; } .inbox-workspace #inbox-advanced-filters.filters-open { display: flex; } .inbox-workspace #inbox-bulk-toolbar.selection-active { display: flex; } } .customer-inspector.inspector-open { display: block !important; position: fixed; top: var(--app-topbar-height); right: 0; bottom: 0; z-index: 48; width: min(340px, 92vw); overflow-y: auto; border-left: 1px solid var(--ui-border); box-shadow: -18px 0 42px rgba(15,23,42,.16); } .customer-inspector-toggle { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-text); } .customer-inspector-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 767px) { .customer-inspector.inspector-open { inset: 0; width: 100%; border-left: 0; box-shadow: none; } } /* Composer extras row: always shown on desktop. On mobile: hidden by default, revealed when .mobile-expanded is toggled by the + button. */ #composer-extras { display: none; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; } #composer-extras.composer-actions-open { display: flex; } @media (max-width: 767px) { #composer-extras { display: none; } #composer-extras.mobile-expanded, #composer-extras.composer-actions-open { display: flex; } } /* ── Mobile PWA polish (bottom tab bar, chat list, FAB) ────────────────── */ @media (max-width: 767px) { /* Reserve space for the fixed bottom tab bar (added by _nav.ejs) */ body.has-mobile-tabs { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } /* Inside an open chat the tab bar hides — reclaim the space */ body.has-mobile-tabs.mobile-chat-open { padding-bottom: 0; } body.mobile-chat-open #mobile-tabs { display: none; } body.mobile-chat-open #fab-new-conv { display: none; } /* Selection mode checkboxes need the FAB out of the way too */ #mobile-tabs a, #mobile-tabs button { -webkit-tap-highlight-color: transparent; } /* Pull-to-refresh: keep the list bounce local, not the whole page */ #conversation-list { overscroll-behavior-y: contain; } .chat-search-hit [data-msg-bubble] { outline: 3px solid rgb(99 102 241 / 0.8); outline-offset: 3px; animation: chat-search-pulse 1.1s ease-in-out 2; } @keyframes chat-search-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(99 102 241 / 0); } 50% { box-shadow: 0 0 0 7px rgb(99 102 241 / 0.18); } } .conv-row { -webkit-tap-highlight-color: transparent; } .conv-row:active { background: rgba(5, 150, 105, 0.08); } /* Inbox list: native-sized controls and clear information hierarchy. */ .mobile-inbox-title { min-height: 62px; padding: 9px 14px 7px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ui-surface); } .mobile-inbox-title p { color: var(--ui-muted); font-size: 10px; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; } .mobile-inbox-title h1 { font-size: 21px; line-height: 1.15; font-weight: 780; letter-spacing: -.025em; } .mobile-round-action, .mobile-thread-action, .mobile-composer-action { position: relative; width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid var(--ui-border); border-radius: 50%; background: var(--ui-surface); color: var(--ui-text); } .mobile-round-action svg, .mobile-thread-action svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mobile-action-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding-inline: 4px; border: 2px solid var(--ui-surface); border-radius: 999px; background: #ef4444; color: #fff; font-size: 9px; font-weight: 800; line-height: 14px; } .inbox-filter-bar { padding: 6px 10px 9px; background: var(--ui-surface); } .inbox-channel-rail { margin-inline: -10px; padding: 1px 10px 4px; scrollbar-width: none; scroll-snap-type: x proximity; } .inbox-channel-rail::-webkit-scrollbar { display: none; } .channel-chip { min-height: 34px; padding: 6px 11px; border-radius: 999px; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 5px; font-weight: 680; } .channel-mark { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 3px; border-radius: 6px; background: rgba(15,23,42,.08); font-size: 8px; font-weight: 850; letter-spacing: .01em; } .channel-chip.bg-indigo-600 .channel-mark { background: rgba(255,255,255,.2); } .inbox-search { height: 44px; display: flex; align-items: center; gap: 9px; padding-inline: 12px; border: 1px solid var(--ui-border); border-radius: 13px; background: var(--ui-surface-muted); } .inbox-search:focus-within { border-color: #10b981; box-shadow: 0 0 0 3px var(--ui-ring); } .inbox-search svg { width: 19px; height: 19px; fill: none; stroke: var(--ui-muted); stroke-width: 2; stroke-linecap: round; } .inbox-search input { min-width: 0; width: 100%; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; } #conversation-list .conv-row { min-height: 76px; padding: 10px 13px !important; } /* Mobile filter / analytics sheets. */ body.mobile-sheet-open { overflow: hidden; } .mobile-sheet { position: fixed; inset: 0; z-index: 80; } .mobile-sheet-backdrop { position: absolute; inset: 0; width: 100%; background: rgba(15,23,42,.52); backdrop-filter: blur(2px); } .mobile-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: min(82dvh, 680px); overflow-y: auto; padding: 7px 16px calc(14px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: var(--ui-surface); box-shadow: 0 -20px 60px rgba(15,23,42,.25); animation: mobile-sheet-enter .2s ease-out both; } @keyframes mobile-sheet-enter { from { transform: translateY(35px); opacity: .6; } } .mobile-sheet-handle { width: 38px; height: 4px; margin: 0 auto 9px; border-radius: 999px; background: #cbd5e1; } .mobile-sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .mobile-sheet-header h2 { font-size: 20px; line-height: 1.2; font-weight: 780; } .mobile-sheet-eyebrow { color: var(--ui-brand-strong); font-size: 10px; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; } .mobile-field { display: flex; flex-direction: column; gap: 5px; color: var(--ui-muted); font-size: 11px; font-weight: 700; } .mobile-field select { width: 100%; min-height: 46px; padding-inline: 11px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface-muted); color: var(--ui-text); } .mobile-switch-row { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: 14px; } .mobile-switch-row span { display: flex; flex-direction: column; } .mobile-switch-row small { color: var(--ui-muted); font-size: 10px; font-weight: 500; } .mobile-switch-row input { width: 22px; height: 22px; accent-color: #059669; } .mobile-sheet-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 18px; } .mobile-secondary-action, .mobile-primary-action { min-height: 48px; border-radius: 14px; font-weight: 760; } .mobile-secondary-action { border: 1px solid var(--ui-border); background: var(--ui-surface); } .mobile-primary-action { background: #047857; color: #fff; } /* Conversation thread header and composer stay reachable above iOS UI. */ #chat-header { min-height: 58px; padding: 7px 9px !important; gap: 7px !important; } #chat-header .mobile-thread-action { width: 40px; height: 40px; flex-basis: 40px; border-color: transparent; } #chat-avatar { width: 40px !important; height: 40px !important; } #messages { padding: 12px 10px 18px !important; } #composer { padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -7px 24px rgba(15,23,42,.06); } #composer .mobile-composer-action { width: 40px; height: 40px; flex-basis: 40px; font-size: 25px; font-weight: 300; } #msg-input { min-height: 42px !important; max-height: 112px; border-radius: 21px !important; padding: 9px 13px !important; } #send-btn { width: 42px; height: 42px; padding: 0 !important; border-radius: 50% !important; display: grid; place-items: center; } #send-btn .send-text { display: none; } #send-btn .send-icon { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } } #send-btn .send-icon { display: none; } @media (max-width: 767px) { #send-btn .send-icon { display: block; } } /* iOS Safari auto-zooms (and pans the whole layout sideways) when focusing any input/textarea/select with font-size < 16px. Force 16px on mobile so focusing the compose box never triggers zoom. Desktop keeps its compact sizes. */ @media (max-width: 767px) { input, textarea, select { font-size: 16px !important; } } /* ── Business dashboard V3 ─────────────────────────────────────────────── */ .business-dashboard { --dashboard-positive: #047857; --dashboard-negative: #dc2626; } .dashboard-scope-bar { position: sticky; top: calc(var(--app-topbar-height, 64px) + 8px); z-index: 24; display: grid; grid-template-columns: minmax(310px, auto) minmax(280px, 1fr) minmax(150px, 210px) minmax(150px, 220px); gap: 10px; align-items: end; margin-bottom: 16px; padding: 12px; border: 1px solid var(--ui-border); border-radius: 16px; background: color-mix(in srgb, var(--ui-surface) 94%, transparent); box-shadow: 0 10px 35px rgba(15, 23, 42, .08); backdrop-filter: blur(16px); } .dashboard-preset-group { display: flex; min-width: 0; overflow-x: auto; border: 1px solid var(--ui-border); border-radius: 11px; background: var(--ui-surface-muted); scrollbar-width: none; } .dashboard-preset-group::-webkit-scrollbar { display: none; } .dashboard-preset { min-height: 42px; padding: 8px 13px; border-right: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 13px; font-weight: 720; white-space: nowrap; } .dashboard-preset:last-child { border-right: 0; } .dashboard-preset[aria-pressed="true"] { background: #047857; color: #fff; } .dashboard-range-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; } .dashboard-field { display: grid; gap: 5px; min-width: 0; color: var(--ui-muted); font-size: 11px; font-weight: 700; } .dashboard-field input, .dashboard-field select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); color: var(--ui-text); } .dashboard-section { margin-top: 20px; } .dashboard-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .dashboard-section-heading h2 { color: var(--ui-text); font-size: 18px; font-weight: 790; letter-spacing: -.02em; } .dashboard-section-heading p { margin-top: 2px; color: var(--ui-muted); font-size: 12px; } .dashboard-operations-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .dashboard-financial-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .dashboard-customer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .dashboard-card { min-width: 0; padding: 16px; border: 1px solid var(--ui-border); border-radius: 15px; background: var(--ui-surface); box-shadow: 0 5px 18px rgba(15, 23, 42, .045); } a.dashboard-card { display: block; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; } a.dashboard-card:hover { border-color: #6ee7b7; transform: translateY(-1px); box-shadow: 0 10px 25px rgba(15,23,42,.08); } .dashboard-card-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ui-muted); font-size: 12px; font-weight: 680; } .dashboard-card-value { margin-top: 8px; color: var(--ui-text); font-size: clamp(22px, 2vw, 29px); font-weight: 820; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; } .dashboard-card-note { min-height: 16px; margin-top: 7px; color: var(--ui-muted); font-size: 10px; line-height: 1.35; } .dashboard-card--revenue { border-color: #6ee7b7; background: linear-gradient(145deg, #047857, #059669); } .dashboard-card--revenue .dashboard-card-label, .dashboard-card--revenue .dashboard-card-note { color: rgba(255,255,255,.78); } .dashboard-card--revenue .dashboard-card-value { color: #fff; } .dashboard-card--profit { border-color: #111827; background: linear-gradient(145deg, #111827, #1f2937); } .dashboard-card--profit .dashboard-card-label, .dashboard-card--profit .dashboard-card-note { color: #cbd5e1; } .dashboard-card--profit .dashboard-card-value { color: #6ee7b7; } .dashboard-quality-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; margin-top: 10px; padding: 9px 12px; border: 1px solid var(--ui-border); border-radius: 11px; background: var(--ui-surface-muted); color: var(--ui-muted); font-size: 11px; } .dashboard-quality-strip button { margin-left: auto; color: var(--ui-brand-strong); font-weight: 750; } .dashboard-analysis-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 14px; } .dashboard-state-list { display: grid; gap: 8px; } .dashboard-state-row { display: grid; grid-template-columns: minmax(90px, 145px) minmax(150px, 1fr) minmax(82px, auto); align-items: center; gap: 10px; width: 100%; min-height: 35px; padding: 4px 6px; border-radius: 9px; text-align: left; } .dashboard-state-row:hover, .dashboard-state-row:focus-visible { background: var(--ui-surface-muted); } .dashboard-state-name { overflow: hidden; color: var(--ui-text); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .dashboard-state-track { position: relative; height: 15px; border-radius: 999px; background: linear-gradient(to right, transparent 49.5%, #94a3b8 49.5%, #94a3b8 50.5%, transparent 50.5%), var(--ui-surface-muted); overflow: hidden; } .dashboard-state-bar { position: absolute; top: 2px; bottom: 2px; width: 0; border-radius: 999px; background: #10b981; } .dashboard-state-bar.is-positive { left: 50%; } .dashboard-state-bar.is-negative { right: 50%; background: #ef4444; } .dashboard-state-value { text-align: right; color: var(--ui-text); font-size: 12px; font-weight: 780; font-variant-numeric: tabular-nums; } .dashboard-state-value.is-negative { color: var(--dashboard-negative); } .dashboard-state-details { margin-top: 12px; border-top: 1px solid var(--ui-border); padding-top: 10px; } .dashboard-state-details > summary { cursor: pointer; color: var(--ui-brand-strong); font-size: 11px; font-weight: 750; } .dashboard-state-table { min-width: 610px; } .dashboard-review-badge { display: inline-flex; margin-left: 6px; padding: 2px 5px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 9px; font-weight: 750; vertical-align: middle; } .dashboard-table-card { overflow: hidden; padding: 0; } .dashboard-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 15px; border-bottom: 1px solid var(--ui-border); } .dashboard-table-toolbar h2 { margin-right: auto; font-size: 17px; font-weight: 790; } .dashboard-search { width: min(100%, 300px); min-height: 40px; padding: 8px 11px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); color: var(--ui-text); } .dashboard-table-scroll { overflow: auto; } .dashboard-table { width: 100%; min-width: 850px; border-collapse: collapse; font-size: 12px; } .dashboard-table th { padding: 10px 12px; background: var(--ui-surface-muted); color: var(--ui-muted); font-size: 10px; font-weight: 760; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; } .dashboard-table td { padding: 11px 12px; border-top: 1px solid var(--ui-border); vertical-align: middle; } .dashboard-table tbody tr:hover { background: var(--ui-surface-muted); } .dashboard-status { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 8px; border-radius: 999px; background: #e2e8f0; color: #334155; font-size: 10px; font-weight: 750; text-transform: capitalize; } .dashboard-status--delivered, .dashboard-status--confirmed { background: #d1fae5; color: #047857; } .dashboard-status--shipped, .dashboard-status--out_for_delivery { background: #dbeafe; color: #1d4ed8; } .dashboard-status--pending { background: #fef3c7; color: #b45309; } .dashboard-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 12px 15px; border-top: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 12px; } .dashboard-state-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 5px 10px; border-radius: 999px; background: #d1fae5; color: #047857; font-size: 11px; font-weight: 750; } .dashboard-empty { padding: 36px 18px; text-align: center; color: var(--ui-muted); font-size: 13px; } .dashboard-drawer-backdrop { position: fixed; inset: 0; z-index: 75; background: rgba(15,23,42,.42); backdrop-filter: blur(2px); } .dashboard-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 76; display: flex; flex-direction: column; width: min(720px, 100vw); border-left: 1px solid var(--ui-border); background: var(--ui-surface); box-shadow: -24px 0 70px rgba(15,23,42,.2); } /* styles.css loads after the generated Tailwind bundle. Keep the explicit hidden state stronger than the drawer's display:flex declaration. */ .dashboard-drawer.hidden, .dashboard-drawer-backdrop.hidden { display: none; } .dashboard-drawer-header, .dashboard-drawer-footer { flex: none; padding: 18px 20px; border-bottom: 1px solid var(--ui-border); } .dashboard-drawer-footer { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; border-top: 1px solid var(--ui-border); border-bottom: 0; } .dashboard-drawer-body { min-height: 0; flex: 1; overflow-y: auto; padding: 18px 20px; } .dashboard-drawer-title { color: var(--ui-text); font-size: 24px; font-weight: 820; letter-spacing: -.03em; } .dashboard-drawer-tabs { display: flex; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--ui-border); } .dashboard-drawer-tab { min-height: 42px; padding: 8px 11px; border-bottom: 2px solid transparent; color: var(--ui-muted); font-size: 12px; font-weight: 730; } .dashboard-drawer-tab[aria-selected="true"] { border-color: #059669; color: #047857; } .dashboard-breakdown { margin-top: 14px; border: 1px solid var(--ui-border); border-radius: 13px; overflow: hidden; } .dashboard-breakdown-row { display: flex; justify-content: space-between; gap: 20px; padding: 9px 12px; color: var(--ui-muted); font-size: 12px; } .dashboard-breakdown-row strong { color: var(--ui-text); font-variant-numeric: tabular-nums; } .dashboard-breakdown-row--total { border-top: 1px solid var(--ui-border); background: var(--ui-surface-muted); color: var(--ui-text); font-weight: 780; } .dashboard-breakdown-row--profit { background: #ecfdf5; color: #065f46; font-size: 14px; font-weight: 800; } .dashboard-timeline { margin: 0; padding: 0; list-style: none; } .dashboard-timeline li { position: relative; margin-left: 7px; padding: 0 0 20px 20px; border-left: 1px solid var(--ui-border); } .dashboard-timeline li::before { position: absolute; left: -5px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: #10b981; content: ''; } body.dashboard-drawer-open { overflow: hidden; } @media (max-width: 1279px) { .dashboard-scope-bar { grid-template-columns: minmax(300px, 1fr) minmax(280px, 1fr); } .dashboard-financial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dashboard-analysis-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .dashboard-operations-grid, .dashboard-customer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .business-dashboard { padding-inline: 12px !important; } .dashboard-scope-bar { position: static; grid-template-columns: 1fr; padding: 10px; } .dashboard-range-fields { grid-template-columns: 1fr 1fr; } .dashboard-range-fields button { grid-column: 1 / -1; } .dashboard-financial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .dashboard-operations-grid, .dashboard-customer-grid { gap: 9px; } .dashboard-card { padding: 13px 12px; } .dashboard-card-value { font-size: 22px; } .dashboard-card-note { min-height: 0; } .dashboard-analysis-grid { display: block; } .dashboard-analysis-grid > * + * { margin-top: 12px; } .dashboard-state-row { grid-template-columns: minmax(80px, 120px) minmax(90px, 1fr) minmax(74px, auto); } .dashboard-table-toolbar .dashboard-search { order: 3; width: 100%; } .dashboard-drawer { width: 100%; } .dashboard-drawer-header, .dashboard-drawer-body, .dashboard-drawer-footer { padding-inline: 15px; } }