/* ask/ask.css — style riêng slice Hỏi (Epic 4 rebuild, Story 4.4). * * Mirror từ block "Màn Hỏi (Story 9.2)" của style.css cũ. [UX review * 2026-08-27, finding #15] Bản trùng selector+giá trị từng để LẠI trong * style.css ("cascade vô hại, định gỡ sau nhưng bị bỏ quên" — retro * epic-5-frontend-rebuild) ĐÃ GỠ — file này giờ là NGUỒN DUY NHẤT cho mọi * rule `.ask-*` của màn Hỏi (đã verify: load SAU style.css/TRƯỚC owner.css * trong index.html , luôn có mặt trên trang duy nhất chứa `#ask-screen`). * * AD-8: class dùng riêng slice giữ prefix ask-*. Riêng dot trạng thái: Story * 12.2 (Epic 12) chuyển sang component `.status-dot` DÙNG CHUNG ở * shared/status-dot.css — bản `.ask-status-dot` copy tay cũ (Story 4.4) đã * gỡ khỏi file này; shared/ là plumbing chung nên không vi phạm AD-8. Màu * qua token shared/tokens.css (AD-5), không định nghĩa lại. */ /* Nút bấm-giữ là FAB lớn giữa màn: indigo (--ane-500) khi chờ — đây là hành động "nói chuyện", không phải "start this" (orange) hay "recording, handle with care" toàn cục (red của Stop); chuyển đỏ + pulse khi ĐANG giữ để mirror ngôn ngữ "đang thu âm" của màn Start. */ /* Fix 2026-08-28 (finding #9, sally-jobs listener review) — `justify-content: center` dồn TOÀN BỘ nội dung vào giữa-dưới màn hình, nửa trên bỏ trống (ảnh 06-ask-idle-mobile.png). Đổi sang `flex-start`: cụm hint+status trồi lên phần ba trên theo đúng thứ tự DOM tự nhiên; nút PTT (vùng ngón cái) neo đáy qua `margin-top: auto` đặt ở chính .ask-ptt (đẩy CẢ CỤM từ đó trở xuống — ask-ptt/ask-ptt-label/ask-replay — dồn xuống đáy cùng nhau). Thuần CSS, không đổi DOM order/hành vi. */ .ask-view { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 20px 16px; padding-bottom: max(20px, env(safe-area-inset-bottom)); gap: 18px; overflow-y: auto; } .ask-target-row { display: flex; align-items: center; gap: 10px; } .ask-target-label { font-size: 0.85rem; color: var(--muted); font-weight: 600; } .ask-target-row select { /* Review 2026-08-18: 44px sàn tap-target, mirror .back-btn/.channel-btn */ min-height: 44px; padding: 8px 10px; border-radius: 20px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 0.85rem; font-weight: 600; } .ask-hint { margin: 0; max-width: 340px; text-align: center; color: var(--muted); font-size: 0.9rem; } .ask-status-box { display: flex; align-items: center; gap: 10px; } .ask-status-text { margin: 0; font-size: 1.05rem; font-weight: 700; } /* Dot trạng thái: Story 12.2 — chuyển sang component `.status-dot` dùng chung (shared/status-dot.css, vocabulary shared/status-vocab.js). Bản `.ask-status-dot` copy tay cũ đã gỡ — 4 pha khớp ASK_STATUS (ask/ui.js): "" chờ · is-lost đỏ (đang thu) · is-connecting amber (đang dịch) · is-live xanh (đang phát). */ .ask-ptt { position: relative; width: 108px; height: 108px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; /* [UX review Sally/Ive 2026-08-27, finding #13/Epic 20 — phán quyết Dave] Trước: chữ/icon #fff mirror #pin-submit — NHƯNG #pin-submit dùng trắng là premise SAI (đã đảo ở Epic 20, xem style.css). Trắng/--ane-action-500 đo được 2,92:1 — TRƯỢT cả AA normal 4,5:1 lẫn AA large/non-text 3:1 (tests/test_epic17_start_hero_contrast.py). --text là chuẩn ĐÚNG (mirror owner.css .start-hero, khoá bằng test_epic20_orange_cta_contrast.py). */ color: var(--text); /* [UX review 2026-08-27, finding #13] Trước: var(--ane-500) indigo — CÙNG hành động ngữ nghĩa "giữ để máy nghe tôi" như nút thu tiếng Owner (.fab.start, --ane-action-500 cam) nhưng KHÁC màu, phá luật màu chính hệ token này tự đặt ra (cam = lời mời bắt đầu). Đổi sang cam — mirror ĐÚNG .fab.start. */ background: var(--ane-action-500); transition: background-color 150ms ease-out, transform 150ms ease-out; /* bấm-giữ: không cho long-press mở menu / select text / scroll theo ngón */ touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; /* Fix 2026-08-28 (finding #9): hút hết khoảng trống PHÍA TRÊN nó trong .ask-view (justify-content: flex-start) — neo nút PTT + mọi thứ sau nó (ask-ptt-label, ask-replay) xuống đáy màn, vùng ngón cái. */ margin-top: auto; } .ask-ptt .btn-icon { width: 40px; height: 40px; } .ask-ptt:active { transform: scale(0.96); } .ask-ptt.recording { background: var(--danger); /* [UX review Sally/Ive 2026-08-27, finding #13/Epic 20 — phán quyết Dave] GIỮ NGUYÊN trắng ở đây (khác .ask-ptt nền cam phía trên): trắng/--danger (#ef4444) = 3,76:1, ĐẠT sàn AA large/non-text 3:1 (shared/tokens.css) — không đảo theo .ask-ptt vì nền khác (--danger, không phải --ane-action-500). Cần khai lại tường minh vì .ask-ptt giờ dùng var(--text), không kế thừa đúng qua cascade. */ color: #fff; animation: ask-ptt-pulse 1.2s ease-in-out infinite; } @keyframes ask-ptt-pulse { /* Sprint-change 2026-08-23: rgb(239,68,68) = --danger mới (#ef4444) — sửa ĐỒNG THỜI với keyframe trùng tên trong style.css (xem comment ở đó). */ 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); } 50% { box-shadow: 0 0 0 14px rgba(239, 68, 68, 0); } } .ask-ptt-label { margin-top: -6px; } @media (prefers-reduced-motion: reduce) { .ask-ptt.recording { animation: none; } /* .status-dot đã tự tắt animation trong shared/status-dot.css */ } /* Story 11.4 (Epic 11 UX redesign, 2026-08-23) — dòng đếm lượt hỏi còn lại. Cố ý NHỎ và MUTED ở trạng thái thường: đây là cảnh báo mềm, không phải thông báo lỗi (đó là #ask-error ngay dưới, .error đã có màu riêng). Khi HẾT lượt thì mới lên màu --danger — lúc đó nó thật sự là trạng thái chặn. */ .ask-quota { margin: 0; text-align: center; font-size: 0.85rem; font-weight: 600; color: var(--muted); } .ask-quota.is-exhausted { /* Epic 14 (Story 14.2): --danger làm chữ trên --bg mới đo 3,57:1 — dưới sàn AA. Wording "Hết lượt hỏi..." đã tự nói trạng thái, đổi sang --text (14,9:1) không mất tín hiệu. */ color: var(--text); } /* [C4.2, audit Musk/Jobs/Sally 09-06] Nút Phát — kiêm cả "phát lần đầu" (bỏ auto-play) lẫn "nghe lại" cũ (Fix 2026-08-28 finding #5). Đây là CTA CHÍNH của màn (không phải nút phụ như `.listen-secondary-btn` trước đây) — mirror GIÁ TRỊ THỊ GIÁC của `.start-hero` (owner/owner.css) nhưng BẢN RIÊNG (AD-8: ask.css không import owner.css, mỗi slice tự giữ CSS của mình). Cùng lý do contrast: chữ `--text` (không trắng) trên nền cam `--ane-action-500` — trắng đo 2,92:1 dưới sàn AA (test_epic17_start_hero_contrast.py, mirror .ask-ptt phía trên cũng đã áp cùng quyết định). */ .ask-play-btn { display: block; width: 100%; max-width: 340px; min-height: 56px; margin-top: 4px; padding: 14px 20px; border: none; border-radius: 999px; background: var(--ane-action-500); color: var(--text); font-size: 1.1rem; font-weight: 700; text-align: center; } .ask-play-btn:active { transform: scale(0.99); } .ask-play-hint { /* [Sally, audit Ask/Guest 2026-09-12] `opacity: 0.75` cũ chồng lên var(--muted) (đã hiệu chỉnh AA 4.5:1 trên --bg, đo 6,21:1) — composite thật trên --bg chỉ còn 3,55:1, TRƯỢT sàn AA 4,5:1 cho chữ thường (0,8rem = 12,8px, dưới ngưỡng "large text"). --muted một mình đã đủ độ mờ thị giác cần thiết (nhạt hơn --text rõ rệt) — bỏ opacity, không cần token mờ hơn nữa. */ margin: 0; max-width: 340px; text-align: center; color: var(--muted); font-size: 0.8rem; }