/* Rony on the phone (static/phone.html): one column, big touch targets, safe areas for the notch and home bar.
   Messages, tool rows and Allow cards reuse the chat styles in styles.css. */
html, body.ph { height: 100%; }
body.ph { margin: 0; display: block; overflow: hidden; -webkit-text-size-adjust: 100%; }
#app { height: 100dvh; display: flex; flex-direction: column; }
.ph .btn { min-height: 40px; padding: 8px 14px; font-size: 15px; }
.ph input, .ph textarea { font-size: 16px; } /* 16px+: iOS doesn't zoom in when you tap a field */

.ph-head { display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
  border-bottom: 1px solid var(--line); background: var(--surface); flex: none; }
.ph-head b { font: 600 17px var(--display, inherit); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-head a.btn { font-size: 26px; line-height: 1; padding: 4px 10px; text-decoration: none; }

.ph-list { flex: 1; overflow-y: auto; padding: 4px 0 12px; -webkit-overflow-scrolling: touch; }
.ph-list h3 { font-size: 13px; color: var(--muted); font-weight: 600; margin: 14px 16px 6px; }
.ph-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line-soft); }
.ph-row:active { background: var(--accent-soft); }
.ph-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ph-row-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); flex: none; }
.ph-state.you i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal, #ff7a1a); }
.ph-state.you { color: var(--ink); }
.ph-new { display: flex; gap: 8px; padding: 10px 12px calc(env(safe-area-inset-bottom) + 10px); border-top: 1px solid var(--line);
  background: var(--surface); flex: none; }
.ph-new .btn { flex: 1; }

.ph-log { flex: 1; overflow-y: auto; padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch; }
.ph-log .msg.user { max-width: 88%; margin-right: 0; }
.ph-log .msg.claude { font-size: 15px; }
.ph-log .md pre, .ph-log .tablewrap { max-width: 100%; overflow-x: auto; }
.ph-log details.tool summary { padding: 9px 10px; }
.ph-log .perm .actions { display: flex; gap: 8px; }
.ph-log .perm .actions .btn { flex: 1; min-height: 44px; }
.ph-log .qopt { padding: 8px 0; }
.ph-out { font: 12px/1.45 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; margin: 0; }
.ph-log .og-body { max-height: 240px; }
.ph-compose { display: flex; gap: 8px; align-items: flex-end; padding: 8px 10px calc(env(safe-area-inset-bottom) + 8px);
  border-top: 1px solid var(--line); background: var(--surface); flex: none; }
.ph-compose textarea { flex: 1; resize: none; min-height: 40px; max-height: 160px; padding: 9px 12px; border-radius: 18px; line-height: 1.35; }
.ph-compose .btn { border-radius: 18px; }

.ph-pair { max-width: 360px; margin: auto; padding: 32px 24px; display: grid; gap: 14px; text-align: center; }
.ph-pair h1 { font-size: 22px; margin: 0; }
.ph-logo { width: 56px; height: 56px; margin: 0 auto; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font: 700 26px var(--display, inherit); }
.ph-pair-form { display: grid; gap: 10px; }
.ph-code { text-align: center; font: 600 26px ui-monospace, Menlo, monospace !important; letter-spacing: .3em; }
.ph-err { color: var(--bad); margin: 0; }
.ph .toast { bottom: calc(env(safe-area-inset-bottom) + 80px); }
.ph .halloween-fx .pumpkin { display: none; } /* it would sit on the buttons at the bottom */
.ph a.ph-row, .ph a.ph-row b { color: var(--ink); }
.ph-last { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-older { text-align: center; margin: 0 0 4px; }
.ph-pin { display: grid; gap: 4px; margin: 12px; padding: 14px 16px; border-radius: 14px; text-decoration: none; color: var(--ink);
  background: var(--accent-soft); border: 1px solid var(--accent); }
.ph-pin b { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); }
.ph-pin:active { filter: brightness(1.15); }

/* Tabs: Chats, Alerts, Ava */
.ph-tabs { display: flex; border-top: 1px solid var(--line); background: var(--surface); padding-bottom: env(safe-area-inset-bottom); flex: none; }
.ph-tabs a { flex: 1; text-align: center; padding: 11px 0 10px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px;
  display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.ph-tabs a.on { color: var(--ink); box-shadow: inset 0 2px 0 var(--accent); }
.ph-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--signal, #ff7a1a); color: #fff;
  font-size: 11.5px; line-height: 18px; }
.ph-new { padding-bottom: 10px; } /* the tab bar below takes the home-bar space */

/* Photos to send */
.ph-attach { min-width: 40px; padding: 8px !important; }
.ph-attach svg { width: 20px; height: 20px; }
.ph-attached { display: flex; gap: 8px; padding: 8px 10px 0; overflow-x: auto; background: var(--surface); border-top: 1px solid var(--line); flex: none; }
.ph-attached .att { position: relative; flex: none; }
.ph-attached img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.ph-attached button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: var(--ink); color: var(--surface); font-size: 14px; line-height: 22px; padding: 0; }
.ph-log .msg-images img { max-width: 100%; max-height: 260px; border-radius: 8px; display: block; margin-bottom: 6px; }

/* Alerts */
.ph-alert { margin: 8px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); display: grid; gap: 8px; }
.ph-alert-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ph-alert-head b { font-weight: 600; }
.ph-alert-head .hint { flex: none; font-size: 12.5px; }
.ph-alert-body { white-space: pre-wrap; font-size: 14px; color: var(--muted); max-height: 180px; overflow: auto; }
.ph-alert-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-alert-acts .btn { flex: 1 1 auto; text-decoration: none; text-align: center; }
.ph-job { display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.ph-job > span:last-child { display: grid; min-width: 0; }
.ph-job .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ava */
.ph-join { display: grid; gap: 10px; margin: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ph-sec { margin: 6px 16px; }
.ph-ul { margin: 4px 16px 10px; padding-left: 18px; display: grid; gap: 6px; }
.ph-head .btn.danger { color: var(--bad); font-size: 14px; }
.ph-notify { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px; padding: 12px 14px;
  border-radius: 12px; background: var(--accent-soft); font-size: 14px; }