/* ---------------- themes (CHAT-B5 Task 9b) ---------------- ONE switch: , set before first paint by an inline head script (localStorage vc.theme = auto|light|dark; "auto" follows the system prefers-color-scheme and updates live via matchMedia). The dark block below is the ONLY dark definition — no media-query duplication, so the two themes can never drift apart. */ :root { /* light */ --c-accent: #2E76C4; /* R13 was #378ADD — darkened to 4.66:1 white-on (Task 9b contrast) */ --c-accent-strong: #185FA5; --c-surface: #fff; --c-canvas: #F1EFE8; --c-text: #1c1c1e; --c-text-2: #5d5d62; --c-text-muted: #66666e; /* was #8e8e93 — 2.83:1; darkened to 4.95:1 (Task 9b contrast) */ --c-text-3: #3a3a3c; --c-danger: #ff3b30; --c-accent-tint: #E6F1FB; --c-accent-pressed: #D3E6F9; --c-accent-disabled: #9DC4EE; --c-bubble-self: #B5D4F4; --c-bubble-self-ink: #0C447C; --c-danger-soft: #ffd6d2; --c-success: #2e9e5b; --c-topbar: #FAF9F5; --c-pressed: #dde1ea; --c-border-input: #d8d8dd; --c-border-hair: #e2e2e7; --c-on-accent: #fff; /* text/glyphs on accent fills */ --c-ava-ink: #fff; /* initials on the hue avatar */ --ph-l: 30%; /* per-participant hue lightness */ --c-topbar-border: #e4e5ea; --c-status-bg: #fff7e6; /* app-status info bar */ --c-status-border: #f0e3c0; --c-photo-bg: #e8e8ec; /* photo placeholder while loading */ --c-photo-border: transparent; /* dark theme frames bright photos */ --c-sep-bg: rgba(0,0,0,.07); /* date separator pill */ --c-new-line: #e5a63a; /* "New" divider line */ --c-new-text: #8a5f0d; /* "New" divider label (was #b87f14, 3.00:1) */ --c-call-bg: #1c1c1e; /* incoming / in-call overlay */ --c-call-ink: #fff; --c-call-sub: #c7c7cc; --c-call-warn: #ff9f0a; --c-call-answer: #34C759; --c-call-mute: #48484a; } :root[data-theme="dark"] { /* genuinely dark, not grey — deep near-blacks with subtle blue warmth */ --c-accent: #2E76C4; --c-accent-strong: #8FC0F7; --c-surface: #1a1a1e; --c-canvas: #0b0b0d; --c-text: #f2f2f4; --c-text-2: #b8b8c0; --c-text-muted: #8a8a93; --c-text-3: #c7c7cc; --c-danger: #ff6b5e; --c-accent-tint: #1d3a57; --c-accent-pressed: #26496b; --c-accent-disabled: #2e4a66; --c-bubble-self: #1d3a57; --c-bubble-self-ink: #d9e9fa; --c-danger-soft: #4a201c; --c-success: #3ddc84; --c-topbar: #101013; --c-pressed: #2a2a31; --c-border-input: #3a3a42; --c-border-hair: #2c2c32; --c-on-accent: #fff; --c-ava-ink: #0b0b0d; /* initials on the light hue avatar */ --ph-l: 74%; --c-topbar-border: #26262c; --c-status-bg: #2a2315; --c-status-border: #4a3d1e; --c-photo-bg: #232329; --c-photo-border: #2c2c32; --c-sep-bg: rgba(255,255,255,.09); --c-new-line: #e5a63a; --c-new-text: #e5a63a; --c-call-bg: #101013; --c-call-ink: #f2f2f4; --c-call-sub: #9a9aa2; --c-call-warn: #ff9f0a; --c-call-answer: #30d158; --c-call-mute: #3a3a42; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } /* CHAT-F2: the hidden attribute must always win — the sections below set their own display, which previously overrode [hidden] and made the quiet-hours panel visible on every screen, including the not-set-up screen. */ [hidden] { display: none !important; } html, body { height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--c-canvas); color: var(--c-text); overscroll-behavior: none; } #app { display: flex; flex-direction: column; height: 100dvh; max-width: 620px; margin: 0 auto; } /* ---------------- CHAT-B5: light, compact header ---------------- */ #topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--c-topbar); color: var(--c-text); padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top)); border-bottom: 1px solid var(--c-topbar-border); flex: 0 0 auto; } #me-avatar { width: 44px; height: 44px; flex: 0 0 auto; padding: 4px; border: none; border-radius: 50%; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; touch-action: manipulation; } #title { flex: 1 1 auto; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #topright { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; } #quietchip { font-size: 18px; padding: 0 2px; } #pushbell { width: 44px; height: 44px; flex: 0 0 auto; font-size: 20px; background: none; border: none; border-radius: 50%; cursor: pointer; opacity: .45; touch-action: manipulation; } #pushbell.on { opacity: 1; } .app-status { margin: 0; padding: 7px 14px; font-size: 13px; color: var(--c-text-2); background: var(--c-status-bg); border-bottom: 1px solid var(--c-status-border); } /* ---------------- chat feed (CHAT-B5 grouping) ---------------- */ #chat { position: relative; /* offsetTop anchor for the new-marker */ flex: 1 1 auto; overflow-y: auto; padding: 10px 12px 6px; display: flex; flex-direction: column; gap: 10px; } #chat::-webkit-scrollbar { width: 0; height: 0; } /* iPad: no visible scrollbar */ .msgrow { display: flex; align-items: flex-end; gap: 8px; align-self: flex-start; max-width: 86%; } .msgrow.self { align-self: flex-end; } .msgrow .col { display: flex; flex-direction: column; gap: 2px; max-width: 100%; min-width: 0; } /* name label — only on the FIRST message of a group, tinted per participant */ .msgrow .who { display: block; font-size: 13px; font-weight: 700; line-height: 1.2; color: hsl(var(--ph, 25), 50%, var(--ph-l, 30%)); padding: 0 6px 2px; } .msg { max-width: 100%; padding: 8px 13px; border-radius: 16px; border: 1px solid var(--c-border-hair); /* R13: hairline separates incoming from pale-blue self */ font-size: 17px; line-height: 1.35; word-wrap: break-word; white-space: pre-wrap; background: var(--c-surface); box-shadow: 0 1px 2px rgba(0,0,0,.06); } .msg.self { background: var(--c-bubble-self); color: var(--c-bubble-self-ink); border: none; box-shadow: 0 1px 2px rgba(0,0,0,.14); } .msgrow.system .msg { background: none; border: none; box-shadow: none; } /* tucked corners inside a group (iMessage-style) */ .msg.g-first { border-top-left-radius: 6px; } .msg.g-mid { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .msg.g-last { border-bottom-left-radius: 6px; } .msg.self.g-first { border-top-right-radius: 6px; } .msg.self.g-mid { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .msg.self.g-last { border-bottom-right-radius: 6px; } .msg .when { display: block; font-size: 11px; margin-top: 2px; opacity: .55; } .msg.self .when { opacity: .65; } /* send state (CHAT-B5): faint while pending, visible failure with retry */ .msg.pending { opacity: .55; } .msg.pending::after { content: " ⏳"; font-size: 13px; } .msg.failed { outline: 2px solid rgba(255, 59, 48, .6); outline-offset: 1px; } .msg.failed::after { content: "! Tap to retry"; display: block; font-size: 11px; font-weight: 600; color: var(--c-danger); margin-top: 2px; } .msg.self.failed::after { color: var(--c-danger); } /* R13: danger-soft was for the dark teal; full danger reads on pale blue */ /* photos (CHAT-B5): large in the bubble — they are the point */ .msg.photo { padding: 5px; max-width: 94%; } .msg.photo img { display: block; max-width: 100%; max-height: min(55dvh, 560px); border-radius: 12px; object-fit: contain; background: var(--c-photo-bg); border: 1px solid var(--c-photo-border); /* dark theme frames bright photos */ } .msg.photo .cap { display: block; padding: 6px 8px 0; font-size: 15px; } .msg.photo .when { padding: 0 8px; } .msg.photo.loading img { opacity: .35; } .msg.photo.loading::after { content: "⏳ loading…"; display: block; padding: 0 8px 4px; font-size: 12px; color: var(--c-text-muted); } .msg.photo.pfail img { display: none; } .msg.photo.pfail::after { content: "Photo unavailable"; display: block; padding: 6px 8px; font-size: 13px; color: var(--c-danger); } .msg.photo img.ready { cursor: pointer; touch-action: manipulation; } /* date separators + new-message divider (CHAT-B5) */ .date-sep { align-self: center; margin: -4px 0; } .date-sep span { display: inline-block; background: var(--c-sep-bg); color: var(--c-text-2); font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: 12px; } .newdiv { align-self: stretch; display: flex; align-items: center; gap: 10px; margin: -2px 0; } .newdiv::before, .newdiv::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--c-new-line); } .newdiv span { font-size: 12px; font-weight: 800; color: var(--c-new-text); letter-spacing: .3px; } /* arrival animation (CHAT-B5 Task 9) — only poll-arriving messages */ .msg.arrive { animation: arrive .22s ease-out; } @keyframes arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .msg.arrive { animation: none; } } /* system lines (renames) stay centered and quiet */ .msgrow.system { align-self: center; max-width: 90%; } .msg.system { padding: 2px 10px; font-size: 12px; color: var(--c-text-muted); text-align: center; } .msg.system .when { display: none; } /* ---------------- composer ---------------- */ #composer { flex: 0 0 auto; position: relative; /* R12: emoji tray anchors to the composer */ background: var(--c-surface); border-top: 1px solid var(--c-border-hair); padding: 6px 10px; padding-bottom: max(6px, env(safe-area-inset-bottom)); } /* R12: emoji tray — hidden by default so it takes no space and overlaps nothing; opens as an overlay floating just above the composer (the feed never resizes, so the scroll position cannot jump). */ #emojis { display: none; } #emojis.open { display: flex; gap: 5px; position: absolute; left: 10px; right: 10px; bottom: calc(100% + 8px); padding: 6px; background: var(--c-surface); border: 1px solid var(--c-border-hair); border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.25); /* same literal as .sheet-card */ z-index: 20; } #emojis button { flex: 1 1 0; min-width: 0; height: 44px; min-height: 44px; padding: 0; font-size: 22px; line-height: 1; border: none; background: var(--c-canvas); border-radius: 11px; touch-action: manipulation; } #emojis button:active { background: var(--c-pressed); } #emoji-toggle { flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border: none; border-radius: 50%; background: var(--c-canvas); font-size: 20px; line-height: 1; touch-action: manipulation; } #emoji-toggle.active { background: var(--c-accent-tint); } #emoji-toggle:active { background: var(--c-pressed); } .composer-row { display: flex; gap: 8px; align-items: center; } #text { flex: 1 1 auto; min-width: 0; /* R15: let the input shrink below its intrinsic width */ font-size: 17px; padding: 12px 14px; border: 1px solid var(--c-border-input); border-radius: 22px; background: var(--c-canvas); outline: none; min-height: 46px; } #text:focus { border-color: var(--c-accent-strong); background: var(--c-surface); } #photo-btn { min-width: 46px; min-height: 46px; border: none; border-radius: 50%; background: var(--c-canvas); font-size: 19px; touch-action: manipulation; } #photo-btn:active { background: var(--c-pressed); } #send { min-width: 46px; min-height: 46px; border: none; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); font-size: 18px; touch-action: manipulation; } #send:disabled { background: var(--c-accent-disabled); } /* ---------------- install (pairing) ---------------- */ #install { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; } #install h1 { font-size: 52px; } #install h2 { font-size: 22px; } #install p { color: var(--c-text-2); font-size: 15px; } #install .install-hint b { color: var(--c-text); } #install button { font-size: 17px; font-weight: 600; padding: 14px 30px; border: none; border-radius: 26px; background: var(--c-accent); color: var(--c-on-accent); min-height: 48px; touch-action: manipulation; } #install button:disabled { opacity: .5; } .pair-code-label { font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: var(--c-text-muted); margin-top: 6px; } .pair-code { font-size: 46px; font-weight: 800; letter-spacing: 10px; color: var(--c-text); font-variant-numeric: tabular-nums; margin: 2px 0 4px; } #pair-status { color: var(--c-accent-strong); font-size: 16px; font-weight: 600; } #pair-restart { background: var(--c-canvas); color: var(--c-accent-strong); border: 1px solid var(--c-border-input); } /* ---------------- quiet panel ---------------- */ #quietpanel { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; } .quiet-icon { font-size: 56px; } .quiet-title { font-size: 20px; font-weight: 700; } #quiet-text { color: var(--c-text-3); font-size: 15px; } .quiet-count { color: var(--c-accent-strong); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; } .quiet-note { color: var(--c-text-muted); font-size: 13px; } /* ---------------- CHAT-B4: avatars + profile sheet ---------------- */ .ava { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--c-ava-ink); font-weight: 800; font-size: 15px; background: hsl(var(--ph, 25), 50%, var(--ph-l, 30%)); overflow: hidden; user-select: none; } .ava img { width: 100%; height: 100%; object-fit: cover; display: block; } .ava.big { width: 84px; height: 84px; font-size: 34px; margin: 0; } /* R6: 84px in the profile sheet */ #profile { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; padding: 24px; } .sheet-card { position: relative; /* anchors the ✕ close button */ background: var(--c-surface); border-radius: 22px; padding: 26px 20px 18px; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.25); } .sheet-close { width: 48px; height: 48px; border: none; border-radius: 50%; background: var(--c-canvas); color: var(--c-text-2); font-size: 18px; line-height: 1; touch-action: manipulation; } .sheet-close:active { background: var(--c-pressed); } .sheet-btn { font-size: 16px; font-weight: 600; padding: 13px 18px; border: none; border-radius: 14px; background: var(--c-canvas); color: var(--c-text); min-height: 48px; touch-action: manipulation; } .sheet-btn.primary { background: var(--c-accent); color: var(--c-on-accent); } .sheet-btn.ghost { background: none; color: var(--c-text-muted); } /* CALL-D2: call-pick Close */ /* R6: camera badge overlaid on the avatar — text-free, CSS-drawn */ #profile-pic-btn { position: absolute; right: -3px; bottom: -3px; width: 28px; height: 28px; padding: 0; border: 2px solid var(--c-surface); border-radius: 50%; background: var(--c-accent); touch-action: manipulation; } #profile-pic-btn::before { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 9px; border-radius: 2px; background: var(--c-on-accent); } #profile-pic-btn::after { content: ""; position: absolute; inset: 0; margin: auto; width: 5px; height: 5px; border: 1.5px solid var(--c-accent-strong); border-radius: 50%; } #profile-pic-btn:active { opacity: .8; } .sheet-btn:active { opacity: .7; } .name-row { display: block; } #profile-name-input { display: block; width: 100%; font-size: 17px; padding: 12px 14px; border: 1px solid var(--c-border-input); border-radius: 14px; background: var(--c-canvas); outline: none; min-height: 46px; } #profile-name-input:focus { border-color: var(--c-accent-strong); background: var(--c-surface); } .profile-status { font-size: 13px; color: var(--c-danger); margin: 0; } .profile-status.ok { color: var(--c-success); font-weight: 600; } /* CHAT-B5b: green confirmation */ /* ---------------- CHAT-B5 Task 9b: theme picker (profile sheet) ---------------- */ .theme-row { display: flex; gap: 6px; margin-top: 6px; } .theme-opt { flex: 1 1 0; min-width: 0; min-height: 44px; font-size: 15px; font-weight: 600; border: 1.5px solid var(--c-border-input); border-radius: 12px; background: var(--c-canvas); color: var(--c-text-2); touch-action: manipulation; } .theme-opt.active { background: var(--c-accent-tint); color: var(--c-accent-strong); border-color: var(--c-accent-strong); } /* ---------------- R6: profile dialog restructure ---------------- */ #profile .sheet-card { padding: 0; gap: 0; text-align: left; } .profile-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 8px 18px; border-bottom: 1px solid var(--c-border-hair); } .profile-title { font-size: 17px; font-weight: 700; color: var(--c-text); margin: 0; } .profile-body { padding: 18px 20px 10px; display: flex; flex-direction: column; gap: 10px; } .avatar-wrap { position: relative; width: 84px; margin: 0 auto; } .pic-caption { font-size: 13px; color: var(--c-text-2); margin: 6px 0 0; text-align: center; } .field-label { display: block; font-size: 13px; font-weight: 600; color: var(--c-text-2); margin: 6px 0 0; } .field-hint { font-size: 12px; color: var(--c-text-muted); margin: 4px 0 0; } .profile-foot { display: flex; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--c-border-hair); } .profile-foot .sheet-btn { flex: 1 1 0; min-width: 0; white-space: nowrap; } #profile-cancel { background: var(--c-surface); color: var(--c-text-2); border: 1.5px solid var(--c-border-input); } #profile-save:disabled { opacity: .5; } /* R12: in-flight commit guard */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ---------------- CHAT-B3: full-screen photo viewer ---------------- */ #viewer { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .95); display: flex; align-items: center; justify-content: center; touch-action: none; /* the viewer owns pinch/pan */ } #viewer-img { max-width: 100vw; max-height: 100dvh; object-fit: contain; transform-origin: center center; user-select: none; -webkit-user-select: none; will-change: transform; } #viewer-close { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 16px; width: 52px; height: 52px; z-index: 61; border: none; border-radius: 50%; background: rgba(255, 255, 255, .18); color: var(--c-on-accent); font-size: 24px; line-height: 1; touch-action: manipulation; } #viewer-close:active { background: rgba(255, 255, 255, .35); } /* ---------------- CALL-D2: voice calls (restored with CHAT-B5b) ---------- */ #callbtn { width: 44px; height: 44px; flex: 0 0 auto; /* CHAT-B5 Task 8: 44pt */ font-size: 20px; background: none; border: none; border-radius: 50%; cursor: pointer; opacity: .9; touch-action: manipulation; } #callbtn:active { transform: scale(1.15); } #callpicker { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; padding: 24px; } .sheet-title { font-size: 18px; font-weight: 700; } #call-pick-list { display: flex; flex-direction: column; gap: 8px; } .pick-row { font-size: 17px; font-weight: 600; text-align: left; padding: 14px 16px; border: none; border-radius: 14px; background: var(--c-canvas); color: var(--c-text); min-height: 50px; display: flex; align-items: center; gap: 10px; touch-action: manipulation; } .pick-row:active { background: var(--c-pressed); } .pick-row .role-tag { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--c-accent-strong); background: var(--c-accent-tint); border-radius: 8px; padding: 2px 8px; } /* incoming ring + in-call overlays */ #incoming, #callui { position: fixed; inset: 0; z-index: 71; background: var(--c-call-bg); color: var(--c-call-ink); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: max(40px, env(safe-area-inset-top)) 24px max(34px, env(safe-area-inset-bottom)); } .call-center { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .call-big-name { font-size: 34px; font-weight: 800; margin: 0; } .call-sub { font-size: 17px; color: var(--c-call-sub); margin: 0; } .call-timer { font-size: 44px; font-weight: 300; margin: 6px 0 0; font-variant-numeric: tabular-nums; letter-spacing: 2px; } .call-status-line { font-size: 14px; color: var(--c-call-warn); margin: 0; max-width: 300px; } .call-actions { display: flex; gap: 40px; align-items: center; } .call-btn { width: 78px; height: 78px; border: none; border-radius: 50%; font-size: 32px; color: var(--c-on-accent); line-height: 1; touch-action: manipulation; } .call-btn:active { transform: scale(.94); } .call-btn.answer { background: var(--c-call-answer); } .call-btn.decline { background: var(--c-danger); } .call-btn.mute { background: var(--c-call-mute); } .call-btn.mute.off { background: var(--c-call-warn); } .call-btn.hangup { background: var(--c-danger); } .call-btn.retry { width: auto; height: auto; border-radius: 22px; background: var(--c-accent); font-size: 17px; padding: 12px 22px; font-weight: 600; } #call-remote-audio { display: none; }