/* Support Center — LỚP 1: design token. * * Port từ design `nexa` → `styles/tokens.css` (xem design/tokens ghi chú trong * design/FOUNDATIONS.md). Bỏ 5 theme variant (linear/arc/notion/raycast/telegram) * và block [data-density] — mini app không có bộ chọn theme/độ dày, chỉ dùng * nhánh mặc định. * * CẦU NỐI THEME HOST — host (chat-platform-app) gửi ĐÚNG 7 tham số kiểu Telegram * qua postMessage; SDK nexa-web-app.js đặt chúng thành `--nexa-*` trên và * đặt [data-nexa-color-scheme]. Vì vậy: * · ĐÚNG 7 token dưới đây viết `var(--nexa-x, )` * · 28 token còn lại lấy nguyên giá trị design — host không có gì để nói về chúng * Đừng thêm token thứ 8 vào danh sách override: host không gửi, `var()` sẽ luôn * rơi về fallback nên chỉ làm rule khó đọc. * * LƯU Ý bg_color của host = `--bg-panel` của host (mặt phẳng NỔI), KHÔNG phải * `--bg` (mặt nền trang). Bản styles.css cũ gán mặt phẳng card = secondary_bg * (tức --bg-hover của host) nên toàn bộ bậc surface bị bẹt, dark mode mất chiều * sâu. Ở đây `--bg` giữ giá trị design, host chỉ chi phối --bg-panel/--bg-hover. * * `--tk-acc` (teal nhận diện Support Center) KHÔNG ở đây — nó đặt trên `.sc-app` * trong styles.css, đúng như design đặt trên `.tk-app` trong bizapp.css. */ :root { /* ── type ─────────────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; --text-11: 11px; --text-12: 12px; --text-13: 13px; --text-14: 14px; --text-15: 15px; --text-16: 16px; --text-17: 17px; --text-18: 18px; --text-20: 20px; --text-22: 22px; --text-24: 24px; --text-32: 32px; /* ── spacing (lưới 4pt) ───────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ── bán kính ─────────────────────────────────────────── */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 22px; --r-full: 999px; /* ── chuyển động ──────────────────────────────────────── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --d-fast: 120ms; --d-base: 180ms; --d-slow: 280ms; /* ── khổ nội dung: 3 băng có tài liệu (Design Audit §09) ─ * --mod-w dashboard, lưới card, launchpad ← Support Center dùng băng này * --list-w danh sách dày, bảng, board * --read-w văn xuôi, luồng hội thoại, trình đọc * * --mod-w = 1100px KHỚP `chat-platform-app/src/styles/index.css:185`, nơi ghi * rõ: design doc nói 960 nhưng 11 call site đã ship (kể cả DirectoryLayout có * test) chốt 1100, nên token ghi theo canon của repo. Mini app đi theo cùng * con số để nội dung không hẹp hơn các trang khác của nền tảng. * * Vì sao Support Center chuyển từ --list-w sang --mod-w (2026-08-12, yêu cầu * user): app không còn là một danh sách thuần như lúc port Phase 1 — nó đã có * bảng báo cáo 12 chỉ số, bảng mức ưu tiên 6 cột, lưới thẻ cấu hình. Đó là bề * mặt "dashboard/directory", đúng băng --mod-w. Ba băng giữ nguyên định * nghĩa; chỉ đổi băng mà app tiêu thụ. */ --mod-w: 1100px; --list-w: 860px; --read-w: 760px; /* ── chiều cao dòng danh sách (density mặc định) ───────── */ --row-h: 48px; /* ── accent (indigo) ────────────────────────────────────── * --accent là 1 trong 7 token host override được. --accent-strong/-soft/-softer * DẪN XUẤT từ nó bằng color-mix thay vì hardcode hsl() như design, để khi host * đổi hue thì cả họ accent đi theo. Không host → ra đúng giá trị design: * accent hsl(239 84% 67%) · strong ≈ 59% (design 58%) · soft ≈ 96% (design 96%) */ --accent: var(--nexa-button-color, hsl(239 84% 67%)); --accent-strong: color-mix(in srgb, var(--accent) 88%, #000); --accent-soft: color-mix(in srgb, var(--accent) 12%, #fff); --accent-softer: color-mix(in srgb, var(--accent) 6%, #fff); --accent-ring: color-mix(in srgb, var(--accent) 28%, transparent); } /* ── LIGHT (mặc định) ──────────────────────────────────────── */ :root, [data-nexa-color-scheme='light'] { --bg: #f4f5f9; --bg-panel: var(--nexa-bg-color, #ffffff); --bg-elev: #ffffff; --bg-hover: var(--nexa-secondary-bg-color, #f3f4f8); --bg-active: #eef0f6; --bg-chat: #f4f5f9; /* PM #497 — nền bong bóng bình luận CỦA MÌNH. Phải là TOKEN, không phải * color-mix(--tk-acc …) đặt thẳng trong styles.css: `--tk-acc` cố ý chỉ khai * MỘT giá trị cho cả hai theme (xem chú thích ở đầu file này), nên teal-15% * pha với transparent ở theme TỐI gần như tiệp nền panel #161922 ⇒ mất phân * biệt "mình" với "người khác". Tách token cho đúng một surface này, KHÔNG * đụng --tk-acc (45 chỗ dùng). */ --tk-bub-me: #daefed; --text: var(--nexa-text-color, #0f1220); --text-2: #454a63; --text-muted: var(--nexa-hint-color, #6b7185); --text-dim: #9aa0b4; --text-on-accent: var(--nexa-button-text-color, #ffffff); --link: var(--nexa-link-color, var(--accent-strong)); --border: #e6e8ef; --border-subtle: #eef0f6; --border-strong: #d5d9e4; --shadow-sm: 0 1px 2px rgba(15, 18, 32, 0.04); --shadow-md: 0 4px 12px rgba(15, 18, 32, 0.06), 0 1px 2px rgba(15, 18, 32, 0.04); --shadow-lg: 0 12px 32px rgba(15, 18, 32, 0.08), 0 4px 8px rgba(15, 18, 32, 0.04); --shadow-pop: 0 20px 48px rgba(15, 18, 32, 0.18), 0 2px 6px rgba(15, 18, 32, 0.06); --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --scrim: rgba(15, 18, 32, 0.45); --code-bg: #f2f3f7; --code-text: #0f1220; /* Mũi tên của . Là ẢNH nền chứ không phải màu, nên KHÔNG dùng được * var(--text-muted) bên trong — phải khai riêng cho từng theme, và đây đúng là * chỗ để khai: tokens.css là tầng duy nhất được phép biết light/dark, còn * styles.css chỉ gọi var(--chevron). Màu bám theo --text-muted của cùng theme. * (Không theo được --nexa-hint-color của host — data-URI là chuỗi tĩnh.) */ --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a90a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); /* accent tint chỉnh lại cho mặt tối: strong SÁNG hơn accent (design hsl 74%), * soft/softer là tint trong suốt chứ không pha trắng */ --accent-strong: color-mix(in srgb, var(--accent) 78%, #fff); --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent); --accent-softer: color-mix(in srgb, var(--accent) 12%, transparent); } /* Host chưa gửi theme (mở thẳng bằng trình duyệt lúc dev) → theo hệ điều hành. * Lặp lại nguyên khối dark: CSS không cho @extend, và `:root:not([data-…])` * phải cùng specificity mới thắng được khối light ở trên. */ @media (prefers-color-scheme: dark) { :root:not([data-nexa-color-scheme]) { --bg: #0f1115; --bg-panel: var(--nexa-bg-color, #161922); --bg-elev: #1c2030; --bg-hover: var(--nexa-secondary-bg-color, #1f2331); --bg-active: #262b3c; --bg-chat: #0f1115; --tk-bub-me: #17414a; /* PM #497 — phải khai CẢ ở đây: host chưa gửi theme thì khối này mới là khối dark có hiệu lực */ --text: var(--nexa-text-color, #eceef5); --text-2: #b8bccc; --text-muted: var(--nexa-hint-color, #8a90a3); --text-dim: #5c6278; --text-on-accent: var(--nexa-button-text-color, #ffffff); --link: var(--nexa-link-color, var(--accent-strong)); --border: #262a36; --border-subtle: #1e222e; --border-strong: #323747; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-pop: 0 20px 48px rgba(0, 0, 0, 0.6); --scrim: rgba(0, 0, 0, 0.6); --code-bg: #0c0e14; --code-text: #e5e7ef; /* Mũi tên của