/* Wiadomości IG (prefiks wia-): tylko to, czego nie ma w klockach z app.css. Lista i szczegół korzystają też
   z klas Poczty (poczta.css): .poczta-rzad, .watek-temat, .akcje-watku, .notatka-wew, .instrukcja. */

/* Lista */
.wia-filtry { align-items: flex-start; }
.wia-filtry .pigulki { flex: 0 1 auto; }
.pigulka.wia-konto .i { color: var(--k); }
.pigulka.wia-konto[aria-current="true"] .i { color: currentColor; }
.wia-uz { color: var(--faint); font-weight: 400; }
.pigulka[aria-current="true"] .wia-uz { color: color-mix(in srgb, var(--na-tekscie) 65%, transparent); }
.wia-rzad.nowe .rzad-pod .fragment { color: var(--text); }
.awatar.wia-foto { object-fit: cover; padding: 0; }
.wia-pobrano { margin: 18px 0 0; font-size: 12px; color: var(--faint); }
.wia-blad { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 9px 12px; border-radius: 10px; background: var(--chip); border: 1px solid var(--line-strong); color: var(--muted); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.wia-blad .i { flex: none; margin-top: 3px; }

/* Rozmowa jak czat: przychodzące po lewej, wychodzące po prawej */
.wia-czat { list-style: none; margin: 0; padding: 4px 2px; display: flex; flex-direction: column; gap: 6px; max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; }
.wia-czat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.wia-msg { display: flex; flex-direction: column; max-width: min(85%, 46ch); }
.wia-msg.przych { align-self: flex-start; align-items: flex-start; }
.wia-msg.wych { align-self: flex-end; align-items: flex-end; }
.wia-dymek { padding: 8px 12px; border-radius: 16px; min-width: 0; overflow-wrap: anywhere; }
.wia-msg.przych .wia-dymek { background: var(--raise); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.wia-msg.wych .wia-dymek { background: var(--accent-soft); border: 1px solid rgba(168, 85, 247, 0.34); border-bottom-right-radius: 5px; }
.wia-dymek p { margin: 0; }
.wia-tekst { white-space: pre-wrap; font-size: 14.5px; line-height: 1.5; }
.wia-tekst.wia-pusta { color: var(--faint); font-style: italic; }
.wia-tekst + .wia-zal, .wia-zal + .wia-zal { margin-top: 4px; }
.wia-zal { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.wia-zal a { color: var(--accent-text); }
.wia-meta { margin: 2px 6px 0; font-size: 11.5px; color: var(--faint); }
.wia-dzien { display: flex; justify-content: center; margin: 10px 0 4px; }
.wia-dzien span { padding: 2px 10px; border-radius: 999px; background: var(--chip); color: var(--faint); font-size: 11.5px; font-weight: 500; }

/* Odpowiedź */
.wia-okno { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; color: var(--faint); }
.wia-okno.otwarte { color: var(--muted); }
.wia-okno .i { flex: none; }
.wia-odp { display: grid; gap: 8px; }
.wia-w-ig { margin-top: 10px; }
.wia-etykieta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wia-odp textarea { min-height: 96px; }
.wia-pasek { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.wia-formulka { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; }
[data-wia-wstaw][hidden] { display: none; }  /* .przycisk ma display: inline-flex i przykrywał atrybut hidden */
.wia-formulka select { min-width: 0; max-width: 100%; width: auto; flex: 0 1 280px; padding: 7px 10px; font-size: 13.5px; }
.wia-licznik { margin-left: auto; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.wia-licznik.przekroczony { color: var(--red); }
.wia-pasek .przycisk[disabled] { opacity: 0.5; cursor: not-allowed; }
.wia-podpowiedz { margin: 0; font-size: 12px; color: var(--faint); }

/* Mini okno (plan 16d): dymek w prawym dolnym rogu + okienko nad treścią. Materiał szkła i wygląd licznika w app.css. */
.igo-dymek { position: fixed; right: 20px; bottom: 20px; z-index: 35; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--text); cursor: pointer; padding: 0; transition: transform .15s var(--ease); }
.igo-dymek:hover { transform: scale(1.05); }
.igo-dymek:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.igo-dymek .i { width: 22px; height: 22px; }
.igo-licznik { position: absolute; top: -4px; right: -4px; margin: 0; line-height: 20px; }
.igo { position: fixed; right: 20px; bottom: 80px; z-index: 38; width: min(380px, calc(100vw - 40px)); height: min(600px, calc(100dvh - 110px)); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; opacity: 0; transform: translateY(10px) scale(.98); transform-origin: bottom right; transition: transform var(--t-wej) var(--ease), opacity var(--t-wej) var(--ease); }
.igo[hidden] { display: none; }
.igo.otwarty { opacity: 1; transform: none; }
.igo:not(.otwarty) { transition-duration: var(--t-wyj); }
.igo.laduje .igo-tresc { opacity: .6; }
.igo-tresc { display: flex; flex-direction: column; min-height: 0; flex: 1; transition: opacity .12s; }
.igo-nag { display: flex; align-items: center; gap: 6px; padding: 10px 10px 6px 14px; }
.igo-tytul { flex: 1; min-width: 0; margin: 0; display: flex; align-items: baseline; gap: 6px; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.igo-tytul span { overflow: hidden; text-overflow: ellipsis; }
.igo-tytul small { color: var(--faint); font-weight: 400; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.igo-tytul .i { align-self: center; color: var(--muted); }
.igo-link { font-size: 13px; color: var(--accent-text); text-decoration: none; padding: 4px 6px; }
.igo-zdanie { margin: 0 14px 8px; font-size: 13px; color: var(--muted); }
.igo-lista { list-style: none; margin: 0; padding: 0 6px 8px; overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.igo-rzad { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.igo-rzad:hover, .igo-rzad:focus-visible { background: var(--sel); outline: none; }
.igo-rzad .awatar { width: 34px; height: 34px; }
.igo-rzad-tresc { flex: 1; min-width: 0; display: grid; gap: 2px; }
.igo-rzad-gora { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; min-width: 0; }
.igo-rzad-gora b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igo-rzad.czeka .igo-rzad-gora b { font-weight: 650; }
.igo-rzad-gora small { flex: none; color: var(--faint); font-size: 12px; }
.igo-rzad-dol { display: block; font-size: 13px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.igo-rzad.czeka .igo-rzad-dol { color: var(--text); }
.igo-kropka { display: inline-block; vertical-align: 1px; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent); }
.igo-wiecej { display: block; margin: 0 14px 12px; font-size: 13px; color: var(--accent-text); text-decoration: none; }
.igo .pusto { margin: 16px; }
.igo-czat { flex: 1; max-height: none; min-height: 0; padding: 4px 12px; }
.igo-czat .wia-tekst { font-size: 14px; }
.igo-odp { padding: 8px 12px 12px; border-top: 1px solid var(--line); }
.igo-odp .wia-okno { margin-bottom: 6px; font-size: 12px; }
.igo-odp textarea { min-height: 64px; resize: vertical; }
.igo-odp .wia-formulka select { flex: 1 1 auto; }

@media (max-width: 760px) {
  .wia-filtry { flex-direction: column; align-items: stretch; gap: 10px; }
  .wia-filtry .pigulki { min-width: 0; max-width: calc(100% + 32px); }  /* przewijane w bok, nie rozpychają strony */
  .wia-czat { max-height: 55vh; }
  .wia-msg { max-width: 92%; }
  .wia-pasek { flex-direction: column; align-items: stretch; }
  .wia-formulka { flex: none; }
  .wia-formulka select { flex: 1 1 auto; width: 100%; max-width: none; }
  .wia-licznik { margin-left: 0; }
  .wia-pasek .przycisk { width: 100%; }
  .wia-formulka .przycisk { width: auto; }
  .wia-odp textarea { font-size: 16px; } /* iOS nie powiększa strony przy fokusie */
  /* Dymek nad dolnym paskiem, okienko jako arkusz od dołu (nad paskiem). */
  .igo-dymek { right: 16px; bottom: calc(78px + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
  .igo { right: 8px; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; height: min(78dvh, 640px); z-index: 42; }
}