* { box-sizing: border-box; }
body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; background:#050505; margin:0; min-height:100vh; padding:16px; display:flex; justify-content:center; align-items:flex-start; color:#1d1c1d; }
.device { width:min(402px,calc(100vw - 32px)); min-height:min(874px,calc(100vh - 32px)); background:#fff; border-radius:28px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.38); }
header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; min-height:84px; padding:20px; background:#611f69; color:#fff; }
.app-mark { width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; }
.app-icon,.button-icon { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
h1 { margin:0; font-size:24px; line-height:1; font-weight:600; }
main { padding:26px 24px 28px; }
h2 { margin:0 0 8px; font-size:13px; line-height:1.2; font-weight:600; color:#666; }
.mode-badge { display:flex; align-items:center; gap:10px; min-height:36px; padding:8px 13px; border-radius:999px; background:rgba(255,255,255,.16); font-size:13px; font-weight:600; white-space:nowrap; }
.status-dot { width:10px; height:10px; border-radius:50%; background:#00ff85; box-shadow:0 0 0 2px rgba(0,255,133,.14); }
.listening-row { display:flex; align-items:center; gap:14px; margin-bottom:22px; font-size:13px; line-height:1.2; }
.channel-icon { color:#696969; font-size:16px; font-weight:700; }
.label { color:#666; font-weight:500; }
.channel-list { flex:1; font-weight:500; overflow-wrap:anywhere; }
.surface-card { background:#f7f7f7; border-radius:20px; padding:22px 24px 24px; margin-bottom:24px; }
.message-text,.answer-card { margin:0; font-size:16px; line-height:1.4; }
.alert-list { list-style:none; margin:0; padding:0; }
.alertItem+.alertItem { margin-top:14px; padding-top:14px; border-top:1px solid #ddd; }
.alertSource { margin:0 0 6px; color:#666; font-size:13px; font-weight:600; }
.alertMessage { margin:0; font-size:16px; line-height:1.4; overflow-wrap:anywhere; }
.primary-button,.icon-button { border:0; cursor:pointer; }
.primary-button { display:flex; align-items:center; justify-content:center; gap:16px; width:100%; min-height:64px; margin-bottom:24px; padding:16px 20px; border-radius:10px; background:#611f69; color:#fff; font:inherit; font-size:16px; font-weight:600; }
.primary-button[aria-pressed="false"] .stop-icon,.primary-button[aria-pressed="true"] .start-icon { display:none; }
.primary-button:disabled,.icon-button:disabled { opacity:.65; cursor:wait; }
.ask-card { border-top:2px solid #d8d8d8; padding-top:26px; }
.ask-card h2 { margin-bottom:18px; }
label { display:block; margin-bottom:7px; color:#666; font-size:13px; font-weight:600; }
#channelSelect,#questionInput { width:100%; min-width:0; min-height:58px; padding:12px 16px; border-radius:10px; border:2px solid #d0d0d0; background:#fff; color:#1d1c1d; font:inherit; font-size:14px; }
#channelSelect { margin-bottom:12px; cursor:pointer; }
.ask-controls { display:grid; grid-template-columns:1fr 64px; gap:12px; margin-bottom:18px; }
#questionInput::placeholder { color:#767676; }
.icon-button { display:flex; align-items:center; justify-content:center; min-height:58px; border:2px solid #d0d0d0; border-radius:10px; background:#fff; }
.button-icon { color:#fff; flex:0 0 auto; stroke-width:2.2; }
.button-icon.dark { color:#1d1c1d; width:24px; height:24px; }
.answer-card { display:block; padding:20px 24px; border-radius:20px; background:#f0e5f1; color:#3d1544; font-size:16px; line-height:1.45; }
.answer-card:empty { display:none; }
@media(max-width:400px) { header { grid-template-columns:auto 1fr; } .mode-badge { grid-column:1/-1; justify-self:start; } }