/* ============================================================================
   Push-сповіщення: пропозиція увімкнути (Components/PushPrompt.razor),
   картка в профілі (Components/PushSettings.razor). Токени — з app.css.
   ========================================================================= */

@layer components {
  /* Пропозиція — у лівому нижньому куті, щоб не перекривати пропозицію екскурсії справа. */
  .push-offer {
    position: fixed; left: 20px; bottom: 20px; z-index: 370;
    display: flex; align-items: flex-start; gap: 12px;
    width: min(380px, calc(100vw - 32px));
    padding: 14px 14px 14px 16px;
    background: var(--surface-solid);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    animation: push-rise var(--d-slow) var(--e-out);
  }
  .push-offer__icon {
    display: grid; place-items: center; flex: none;
    width: 38px; height: 38px;
    border-radius: var(--r-md);
    background: var(--accent-soft); color: var(--accent);
  }
  .push-offer__body { flex: 1; min-width: 0; }
  .push-offer__body b { display: block; font-size: var(--t-md); font-weight: 620; margin-bottom: 3px; }
  .push-offer__body p { margin: 0 0 10px; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
  .push-offer__close { margin: -4px -4px 0 0; }

  .push-card .card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .push-card .card__body > p { margin: 0 0 12px; line-height: 1.5; }

  .push-steps { margin: 0 0 10px; padding-left: 20px; line-height: 1.6; color: var(--ink-2); }
  .push-steps li { padding-left: 2px; }
  .push-steps svg { display: inline-block; vertical-align: -2px; }

  .push-install {
    display: flex; align-items: center; gap: 10px;
    margin-top: 14px; padding: 10px 12px;
    border: 1px dashed var(--line); border-radius: var(--r-md);
    color: var(--ink-2);
  }
  .push-install span { flex: 1; min-width: 0; }

  .push-devices { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
  .push-devices li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 6px 8px 10px;
    border-radius: var(--r-md);
    background: var(--bg-sunken);
    color: var(--ink-2);
  }

  @keyframes push-rise { from { opacity: 0; transform: translateY(14px); } }

  @media (max-width: 639.98px) {
    .push-offer {
      left: 12px; right: 12px; width: auto;
      bottom: calc(12px + env(safe-area-inset-bottom));
    }

    /* Сповіщення дзвіночка на телефоні: панель шириною 350px, прив'язана до дзвіночка, виїжджала за лівий край. */
    .topbar .popover--wide {
      position: fixed;
      top: calc(var(--topbar-h) + env(safe-area-inset-top) + 6px);
      left: 8px; right: 8px;
      min-width: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .push-offer { animation: none; }
  }
}