/*
 * Мобильная версия публичного демо «Посмотрите, как отвечает ваш агент».
 * Файл подключается отдельно, чтобы правка могла выкатываться точечно и не
 * заменяла собранный на проде кабинет.
 */
@media (max-width: 720px) {
  html:has(.try-page) {
    background: #080b14;
    scroll-padding-top: 12px;
  }

  body:has(.try-page) {
    min-width: 0;
    background: #080b14;
    overscroll-behavior-y: none;
  }

  .try-page {
    min-height: 100dvh;
    padding:
      max(12px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      calc(28px + env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
    background:
      radial-gradient(110% 66% at 4% 0%, rgba(82, 56, 200, .33), transparent 66%),
      radial-gradient(90% 52% at 100% 100%, rgba(52, 224, 161, .08), transparent 72%),
      #080b14;
  }

  .try-page::before {
    width: 420px;
    height: 420px;
    top: -250px;
    left: -230px;
    filter: blur(88px);
    opacity: .46;
  }

  .try-page::after {
    width: 300px;
    height: 300px;
    right: -210px;
    bottom: -150px;
    filter: blur(82px);
    opacity: .1;
  }

  .try-head {
    min-height: 40px;
    margin: 0 auto 20px;
  }

  .try-head .mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .try-head .wm {
    font-size: 21px;
  }

  .try-head .btn {
    min-height: 38px;
    padding: 8px 15px;
    border-radius: 12px;
    font-size: 13px;
  }

  .try-hero {
    display: grid;
    gap: 18px;
    min-height: 0;
    padding: 0;
  }

  .try-hero-copy {
    width: 100%;
    gap: 13px;
  }

  .try-badge {
    min-height: 30px;
    padding: 6px 11px;
    font-size: 11px;
    letter-spacing: .01em;
  }

  .try-hero h1 {
    max-width: 100%;
    font-size: clamp(27px, 7.5vw, 31px);
    line-height: 1.1;
    letter-spacing: -.85px;
    text-wrap: balance;
  }

  .try-lead {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.48;
    text-wrap: pretty;
  }

  .try-search {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-width: none;
  }

  .try-search .input {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding-inline: 14px;
    border-radius: 14px;
    font-size: 16px;
  }

  .try-search .btn {
    width: 100%;
    min-height: 50px;
    padding-inline: 16px;
    border-radius: 14px;
    font-size: 14px;
  }

  .try-examples {
    width: calc(100vw - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right)));
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    padding: 1px 0 3px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .try-examples::-webkit-scrollbar {
    display: none;
  }

  .try-examples > * {
    flex: 0 0 auto;
  }

  .try-examples .muted {
    align-self: center;
    font-size: 12px;
  }

  .try-ex {
    min-height: 34px;
    padding: 7px 11px;
    scroll-snap-align: start;
    font-size: 11.5px;
  }

  .try-manual-link {
    width: 100%;
    border-bottom: 0;
    padding: 1px 0;
    color: #b2a7ff;
    font-size: 12.5px;
    line-height: 1.42;
    text-decoration: underline;
    text-decoration-color: rgba(168, 155, 255, .42);
    text-decoration-style: dashed;
    text-underline-offset: 4px;
  }

  .try-list,
  .try-manual,
  .try-msg {
    max-width: none;
  }

  .try-list {
    gap: 7px;
  }

  .try-find-item {
    min-height: 62px;
    padding: 12px 13px;
    border-radius: 13px;
  }

  .try-find-item:hover:not(:disabled) {
    transform: none;
  }

  .try-manual {
    padding: 15px;
    border-radius: 16px;
  }

  .try-manual .spread {
    align-items: flex-start;
  }

  .try-manual .field {
    gap: 7px;
  }

  .try-manual .input,
  .try-manual .btn {
    min-height: 48px;
    font-size: 16px;
  }

  .try-manual .btn {
    font-size: 14px;
  }

  .try-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    margin: 0;
  }

  .try-steps::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, rgba(168, 155, 255, .2), rgba(52, 224, 161, .42), rgba(168, 155, 255, .2));
  }

  .try-steps li {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 6px;
    min-width: 0;
    color: #9099b7;
    font-size: 10.5px;
    line-height: 1.28;
    text-align: center;
  }

  .try-steps b {
    width: 28px;
    height: 28px;
    border: 3px solid #0a0d16;
    box-shadow: 0 0 0 1px rgba(168, 155, 255, .14);
  }

  .try-preview {
    width: 100%;
    margin-top: 2px;
  }

  .try-preview-glow {
    inset: 14% 2%;
    filter: blur(58px);
    opacity: .72;
  }

  .try-preview-phone {
    max-width: 100%;
    padding: 15px;
    border-radius: 22px;
    box-shadow: 0 22px 52px rgba(4, 6, 14, .5);
    animation: none;
  }

  .try-preview-head {
    padding-bottom: 12px;
  }

  .try-preview-feed {
    gap: 8px;
    padding-top: 12px;
  }

  .pv {
    max-width: 88%;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.42;
  }

  .try-chat-wrap {
    width: 100%;
    gap: 12px;
  }

  .try-chat {
    height: min(68dvh, 590px);
    min-height: 500px;
    border-radius: 19px;
  }

  .try-chat-head {
    padding: 14px 16px;
  }

  .try-feed {
    padding: 16px;
    gap: 9px;
  }

  .try-bubble {
    max-width: 88%;
    padding: 11px 13px;
    font-size: 13.5px;
  }

  .try-chips {
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    padding: 0 16px 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .try-chips::-webkit-scrollbar {
    display: none;
  }

  .try-chips .chip {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 12px;
  }

  .try-input {
    gap: 8px;
    padding: 11px 12px calc(11px + env(safe-area-inset-bottom));
  }

  .try-input .input {
    min-width: 0;
    min-height: 48px;
    font-size: 16px;
  }

  .try-input .btn {
    min-width: 48px;
    min-height: 48px;
  }

  .try-side {
    gap: 10px;
  }

  .try-prices,
  .try-cta {
    padding: 16px;
    border-radius: 16px;
  }

  .try-price-row {
    grid-template-columns: minmax(0, 1fr) 82px 22px;
    gap: 7px;
  }

  .try-price-row .input,
  .try-svc-name {
    min-width: 0;
    font-size: 14px;
  }

  body:has(.try-page) .help-fab-wrap {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  body:has(.try-page) .help-fab {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    opacity: .94;
    box-shadow: 0 10px 28px rgba(108, 92, 231, .32);
  }

  body:has(.try-page) .help-fab svg {
    width: 20px;
    height: 20px;
  }

  body:has(.try-page) .help-pop {
    width: min(278px, calc(100vw - 32px));
    margin-right: 12px;
  }
}

@media (max-width: 380px) {
  .try-page {
    padding-right: max(13px, env(safe-area-inset-right));
    padding-left: max(13px, env(safe-area-inset-left));
  }

  .try-head {
    margin-bottom: 18px;
  }

  .try-head .wm {
    font-size: 19px;
  }

  .try-hero h1 {
    font-size: 25px;
    letter-spacing: -.7px;
  }

  .try-lead {
    font-size: 13.5px;
  }

  .try-steps li {
    font-size: 10px;
  }
}

/* ——— макет v2: живой поиск, подтверждение, док в чате ——— */
@media (max-width: 720px) {
  body:has(.try-page) .try-city-row {
    gap: 7px;
  }

  body:has(.try-page) .try-city {
    min-height: 38px;
    padding: 6px 14px;
    font-size: 13.5px;
  }

  body:has(.try-page) .try-search {
    position: relative;
  }

  body:has(.try-page) .try-searching {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-size: 12.5px;
  }

  body:has(.try-page) .try-alt-card {
    max-width: none;
    min-height: 64px;
  }

  /* подтверждение заведения */
  body:has(.try-page) .try-confirm-wrap {
    max-width: none;
    padding: 4px 0 36px;
    gap: 14px;
  }

  body:has(.try-page) .try-confirm-wrap h1 {
    font-size: 26px;
    letter-spacing: -.8px;
  }

  body:has(.try-page) .try-confirm {
    padding: 16px;
    border-radius: 18px;
  }

  body:has(.try-page) .try-confirm-yes {
    min-height: 54px;
    font-size: 15.5px;
  }

  body:has(.try-page) .try-confirm-no {
    min-height: 48px;
  }

  /* чат: зелёная подсказка про цены */
  body:has(.try-page) .try-fix-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 16px 10px;
    padding: 11px 13px;
    border-radius: 13px;
    border: 1px solid rgba(52, 224, 161, .28);
    background: rgba(52, 224, 161, .08);
    color: #9fe9c8;
    font: 500 12.5px Onest;
    text-align: left;
    cursor: pointer;
  }

  body:has(.try-page) .try-fix-hint > span {
    flex: 1;
    text-align: left;
  }

  body:has(.try-page) .try-fix-hint b {
    color: #d6fff0;
    font-weight: 600;
  }

  body:has(.try-page) .try-fix-hint svg {
    margin-left: auto;
    color: #34E0A1;
    flex: 0 0 auto;
  }

  /* док: кнопка подключения всегда под пальцем */
  body:has(.try-page) .try-dock-cta {
    display: grid;
    gap: 7px;
    justify-items: center;
    padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  }

  body:has(.try-page) .try-connect {
    width: 100%;
    min-height: 52px;
    justify-content: center;
    border-radius: 15px;
    border: 0;
    background: linear-gradient(135deg, #8E7EF8, #5238C8);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 12px 30px rgba(82, 56, 200, .34);
  }

  body:has(.try-page) .try-chat {
    height: auto;
    min-height: 0;
  }

  body:has(.try-page) .try-feed {
    min-height: 300px;
    max-height: 46dvh;
  }

  body:has(.try-page) .try-input {
    padding-bottom: 11px;
  }

  /* цены — выдвижной лист поверх чата, а не колонка под сгибом */
  body:has(.try-page) .try-side {
    display: none;
  }

  body:has(.try-page) .try-sheet-bg {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(4, 6, 14, .62);
    border: 0;
  }

  body:has(.try-page) .try-side.open {
    display: grid;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    max-height: 74dvh;
    overflow-y: auto;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .55);
  }

  body:has(.try-page) .try-side.open .try-prices {
    border-radius: 22px 22px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  }

  /* в листе CTA не нужна — она уже в доке под чатом */
  body:has(.try-page) .try-side.open .try-cta {
    display: none;
  }

  body:has(.try-page) .try-sheet-done {
    display: block;
    min-height: 48px;
    margin-top: 4px;
    justify-content: center;
    border-radius: 13px;
    border: 0;
    background: linear-gradient(135deg, #8E7EF8, #5238C8);
    font-weight: 600;
  }
}

/*
 * Vite добавляет основной CSS после public-стилей. Повышенная специфичность
 * фиксирует порядок без !important и остаётся безопасной только для /try.
 */
@media (max-width: 720px) {
  body:has(.try-page) .try-page {
    min-height: 100dvh;
    padding:
      max(12px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      calc(28px + env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }

  body:has(.try-page) .try-head {
    min-height: 40px;
    margin: 0 auto 20px;
  }

  body:has(.try-page) .try-hero {
    display: grid;
    gap: 18px;
    min-height: 0;
    padding: 0;
  }

  body:has(.try-page) .try-hero-copy {
    width: 100%;
    gap: 13px;
  }

  body:has(.try-page) .try-badge {
    min-height: 30px;
    padding: 6px 11px;
    font-size: 11px;
  }

  body:has(.try-page) .try-hero h1 {
    font-size: clamp(27px, 7.5vw, 31px);
    line-height: 1.1;
    letter-spacing: -.85px;
  }

  body:has(.try-page) .try-lead {
    font-size: 14px;
    line-height: 1.48;
  }

  body:has(.try-page) .try-search {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-width: none;
  }

  body:has(.try-page) .try-search .input {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding-inline: 14px;
    border-radius: 14px;
    font-size: 16px;
  }

  body:has(.try-page) .try-search .btn {
    width: 100%;
    min-height: 50px;
    padding-inline: 16px;
    border-radius: 14px;
    font-size: 14px;
  }

  body:has(.try-page) .try-examples {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    gap: 7px;
    overflow-x: auto;
    padding: 1px 0 3px;
  }

  body:has(.try-page) .try-examples > .muted {
    display: none;
  }

  body:has(.try-page) .try-ex {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 11.5px;
  }

  body:has(.try-page) .try-manual-link {
    width: 100%;
    border-bottom: 0;
    padding: 1px 0;
    font-size: 12.5px;
    line-height: 1.42;
    text-decoration: underline dashed rgba(168, 155, 255, .42);
    text-underline-offset: 4px;
  }

  body:has(.try-page) .try-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    margin: 0;
  }

  body:has(.try-page) .try-steps li {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 6px;
    min-width: 0;
    font-size: 10.5px;
    line-height: 1.28;
    text-align: center;
  }

  body:has(.try-page) .try-steps b {
    width: 28px;
    height: 28px;
    border: 3px solid #0a0d16;
  }

  body:has(.try-page) .try-preview {
    width: 100%;
    margin-top: 2px;
  }

  body:has(.try-page) .try-preview-phone {
    max-width: 100%;
    padding: 15px;
    border-radius: 22px;
    animation: none;
  }

  body:has(.try-page) .pv {
    max-width: 88%;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.42;
  }

  /* v2: высота от содержимого — иначе flex сплющивает чипы и док в ноль */
  body:has(.try-page) .try-chat {
    height: auto;
    min-height: 0;
    border-radius: 19px;
  }

  body:has(.try-page) .try-feed {
    flex: none;
    min-height: 280px;
    max-height: 44dvh;
    padding: 16px;
    gap: 9px;
  }

  body:has(.try-page) .try-fix-hint,
  body:has(.try-page) .try-chips,
  body:has(.try-page) .try-input,
  body:has(.try-page) .try-dock-cta {
    flex: none;
  }

  body:has(.try-page) .try-bubble {
    max-width: 88%;
    padding: 11px 13px;
    font-size: 13.5px;
  }

  body:has(.try-page) .try-chips {
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    padding: 0 16px 10px;
  }

  body:has(.try-page) .try-input {
    gap: 8px;
    padding: 11px 12px calc(11px + env(safe-area-inset-bottom));
  }

  body:has(.try-page) .try-input .input {
    min-width: 0;
    min-height: 48px;
    font-size: 16px;
  }

  body:has(.try-page) .try-input .btn {
    min-width: 48px;
    min-height: 48px;
  }

  body:has(.try-page) .try-price-row {
    grid-template-columns: minmax(0, 1fr) 82px 22px;
    gap: 7px;
  }
}

@media (max-width: 380px) {
  body:has(.try-page) .try-page {
    padding-right: max(13px, env(safe-area-inset-right));
    padding-left: max(13px, env(safe-area-inset-left));
  }

  body:has(.try-page) .try-hero h1 {
    font-size: 25px;
    letter-spacing: -.7px;
  }

  body:has(.try-page) .try-steps li {
    font-size: 10px;
  }
}