/* Drobne style, których nie da się wygodnie wyrazić klasami Tailwind */

/* Cienkie, ciemne scrollbary */
.scroll-thin { scrollbar-width: thin; scrollbar-color: #3f3f46 transparent; }
.scroll-thin::-webkit-scrollbar { width: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; }

/* Odpowiedzi modelu: zachowaj nowe linie, łam długie słowa */
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Animacja "model pisze…" */
.typing span {
  display: inline-block; width: 6px; height: 6px; margin: 0 2px;
  background: #a1a1aa; border-radius: 9999px; animation: bounce 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-5px); opacity: 1; }
}

/* Podświetlenie strefy drag & drop */
.dropzone-active { border-color: #6366f1 !important; background: rgba(99, 102, 241, .08) !important; }

/* Wiadomości czatu: wyśrodkowana kolumna czytania (:where = zerowa specyficzność, klasy Tailwind mogą ją nadpisać) */
:where(#messages) > * { width: 100%; max-width: 48rem; margin-left: auto; margin-right: auto; }

/* Modal potwierdzenia: płynne wejście/wyjście (stan otwarcia = .is-open) */
.modal { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
.modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease; }
.modal-panel { transform: translateY(10px) scale(.96); transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.modal.is-open .modal-panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .modal, .modal-panel { transition: none; }
}

/* Pojawianie się toastów i wiadomości */
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fade-in .2s ease-out; }

/* Zakładki widoków w panelu bocznym (Czat / Zespół): aktywna = aria-current="page" */
.nav-tab[aria-current="page"] { background: #4f46e5; color: #fff; box-shadow: 0 4px 14px rgba(49, 46, 129, .4); }

/* Alert limitu stanowisk w modalu: krótkie "potrząśnięcie" zwraca uwagę, nie zasłaniając formularza */
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.shake { animation: shake .4s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }

/* Zwijany panel „Rozliczenia i Saldo” przy dole paska bocznego (slide-up).
   Wysokość animuje WYŁĄCZNIE CSS Grid (`grid-template-rows` 0fr <-> 1fr), więc panel rośnie do dokładnej wysokości treści.
   Trzy warstwy, każda ma jedno zadanie:
     .billing-panel          - grid: animuje tylko wysokość (zero opacity/visibility na tej warstwie),
     .billing-panel-inner    - jedyne dziecko grida: `min-height: 0; overflow: hidden; padding: 0; margin: 0` (padding/margin
                               blokują zejście tracka 0fr do zera); tu także opacity + visibility,
     .billing-panel-content  - wnętrze (w HTML): TU są wszystkie odstępy (padding) oraz max-height + przewijanie.
   Zwijanie: opacity gaśnie w .2s, a visibility czeka .3s (do końca animacji wysokości) i dopiero wtedy przełącza na hidden
   (wypada z kolejności Tab i drzewa dostępności). Rozwijanie: visibility od razu, opacity z lekkim opóźnieniem. */
.billing-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease-out;
}
.billing-panel.expanded {
  grid-template-rows: 1fr;
}
/* `display: grid` powyżej wygrywałoby z Tailwindowym .hidden (zależnie od kolejności arkuszy) - closed beta: panel salda w menu bocznym ukryty */
.billing-panel.hidden { display: none; }
.billing-panel-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease-out, visibility 0s linear .3s; /* visibility czeka na koniec animacji przy zwijaniu */
}
.billing-panel.expanded .billing-panel-inner {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease-out .1s, visibility 0s linear 0s; /* pojawia się z lekkim opóźnieniem */
}
/* Warstwa treści (w HTML: padding + klasy Tailwind). To ona ogranicza wysokość i przewija się na niskich ekranach;
   inner tylko ją ucina, więc track 0fr schodzi do zera, a 1fr rośnie dokładnie do wysokości treści. */
.billing-panel-content {
  max-height: min(30rem, 60vh);
  overflow-y: auto;
}

/* Szewron w zakładce: ▲ (zwinięte = „wysuń w górę”) -> ▼ (rozwinięte = „schowaj”) */
.billing-chevron { transition: transform .3s ease; }
#billing-toggle[aria-expanded="true"] .billing-chevron { transform: rotate(180deg); }
#billing-toggle[aria-expanded="true"] { color: #d4d4d8; }

/* Kropka ostrzegawcza (past_due) przy zwiniętym panelu: delikatny puls */
@keyframes billing-alert-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, .55); } 50% { box-shadow: 0 0 0 5px rgba(251, 146, 60, 0); } }
.billing-toggle-alert { animation: billing-alert-pulse 2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .billing-panel, .billing-panel-inner, .billing-panel.expanded .billing-panel-inner, .billing-chevron { transition: none; }
  .billing-toggle-alert { animation: none; }
}