/* Bob's phone pages. Same palette as the Mac app's tokens (UI.swift). The theme is : the phone picks it (Preferences), else the Mac's pick; "system" follows the phone. */ :root { --snap: cubic-bezier(0.2, 0.9, 0.3, 1); --fg: #121212; --bg: #fff; --body: #595959; --muted: #737373; --line: #e0e0e0; --bad: #b3261e; --good: #2e7d4d; --panel: #f7f7f7; color-scheme: light; } :root[data-theme="system"] { color-scheme: light dark; } :root[data-theme="dark"] { --fg: #f2f2f2; --bg: #1a1a1a; --body: #b3b3b3; --muted: #8c8c8c; --line: #3a3a3a; --bad: #f2786d; --good: #5cc285; --panel: #242424; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --fg: #f2f2f2; --bg: #1a1a1a; --body: #b3b3b3; --muted: #8c8c8c; --line: #3a3a3a; --bad: #f2786d; --good: #5cc285; --panel: #242424; } } * { box-sizing: border-box; touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent; } /* no pinch or double-tap zoom, no tap flash */ [hidden] { display: none !important; } body { margin: 0; font: 16px/1.4 -apple-system, system-ui, sans-serif; color: var(--fg); background: var(--bg); } main { max-width: 420px; margin: 0 auto; padding: max(48px, env(safe-area-inset-top)) 20px 48px; } .mark { font-weight: 700; font-size: 22px; } h1 { font-size: 30px; margin: 8px 0 12px; } p { color: var(--body); } .muted { color: var(--muted); font-size: 13px; } .err { color: var(--bad); font-weight: 600; } .err:empty { display: none; } .code, .field { width: 100%; font: 600 22px ui-monospace, monospace; letter-spacing: 4px; text-transform: uppercase; padding: 14px; border: 1px solid var(--fg); border-radius: 10px; background: var(--bg); color: var(--fg); } .field { font: 17px system-ui; letter-spacing: 0; text-transform: none; } button, .btn { display: block; text-align: center; text-decoration: none; width: 100%; margin-top: 12px; padding: 16px; border: 0; border-radius: 999px; background: var(--fg); color: var(--bg); font: 600 17px system-ui; } button, .btn, .tile, .thread { transition: transform 0.1s var(--snap), opacity 0.1s; } button:disabled { opacity: 0.6; } a.tile:active, .app > a:active, button:active, .btn:active, .tile[role="button"]:active, .thread:active { opacity: 0.8; transform: scale(0.97); } .ghost { background: var(--bg); color: var(--fg); border: 1px solid var(--fg); } .danger { background: var(--bad); color: var(--bg); } .card { border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 12px 0; } .row { display: flex; gap: 8px; } .row input { flex: 1; min-width: 0; } .scan { flex: none; width: 58px; margin: 0; padding: 0; border-radius: 10px; display: grid; place-items: center; } .box video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin-top: 12px; border-radius: 14px; background: #121212; } /* header: "bob" on Apps, else Back + the screen's name; the menu on the right, its dot the connection */ .top { display: flex; align-items: center; gap: 4px; margin: -28px -8px 12px; } .top .mark { font-size: 28px; } .head { flex: 1; min-width: 0; display: flex; align-items: center; padding-left: 8px; } .up:not([hidden]) + .head { padding-left: 0; } .up { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--fg); } .up:active { opacity: 0.6; } .title { margin: 0; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .head .chat-head { min-width: 0; gap: 10px; } .head .chat-head > span:last-child { min-width: 0; } .head .chat-head b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .head .av { width: 36px; height: 36px; font-size: 15px; } .dot { position: absolute; top: 7px; right: 5px; width: 12px; height: 12px; border: 2px solid var(--bg); border-radius: 50%; background: var(--muted); } .dot.on { background: var(--good); } .dot.off { background: var(--bad); } .pill { align-self: flex-start; display: flex; align-items: center; gap: 6px; margin: 0 12px 12px; padding: 4px 12px 4px 10px; border-radius: 999px; background: var(--bg); color: var(--muted); font: 600 13px system-ui; } .pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .pill.on { color: var(--good); } .pill.off { color: var(--bad); } .menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; cursor: pointer; } .menu summary::-webkit-details-marker { display: none; } .menu[open] summary::before { content: ""; position: fixed; inset: 0; background: #0009; z-index: 1; animation: fade 0.18s; } .menu[open] nav { animation: in 0.2s var(--snap); } .menu.closing nav { animation: out 0.14s cubic-bezier(0.4, 0, 1, 1) forwards; } .menu.closing summary::before { animation: unfade 0.14s forwards; } @keyframes in { from { transform: translateX(100%); } } @keyframes out { to { transform: translateX(100%); } } @keyframes fade { from { opacity: 0; } } @keyframes unfade { to { opacity: 0; } } .menu nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 2; width: min(300px, 85vw); overflow: auto; padding: max(24px, env(safe-area-inset-top)) 12px max(24px, env(safe-area-inset-bottom)); background: var(--panel); display: flex; flex-direction: column; gap: 2px; } .menu nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--fg); text-decoration: none; font-size: 15px; } .menu nav a[aria-current] { background: var(--fg); color: var(--bg); font-weight: 600; } .menu nav .me { min-height: 64px; margin-bottom: 4px; } .menu nav .bottom { margin-top: auto; font-weight: 600; } .menu nav .bad { color: var(--bad); } .menu nav .muted { margin: 4px 12px; } .me small { display: block; color: var(--muted); font-size: 12px; } .me b { display: block; } /* tiles, like AppTile/DeviceTile on the Mac */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; margin-top: 20px; } .grid.people { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .tile { display: block; position: relative; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; color: var(--fg); text-decoration: none; } .app { position: relative; } /* heart toggle, top-left of a tile (People, Apps, Favourites) */ .fav { position: absolute; top: 6px; left: 6px; z-index: 1; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.35); color: #fff; } .fav svg { width: 16px; height: 16px; } .fav.on { color: var(--bad); } .app > a { display: block; color: inherit; text-decoration: none; transition: transform 0.1s var(--snap), opacity 0.1s; } .app .art img { filter: blur(24px) saturate(1.3); transform: scale(1.5); } /* the icon, blurred behind itself */ .app .art img + img { margin: auto; width: 72px; height: 72px; border-radius: 17px; filter: none; transform: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } .app .get { position: absolute; right: 10px; bottom: 12px; padding: 5px 12px; border-radius: 999px; background: var(--fg); color: var(--bg); font: 600 12px system-ui; } .app b, .app small { display: block; margin-right: 64px; } /* beside the name, clear of the icon */ /* an app Claude is still making: its icon breathes, the bar fills like BuildingTile's on the Mac (95% (1 - e^(-t/120 s))) */ .app.making b, .app.making small { margin-right: 0; } .making .art img + img { animation: breathe 1.4s ease-in-out infinite alternate; } .making .bar { position: absolute; left: 14px; right: 14px; bottom: 10px; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.25); } .making .bar i { display: block; height: 100%; background: #fff; transform: scaleX(0.4); transform-origin: left; animation: making 600s linear forwards; } @keyframes breathe { from { opacity: 0.55; } } @keyframes making { 0% { transform: scaleX(0.03); } 5% { transform: scaleX(0.21); } 10% { transform: scaleX(0.37); } 20% { transform: scaleX(0.6); } 40% { transform: scaleX(0.82); } 70% { transform: scaleX(0.92); } 100% { transform: scaleX(0.95); } } .tile b { display: block; margin-top: 8px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tile small { font-size: 11px; color: var(--muted); } .art { position: relative; overflow: hidden; height: 110px; border-radius: 10px; display: grid; place-items: center; color: #fff; font: 700 36px system-ui; } .people .art { height: 80px; font-size: 26px; } .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .art svg { width: 30px; height: 30px; } .av { flex: none; width: 44px; height: 44px; border-radius: 50%; font-size: 17px; } .av.big { width: 96px; height: 96px; font-size: 36px; } .av svg { width: 55%; height: 55%; } /* same palette and order as tileTint() in UI.swift */ .t0 { background: #2e7d4d; } .t1 { background: #3b5bdb; } .t2 { background: #b86b00; } .t3 { background: #8e44ad; } .t4 { background: #0f7c8c; } .t5 { background: #b3261e; } .you { color: var(--good); font-weight: 600; } .email-in { margin-top: 28px; } .email-in .field + .field { margin-top: 8px; } .email-in p:empty, #acct-note:empty { display: none; } .pick { display: flex; align-items: center; gap: 16px; margin: 8px 0 20px; font-weight: 600; cursor: pointer; } .lbl { display: block; font-weight: 600; margin: 16px 0 8px; } .seg { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; } .seg label { flex: 1; position: relative; } .seg input { position: absolute; inset: 0; opacity: 0; margin: 0; } .seg span { display: block; padding: 10px; border-radius: 8px; text-align: center; font-weight: 600; font-size: 15px; } .seg input:checked + span { background: var(--fg); color: var(--bg); } .seg input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; } .kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; } .kv span { color: var(--body); } /* people: tap or hold for the sheet; green pip when online */ .tile[role="button"] { cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .tile[role="button"]:active { opacity: 0.8; } .face { position: relative; flex: none; display: flex; } .face .on { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #5cc285; border: 2px solid var(--bg); } .tile .art .on { position: absolute; right: 8px; bottom: 8px; width: 14px; height: 14px; border-radius: 50%; background: #5cc285; border: 2px solid #fff; } .menu summary { position: relative; } .badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bad); color: #fff; font: 700 12px/20px system-ui; text-align: center; } .sheet { width: min(420px, 100%); max-width: none; margin: auto auto 0; border: 0; border-radius: 18px 18px 0 0; padding: 20px 20px max(20px, env(safe-area-inset-bottom)); background: var(--bg); color: var(--fg); } .sheet::backdrop { background: #0009; } .sheet[open] { animation: up 0.18s var(--snap); } @keyframes up { from { transform: translateY(24px); opacity: 0; } } .sheet-who, .chat-head { display: flex; align-items: center; gap: 12px; } .sheet-who small, .chat-head small { display: block; color: var(--muted); font-size: 13px; } .sheet p:empty { display: none; } .toast { position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 3; max-width: 420px; margin: 0 auto; width: auto; border-radius: 14px; text-align: left; font-weight: 500; animation: up 0.18s var(--snap); } /* messages */ .thread { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; } .thread .txt { flex: 1; min-width: 0; } .thread .badge { margin: 0; } .thread b, .thread small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .thread small { color: var(--muted); font-size: 13px; } .thread time { color: var(--muted); font-size: 12px; align-self: flex-start; margin-top: 4px; } .thread.new b, .thread.new small { color: var(--fg); font-weight: 700; } /* the chat is the whole screen, sized to what the keyboard leaves (--vh, --vt from visualViewport): header and compose stay put, only the messages scroll. column-reverse keeps them pinned to the bottom as the keyboard comes and goes. */ body.chat main { position: fixed; left: 0; right: 0; top: var(--vt, 0); height: var(--vh, 100dvh); display: flex; flex-direction: column; padding-bottom: 0; } body.chat section[data-path="/messages"], #chat { display: flex; flex-direction: column; flex: 1; min-height: 0; } .scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column-reverse; } .msgs { list-style: none; margin: 0; padding: 16px 0; display: flex; flex-direction: column; gap: 6px; } .msgs li { max-width: 80%; padding: 9px 13px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); align-self: flex-start; overflow-wrap: anywhere; white-space: pre-wrap; animation: pop 0.15s var(--snap); touch-action: pan-y; transition: transform 0.2s var(--snap); } .msgs li.mine { align-self: flex-end; background: var(--fg); color: var(--bg); border-color: var(--fg); } .msgs li.poke { align-self: center; background: none; border: 0; color: var(--muted); font-size: 13px; } .msgs li.drag { transition: none; } .msgs li.old { animation: none; } .msgs li.flash { animation: flash 1s; } @keyframes flash { 30% { box-shadow: 0 0 0 3px var(--muted); } } .msgs li.poke time { display: block; font-size: 11px; opacity: 0.7; margin-top: 2px; } @keyframes pop { from { transform: scale(0.9); opacity: 0; } } /* time and tick float at the end of the last line when it has room, else on a line of their own (like WhatsApp) */ .msgs .meta { float: right; display: flex; align-items: center; gap: 3px; margin: 6px -4px -4px 10px; font-size: 11px; line-height: 1; } .msgs .meta time { opacity: 0.7; } .tick { opacity: 0.7; } .tick svg { width: 16px; height: 16px; display: block; } .tick.read { color: var(--blue); opacity: 1; } .msgs li.failed { cursor: pointer; } .msgs li.failed .tick { color: var(--bad); opacity: 1; font-weight: 600; } :root { --blue: #53bdeb; } :root[data-theme="dark"] { --blue: #0b78b8; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --blue: #0b78b8; } } /* on the dark and the light bubble */ .quote { display: block; margin: -4px -8px 6px; padding: 6px 10px; border-left: 3px solid currentColor; border-radius: 10px; background: color-mix(in srgb, currentColor 10%, transparent); cursor: pointer; white-space: normal; } .quote b, .reply b { display: block; font-size: 13px; } .quote small, .reply small { display: block; font-size: 13px; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reply { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 8px 8px 12px; border-left: 3px solid var(--fg); border-radius: 10px; background: var(--panel); } .reply span { flex: 1; min-width: 0; } .reply button { flex: none; width: 36px; height: 36px; margin: 0; padding: 0; border-radius: 50%; background: none; color: var(--fg); font-size: 22px; } .compose { display: flex; gap: 8px; padding: 8px 0 max(8px, env(safe-area-inset-bottom)); background: var(--bg); } .compose .field { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 999px; } .compose button { width: auto; margin: 0; padding: 0 18px; } /* Messages' + and its sheet: new chat, new group */ .fab { position: fixed; right: max(20px, calc(50vw - 190px)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 1; width: 56px; height: 56px; margin: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } #threads { padding-bottom: 72px; } .search { margin: 12px 0 4px; } #earlier { flex: none; height: 1px; } /* invisible: only a scroll-trigger for loading older messages, see IntersectionObserver in app.js */ #start { max-height: 85dvh; overflow: auto; } #start .thread:last-child { border-bottom: 0; } .av.new { background: var(--panel); color: var(--fg); border: 1px solid var(--line); } .thread input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--fg); } label.thread { cursor: pointer; } .chat-head.tap { cursor: pointer; } .msgs .from { display: block; font-size: 12px; opacity: 0.7; margin-bottom: 2px; } .msgs li.poke .tick { display: inline-block; vertical-align: middle; margin-left: 4px; } .msgs li.poke .tick svg { width: 14px; height: 14px; } /* pictures fade in the first time only (pic() in app.js); an app waiting for the Mac dims */ .fade { opacity: 0; transition: opacity 0.2s; } .fade.in { opacity: 1; } .app.wait { opacity: 0.5; pointer-events: none; } .shake, .sheet[open].shake { animation: shake 0.3s; } @keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } } .loading .head::after { content: ""; flex: none; width: 9px; height: 9px; margin-left: 10px; border: 2px solid var(--muted); border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; } /* a flex item in a fixed-height row: no shift */ @keyframes spin { to { transform: rotate(1turn); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; } } .offscreen { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; } #run { position: fixed; inset: 0; z-index: 4; background: var(--bg); } body.running { overflow: hidden; } #run iframe { display: block; width: 100%; height: 100%; border: 0; }