/* Phone console (SPEC §32.1): large tap targets, readable text, no horizontal scroll. */
body.phone { margin: 0; background: var(--bg, #f4f6f9); font-size: 16px; -webkit-text-size-adjust: 100%; }
.ph-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--brand, #0f2f4f); color: #fff; position: sticky; top: 0; z-index: 2; }
.ph-brand { color: #fff; font-weight: 700; text-decoration: none; flex: 1; }
.ph-top .agent-badge { font-size: 11px; }
.ph-link { background: none; border: 0; color: inherit; text-decoration: underline; font: inherit; padding: 8px 6px; cursor: pointer; }
.ph-main { padding: 12px; max-width: 720px; margin: 0 auto; }
.ph-card { background: var(--panel, #fff); border: 1px solid var(--line, #dde3ea); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.ph-card h2 { font-size: 15px; margin: 0 0 8px; }
.ph-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.ph-row input[name="text"] { flex: 1; min-width: 0; font-size: 16px; padding: 12px; border: 1px solid var(--line, #dde3ea); border-radius: 10px; }
.ph-btn { display: inline-block; min-height: 44px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line, #dde3ea); background: #fff; color: inherit; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 22px; }
.ph-primary { background: var(--brand, #0f2f4f); color: #fff; border-color: transparent; }
.ph-ok { background: #e6f5ec; color: #1d6b3a; }
.ph-bad { background: #fdecea; color: #a12a1f; }
.ph-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.ph-chip { min-height: 40px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line, #dde3ea); background: #fff; font: inherit; cursor: pointer; }
.ph-thread { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; padding: 4px 0; }
.ph-msg { display: flex; flex-direction: column; max-width: 92%; }
.ph-user { align-self: flex-end; align-items: flex-end; }
.ph-agent { align-self: flex-start; }
.ph-bubble { padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line, #dde3ea); white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
.ph-user .ph-bubble { background: var(--brand, #0f2f4f); color: #fff; border-color: transparent; }
.ph-k-error .ph-bubble { background: #fdecea; }
.ph-k-status .ph-bubble, .ph-k-approvals .ph-bubble { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.ph-ts { font-size: 11px; color: #6b7785; margin: 2px 6px; }
.ph-compose { position: sticky; bottom: 0; background: var(--bg, #f4f6f9); padding-top: 6px; }
.ph-approval { border-top: 1px solid var(--line, #dde3ea); padding: 8px 0; }
.ph-pre { white-space: pre-wrap; font-size: 13px; background: #f7f9fb; padding: 8px; border-radius: 8px; margin: 6px 0; max-height: 160px; overflow: auto; }
.ph-form label { display: block; margin: 10px 0; font-weight: 600; }
.ph-form input { display: block; width: 100%; box-sizing: border-box; font-size: 16px; padding: 12px; margin-top: 4px; border: 1px solid var(--line, #dde3ea); border-radius: 10px; }
.ph-form .ph-btn { width: 100%; margin-top: 10px; }
.ph-foot { justify-content: center; margin: 14px 0 30px; }

.mic-btn { white-space: nowrap; }
.mic-btn.mic-on { background: #fde8e8; border-color: #e07a7a; color: #8a1f1f; animation: micpulse 1.2s ease-in-out infinite; }
@keyframes micpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 122, 122, .5); } 50% { box-shadow: 0 0 0 6px rgba(224, 122, 122, 0); } }
@media (prefers-reduced-motion: reduce) { .mic-btn.mic-on { animation: none; } }

/* typing bubble + stop */
.ph-typing .ph-bubble { color: #5b6b7a; }
.dots { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: #5b6b7a; display: inline-block; animation: dotpulse 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dotpulse { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: .6; } }
.ph-stop { background: #d63b2f !important; color: #fff !important; border-color: #d63b2f !important; font-weight: 700; }