/* ============================================================================
   VibeAgent · телефон: урок и главная (15 окт 2026)
   Подключается последним. Откат — убрать <link> на этот файл и <script> mobile-lesson.js.
   ============================================================================ */

/* ---------- полный экран: только видео, без плашек поверх ---------- */
.player:fullscreen .wm-badge{display:none!important}
.player:-webkit-full-screen .wm-badge{display:none!important}
.player:-webkit-full-screen{width:100vw!important;height:100vh!important;max-width:none!important;border-radius:0!important;
  background:#000;display:block!important;aspect-ratio:auto!important;margin:0!important}
.player:-webkit-full-screen video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:contain!important;border-radius:0!important;background:#000}
.player.vp-fs .vp__ov{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));
  padding-bottom:max(12px,env(safe-area-inset-bottom))}

/* «Только видео»: никаких подписей под видео */
.app.fx .les-rights{display:none!important}

/* подпись об авторских правах: на телефоне — одна короткая строка */
.les-rights__short{display:none}

/* ---------- анонсы на главной: все лежат в одной ячейке — высота по самому длинному, ничего не режется ---------- */
.ann__view{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible}
.ann__row{grid-area:1/1;visibility:hidden;min-width:0;
  transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s}
.ann__row.in{visibility:visible;transition:opacity .45s ease .1s,transform .6s cubic-bezier(.22,1,.36,1) .1s,visibility 0s}

/* «Скопировать для ИИ» кнопкой в строке под видео — только на телефоне (на компьютере есть карточка справа) */
.lsp-chip--ai{display:none}

@media (max-width:900px){

  /* ===== урок ===== */
  #s-lesson .crumbs{margin-bottom:6px}
  #s-lesson .row-h{flex-wrap:nowrap!important;margin-bottom:6px}
  #les-h{font-size:22px!important;line-height:1.22!important;letter-spacing:-.01em;margin-bottom:14px!important}

  /* «Только видео» на телефоне = настоящий полный экран (логика — mobile-lesson.js) */
  #fxb{flex:none;height:34px;padding:0 12px;gap:6px;border-radius:999px;font-size:13px}
  #fxb #fxt{display:none}
  #fxb::after{content:'На весь экран'}
  .app.fx #fxb #fxt{display:inline}
  .app.fx #fxb::after{content:none}

  /* видео — от края до края экрана */
  #s-lesson #les-player{width:auto!important;max-width:none!important;height:auto!important;aspect-ratio:16/9;
    margin:0 -18px!important;border-radius:0!important;box-shadow:none}
  #s-lesson #les-player video{border-radius:0!important}
  #s-lesson #vbar{display:none!important}

  /* под видео: практика и материалы */
  #s-lesson .lsp__cta{margin:14px 0 2px}
  .lsp-chip--ai{display:inline-flex}
  .lsp-chip--ai::before{content:'';width:15px;height:15px;flex:none;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5 10.8 8l4.7.3-3.6 3 1.2 4.6L9 13.4l-4.1 2.5 1.2-4.6-3.6-3L7.2 8z'/%3E%3Cpath d='M17 14.5l.9 2.3 2.3.9-2.3.9-.9 2.3-.9-2.3-2.3-.9 2.3-.9z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5 10.8 8l4.7.3-3.6 3 1.2 4.6L9 13.4l-4.1 2.5 1.2-4.6-3.6-3L7.2 8z'/%3E%3Cpath d='M17 14.5l.9 2.3 2.3.9-2.3.9-.9 2.3-.9-2.3-2.3-.9 2.3-.9z'/%3E%3C/svg%3E") center/contain no-repeat}
  #s-lesson .aictx{display:none!important}

  /* прогресс: одна полоса и две кнопки в строку, без заголовка */
  #s-lesson .aside{gap:12px;margin-top:0}
  #s-lesson .aside>.card.pad{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:12px 10px;padding:14px!important;border-radius:18px;box-shadow:none}
  #s-lesson .aside>.card.pad>.label{display:none}
  #s-lesson .aside>.card.pad>.lp2{grid-column:1/-1}
  #s-lesson .aside>.card.pad>.btn{width:100%;min-width:0;margin:0!important;height:46px;padding:0 10px;font-size:14.5px;white-space:nowrap}
  /* «Следующий урок» → короче, чтобы обе кнопки влезли в строку на любом телефоне */
  #s-lesson .aside>.card.pad>.btn:not(#les-done){font-size:0}
  #s-lesson .aside>.card.pad>.btn:not(#les-done)::after{content:'Дальше →';font-size:14.5px}
  #s-lesson .lp2__t{width:auto}

  /* Эмма: одна строка вместо большой карточки — она же всегда в нижнем меню */
  #asst .sc{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:18px}
  #asst .sc__glow,#asst .sc__top,#asst .sc__t,#asst .sc__hint{display:none!important}
  #asst .sc__b{flex:1;min-width:0;align-items:center;gap:12px;padding:0!important}
  #asst .sc__ph{width:44px!important;height:44px!important;border-radius:50%!important;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #8B3DFF}
  #asst .sc__ph svg{width:22px;height:22px}
  #asst .sc__i{padding:0}
  #asst .sc__n{font-family:'Jura',system-ui,sans-serif!important;font-size:16px!important;font-weight:700;letter-spacing:0}
  #asst .sc__r{margin:1px 0 0!important;font-size:12.5px;line-height:1.3}
  #asst .sc__f{flex:none;padding:0!important}
  #asst .sc__go{width:auto;height:40px;padding:0 14px;border-radius:999px;font-size:14px;gap:7px}

  /* подпись © — короткая, внизу отдельной строкой */
  .les-rights__full{display:none}
  .les-rights__short{display:inline}
  #s-lesson .les-rights{margin:24px 0 0;text-align:center;font-size:11.5px;opacity:.85}

  /* материалы урока — снизу шторкой, а не окном поверх видео */
  body.lsp-drawer .lsp__panel{left:0!important;right:0!important;top:auto!important;bottom:0!important;transform:none!important;
    width:100%!important;max-height:min(82dvh,760px)!important;border-radius:24px 24px 0 0!important;border-bottom:0!important;
    padding-bottom:env(safe-area-inset-bottom);animation:mSheetUp .32s cubic-bezier(.22,1,.36,1)!important}
  @keyframes mSheetUp{from{transform:translateY(100%)}to{transform:none}}
  body.lsp-drawer .lsp__ph{position:relative;padding-top:20px!important}
  body.lsp-drawer .lsp__ph::before{content:'';position:absolute;left:50%;top:7px;width:38px;height:4px;margin-left:-19px;border-radius:99px;background:var(--line-2,#E4E4EA)}
  body.lsp-drawer .lsp__scroll{padding:16px 16px 20px!important}
  body.lsp-drawer .lsp__foot .btn{height:44px;padding:0 10px;font-size:14px;white-space:nowrap}

  /* ===== главная: шапка читается поверх фона ===== */
  .hero__bg{opacity:.6!important}
  .hero__me{opacity:.32!important}
  .hero::after{background:linear-gradient(180deg,rgba(11,11,13,.74) 0%,rgba(11,11,13,.62) 45%,rgba(11,11,13,.86) 80%,rgba(11,11,13,.95) 100%)!important}
  .hero #sub-line{color:rgba(255,255,255,.9)!important;text-shadow:0 1px 14px rgba(0,0,0,.65)}
  .hero .h1{text-shadow:0 2px 18px rgba(0,0,0,.35)}
  /* цифры — аккуратными плашками, без «висящих» разделителей при переносе */
  .hero .meta{display:flex;flex-wrap:wrap;gap:6px!important;column-gap:6px!important;row-gap:6px!important}
  .hero .meta span{padding:5px 11px!important;border-radius:999px;font-size:12.5px;line-height:1.3;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.78)}
  .hero .meta span::before,.hero .meta span::after{content:none!important;display:none!important}
}

@media (max-width:700px){
  /* анонс: текст целиком, кнопка отдельной строкой, точки листания в углу */
  .ann{align-items:flex-start;gap:10px;padding:14px 14px 13px}
  .ann__dot{margin-top:8px}
  .ann__row{flex-direction:column;align-items:flex-start;gap:9px}
  .ann__t{font-size:15px;line-height:1.45;white-space:normal!important;overflow:visible;text-overflow:clip}
  .ann__cta{display:inline-flex;align-items:center;height:34px;padding:0 14px!important;margin:0!important;border-radius:999px;
    background:rgba(98,0,255,.1);font-size:14px}
  .ann__pg{position:absolute;right:14px;bottom:23px}
  .ann:has(.ann__pg) .ann__row:not(:has(.ann__cta)){padding-bottom:22px}
}
@media (max-width:700px){html[data-theme="dark"] .ann__cta{background:rgba(201,167,255,.12)}}
html[data-theme="dark"] #asst .sc__ph{box-shadow:0 0 0 2px #17151A,0 0 0 3.5px #8B3DFF}

/* ============================================================================
   16 окт: второй проход — вся платформа на телефоне
   ============================================================================ */

/* iPhone приближает страницу, если у поля ввода шрифт меньше 16px: чат Эммы, комментарии, промокод,
   партнёрская ссылка, форма поддержки, поле WhatsApp у Эммы «пока вы не ушли» */
@media (hover:none) and (pointer:coarse){
  textarea,select,
  input[type=text],input[type=email],input[type=tel],input[type=search],input[type=url],
  input[type=password],input[type=number],input:not([type]){font-size:16px!important}
  .otp-row .input{font-size:22px!important}
  /* подсказки «вставьте через Ctrl+V» на телефоне не нужны */
  .va__note{display:none!important}
  /* без серой вспышки iOS на нажатие; вместо неё — лёгкое «нажатие» у карточек и плашек */
  a,button,[onclick],.lsp-chip,.chip,.lescard,.modcard,.coursecard{-webkit-tap-highlight-color:transparent}
  .lsp-chip:active,.chip:active,.lescard:active,.modcard:active,.coursecard:active,.btn:active{transform:scale(.97)}
}

/* плеер: двойной тап — перемотка, а не приближение страницы */
.player,.player .vp{touch-action:manipulation}

@media (max-width:900px){
  /* вырез и «домашняя полоска» iPhone: ничего важного под ними */
  .main{padding-left:max(18px,env(safe-area-inset-left))!important;padding-right:max(18px,env(safe-area-inset-right))!important}
  .va__f{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))!important}
  .rn__f{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))!important}
  .lin__f{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))!important}
  .pmodal__b{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))!important}
  .promo__b{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}

  /* зоны нажатия не меньше 40px */
  .theme-t{width:40px!important;height:40px!important}
  .mini__ic{width:36px!important;height:36px!important}
  .lsp__x,.modal__x,.rg-x{width:40px!important;height:40px!important}
  .chip{height:36px}
  #s-tasks .link{display:inline-block;padding:10px 4px;margin:-10px -4px}
}
@media (max-width:600px){
  .vp__b{width:40px!important;height:40px!important}
  .vp__b.w{width:auto!important;min-width:40px;padding:0 9px!important}
}

/* телефон лёжа: видео целиком помещается в экран, без «от края до края» и без прилипания */
@media (max-width:950px) and (orientation:landscape) and (max-height:500px){
  #s-lesson #les-player{width:min(100%,calc((100dvh - 28px) * 16 / 9))!important;margin:0 auto!important;border-radius:14px!important}
  #s-lesson #les-player video{border-radius:14px!important}
  body.lsp-play .lsp .player{position:relative!important;box-shadow:none}
  body.lsp-drawer .lsp__panel{max-height:92dvh!important}
}

/* шторка материалов: «ручка» сверху работает — можно смахнуть вниз */
body.lsp-drawer .lsp__panel.m-drag{transition:none!important}

/* 16 окт: экран урока чище — Эмма только в нижнем меню, пустой ряд кнопок не занимает место */
.lsp-chips:empty{display:none}
#lsp-cta:not(:has(.lsp-chip,.lsp-go)){display:none}
@media (max-width:900px){
  #s-lesson #asst{display:none!important}
}

/* 16 окт: «Посмотреть программу» на странице курса — без рамки, в одну строку с заголовком */
@media (max-width:900px){
  #cd-program .row-h{flex-wrap:wrap!important;column-gap:10px;row-gap:0}   /* на узких экранах ссылка аккуратно уходит под заголовок */
  #cd-program .h3{white-space:nowrap;font-size:17px!important;min-width:0}
  /* обложка курса — во всю ширину, а не 260px с пустотой справа */
  #s-course-detail .cd__art:not(.cd__art--free){max-width:none!important;width:100%}
  #cd-prog-toggle{flex:none;height:40px;padding:0 2px 0 6px;border:0!important;background:none!important;box-shadow:none!important;
    color:var(--indigo,#6200FF);font-size:13.5px;font-weight:600;white-space:nowrap;gap:4px}
  #cd-prog-toggle::after{content:'';width:7px;height:7px;margin-left:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);transition:transform .2s}
  #cd-program:has(#cd-prog-box[style*="block"]) #cd-prog-toggle::after{transform:rotate(-135deg) translate(-2px,0)}
}
html[data-theme="dark"] #cd-prog-toggle{color:#C9A7FF}

/* 16 окт: разделы урока на телефоне — одна строка «Материалы урока», в шторке вкладки */
.m-mat,.m-tabs{display:none}
@media (max-width:900px){
  #lsp-cta .lsp-chips{display:none!important}
  .m-mat{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;margin-top:10px;padding:10px 12px 10px 10px;
    border:1px solid var(--line,#ECECF1);border-radius:16px;background:var(--surface,#fff);color:var(--ink,#111114);font:inherit;text-align:left;cursor:pointer}
  .m-mat:active{transform:scale(.985)}
  .m-mat__i{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--tint,#F4EEFF);color:var(--indigo,#6200FF)}
  .m-mat__t{flex:1;min-width:0}
  .m-mat__t b{display:block;font-size:15px;line-height:1.25}
  .m-mat__t small{display:block;margin-top:2px;font-size:12.5px;line-height:1.3;color:var(--muted,#71717A);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-mat>svg{flex:none;color:var(--muted,#71717A)}
  body.lsp-drawer .m-tabs:not([hidden]){display:flex;gap:6px;overflow-x:auto;padding:2px 16px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent)}
  .m-tabs::-webkit-scrollbar{display:none}
  .m-tab{flex:none;height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--line,#ECECF1);background:var(--surface,#fff);
    color:var(--ink,#111114);font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
  .m-tab.on{background:var(--indigo,#6200FF);border-color:transparent;color:#fff}
  .m-tab--ai{color:var(--indigo,#6200FF);border-style:dashed}
  .m-tab:last-child{margin-right:28px}
}
html[data-theme="dark"] .m-mat__i{background:rgba(139,61,255,.18);color:#C9A7FF}
html[data-theme="dark"] .m-tab--ai{color:#C9A7FF}