:root {
  --bg: #fafaf9; --fg: #0c0c0b; --muted: #6b6b66; --faint: #a3a39d; --line: #e7e6e2;
  --card: #ffffff; --soft: #f1f0ec; --panel: #f6f5f2; --accent: #16a34a; --accent-soft: #dcfce7;
  --me: #ecebe7; --me-fg: #0c0c0b;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    /* фон = цвет статус-бара iOS в тёмной теме (#0c0c0c), чтобы полоса сверху не выделялась */
    --bg: #0c0c0c; --fg: #f1f0ec; --muted: #a1a19a; --faint: #6b6b66; --line: #262624;
    --card: #1a1a19; --soft: #222220; --panel: #121211; --accent: #4ade80; --accent-soft: #14532d;
    --me: #262624; --me-fg: #f1f0ec;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); overscroll-behavior: none; }
body { font: 16px/1.5 "Geist", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, textarea, input { font: inherit; color: inherit; }
svg { width: 20px; height: 20px; flex: none; }
.new-plan svg { width: 18px; height: 18px; }
a { color: var(--accent); }

/* Корень — на весь экран. Не 100dvh: в приложении с экрана «Домой» на iOS он короче экрана на высоту
   статус-бара, и поле ввода «висит» над низом. fixed + inset: 0 занимает экран целиком (viewport-fit=cover). */
#root { position: fixed; inset: 0; overflow: hidden; }
.app { position: relative; height: 100%; overflow: hidden; }
.main { display: flex; flex-direction: column; height: 100%; max-width: 760px; margin: 0 auto; }

/* круглые кнопки в шапке */
.top { display: flex; align-items: center; gap: 10px; padding: calc(12px + var(--safe-top)) 16px 8px; }
.top .title { flex: 1; min-width: 0; text-align: center; font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; cursor: pointer; flex: none; color: var(--fg); }
.round svg { width: 20px; height: 20px; }
.round.ghost { visibility: hidden; }

/* приветствие */
.welcome { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 14px; }
.glyph { width: 128px; margin: -18px 0; color: var(--fg); }
.glyph svg { width: 100%; height: auto; display: block; }
.welcome h1 { font-size: clamp(26px, 7vw, 34px); font-weight: 500; letter-spacing: -0.03em; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; max-width: 520px; }
.chips button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 14px; font-size: 14px; cursor: pointer; color: var(--muted); }

/* поле ввода — карточка внизу */
.composer { padding: 8px 12px max(10px, var(--safe-bottom)); }
.composer .box { background: var(--card); border: 1px solid var(--line); border-radius: 32px; padding: 12px 12px 10px 18px; box-shadow: 0 6px 24px -14px rgb(0 0 0 / .35); }
.composer textarea { width: 100%; border: 0; outline: 0; background: transparent; resize: none; min-height: 28px; max-height: 160px; line-height: 1.45; padding: 4px 0; font-size: 17px; }
.composer .row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.composer .hint { flex: 1; color: var(--faint); font-size: 13px; }
.send { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--accent); color: #04130a; cursor: pointer; display: grid; place-items: center; flex: none; }
.send svg { width: 20px; height: 20px; }
.send:disabled { opacity: .35; }

/* чат */
.chat { flex: 1; overflow-y: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 14px; -webkit-overflow-scrolling: touch; }
.msg { white-space: pre-wrap; word-wrap: break-word; line-height: 1.55; }
.msg.user { align-self: flex-end; max-width: 85%; background: var(--me); color: var(--me-fg); padding: 10px 14px; border-radius: 20px; }
.msg.assistant { align-self: stretch; padding: 0 2px; }
.tool { align-self: flex-start; font-size: 12px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.tool::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tool.err::before { background: #dc2626; }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 6px 2px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: bounce 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* карточки намерения и совпадений */
.cards { padding: 4px 16px 0; display: grid; gap: 10px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; }
.card.match { border-color: color-mix(in oklab, var(--accent) 55%, transparent); }
.card .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.card .t { font-weight: 500; margin: 2px 0 6px; }
.card .why { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.card .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--soft); color: var(--muted); }
.chip.ok { background: var(--accent-soft); color: var(--accent); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); cursor: pointer; font-weight: 500; color: var(--fg); text-decoration: none; }
.btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn.ok { background: var(--accent); border-color: var(--accent); color: #04130a; }
.btn.sm { height: 34px; padding: 0 14px; font-size: 14px; }
.btn:disabled { opacity: .5; }

/* выезжающее меню */
.backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / .45); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 20; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(84vw, 340px); background: var(--panel); z-index: 21; transform: translateX(-102%);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; padding: calc(16px + var(--safe-top)) 0 0;
  border-right: 1px solid var(--line); }
.app.open .drawer { transform: none; }
.app.open .backdrop { opacity: 1; pointer-events: auto; }
.drawer .head { display: flex; align-items: center; justify-content: space-between; padding: 4px 20px 14px; }
.drawer .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 26px; letter-spacing: -0.04em; }
.drawer nav { padding: 4px 10px; }
.item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 12px; border: 0; background: transparent; border-radius: 12px; cursor: pointer; text-align: left; font-size: 17px; }
.item:hover, .item.active { background: var(--soft); }
.item svg { width: 22px; height: 22px; flex: none; color: var(--muted); }
.item .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.item .dot.live { background: var(--accent); }
.drawer .section { padding: 18px 22px 6px; color: var(--muted); font-size: 14px; }
.drawer .list { flex: 1; overflow-y: auto; padding: 0 10px 110px; }
.drawer .empty { color: var(--faint); font-size: 14px; padding: 6px 12px; }
.drawer .foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(14px + var(--safe-bottom)); display: flex; align-items: center; gap: 12px;
  background: linear-gradient(to top, var(--panel) 70%, transparent); }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 600; cursor: pointer; flex: none; }
.new-plan { flex: 1; height: 46px; border-radius: 999px; border: 0; background: var(--fg); color: var(--bg); font-weight: 500; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* страница памяти */
.page { flex: 1; overflow-y: auto; padding: 4px 16px calc(24px + var(--safe-bottom)); }
.muted { color: var(--muted); font-size: 14px; }
.section-title { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 22px 0 8px; }
.note-row { display: flex; gap: 6px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 6px 10px 14px; margin-bottom: 8px; }
.note-row .txt { flex: 1; min-width: 0; padding-top: 6px; }
.note-row .src { font-size: 11px; color: var(--faint); }
.note-row textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 6px 8px; resize: vertical; }
.icon { width: 36px; height: 36px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.icon:hover { background: var(--soft); }
.icon svg { width: 18px; height: 18px; }
.add-row { display: flex; gap: 8px; }
.add-row input, .import textarea { flex: 1; border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 10px 12px; outline: none; }
.import { display: grid; gap: 10px; }
.import textarea { min-height: 110px; resize: vertical; }
.prompt { font-size: 13px; background: var(--soft); border-radius: 14px; padding: 10px 12px; color: var(--muted); }
.empty-note { color: var(--muted); padding: 14px 0; }

/* вход */
.login { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px 24px calc(36px + var(--safe-bottom)); gap: 18px; }
.login .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 28px; letter-spacing: -0.03em; margin-bottom: auto; padding-top: calc(20px + var(--safe-top)); }
.login h2 { font-size: clamp(34px, 10vw, 46px); line-height: 1.04; letter-spacing: -0.045em; margin: 0; font-weight: 600; }
.login h2 span { color: var(--faint); display: block; }
.login p { color: var(--muted); margin: 0; }
.login .note { font-size: 13px; color: var(--faint); text-align: center; }
.login .btn { height: 52px; font-size: 17px; }

.toast { position: fixed; left: 50%; bottom: calc(110px + var(--safe-bottom)); transform: translateX(-50%); background: var(--fg); color: var(--bg);
  padding: 8px 14px; border-radius: 999px; font-size: 14px; z-index: 40; }

/* кнопка «+» в поле ввода */
.plus { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--muted); flex: none; }
.plus svg { width: 18px; height: 18px; }

/* знакомство на главном экране */
.onboard { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px; max-width: 420px; text-align: left; margin-top: 4px; }
.onboard b { display: block; margin-bottom: 4px; }
.onboard p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.onboard-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* нижняя шторка */
.sheet-wrap { position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 640px; max-height: 88dvh; overflow-y: auto; background: var(--bg); border-radius: 24px 24px 0 0; padding: 10px 18px calc(18px + var(--safe-bottom));
  display: grid; gap: 10px; animation: sheetIn .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } }
.sheet .grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 2px auto 6px; }
.sheet-title { font-weight: 600; font-size: 18px; }
.sheet textarea { border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 10px 12px; outline: none; resize: vertical; }
.sheet-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* экран плана: вкладки «Ассистент | Комната» */
.pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pane[hidden] { display: none; }
.tabs:empty { display: none; }
.tabs { display: flex; gap: 4px; margin: 0 16px 6px; padding: 4px; background: var(--soft); border-radius: 999px; }
.tabs button { flex: 1; height: 34px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.tabs button.on { background: var(--card); color: var(--fg); box-shadow: 0 1px 4px rgb(0 0 0 / .12); }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #04130a; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; margin-left: auto; }
.tabs .badge { margin-left: 0; }

/* комната */
.room-bar { display: flex; align-items: center; gap: 8px; padding: 2px 16px 6px; }
.who-list { flex: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pill { flex: none; font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); }
.round.sm { width: 34px; height: 34px; }
.msg.them { align-self: flex-start; max-width: 85%; background: var(--card); border: 1px solid var(--line); padding: 8px 14px 10px; border-radius: 20px; }
.msg.them .who { font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 2px; }
.sys { align-self: center; text-align: center; font-size: 13px; color: var(--faint); max-width: 90%; }
.sys.created { align-self: stretch; text-align: left; color: var(--fg); background: var(--accent-soft); border-radius: 18px; padding: 14px 16px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }
.sys.created .t { font-weight: 600; }
.sys .label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.name-card { display: grid; gap: 8px; padding: 14px 16px !important; }
.name-card .add-row { margin: 4px 0 0; }
.btn.danger { color: #dc2626; }

/* уведомления */
.notif { margin: 4px 16px 6px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; }
.notif-ico { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.notif-ico svg { width: 18px; height: 18px; }
.notif-txt { display: grid; gap: 2px; font-size: 14px; }
.notif-txt span { color: var(--muted); }
.notif-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* вход */
.methods { display: grid; gap: 12px; }
.or { text-align: center; font-size: 13px; color: var(--faint); }
.email-login { display: grid; gap: 10px; }
.email-login input { height: 52px; border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: 16px; padding: 0 16px; font: inherit; font-size: 17px; outline: none; }
.email-login input.code { letter-spacing: .4em; text-align: center; font-family: "Geist Mono", monospace; }
.email-login .link { background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }

/* геолокация и Google */
.plus.geo.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.btn.google { gap: 10px; }
.btn.google .g { width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #4285f4; font-weight: 700; font-size: 14px; display: grid; place-items: center; }

/* детали плана */
.card .row.facets { margin-top: 6px; }
.chip.must { box-shadow: inset 0 0 0 1px var(--accent); color: var(--fg); }
.login .note a { color: inherit; }

/* ── установка на экран «Домой» ── */
.install { flex: 1; display: flex; flex-direction: column; align-items: center; padding: calc(24px + var(--safe-top)) 20px calc(72px + var(--safe-bottom)); gap: 14px; overflow-y: auto; text-align: center; }
.inst-head { display: grid; justify-items: center; gap: 6px; }
.inst-head h2 { margin: 6px 0 0; font-size: 26px; letter-spacing: -0.03em; }
.inst-head p { margin: 0; color: var(--muted); }
.app-ico { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; display: inline-block; flex: none; box-shadow: 0 4px 14px -6px rgb(0 0 0 / .5); }
.app-ico img { width: 100%; height: 100%; display: block; }
.inst-stage { width: 100%; max-width: 380px; touch-action: pan-y; }
.inst-step { display: grid; justify-items: center; gap: 8px; animation: instIn .3s ease; }
@keyframes instIn { from { transform: translateX(16px); } }
.inst-num { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #04130a; font-weight: 700; font-size: 20px; display: grid; place-items: center; }
.inst-cap { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.inst-note { font-size: 14px; color: var(--muted); margin-top: -4px; }
.inst-mock { width: 100%; margin-top: 8px; padding: 22px 14px; border-radius: 24px; background: var(--soft); display: grid; place-items: center; min-height: 170px; }
.inst-dots { display: flex; gap: 6px; }
.inst-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.inst-dots i.on { background: var(--accent); width: 20px; border-radius: 4px; }
.inst-nav { display: flex; gap: 10px; width: 100%; max-width: 380px; margin-top: auto; }
.inst-nav .btn { flex: 1; height: 52px; font-size: 17px; justify-content: center; }
.inst-skip { margin-top: 2px; }
.btn.big { height: 56px; font-size: 18px; padding: 0 28px; gap: 10px; }
.btn.big svg { width: 22px; height: 22px; }
.install .link { background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.inst-link { display: flex; gap: 8px; align-items: center; background: var(--soft); padding: 10px 12px; border-radius: 12px; max-width: 100%; }
.inst-link code { overflow-x: auto; white-space: nowrap; font-size: 13px; }

/* нарисованный интерфейс браузера (всегда «светлый», как Safari/Chrome по умолчанию) */
.mock { --m-bg: #f7f7f8; --m-fg: #111; --m-mut: #8a8a8e; --m-line: #e3e3e6; --m-blue: #0a84ff; color: var(--m-fg); width: 100%; max-width: 320px; font-size: 15px; text-align: left; }
.mock svg { width: 22px; height: 22px; }
.mock .hot { position: relative; color: var(--m-blue); }
.mock .hot::after { content: ""; position: absolute; inset: -6px; border-radius: 14px; border: 2.5px solid var(--accent); animation: hotPulse 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes hotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.08); } }
.mock.bar { background: var(--m-bg); border-radius: 18px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: 0 6px 20px -10px rgb(0 0 0 / .35); }
.mock.bar .mi { display: grid; place-items: center; width: 34px; height: 34px; color: var(--m-blue); }
.mock.bar .mi:not(.hot) { color: #b5b5ba; }
.mock .addr { flex: 1; min-width: 0; background: #e9e9ec; border-radius: 12px; padding: 7px 10px; font-size: 13px; color: var(--m-mut); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock.sheet { background: var(--m-bg); border-radius: 18px; overflow: hidden; box-shadow: 0 6px 20px -10px rgb(0 0 0 / .35); }
.mock.sheet .sheet-head { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--m-line); }
.mock.sheet .sheet-head .app-ico { width: 38px; height: 38px; border-radius: 9px; }
.mock .sheet-head span, .mock .dlg-body span { display: block; font-size: 12px; color: var(--m-mut); }
.mock.sheet .row { display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--m-line); }
.mock.sheet .row:first-of-type { border-top: 0; }
.mock.sheet .row.hot { background: #fff; color: var(--m-fg); font-weight: 600; }
.mock.sheet .row.hot::after { inset: 3px; }
.mock.dialog { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 20px -10px rgb(0 0 0 / .35); }
.mock .dlg-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--m-line); font-size: 14px; color: var(--m-blue); }
.mock .dlg-top b { color: var(--m-fg); font-size: 14px; }
.mock .dlg-add { font-weight: 700; color: var(--m-blue); padding: 2px 6px; }
.mock .dlg-body { display: flex; gap: 12px; align-items: center; padding: 16px 14px; }
.mock .dlg-actions { display: flex; justify-content: flex-end; gap: 22px; padding: 4px 16px 14px; color: var(--m-blue); font-weight: 500; }
.mock.home { background: linear-gradient(160deg, #3b5bdb, #7048e8 60%, #d6336c); border-radius: 22px; padding: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; justify-items: center; }
.mock .ghost-ico { width: 46px; height: 46px; border-radius: 12px; background: rgb(255 255 255 / .28); }
.mock .home-app { display: grid; justify-items: center; gap: 4px; color: #fff; }
.mock .home-app .app-ico { width: 46px; height: 46px; border-radius: 12px; }
.mock .home-app small { font-size: 11px; }

/* живая стрелка на настоящую кнопку браузера */
.inst-pointer { position: fixed; z-index: 40; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #04130a; display: grid; place-items: center; box-shadow: 0 8px 20px -6px rgb(0 0 0 / .5); pointer-events: none; }
.inst-pointer svg { width: 26px; height: 26px; stroke-width: 2.6; }
.inst-pointer.off { display: none; }
.inst-pointer.bottom-center { bottom: calc(8px + var(--safe-bottom)); left: calc(50% - 23px); animation: bobDown 1s ease-in-out infinite; }
.inst-pointer.bottom-right { bottom: calc(8px + var(--safe-bottom)); right: 14px; animation: bobDown 1s ease-in-out infinite; }
.inst-pointer.top-right { top: calc(8px + var(--safe-top)); right: 10px; transform: rotate(180deg); animation: bobUp 1s ease-in-out infinite; }
@keyframes bobDown { 50% { translate: 0 8px; } }
@keyframes bobUp { 50% { translate: 0 -8px; } }

/* кнопки под сообщением ассистента */
.msg-wrap { display: grid; gap: 10px; }
.msg-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* голос */
.send.mic { background: var(--soft); color: var(--fg); }
.send.mic svg { width: 20px; height: 20px; }
.send[hidden], .composer .row[hidden], .composer textarea[hidden] { display: none; }
.rec-bar { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: hotPulse 1s ease-in-out infinite; flex: none; }
.rec-time { font-variant-numeric: tabular-nums; font-size: 15px; min-width: 38px; }
.rec-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 26px; overflow: hidden; }
.rec-wave i { width: 3px; height: 30%; border-radius: 2px; background: var(--muted); animation: wave .7s ease-in-out infinite alternate; }
@keyframes wave { to { height: 95%; } }

/* логотип: «intent» Comfortaa Bold + знак. В паузе шары как строчные буквы: от базовой линии до верха «n»
   (x-height Comfortaa 0.552 em; видимый шар 0.597 высоты SVG → SVG 0.925 em, низ шара — на базовой линии). */
.wordmark { display: inline-flex; align-items: baseline; font-family: Comfortaa, Geist, sans-serif; font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--fg); }
.wordmark svg { height: .925em; width: auto; aspect-ratio: 2 / 1; margin-left: calc(.07em - .36em); margin-right: -.25em; position: relative; top: .188em; }

/* варианты ответа под вопросом ассистента: блок-список */
.quick { flex: none; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-top: -4px; animation: instIn .25s ease; }
.quick-head { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 14px 6px; }
.quick-list { display: grid; }
.quick-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.quick-row:active { background: var(--soft); }
.quick-mark { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--faint); display: grid; place-items: center; }
.quick-row.multi .quick-mark { border-radius: 6px; }
.quick-row[aria-checked="true"] .quick-mark { border-color: var(--accent); background: var(--accent); }
.quick-row[aria-checked="true"] .quick-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #04130a; }
.quick-row.multi[aria-checked="true"] .quick-mark::after { width: 10px; height: 5px; border-radius: 0; background: none; border: 2px solid #04130a; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.quick-foot { padding: 10px 14px 12px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.quick-done:disabled { opacity: .45; }

/* автопоказ установки: «палец» и нажатие */
.inst-mock { position: relative; overflow: hidden; }
.finger { position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; pointer-events: none; z-index: 2;
  background: rgb(255 255 255 / .55); border: 2px solid rgb(255 255 255 / .9); box-shadow: 0 6px 18px rgb(0 0 0 / .35);
  animation: fingerIn .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fingerIn { from { transform: translate(60px, 70px) scale(1.1); opacity: 0; } to { transform: none; opacity: 1; } }
.finger.tap { animation: fingerTap .45s ease-out forwards; }
@keyframes fingerTap { 0% { transform: scale(1); } 35% { transform: scale(.78); } 100% { transform: scale(1); opacity: .2; } }
.finger.tap::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); animation: ripple .55s ease-out forwards; }
@keyframes ripple { from { transform: scale(1); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.mock .hot.pressed { transform: scale(.94); filter: brightness(.92); transition: transform .12s, filter .12s; }
.mock .hot { transition: transform .2s, filter .2s; }
/* экран «Домой»: иконка появляется */
.mock.home .home-app { animation: iconPop .6s .3s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes iconPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* шторки «Поделиться» и окна выезжают снизу, как в системе */
.inst-mock .mock.sheet, .inst-mock .mock.dialog { animation: sheetUp .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .finger, .mock.home .home-app, .inst-mock .mock.sheet, .inst-mock .mock.dialog { animation: none; } }

/* ── iOS 26: телефон и «жидкое стекло» ── */
.inst-mock:has(.phone26) { background: none; padding: 4px 0; min-height: 0; }
.phone26 { position: relative; width: 206px; height: 400px; border-radius: 40px; padding: 8px; background: #1b1b1d; box-shadow: 0 0 0 1.5px #3a3a3e, 0 24px 50px -20px rgb(0 0 0 / .6); margin: 0 auto; text-align: left; }
.phone26 .island { position: absolute; top: 15px; left: 50%; width: 74px; height: 21px; margin-left: -37px; border-radius: 12px; background: #000; z-index: 5; }
.phone26 .screen { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: #f2f2f7; color: #111; font: 12px/1.3 -apple-system, "SF Pro Text", system-ui, sans-serif; }
.phone26 svg { width: 16px; height: 16px; }
.glass { background: rgb(255 255 255 / .62); -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8); border: 1px solid rgb(255 255 255 / .75); box-shadow: 0 6px 22px -8px rgb(0 0 0 / .28), inset 0 1px 0 rgb(255 255 255 / .9); }
.glass.round { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #111; flex: none; }
.glass.round.sm { width: 26px; height: 26px; }
.glass.round.sm svg { width: 13px; height: 13px; }
.glass.pill { flex: 1; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: #333; min-width: 0; overflow: hidden; white-space: nowrap; }
.p26-aa { font-weight: 600; font-size: 10px; color: #666; }
/* страница под панелью */
.p26-page { position: absolute; inset: 0; padding: 50px 16px 0; background: #fff; }
.p26-pagebar { font-size: 20px; color: #111; margin-bottom: 18px; }
.p26-line { height: 9px; border-radius: 5px; background: #e6e6ea; margin-bottom: 8px; }
.p26-line.w60 { width: 60%; } .p26-line.w80 { width: 80%; } .p26-line.w40 { width: 40%; }
.p26-card { height: 82px; border-radius: 16px; background: linear-gradient(135deg, #e9eef7, #f3e9f5); margin-top: 14px; }
.p26-card.short { height: 50px; background: #f0f0f3; }
.p26-toolbar { position: absolute; left: 10px; right: 10px; bottom: 18px; display: flex; gap: 7px; align-items: center; z-index: 3; }
.p26-dim { position: absolute; inset: 0; background: rgb(0 0 0 / .18); z-index: 2; }
/* меню и группы строк */
.p26-menu { position: absolute; right: 10px; bottom: 62px; width: 176px; border-radius: 24px; padding: 5px; z-index: 4; animation: sheetUp .35s cubic-bezier(.2, .8, .2, 1) both; transform-origin: bottom right; }
.g-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-radius: 14px; font-size: 12px; color: #111; }
.g-row svg { color: #111; }
.p26-menu .g-row + .g-row { border-top: 1px solid rgb(0 0 0 / .06); }
.g-group { background: #fff; border-radius: 16px; margin: 8px 0; overflow: hidden; }
.g-group .g-row { border-radius: 0; }
.g-group .g-row + .g-row { border-top: 1px solid #ececf0; }
.phone26 .hot { color: #0a84ff; }
.phone26 .g-row.hot { background: rgb(10 132 255 / .1); }
.phone26 .g-row.hot span, .phone26 .g-row.hot svg { color: #0a84ff; font-weight: 600; }
.phone26 .hot::after { inset: -3px; border-radius: inherit; }
/* шторка «Поделиться» */
.p26-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: rgb(242 242 247 / .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 30px 30px 0 0; padding: 6px 12px 18px; z-index: 4; animation: sheetUp .45s cubic-bezier(.2, .8, .2, 1) both; }
.p26-sheet.full { top: 0; border-radius: 0; padding-top: 46px; background: #f2f2f7; }
.p26-grab { width: 34px; height: 4px; border-radius: 3px; background: #c7c7cc; margin: 0 auto 8px; }
.p26-sheethead { display: flex; align-items: center; gap: 9px; }
.p26-sheethead .app-ico, .p26-addrow .app-ico { width: 38px; height: 38px; border-radius: 9px; }
.p26-sheethead > div, .p26-addrow > div { flex: 1; min-width: 0; }
.p26-sheethead b, .p26-addrow b { display: block; font-size: 12px; }
.p26-sheethead span:not(.glass), .p26-addrow span { font-size: 10px; color: #8e8e93; }
.p26-apps { display: flex; justify-content: space-between; margin: 12px 4px 4px; }
.p26-apps > div { display: grid; justify-items: center; gap: 4px; }
.p26-apps i { width: 40px; height: 40px; border-radius: 50%; display: block; }
.p26-apps .a0 { background: radial-gradient(circle at 50% 40%, #6fc3ff, #0a84ff); }
.p26-apps .a1 { background: linear-gradient(#5df07d, #29c94b); border-radius: 11px; }
.p26-apps .a2 { background: linear-gradient(#6cb8ff, #1a7cf5); border-radius: 11px; }
.p26-apps .a3 { background: linear-gradient(#fff6a8, #ffd43b); border-radius: 11px; }
.p26-apps small { font-size: 9px; color: #3c3c43; }
/* «На экран „Домой“» */
.p26-addtop { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.p26-addtop b { font-size: 12px; }
.p26-addbtn { background: #0a84ff; color: #fff !important; font-weight: 600; font-size: 12px; padding: 7px 13px; border-radius: 16px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35); }
.p26-addrow { display: flex; gap: 10px; align-items: center; padding: 10px 11px; }
.p26-toggle { width: 38px; height: 23px; border-radius: 12px; background: #34c759; position: relative; flex: none; }
.p26-toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); }
/* экран «Домой» */
.p26-home { position: absolute; inset: 0; padding: 54px 16px 0; background: linear-gradient(165deg, #2a4cc9, #7b46d6 55%, #e0557f); }
.p26-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 12px; justify-items: center; }
.p26-app { width: 42px; height: 42px; border-radius: 11px; display: block; }
.p26-app.c0 { background: #ffffff; } .p26-app.c1 { background: #ff9f0a; } .p26-app.c2 { background: #30d158; }
.p26-app.c3 { background: #0a84ff; } .p26-app.c4 { background: #ff375f; } .p26-app.c5 { background: #5e5ce6; }
.p26-app.mine { width: auto; height: auto; background: none; display: grid; justify-items: center; gap: 4px; animation: iconPop .6s .3s cubic-bezier(.3, 1.6, .5, 1) both; }
.p26-app.mine .app-ico { width: 42px; height: 42px; border-radius: 11px; }
.p26-app.mine small { font-size: 9px; color: #fff; }
.p26-dock { position: absolute; left: 10px; right: 10px; bottom: 12px; height: 62px; border-radius: 26px; display: flex; justify-content: space-around; align-items: center; background: rgb(255 255 255 / .28); border-color: rgb(255 255 255 / .4); }
.phone26 .hot { position: relative; transition: transform .2s, filter .2s; }
.phone26 .hot::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2.5px solid var(--accent); animation: hotPulse 1.4s ease-in-out infinite; pointer-events: none; }
.phone26 .glass.round.hot::after { border-radius: 50%; }
.phone26 .hot.pressed { transform: scale(.93); filter: brightness(.92); }

/* экран установки: компактнее, чтобы телефон и кнопки помещались на экране */
.install:has(.phone26) { gap: 8px; padding-top: calc(14px + var(--safe-top)); }
.install:has(.phone26) .inst-head .app-ico { width: 44px; height: 44px; border-radius: 11px; }
.install:has(.phone26) .inst-head h2 { font-size: 22px; margin-top: 2px; }
.install:has(.phone26) .inst-num { width: 30px; height: 30px; font-size: 16px; }
.install:has(.phone26) .inst-cap { font-size: 18px; }

/* iOS 26: подгонка под ширину телефона */
.phone26 .screen { isolation: isolate; clip-path: inset(0 round 32px); }
.p26-apps { margin: 10px 0 2px; }
.p26-apps i { width: 30px; height: 30px; }
.p26-apps .a1, .p26-apps .a2, .p26-apps .a3 { border-radius: 8px; }
.p26-apps small { font-size: 8px; }
.p26-sheet .g-row { padding: 8px 10px; font-size: 11px; }
.p26-sheet .g-group { margin: 6px 0; }
.p26-addtop b { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: center; }
.p26-addbtn { padding: 6px 11px; font-size: 11px; }
.p26-home { padding: 48px 12px 0; }
.p26-grid { gap: 12px 8px; }
.p26-app { width: 34px; height: 34px; border-radius: 9px; }
.p26-app.mine .app-ico { width: 34px; height: 34px; border-radius: 9px; }
.p26-app.mine small { font-size: 8px; }
.p26-dock { height: 52px; border-radius: 22px; bottom: 10px; }

/* ── Android: Chrome, Material 3 ── */
.inst-mock:has(.phoneA) { background: none; padding: 4px 0; min-height: 0; }
.install:has(.phoneA) { gap: 8px; padding-top: calc(14px + var(--safe-top)); }
.install:has(.phoneA) .inst-head .app-ico { width: 44px; height: 44px; border-radius: 11px; }
.install:has(.phoneA) .inst-head h2 { font-size: 22px; margin-top: 2px; }
.install:has(.phoneA) .inst-num { width: 30px; height: 30px; font-size: 16px; }
.install:has(.phoneA) .inst-cap { font-size: 18px; }
.phoneA { position: relative; width: 206px; height: 400px; border-radius: 30px; padding: 6px; background: #202124; box-shadow: 0 0 0 1.5px #3c4043, 0 24px 50px -20px rgb(0 0 0 / .6); margin: 0 auto; text-align: left; }
.phoneA .screen { position: relative; height: 100%; border-radius: 25px; overflow: hidden; isolation: isolate; clip-path: inset(0 round 25px); background: #fff; color: #1f1f1f; font: 12px/1.3 Roboto, system-ui, sans-serif; }
.phoneA svg { width: 15px; height: 15px; }
.a-status { height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 10px; color: #1f1f1f; background: #f1f3f4; position: relative; }
.a-status .cam { position: absolute; left: 50%; top: 7px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #111; }
.a-sys { font-size: 8px; letter-spacing: 1px; }
.a-omni { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px; background: #f1f3f4; position: relative; z-index: 3; }
.a-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #444746; flex: none; }
.a-url { flex: 1; min-width: 0; height: 30px; border-radius: 15px; background: #fff; display: flex; align-items: center; gap: 5px; padding: 0 10px; font-size: 10.5px; color: #1f1f1f; white-space: nowrap; overflow: hidden; }
.a-url svg { width: 12px; height: 12px; color: #5f6368; flex: none; }
.a-tabs { width: 18px; height: 18px; border: 1.8px solid #444746; border-radius: 5px; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #444746; flex: none; }
.a-page { position: absolute; inset: 66px 0 0; padding: 16px 16px 0; background: #fff; }
.phoneA .hot { position: relative; transition: transform .2s, filter .2s; }
.phoneA .hot::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2.5px solid var(--accent); animation: hotPulse 1.4s ease-in-out infinite; pointer-events: none; }
.phoneA .hot.pressed { transform: scale(.93); filter: brightness(.92); }
.phoneA .a-ico.hot { color: #0b57d0; }
/* меню */
.a-menu { position: absolute; top: 30px; right: 6px; width: 172px; background: #f8f9fa; border-radius: 16px; box-shadow: 0 8px 24px rgb(0 0 0 / .22); padding: 4px 0 6px; z-index: 4; transform-origin: top right; animation: menuIn .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes menuIn { from { transform: scale(.85); opacity: 0; } }
.a-menutop { display: flex; justify-content: space-between; padding: 6px 12px 8px; border-bottom: 1px solid #e3e3e3; color: #444746; }
.a-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; font-size: 11.5px; color: #1f1f1f; border-radius: 0; }
.a-row svg { color: #444746; flex: none; }
.phoneA .a-row.hot { background: #d3e3fd; color: #0b57d0; font-weight: 600; border-radius: 10px; margin: 2px 6px; padding: 9px 8px; }
.phoneA .a-row.hot svg { color: #0b57d0; }
/* окно установки */
.a-dialog { position: absolute; left: 14px; right: 14px; top: 32%; background: #f3f6fc; border-radius: 26px; padding: 18px 18px 14px; z-index: 4; box-shadow: 0 16px 40px rgb(0 0 0 / .3); animation: menuIn .35s cubic-bezier(.2, .8, .2, 1) both; }
.a-dialoghead { display: grid; justify-items: center; gap: 10px; text-align: center; }
.a-dialoghead b { font-size: 15px; font-weight: 500; }
.a-round-ico .app-ico { width: 40px; height: 40px; border-radius: 50%; }
.a-dialogapp { margin: 12px 0 14px; display: grid; gap: 2px; }
.a-dialogapp b { font-size: 12px; } .a-dialogapp span { font-size: 10px; color: #5f6368; }
.a-dialogbtns { display: flex; justify-content: flex-end; gap: 6px; align-items: center; }
.a-text-btn { color: #0b57d0; font-weight: 500; font-size: 12px; padding: 8px 10px; }
.a-fill-btn { background: #0b57d0; color: #fff; font-weight: 500; font-size: 12px; padding: 8px 16px; border-radius: 18px; }
/* рабочий стол */
.a-home { position: absolute; inset: 0; padding: 40px 14px 0; background: linear-gradient(170deg, #1b3a5c, #3d6e8f 45%, #e8a87c); }
.a-clock { color: #fff; font-size: 40px; font-weight: 300; text-align: center; margin-bottom: 26px; letter-spacing: -1px; }
.a-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 8px; justify-items: center; }
.a-app { width: 36px; height: 36px; border-radius: 50%; display: block; }
.a-app.c0 { background: #fff; } .a-app.c1 { background: #fbbc04; } .a-app.c2 { background: #34a853; }
.a-app.c3 { background: #4285f4; } .a-app.c4 { background: #ea4335; } .a-app.c5 { background: #a142f4; }
.a-app.mine { width: auto; height: auto; background: none; display: grid; justify-items: center; gap: 4px; animation: iconPop .6s .3s cubic-bezier(.3, 1.6, .5, 1) both; border-radius: 50%; }
.a-app.mine .app-ico { width: 36px; height: 36px; border-radius: 50%; }
.a-app.mine small { font-size: 8.5px; color: #fff; }
.a-search { position: absolute; left: 14px; right: 14px; bottom: 22px; height: 38px; border-radius: 19px; background: rgb(255 255 255 / .85); display: flex; align-items: center; gap: 8px; padding: 0 12px; color: #444746; font-weight: 700; }
.a-search i { flex: 1; }
.a-search span:first-child { color: #4285f4; }

/* ── Safari iOS 17–18 ── */
.s18-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: rgb(248 248 248 / .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid #ddd; padding: 7px 10px 14px; }
.s18-url { height: 30px; border-radius: 10px; background: #e3e3e8; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; font-size: 10.5px; color: #111; gap: 6px; }
.s18-url svg { width: 12px; height: 12px; color: #555; }
.s18-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px 0; color: #0a84ff; }
.s18-bar span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; }
.s18-bar span.off { color: #b5b5ba; }
.s18-text { color: #0a84ff; font-size: 11.5px; }
.s18-text.bold { font-weight: 700; padding: 4px 6px; border-radius: 8px; }
/* ── Chrome на iPhone ── */
.ci-top { position: absolute; left: 0; right: 0; top: 0; padding: 40px 10px 8px; background: #f1f3f4; z-index: 3; }
.ci-omni { height: 32px; border-radius: 16px; background: #fff; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 10px; font-size: 10.5px; color: #1f1f1f; }
.ci-omni > svg { width: 12px; height: 12px; color: #5f6368; flex: none; }
.ci-omni > span:not(.ci-share) { flex: 1; text-align: center; }
.ci-share { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #1a73e8; }
.ci-page { position: absolute; inset: 80px 0 48px; overflow: hidden; }
.ci-page .p26-page { padding-top: 14px; }
.ci-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: #f1f3f4; display: flex; justify-content: space-around; align-items: center; color: #444746; z-index: 3; }
/* ── встроенный браузер ── */
.ia-top { position: absolute; left: 0; right: 0; top: 0; padding: 30px 10px 8px; background: #212121; color: #fff; display: flex; align-items: center; gap: 8px; z-index: 3; }
.ia-top.ios { padding-top: 40px; }
.ia-top > div { flex: 1; text-align: center; display: grid; }
.ia-top b { font-size: 11px; } .ia-top small { font-size: 9px; color: #aaa; }
.ia-x { width: 26px; height: 26px; display: grid; place-items: center; color: #fff; }
.ia-page { position: absolute; inset: 70px 0 0; overflow: hidden; }
.ia-page .p26-page { padding-top: 14px; }
.ia-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #2b2b2b; color: #fff; border-radius: 22px 22px 0 0; padding: 6px 10px 16px; z-index: 4; animation: sheetUp .45s cubic-bezier(.2, .8, .2, 1) both; }
.ia-sheet .p26-grab { background: #555; }
.ia-row { display: flex; align-items: center; gap: 12px; padding: 11px 10px; font-size: 12px; border-radius: 12px; }
.ia-row svg { color: #ddd; flex: none; }
.phone26 .ia-row.hot, .phoneA .ia-row.hot { background: rgb(74 222 128 / .18); color: #fff; font-weight: 600; }
.phone26 .ia-row.hot svg, .phoneA .ia-row.hot svg { color: var(--accent); }

/* экран входа: план, с которого начнём (пришёл с лендинга) */
.plan-preview { border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 12px 14px; display: grid; gap: 4px; font-size: 14px; }
.plan-preview span { color: var(--muted); font-size: 13px; }
.plan-preview q { quotes: "«" "»"; font-weight: 500; }

/* плашка «установи приложение» */
.notif-ico.app { background: none; width: 38px; height: 38px; }
.notif-ico.app .app-ico { width: 38px; height: 38px; border-radius: 10px; }

.inst-plan { max-width: 380px; width: 100%; text-align: left; }