/* Телефон (веб-версия и узкое окно): нижняя панель во всю ширину, раздел и чат открываются кнопками сверху,
   никаких плавающих окон поверх работы. Подключается последним — после lovable.css. */
#m-nav, #m-chat { display: none; }
@media (max-width: 700px) {
  :root { --top-h: 58px; --tab-h: 62px; }
  body { overscroll-behavior: none; }
  .topbar { gap: 8px !important; padding: 0 10px !important; padding-top: env(safe-area-inset-top) !important; height: calc(var(--top-h) + env(safe-area-inset-top)) !important; }
  #app { grid-template-rows: calc(var(--top-h) + env(safe-area-inset-top)) minmax(0, 1fr) !important; }
  .brand, .pill, .avatar { height: 40px !important; }
  .avatar { width: 40px !important; }
  .pill { padding: 0 12px !important; }
  html.m-sub .brand { display: none !important; }

  /* кнопка «раздел» (список подразделов) и «чат» в верхней строке */
  #m-nav { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 46vw; height: 40px; padding: 0 14px 0 10px; border: 0; border-radius: 999px;
    background: var(--card); color: var(--text); font: 600 14px/1 var(--font); box-shadow: 0 1px 2px rgba(17, 17, 19, .06), inset 0 0 0 1px rgba(17, 17, 19, .05); -webkit-app-region: no-drag; }
  #m-nav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #m-nav[hidden], #m-chat[hidden] { display: none !important; }
  #m-chat { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--card); color: var(--text);
    box-shadow: 0 1px 2px rgba(17, 17, 19, .06), inset 0 0 0 1px rgba(17, 17, 19, .05); -webkit-app-region: no-drag; }
  #m-chat.on, #m-nav.on { background: var(--ink); color: var(--on-ink); }

  /* рабочая область: весь экран между верхней строкой и нижней панелью */
  .main, .main.solo, .main.solo.no-tree, .main.solo.no-chat, .main.no-tree, .main.no-chat { grid-template-columns: minmax(0, 1fr) !important; padding: 0 0 calc(var(--tab-h) + env(safe-area-inset-bottom)) !important; gap: 0 !important; }
  .center { border-radius: 0 !important; box-shadow: none !important; border: 0 !important; }
  .main.home .center { background: transparent !important; }
  .content { padding-bottom: 24px !important; }
  .page { padding: 18px 16px 28px !important; }
  .page-head h1 { font-size: 30px !important; line-height: 1.08 !important; }
  .rail-l, .rail-r, .tree-toggle, .chat-toggle, .ui-tog { display: none !important; }

  /* список подразделов и чат — на весь экран под верхней строкой, закрываются той же кнопкой */
  .tree-col { position: fixed !important; inset: calc(var(--top-h) + env(safe-area-inset-top)) 0 calc(var(--tab-h) + env(safe-area-inset-bottom)) 0 !important; width: auto !important;
    z-index: 40 !important; display: none !important; border-radius: 0 !important; box-shadow: none !important; background: var(--bg, #FBFAF7) !important; padding: 8px 10px !important; overflow: auto !important; }
  [data-theme="dark"] .tree-col { background: #0E0E10 !important; }
  .main.m-tree .tree-col { display: block !important; }
  .chat-col { position: fixed !important; inset: calc(var(--top-h) + env(safe-area-inset-top)) 0 calc(var(--tab-h) + env(safe-area-inset-bottom)) 0 !important; width: auto !important;
    z-index: 40 !important; display: none !important; border-radius: 0 !important; box-shadow: none !important; }
  .main.m-chat .chat-col { display: flex !important; }
  .main.solo .chat-col { display: none !important; }
  /* чат на телефоне: выбор модели и настройки (формат, количество, соцсеть) — компактно сверху; вкладки чатов скрыты */
  .chat-col .ch-tabs { display: none !important; }
  .chat-col .ch-model { padding: 8px 10px 0 !important; }
  .chat-col .ch-set { margin: 6px 10px 0 !important; }
  .chat-col .ch-set[open] { max-height: 46vh; overflow: auto; }
  .main:not(.inline-chat) .chat-col .ch-sugg, .main:not(.inline-chat) .chat-col .ch-welcome { display: none !important; }
  .main.inline-chat .center > .chat-col { height: 62vh !important; margin: 0 8px 12px !important; }
  .main.chat-only .center > .chat-col, .main.inline-chat .center > .chat-col { height: auto !important; flex: 1 1 auto !important; margin: 8px 8px 12px !important; width: calc(100% - 16px) !important; max-width: none !important; align-self: stretch !important; min-width: 0 !important; }
  .main.chat-only .chat-col .ch-welcome { display: block !important; }

  /* нижняя панель — во всю ширину, как в приложениях на телефоне */
  .dock { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; transform: none !important; width: 100% !important; max-width: none !important;
    height: calc(var(--tab-h) + env(safe-area-inset-bottom)) !important; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important; border-radius: 0 !important; gap: 0 !important;
    justify-content: space-around !important; z-index: 45 !important; background: var(--card) !important; box-shadow: 0 -1px 0 rgba(17, 17, 19, .06) !important; overflow: hidden !important; }
  .dock .m-thumb { display: none !important; }
  .dock .dk { flex: 1 1 0 !important; min-width: 0 !important; height: 50px !important; padding: 0 2px !important; border-radius: 14px !important; display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important; gap: 3px !important; background: transparent !important; color: var(--muted) !important; }
  .dock .dk .dk-lbl { display: block !important; position: static !important; opacity: 1 !important; max-width: 100% !important; font-size: 10.5px !important; font-weight: 500 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dock .dk.on { color: var(--text) !important; background: transparent !important; }
  .dock.m-pill .dk.on, html .dock .dk.on { color: var(--text) !important; background: rgba(120, 120, 128, .12) !important; }
  .dock .dk svg { opacity: 1 !important; color: inherit !important; }
  .dock .dk.on .ic { stroke: var(--text) !important; }
  .dock .dk.on .ic .cl { fill: none !important; }
  .dock .dk-tip, .dock .dk-soon { display: none !important; }

  /* без плавающих окон */
  .hm-look, .lk-panel, .hm-glow, .hm-bg { display: none !important; }
  .mira-wave { top: calc(env(safe-area-inset-top) + 9px) !important; bottom: auto !important; left: 50% !important; height: 40px !important; padding: 0 12px !important; }

  /* Главная: строка голоса в одну линию — модель, приветствие, цена, микрофон */
  .hm-hero { padding-top: 12px !important; }
  .hm-title { font-size: 34px !important; }
  .cmp.vz .cmp-bar { flex-wrap: nowrap !important; gap: 6px !important; }
  .cmp.vz .vz-vol { display: none !important; }
  .cmp.vz .price { font-size: 11px !important; text-align: right; line-height: 1.2; min-width: 0; }
  .cmp.vz .vz-talk { width: 44px !important; height: 44px !important; }
  .hm-learn-btn { max-width: 100%; }

  /* окна (кошелёк, профиль, диалоги) — на весь экран */
  .overlay { padding: 0 !important; align-items: stretch !important; }
  .overlay .modal { width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; padding-top: env(safe-area-inset-top) !important; }
  .modal .tabs, .wl-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none; }
  .modal .tabs button, .wl-tabs button { flex: none !important; white-space: nowrap !important; }
  .plans, .plans.four { grid-template-columns: minmax(0, 1fr) !important; }
  .wl-top, .wl-stats { grid-template-columns: minmax(0, 1fr) !important; }
  .packs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pop, .menu { position: fixed !important; left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; top: calc(var(--top-h) + env(safe-area-inset-top)) !important; }

  /* Обучение */
  .lr-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .learn .lm-b { max-width: calc(100% - 40px) !important; }
  .learn .lm.me .lm-b { max-width: 100% !important; }
  .lr-steps { gap: 4px; }
  .lr-step { padding: 0 10px 0 5px; font-size: 12.5px; }

  /* Аудио, карточки */
  .vc-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .cols3, .mgrid, .case-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* «Связь с ПК» */
.lk-pcs { display: grid; gap: 8px; margin-bottom: 14px; }
.lk-pc { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; text-align: left; width: 100%; cursor: pointer; }
.lk-pc.on { box-shadow: 0 0 0 2px var(--ink) !important; }
.lk-pc .grow { display: flex; flex-direction: column; gap: 2px; }
.lk-pc small { color: var(--muted); font-size: 12px; }
.lk-dot { width: 9px; height: 9px; border-radius: 50%; background: #C7C7CC; }
.lk-dot.ok { background: #2FB463; }
.lk-task, .lk-off, .lk-empty { display: grid; gap: 10px; padding: 18px; }
.lk-off { grid-template-columns: auto 1fr; align-items: start; }
.lk-off > span { display: grid; gap: 4px; }
.lk-off .btn { grid-column: 1 / -1; justify-self: start; }
.lk-empty { justify-items: center; text-align: center; padding: 30px 18px; }
@media (max-width: 700px) { html .main.inline-chat, html .main.inline-chat.no-tree, html .main.inline-chat.no-chat, html .main.inline-chat.no-tree.no-chat { grid-template-columns: minmax(0, 1fr) !important; } }

/* iPhone с экрана «Домой»: высота — по видимой области, страница не прокручивается и не «плавает» */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
#app { height: 100vh; height: 100dvh; }
@media (max-width: 700px) {
  .topbar { position: relative; z-index: 46; background: var(--bg, #FBFAF7) !important; }
  .center { min-height: 0 !important; overflow: hidden !important; }
  .center > .content { overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .main.home .hm, .main.home .hm-main { height: 100% !important; margin: 0 !important; border-radius: 0 !important; }
  .main.home .content { overflow: hidden !important; }
  .main.home .hm-hero { overflow-y: auto; padding: 56px 16px 16px !important; justify-content: flex-start !important; }
  .main.home .hm > .hm-chats { left: 12px !important; top: 10px !important; }
  .main.home .hm-side { left: 12px !important; right: 12px !important; width: auto !important; top: 58px !important; }
  /* чат раздела — целиком над нижней панелью */
  .main.chat-only .center > .chat-col { max-height: 100% !important; overflow: hidden !important; }
  .chat-col .ch-msgs { min-height: 0 !important; }
  /* строка голоса: модель, ▶ и микрофон — в ряд, цена — строкой ниже */
  .cmp.vz .cmp-bar { flex-wrap: wrap !important; row-gap: 8px !important; }
  .cmp.vz .vz-ib[data-hello] { flex: none !important; width: 38px !important; height: 38px !important; }
  .cmp.vz .cmp-bar .grow { flex: 1 1 auto !important; }
  .cmp.vz .vz-talk { flex: none !important; }
  .cmp.vz .price { order: 9; width: 100%; justify-content: center; font-size: 12px !important; }
  /* окна — строго по ширине экрана, ничего не уезжает вбок */
  .overlay .modal { overflow-x: hidden !important; }
  .overlay .modal * { max-width: 100%; }
  .overlay .modal .wl-stats, .overlay .modal .plans, .overlay .modal .packs { min-width: 0 !important; }
  .overlay .modal .wl-stat, .overlay .modal .plan-card { min-width: 0 !important; }
  .modal .tabs, .wl-tabs { max-width: 100% !important; }
  .enh-steps .tz-r { grid-template-columns: minmax(0, 1fr) !important; }
}
/* «Улучшение» шагами */
.enh-steps { display: grid; gap: 14px; padding: 0 !important; }
.enh-step { display: grid; gap: 10px; padding: 16px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .06); }
.enh-sh { display: flex; align-items: center; gap: 10px; }
.enh-sh i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 700; background: var(--ink); color: var(--on-ink); }
.enh-sh b { font-size: 15px; font-weight: 650; }
.enh-empty { padding: 18px; border-radius: 14px; border: 1.5px dashed rgba(120, 120, 128, .3); text-align: center; font-size: 13px; }
.enh-steps .page-head { display: none; }

/* телефон: реальные размеры из mobile.js */
@media (max-width: 700px) {
  #app { position: fixed !important; inset: 0 !important; height: auto !important; }      /* прибито к краям экрана — без расчётов высоты */
  .main, .main.solo, .main.solo.no-tree, .main.solo.no-chat, .main.no-tree, .main.no-chat, html .main.inline-chat { padding-bottom: var(--dock-h, calc(var(--tab-h) + env(safe-area-inset-bottom))) !important; }
  .tree-col, .chat-col { bottom: var(--dock-h, calc(var(--tab-h) + env(safe-area-inset-bottom))) !important; }
}

/* клавиатура открыта: без нижней панели, всё место — полю и переписке */
@media (max-width: 700px) {
  html.kb-open .dock { display: none !important; }
  html.kb-open .main, html.kb-open .main.solo, html.kb-open .main.inline-chat, html.kb-open .main.no-tree { padding-bottom: 0 !important; }
  html.kb-open .topbar { display: none !important; }
  /* шапка скрыта (display:none выпадает из сетки) — значит, одна строка на всю высоту, иначе основная область попадала в нулевую строку */
  html.kb-open #app { grid-template-rows: minmax(0, 1fr) !important; }
  html.kb-open #app > .main { grid-row: 1 / -1 !important; }
  .link-pg .center, .link-pg { padding-bottom: 24px; }
}
/* «Связь с ПК»: шаги */
.lk-step { display: grid; gap: 10px; padding: 16px !important; margin-bottom: 12px; }
.lk-sh { display: flex; align-items: center; gap: 10px; }
.lk-sh i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 700; background: var(--ink); color: var(--on-ink); }
.lk-sh b { font-size: 15px; font-weight: 650; }
.lk-step .lk-pcs { margin: 0; }
.lk-step .lk-pc { box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .07); border-radius: 14px; background: var(--card); }
.lk-to { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lk-tobtn { display: grid; justify-items: start; gap: 4px; padding: 12px; border: 0; border-radius: 14px; background: rgba(120, 120, 128, .08); text-align: left; cursor: pointer; color: var(--text); }
.lk-tobtn b { font-size: 14px; } .lk-tobtn small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.lk-tobtn.on { background: var(--ink); color: var(--on-ink); } .lk-tobtn.on small { color: rgba(255, 255, 255, .7); }
.lk-send { justify-self: stretch; }
@media (max-width: 420px) { .lk-to { grid-template-columns: minmax(0, 1fr); } }
/* кнопка раздела на телефоне — компактнее; пока Mira говорит (волна сверху по центру) — только значок */
@media (max-width: 700px) {
  #m-nav { max-width: 38vw !important; height: 36px !important; padding: 0 10px 0 8px !important; font-size: 13px !important; gap: 5px !important; }
  #m-nav svg:last-child { display: none; }
  html.wave-on #m-nav { max-width: 36px !important; width: 36px; padding: 0 !important; justify-content: center; }
  html.wave-on #m-nav span { display: none; }
  .mira-wave { height: 34px !important; padding: 0 10px !important; gap: 3px !important; }
  .mira-wave i { width: 3px !important; height: 22px !important; }
}
.lk-power { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 12px; }

/* iPhone приближает поле ввода, если шрифт меньше 16 px, — и экран «слетает». На телефоне все поля — 16 px */
@media (max-width: 700px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), textarea, select, [contenteditable="true"] { font-size: 16px !important; }
}

/* клавиатура открыта на Главной: места ~400 точек — оставляем только поле ввода (без приветствия, логотипа и карточки «Обучение»),
   иначе iPhone прокручивает их и поле уезжает за верхний край; после закрытия клавиатуры всё возвращается */
@media (max-width: 700px) {
  html.kb-open .main.home .hm-hero .hm-title, html.kb-open .main.home .hm-hero .hm-sub,
  html.kb-open .main.home .hm-hero .hm-learn, html.kb-open .main.home .hm-look, html.kb-open .main.home .hm-top { display: none !important; }
  /* поле — прямо над клавиатурой (как в мессенджерах), над ним — знак Mira: без пустоты снизу и без наложения на кнопку чатов */
  html.kb-open .main.home .hm-hero { padding: 10px 10px 10px !important; justify-content: flex-end !important; overflow: hidden !important; }
  html.kb-open .main.home .hm-hero .hm-mark { margin: 0 auto 14px !important; transform: scale(.85); }
  html.kb-open .main.home .hm-hero .cmp { margin: 0 !important; width: 100% !important; }
}