/* The phone's layout (2.4.1). Everything you see is the Mac's own stylesheet
   (ui/styles.css, served by your home): the same colours, type, buttons,
   cards, chat and call bar. This file only lays those pieces out for a
   phone: one column, a tab bar at the foot, bigger touch targets. It defines
   no colours of its own (test/phone-look.js checks). */

html, body { height: 100%; }
body.phone {
  display: flex; flex-direction: column; height: 100dvh; overflow: hidden;
  font-size: 15px; user-select: auto; -webkit-text-size-adjust: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
body.phone button { -webkit-tap-highlight-color: transparent; }
body.phone .defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The top: the Mac's status pill. */
.phone-top { height: auto; padding: 8px 14px 4px; -webkit-app-region: none; }
.phone-top .status-pill { max-width: 100%; }
.phone-top #status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; outline: none; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
body[data-view="chat"] main { padding-bottom: 0; overflow: hidden; display: flex; flex-direction: column; }
body.on-call main { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }

/* The Mac's rail, as a tab bar at the foot. */
.phone-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; width: auto; height: auto;
  flex-direction: row; justify-content: center; gap: 10px; margin: 0;
  padding: 6px 12px calc(8px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 94%, transparent); border-top: 1px solid var(--line);
  border-radius: 0; box-shadow: none;
}
.phone-tabs[hidden] { display: none; }
.phone-tabs .rail-btn { position: relative; width: 96px; height: 56px; }
.phone-tabs .pp-n { position: absolute; top: 4px; right: auto; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; line-height: 18px; box-shadow: 0 0 0 2px var(--bg); }
.phone-tabs .pp-n[hidden] { display: none; }

/* Home's background covers the whole phone. */
body.phone .backdrop { left: 0; border-radius: 0; }

/* Home: one column. */
body.phone .home { padding: 0; overflow: visible; }
body.phone .home-inner { padding: 22px 16px 28px; justify-content: flex-start; min-height: 0; }
body.phone .home-inner::after { display: none; }
body.phone .home-q { font-size: 25px; margin: 18px 8px 34px; }
body.phone .home-peek { right: 26px; }
body.phone .home-ask .composer-box { padding: 14px 10px 10px 18px; }
body.phone .home-ask .composer textarea { font-size: 16px; min-height: 44px; }
body.phone .home-live { margin-top: 14px; }
body.phone .today-brief { margin-top: 26px; width: 100%; }
body.phone .tb-card { padding-left: 14px; padding-right: 14px; }
body.phone .tb-opts { flex-wrap: wrap; row-gap: 8px; }
body.phone .tb-opts .grow { display: none; }
body.phone .tb-main + .tb-opts { margin-top: 4px; }
body.phone .btn.small { min-height: 38px; padding: 0 14px; font-size: 14px; }
body.phone .tb-draft-b, body.phone .tb-answer textarea { font-size: 16px; }
body.phone .tb-shield { color: var(--mint); }
body.phone .tb-shield svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Chats: the Mac's column, full width. */
body.phone .people { width: auto; padding: 6px 10px 12px; }
body.phone .pp-row { min-height: 58px; }
body.phone .pp-task { min-height: 40px; }

/* A chat: the Mac's chat panel, full screen. */
.phone-chat { width: auto; flex: 1; min-height: 0; border-radius: 0; box-shadow: none; }
.phone-chat .sidebar-head { gap: 6px; padding: 6px 10px 6px 6px; border-bottom: 1px solid var(--line); }
.phone-chat .me-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: none; }
.phone-chat .me-chip-face { width: 30px; height: 30px; }
.phone-chat .me-chip-face .buddy { width: 30px; height: 30px; }
.phone-chat .chat-switch { flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }
.phone-chat .chat-switch b, .phone-chat .chat-switch small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-chat .chat-switch small { color: var(--text-3); font-size: 13px; }
.phone-chat .log { padding: 14px 14px 16px; }
.phone-chat .composer { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
.phone-chat .composer textarea { font-size: 16px; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* A call: the Mac's call bar, kept at the foot while you look around. */
.phone-call { position: fixed; left: 10px; right: 10px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 25; margin: 0; }
body[data-view="chat"] .phone-call { bottom: calc(96px + env(safe-area-inset-bottom)); }
.phone-call .call-ctl { width: 40px; height: 40px; }

/* A computer's screen. */
body.covered main, body.covered .phone-tabs, body.covered .phone-call { visibility: hidden; }
.screen-layer { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); background: var(--bg); }
.screen-layer .sidebar-head { gap: 6px; padding: 6px 12px 6px 6px; }
.screen-layer .me-chip { display: inline-flex; align-items: center; gap: 8px; }
.screen-layer .me-chip-face .buddy { width: 28px; height: 28px; }
.screen-sub { color: var(--text-3); font-size: 13px; }
.screen-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 10px; }
.shot { display: block; max-width: 100%; max-height: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.shot[hidden] { display: none; }
.screen-layer[data-mode="act"] .shot { box-shadow: var(--shadow-md), 0 0 0 2px var(--coral); }
.screen-layer.acting .shot { opacity: .75; }
.tap { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 3px solid var(--coral); pointer-events: none; animation: phone-tap .6s ease-out forwards; }
@keyframes phone-tap { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.screen-bar { display: flex; flex-direction: column; gap: 8px; padding: 6px 10px 10px; }
.screen-bar > .btn { align-self: center; min-height: 42px; padding: 0 20px; }
.screen-bar > .btn[hidden], .screen-tools[hidden] { display: none; }
.screen-tools { display: flex; flex-direction: column; gap: 8px; }
.screen-tools .composer { padding: 0; }
.screen-tools .composer-box { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.screen-tools textarea { flex: 1; font-size: 16px; padding: 6px 0; min-height: 0; }
.screen-tools .composer-row { flex: none; }
.keys { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.keys::-webkit-scrollbar { display: none; }
.keys .btn { flex: none; min-width: 44px; }
.keys .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Pairing and the screens around it: the Mac's welcome. */
.phone-hello { margin: 9vh auto 0; padding: 0 22px 30px; max-width: 460px; }
.phone-hello .welcome-lead { max-width: 34ch; }
.phone-hello .welcome-sub { max-width: none; }
.phone-wide { width: 100%; min-height: 48px; margin-top: 18px; font-size: 16px; }
.phone-steps { margin-top: 18px; text-align: left; width: 100%; padding: 14px 16px; }
.phone-steps ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.phone-fp { font-size: 13px; }
.away-note { margin: 10px 14px; padding: 12px 14px; }

/* Toasts (the phone's own little note). */
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 40; padding: 12px 16px; border-radius: var(--r-md); background: var(--btn); color: var(--btn-ink); font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: none; }
.toast.error { background: var(--err); color: var(--on-err); }

/* The box finds and does (2.5): its list, sized for a phone. */
body.phone .quick { max-height: 52dvh; border-radius: 20px; }
body.phone .quick-row { min-height: 54px; }
body.phone .home-ask .quick { position: absolute; }
/* A chat's box: one line, the button beside it (as phones do). */
.phone-chat .composer-box { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 16px; }
.phone-chat .composer textarea { flex: 1; min-height: 0; padding: 9px 0; }
.phone-chat .composer-row { flex: none; }
.phone-chat .composer-spacer { display: none; }