/* Onboarding „fabuła" - ekran Adama: czat (D1, D6), układ „widok obok czatu" (D4, R15, R20),
   dokument dla właściciela i tydzień z propozycją wizyty. Układ obok i czat są wspólne z ekranem
   off-market (offmarket.css dokłada tylko jego widoki).
   Komputer (od 68.75rem = 1100 px): widok po lewej (do ok. 904 px) + czat po prawej (do 380 px),
   razem do 1300 px, bez zielonego tła sceny; czat ma wysokość widoku, ale nie więcej niż ekran.
   Telefon: widok na całą szerokość, czat chowa się za przyciskiem „Adam · wróć do rozmowy". */

.onb {
  --onb-on-green: #fff;
  --onb-amber: var(--amber-text);
  --onb-amber-soft: var(--amber-bg);
  --onb-info: var(--v6-info);
  --onb-czat-w: clamp(18rem, 28vw, 23.75rem);
}

/* ---------- scena: czat sam albo widok + czat ---------- */
.onb-obok { position: relative; }
.onb-obok__czat { max-width: 45rem; margin: 0 auto; }
.onb-obok.is-obok { padding: 0; background: none; border-radius: 0; }

.onb-widok { min-width: 0; padding: 1rem 1.125rem 1.125rem; border: 1px solid var(--onb-line); border-radius: var(--onb-radius); background: var(--onb-card); }
/* Zamknięty widok stoi poza ekranem, ale ma szerokość: ramki wczytują się z wyprzedzeniem i mapy w nich
   znają swój rozmiar. height: 0 + overflow: hidden, żeby wysoka ramka nie wydłużała strony. */
.onb-obok:not(.is-obok) .onb-widok { position: absolute; top: 0; inset-inline-start: -300vw; width: min(56.5rem, calc(100vw - 2rem)); height: 0; padding: 0; overflow: hidden; border: 0; visibility: hidden; }
.onb-widok.is-in { animation: onb-widok-in .45s ease; }
@keyframes onb-widok-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
.onb-widok__glowa { display: grid; gap: .125rem; margin: 0 0 .75rem; }
.onb-widok__kick { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--onb-green-text); }
.onb-widok__t { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
.onb-widok__notka { margin: 0; font-size: .875rem; color: var(--onb-muted); }
.onb-widok__notka:empty { display: none; }

/* ramki z prawdziwymi ekranami panelu (Wycena, Rynek dzisiaj) */
.onb-widok__ramki { position: relative; overflow: hidden; border: 1px solid var(--onb-line); border-radius: 14px; background: var(--onb-bg); }
.onb-widok__ramki.is-pusto { height: 0; border: 0; }
.onb-widok__ramka { display: block; width: 100%; height: min(47.5rem, calc(100vh - 10rem)); min-height: 30rem; border: 0; background: transparent; }
.onb-widok__ramka--dopasuj { height: 20rem; min-height: 0; }
.onb-widok__ramka:not(.is-on) { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; }
.onb-widok__laduje { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .875rem; padding: 1rem; background: var(--onb-card-2); color: var(--onb-muted); font-weight: 600; text-align: center; }
.onb-widok__krec { width: 2rem; height: 2rem; border-radius: 50%; border: 3px solid var(--onb-line-strong); border-top-color: var(--onb-green-text); animation: onb-krec 1s linear infinite; }
@keyframes onb-krec { to { transform: rotate(360deg); } }

/* silnik wyceny nie odpowiada */
.onb-brak { display: flex; gap: .75rem; align-items: flex-start; padding: 1.25rem; border: 1px dashed var(--onb-line-strong); border-radius: 14px; background: var(--onb-card-2); }
.onb-brak svg { flex: 0 0 auto; color: var(--onb-green-text); }
.onb-brak p { margin: 0; }

/* dokument dla właściciela: dwie strony PDF */
.onb-dok { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; }
.onb-dok__str { margin: 0; display: grid; gap: .375rem; }
.onb-dok__str img { display: block; width: 100%; height: auto; border: 1px solid var(--onb-line); border-radius: 10px; background: var(--onb-card); }
.onb-dok__str figcaption { font-size: .8125rem; color: var(--onb-muted); text-align: center; }
@media (max-width: 40rem) { .onb-dok { grid-template-columns: 1fr; } }

/* ---------- przycisk „Adam · wróć do rozmowy" (tylko telefon) ---------- */
.onb .onb-fab:not([hidden]) { position: fixed; right: 1rem; bottom: 5.5rem; z-index: 45; display: inline-flex; align-items: center; gap: .5rem; min-height: 3.25rem; padding: 0 1.125rem 0 .875rem; border: 0; border-radius: 999px; background: var(--onb-green-btn); color: var(--onb-on-green); font: inherit; font-size: .9375rem; font-weight: 700; box-shadow: var(--onb-shadow); cursor: pointer; }
.onb .onb-fab:focus-visible { outline: 3px solid var(--onb-green-text); outline-offset: 3px; }
.onb .onb-fab.is-next { animation: onb-fab 1.6s ease-out infinite; }
@keyframes onb-fab { from { box-shadow: var(--onb-shadow), 0 0 0 0 var(--onb-green-soft); } to { box-shadow: var(--onb-shadow), 0 0 0 1rem transparent; } }
.onb .onb-fab[data-klik]::after { left: auto; right: 0; transform: none; animation: none; }

/* ---------- czat ---------- */
.onb-czat { display: flex; flex-direction: column; min-height: 28rem; max-height: max(28rem, calc(100vh - 12rem)); overflow: hidden; border: 1px solid var(--onb-line); border-radius: var(--onb-radius); background: var(--onb-card); }
.onb-czat__glowa { display: flex; align-items: center; gap: .625rem; padding: .75rem 1rem; border-bottom: 1px solid var(--onb-line); }
.onb-czat__spark { display: grid; place-items: center; color: var(--onb-green-text); }
.onb-czat__t { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.onb-czat__widok { margin-left: auto; display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem; padding: 0 .75rem; border: 1px solid var(--onb-line-strong); border-radius: var(--onb-radius-sm); background: var(--onb-card); color: var(--onb-text); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.onb-czat__widok:hover { border-color: var(--onb-green-text); }
.onb-czat__widok:focus-visible, .onb-czat__watek:focus-visible { outline: 3px solid var(--onb-green-text); outline-offset: -3px; }
.onb-czat__watek { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .625rem; padding: 1rem; }
.onb-msg { display: flex; gap: .5625rem; max-width: 94%; animation: onb-msg-in .3s ease both; }
.onb-msg.is-old { display: none; }
.onb-msg--ty { align-self: flex-end; flex-direction: row-reverse; }
.onb-msg__av { flex: 0 0 1.75rem; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; font-size: .6875rem; font-weight: 800; }
.onb-msg--adam .onb-msg__av { color: var(--onb-green-text); }
.onb-msg--ty .onb-msg__av { border: 1px solid var(--onb-line-strong); color: var(--onb-text); }
.onb-msg__bub { min-width: 0; padding: .5625rem .8125rem; border-radius: 14px; font-size: .9375rem; line-height: 1.5; }
.onb-msg__bub p { margin: 0; }
.onb-msg--adam .onb-msg__bub { border: 1px solid var(--onb-line); border-top-left-radius: 4px; background: var(--onb-card-2); }
.onb-msg--ty .onb-msg__bub { border-top-right-radius: 4px; background: var(--onb-green-btn); color: var(--onb-on-green); }
.onb-czat__akcje { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.onb-czat__akcja { min-height: 2.75rem; padding: 0 1rem; font-size: .9375rem; text-align: left; }
.onb-czat__akcja[disabled] { opacity: .55; }
.onb-pisze { align-self: flex-start; display: inline-flex; gap: .25rem; margin-left: 2.3125rem; padding: .625rem .8125rem; border: 1px solid var(--onb-line); border-radius: 999px; background: var(--onb-card-2); }
.onb-pisze i { width: .3125rem; height: .3125rem; border-radius: 50%; background: var(--onb-green-text); animation: onb-pisze 1.3s infinite; }
.onb-pisze i:nth-child(2) { animation-delay: .18s; }
.onb-pisze i:nth-child(3) { animation-delay: .36s; }
@keyframes onb-pisze { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes onb-msg-in { from { opacity: 0; transform: translateY(.375rem); } to { opacity: 1; transform: none; } }

/* ---------- tydzień z propozycją wizyty (pokaz) ---------- */
.onb-kal { display: grid; gap: 1rem; }
.onb-kal__prop { display: grid; justify-items: center; gap: .75rem; padding: 1rem 1.25rem; border: 1px solid var(--onb-line); border-radius: 14px; background: var(--onb-card); text-align: center; }
.onb-kal__txt { display: flex; align-items: flex-start; gap: .5rem; margin: 0; font-size: .9375rem; text-align: left; }
.onb-kal__txt svg { flex: 0 0 auto; margin-top: .125rem; color: var(--onb-green-text); }
.onb-kal__przyciski, .onb-kal__terminy { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.onb-kal__termin { min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--onb-line-strong); border-radius: 999px; background: var(--onb-card); color: var(--onb-text); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.onb-kal__termin:hover { border-color: var(--onb-green-text); }
.onb-kal__termin[aria-pressed="true"] { border: 1.5px solid var(--onb-green-text); color: var(--onb-green-text); }
.onb-kal__termin:focus-visible { outline: 3px solid var(--onb-green-text); outline-offset: 2px; }
.onb-kal__ok { display: inline-flex; align-items: center; gap: .375rem; margin: 0; font-weight: 700; color: var(--onb-green-text); }
.onb-kal__ok:focus { outline: none; }
.onb-kal__przewijak { overflow-x: auto; padding: .75rem; border: 1px solid var(--onb-line); border-radius: 14px; background: var(--onb-card); }
.onb-kal__przewijak:focus-visible { outline: 3px solid var(--onb-green-text); outline-offset: 2px; }
.onb-kal__siatka { --kal-h: 26rem; display: grid; grid-template-columns: 2.75rem repeat(5, minmax(0, 1fr)); min-width: 36rem; }
.onb-kal__godziny { position: relative; height: var(--kal-h); margin-top: 2rem; }
.onb-kal__godziny span { position: absolute; right: .5rem; top: calc((var(--od) - 9) / 9 * 100%); transform: translateY(-50%); font-size: .6875rem; color: var(--onb-muted); font-variant-numeric: tabular-nums; }
.onb-kal__dh { display: block; height: 2rem; line-height: 2rem; border-bottom: 1px solid var(--onb-line); text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--onb-muted); }
.onb-kal__dh.is-dzis { color: var(--onb-green-text); }
.onb-kal__kol { position: relative; height: var(--kal-h); border-left: 1px solid var(--onb-line); background-image: linear-gradient(var(--onb-line) 1px, transparent 1px); background-size: 100% calc(var(--kal-h) / 3); }
.onb-kal__ev { position: absolute; left: .25rem; right: .25rem; top: calc((var(--od) - 9) / 9 * 100%); height: calc(var(--dl) / 9 * 100%); display: flex; flex-direction: column; align-items: flex-start; padding: .25rem .4375rem; overflow: hidden; border: 0; border-radius: 6px; font: inherit; font-size: .6875rem; line-height: 1.3; text-align: left; transition: background-color .4s ease, top .4s ease; }
.onb-kal__ev b { font-size: .6875rem; font-weight: 700; }
.onb-kal__ev small { font-size: .6875rem; }
.onb-kal__ev--ok { background: var(--onb-green-btn); color: var(--onb-on-green); }
.onb-kal__ev--zajete { border: 1px dashed var(--onb-line-strong); background: repeating-linear-gradient(135deg, var(--onb-card-2) 0 6px, var(--onb-bg) 6px 12px); color: var(--onb-muted); cursor: pointer; }
.onb-kal__ev--zajete:focus-visible { outline: 3px solid var(--onb-green-text); outline-offset: 1px; }
.onb-kal__ev--propozycja { border: 1.5px solid var(--onb-amber); background: var(--onb-amber-soft); color: var(--onb-text); animation: onb-ev-in .35s ease .3s both; }
@keyframes onb-ev-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.onb-kal__notka, .onb-kal__prywatne { margin: 0; font-size: .875rem; color: var(--onb-muted); text-align: center; }
.onb-kal__notka b { color: var(--onb-text); }
.onb-kal__prywatne { display: flex; justify-content: center; align-items: center; gap: .375rem; color: var(--onb-green-text); font-weight: 600; }

/* ---------- komputer: widok po lewej, czat po prawej ---------- */
@media (min-width: 68.75rem) {
  .onb.is-obok .onb-ekrany { max-width: 84.25rem; }
  .onb-obok.is-obok { display: grid; grid-template-columns: minmax(0, 1fr) var(--onb-czat-w); gap: 1rem; align-items: start; max-width: 81.25rem; margin: 0 auto; }
  .onb-obok.is-obok .onb-obok__czat { position: sticky; top: 1.5rem; align-self: stretch; display: flex; max-width: none; min-height: 26rem; max-height: calc(100vh - 6rem); margin: 0; }
  .onb-obok.is-obok .onb-czat { flex: 1 1 auto; min-height: 0; max-height: none; }
  .onb .onb-fab { display: none !important; }
}
/* ---------- telefon: widok na całą szerokość, czat za przyciskiem ---------- */
@media (max-width: 68.6875rem) {
  .onb-obok.is-obok .onb-obok__czat { display: none; }
  .onb-widok { padding: .875rem .75rem 1rem; }
}
@media (max-width: 30rem) {
  .onb-msg { max-width: 100%; }
  .onb-czat__watek { padding-left: .75rem; padding-right: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .onb-widok.is-in, .onb-msg, .onb-kal__ev--propozycja, .onb .onb-fab.is-next, .onb-widok__krec { animation: none; }
  .onb .onb-fab.is-next { box-shadow: var(--onb-shadow), 0 0 0 4px var(--onb-green-text); }
  .onb-kal__ev { transition: none; }
  .onb-pisze i { animation: none; opacity: .7; }
}